Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Niepełny CSS
Forum PHP.pl > Forum > Przedszkole
Nighthanter
9.04.2011, 19:25:08
Dopiero uczę się tworzenia stron, znalazłem masę poradników na necie, ale zawsze coś nie tak.

Mój xhtml wygląda tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  4. <head>
  5. 	<link rel="Shortcut icon" href="obrazki/ikonka.png" /><!-- Ustawia miniaturkę ikony strony. -->
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- Ustawia kodowanie na polskie znaki. -->
  7. 	<meta name="Description" content="Wizualizacja procesu technologicznego" /><!-- Opis strony widoczny w wyszukiwarkach. -->
  8. 	<meta name="Keywords" content="wizualizacja, proces, technologiczny, S7-1200" /><!-- Słowa kluczowe po których będą szukały wyszukiwarki. -->
  9. 	<title>Wizualizacja</title><!-- Tytuł strony widoczny na górnej belce przeglądarki. -->
  10. 	<link rel="stylesheet" href="styl.css" type="text/css" /><!-- Zaczytanie arkusza stylów. -->
  11. </head>
  12.  
  13. <body>
  14. <?php include("skrypt.php"); ?>
  15.  
  16. <div id="strona">
  17. 	<div id="baner" style="border: 3px solid FFB301;"><img src="obrazki/baner.png" alt="Baner strony" /></div>
  18. 	<div id="stan_pracy" style="border: 3px solid FFB301; width: 300px; height: 400px;"></div>
  19. 	<div id="zbiornik"></div>
  20. 	<div id="sterowanie"></div>
  21. </div>
  22.  
  23. </body>
  24. </html>
[HTML] pobierz, plaintext


A CSS tak:
[HTML] pobierz, plaintext 
  1. @charset "UTF-8";
  2. body {
  3. 	margin: 0px 0px 0px 0px;
  4. 	cursor: url(obrazki/kursor.ani), url(obrazki/kursor.cur), default;
  5. }
  6.  
  7. #strona {
  8. 		width: 800px; 
  9. 		margin: 0 auto; 
  10. 		padding: 10px; 
  11. 		background-color: blue; 
  12. }
  13.  
  14. #baner {
  15. 		width: 806px;
  16. 		height: 106px;
  17. 		overflow: hidden;
  18. 		border: 3px solid FFB301;
  19. }
  20.  
  21. #stan_pracy {
  22. 		width: 250px;
  23. 		height: 400px;
  24. 		border: 3px solid FFB301;
  25. 		padding:0px;
  26. 		margin-top: 10px;
  27. 		float: left; 
  28.  
  29. }
  30.  
  31. #zbiornik {
  32. 		width: 250px;
  33. 		height: 400px;
  34. 		border: 3px solid FFB301;
  35. 		margin-top: 10px;
  36. 		padding:10px;	
  37. }
  38. #sterowanie {
  39. 		width: 250px;
  40. 		height: 400px;
  41. 		border: 3px solid FFB301;
  42. 		margin-top: 10px;
  43. 		padding:10px;
  44. 		float: right; 
  45.  
  46. }
[HTML] pobierz, plaintext

Stronka do zobaczenia.
Niestety na zmianie koloru tła na niebieski działanie CSSa kończy się, dalej ma wszystko gdzieś. Jak widać próbowałem nawet lokalnie obramować divy z zerowym rezultatem. Sprawdzane na IE8, Firefox 4 i najnowszym Chromie. Co ciekawe, po usunięciu linijki z deklaracją typu dokumentu "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" CSS zaczyna działać, przynajmniej na IE i Chromie, na Firefoxie jak go nie było, tak nie ma.
Magic WWW
9.04.2011, 20:57:00
Hmm nie wiem może głupie pytanie, ale w czym problem masz wink.gif Po wejściu na strone wszystko jest w porządku.
Nighthanter
9.04.2011, 21:56:23
Jak napisałem, jedyne, co robi CSS, to koloruje mi tło pierwszego diva na niebiesko i tyle, a reszta CSSa? Teraz strona u mnie i u kolegi wygląda tak:

a powinna wyglądać (przynajmniej w założeniach) tak:

W tym jest właśnie problem. chyba, że tobie pokazują się te obramowania.

Nie wiem tylko, dlaczego ten trzeci div jest pod spodem, teoretycznie powinien się zmieścić obok pozostałych dwóch.
krzywy36
9.04.2011, 22:05:58
kolorów nie podaje się tak: FFB301, tylko tak: #FFB301

Edit: poza tym, ściągnij sobie firebuga do firefoxa albo chrome i zobaczysz co jest z css czytane a z czym są błędy
nekomata
9.04.2011, 22:26:40
W operze od dawna jest wbudowany "firebug" zwie się "opera-dragonfly" , wystarczy prawym kliknąć -> inspektuj element. Obydwa narzędzia są niezwykle podobne do siebie . Wystarczyłoby abyś włączył tego "dragonfly'a" zakładka konsola błędów i masz dokładnie jaki błąd w której linii , jakiego pliku.
Nighthanter
10.04.2011, 07:26:43
No więc tak, problemem rzeczywiście był brak # przed kolorem.

A co do Firebuga, to dzięki, na pewno się przyda.

Tak więc dzięki wielkie za pomoc.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.