Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] roznice miedzy szablonem a wlasnym div-em
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
conip
17.08.2007, 13:42:28
Witam ponownie
bazujac na kodzie szablonu pobranego ze strony d4u.pl zaczalem pisac cos wlasnego aby pocwiczyc jednak te css-y i nabrac wprawy. Oczywiscie juz na poczatku napotykam na niezrozumiale dla mnie rzeczy. Wiec mam nadzieje ze ktos bedzie mi w stanie to wytlumaczyc.

Ich szablon (nr 1058 - red dragon cos tam)zawiera taka ogolna strukture:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="pds">	
  3. 	<div><img src="images/t1.jpg" alt="" /></div>
  4. 	<div class="data">Dzisiaj jest ...... </div>
  5. 	<div class="glowne"> cos tam </div>
  6. </div>
  7. </body>
[HTML] pobierz, plaintext


a ich css dotyczacy tego fragmentu to:
[HTML] pobierz, plaintext 
  1. body{
  2. 	background:url(images/bg.gif) repeat-x #000;
  3. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  4. 	margin:0;
  5. 	padding:0;
  6. }
  7. #pds{
  8.         position:relative;
  9. 	width:748px;
  10. 	margin:auto;
  11. 	background:url(images/tlo.gif);
  12. }
  13. .data{	
  14.         background:url(images/t2.gif);
  15. 	font-size:10px;	text-align:center;
  16. 	color:#EABBBA;	padding:12px 5px 7px 5px;
  17. 	}
  18. .glowne{
  19. 	margin-left:31px;
  20. }
[HTML] pobierz, plaintext


probowalem wrecz kopiowac fragmenty dotyczace diva pds i body i niestety nie moge zrobic aby pds moj byl wyposrodkowany tak jak ich (uzywam dreamwavera i mam podglad na dwa przypadki w tej samej przegladarce)w jaki sposob mozna wyposrodkowac diva (i dlaczego w szablonie jest to zrobione automatycznie - a jak kopiuje to juz to gubi) oprocz stosowania text-align:justify ?

drugie pytanie czy ma znaczenie czy sie odnosi do poszczegolnych atrybutow przez klase czy id?

z gory dzieki za wytlumaczenie
pozdrawiam

dodam jeszcze ze pod FF jest ok (w obu przypadkach jest wyposrodkowane) tylko w IE w moich probnych plikach jest glowny div przesuniety do lewej.


OK sorki za zasmiecanie forum

juz doszukalem sie przyczyny na 1sze pytanie: nie mialem na poczatku pliku:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" [url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

teraz juz smiga
ale na drugie pytanie to bym prosil fachowa odpjest roznica miedzy stosowaniem klass a id chcac nadac atrybuty?

pozdrawiam
kbsucha
17.08.2007, 13:43:16
W body przydałoby sie text-align: center;

co do drugiego pytania to polecam przeczytać: http://www.gajdaw.pl/html/css.html rozdział: Klasy i identyfikatory

pzdr
conip
17.08.2007, 14:02:29
dzieki za odp

na bank przeczytam

niestety co do dodania odpowiedniego
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to IE zaczal dobrze wyswietlac a FF juz niestety nie

skolei jak wywale ten poczatek to w FF jest ok a w IE sie sypie
co z tym zrobic? smile.gif
kbsucha
17.08.2007, 14:12:42
A dodales w body to co pisalem wczesniej: text-align: center;
U mnie dziala w obu przegladarkach + w Operze tez

pozdr
conip
17.08.2007, 14:18:35
nie ma takiej potrzeby zeby dawac text-align (wczesniej probowalem owszem dzialalo ale mozna to zrobic inaczej wlasnie )

po przepadaniu teraz widze ze firefox nie widzi stylow nie laduje pliku style.css
czyli cos z naglowkiem chyba
barat
17.08.2007, 14:22:47
Zostawić i pisać by FF wyświetlało poprawnie smile.gif
Doctype to ważna sprawa, mówi przeglądarce jak interpretować kod smile.gif

W PDS wpisz zamiast margin:auto => margin:0 auto;
Sposób z text-align: center , też zadziała, ale wymaga potem ustawiania tekstu dla pierwszego kontenera ... proste margin:0 auto załatwia wszystko naraz (wtedy już bez text align)smile.gif


Co do klasy a ID ...

ID może być przypisane tylko jednemu elementowi, a klasy wielu...
Dodatkowo ID jest przydatne przy javascript...

Ja osobiście robię tak, że elementy które wystąpią tylko raz (zazwyczaj elementy głowne layoutu) mają nadane ID, a pozostałe mają class ...

Ogólnie tutaj możesz dowiedzieć się ciekawych rzeczy:
http://kurs.browsehappy.pl/
Kreton
17.08.2007, 15:27:49
IE 4,5,6 w trybie luźnego renderowania jeżeli użyjemy text-align to wyśrodkuje też element blokowy <div>. W trybie standardowym IE nie wyśroduke elementu blokowego czyli poprawnie.

Aby wyśrodkować element blokowy musi: mieć określoną szerokosć, w CSS trzeba nadać mu margin-left: auto i margin-right: auto.

To ta piersza linijka decyduje o trybie renderowania. Czyli <!DOCTYPE>.

Atrybutu class używa się wtedy gdy taki sam typ informacji będzie mieszczany w kilku miejscach na stornie. Atrybutu id wykorzystujemy do oznacznia informacji unikatowych w skali całego dokumentu.
conip
20.08.2007, 07:54:55
Dzięki wszystkim za wskazówki i porady

zrobiłem tak jak Kreton radził dałem margin-left: auto i margin-right: auto oraz div ma ustaloną szerokość. Pod IE jet ok jednak firefox nadal nie załącza pliku ze stylami jak daje wklejony wcześniej <!DOCTYPE>. Co dziwniejsze sprawdzilem u siebie w domu na localhoscie i wszystko jest ok pod wszystkimi przegladarkami. Troche uporzadkowalem kod i wyslalem znow na serwer z nadzieja ze bedzie juz dobrze. ale FF nadal nie zalacza styli.
Jaki musi byc przykladowy <!DOCTYPE> aby zarowno FF jak i IE poprawnie interpretowal naglowek head i widzial style.css? Ja uzyłem typowego z szablonu, który jak do tej pory mnie nie zawiódl. Przeciez to nie moze byc chyba kwestia serwera skoro ta czesc kodu ma byc obsluzona przez przegladarkę klienta?

juz naprawde trace powoli cierpliwosc smile.gif wiec jeszcze raz prosze o konstruktywne rady

pozdrawiam


dodam jeszcze ze jak zmieniam na:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

to FF widzi ok, IE prawie - nie wyposrodkowuje diva glownego.
OK sprawdzilem validatorem na W3C zarowno kod html jak i css - przeszlo wszystko poprawnie ale FF nadal nie widzi arkusza stylow
zamieszczam kody jakby co:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  5. <link rel="stylesheet" type="text/css" href="style.css" >
  6. <title>archiwum</title>
  7. </head>
  8.  
  9. <body class="body">
  10. <div class="main">
  11.   <div class="gora"><img src="pociete/gora.jpg"  style="display: block;" alt="" /></div>
  12.   <div class="srodek">
  13.     <div class="baner"><img src="pociete/godlo.png" alt="" /><br />
  14.         <b>ARCHIWUM</b></div>
  15.     <div >ala <br />ma <br />kota </div>
  16.   </div>
  17.   <div class="dol"></div>
  18. </div>
  19. </body>
  20. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. /* CSS Document */
  2.  
  3. .body{background:#e4d4ba;margin:0;
  4. 	padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;	
  5. }
  6.  
  7. .main{width: 748px;margin-left: auto;margin-right: auto;	
  8. }
  9.  
  10. .gora{
  11.   padding-top: 30px;
  12. }
  13.  
  14. .srodek{
  15. 	background:url(pociete/srodek.jpg) repeat-y;
  16. }
  17.  
  18. .dol{
  19. 	background:url(pociete/dol.jpg) no-repeat;
  20. 	height: 20px;
  21. 	display: block;
  22. }
  23.  
  24. .baner{
  25.   padding: 10px 10px 10px 10px;
  26.   text-align: center;  
  27.   color:#FFFFFF;
  28. }
[HTML] pobierz, plaintext


a oto link do tego:

http://www.43blot.mw.mil.pl/arch.php

PLEASE HELP smile.gif
Kreton
20.08.2007, 20:47:13
Jak to nie ładuje ? Specjalnie zainstalowałem FF i widzę, że style działają. Na tym linku co podałeś.

Żeby wypośrodkować to w IE musisz dodać do klasy main:
Kod
text-align: center;

Wyśrodkuje cały blok razem z tekstem, tekst będziesz musiał sobie identycznym stylem wyrównać do lewej.

Najlepiej gdybyś DOCTYPE zmienił na XHTML Strict lub Transitional. np:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>

  <body>
  </body>
</html>
conip
21.08.2007, 07:08:22
Sorki
zapomnialem ze zmienilem pozniej doctype na <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

wczesniej mialem taki:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[HTML] pobierz, plaintext


zrobilem validacje i usunalem wszystkie bledy na ktorych FF moglby sie wywalic, ale nadal po dodaniu linku do "http://www.w3.org/TR/html4/strict.dtd" FF nie zalacza stylow a IE widzi ok

teraz jest tak jak proponujesz
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[HTML] pobierz, plaintext


znow zrobilem validacje i poprawilem tagi aby to przeszlo ale FF nadal nie widzi stylow (wersja 2.0.0.6 jak to ma jakies znaczenie)

jeszcze raz sorki za wprowadzenie w blad

pozdrawiam
Kreton
21.08.2007, 10:16:32
Kurde, otwierałem twój link w Firefox 2.0.0.6 i style działają ! Weź sprawdź twoje ustawienia Firefoxa.
conip
21.08.2007, 11:03:14
sorki zmienilem link tylko w nazwie a nie w href

http://www.43blot.mw.mil.pl/arch.php

teraz na bank nie beda dzialac
jeszcze raz sorki za zamieszanie
Kreton
21.08.2007, 17:23:56
Nie wykopiowywuj pewnych elementów i wklejaj jak ci się podoba, mam na myśli meta i DOCTYPE.
Zastosuj to i tyle:

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="slowa kluczowe" />
    <meta name="Description" content="opis strony" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
</body>


</html>


Nie zmieniaj ani DOCTYPE ani Content-type.
conip
22.08.2007, 06:37:24
dałem dokładnie taki nagłówek jak proponowałeś - nic nie zmieniałem smile.gif nadal nici. Validacja na W3C zrobiona i błędów nie było

zastanawiam się czy to możę być jakoś zależne od serwera?
Kreton
22.08.2007, 19:27:36
Dziwny problem, ściągnołem całą stornkę do siebie. Zmieniłem tylko odwołania do styli żeby się zgadzały i FF widział style.
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.