Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Rozjeżdżające się div-y.
Jojo
post
Post #1





Grupa: Zarejestrowani
Postów: 405
Pomógł: 1
Dołączył: 19.09.2003
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Aktualnie pracuję nad stroną, która miała być w całości zrealizowana w XHTML. Postanowiłem nie korzystać ze znaczników <table>, tylko oprzeć wszystko o <div>. Nie będę dokładnie opisywał problemu. Sądzę, że linki do screenów wszystko wyjaśnią. Oto one:

Tak miały wyglądać ramki i tak wyglądają w Opera 7.51
Mozilla 1.7
IE 6

Jak zapewne zauważyliście w każdej przeglądarce strona wygląda inaczej.

Tak wygląda kod XHTML, który bezbłędnie przechodzisprawdzanie w Validatorze (tekst wyciąłem dla poprawienia czytelności):
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5.  
  6. <head>
  7.  
  8.   <title>Test</title>
  9.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  10.   <meta http-equiv="content-language" content="pl" />
  11.   <link rel="stylesheet" href="stylesheet/style.css" type="text/css" />
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17.   <div class="main">
  18.     <div class="info">
  19.       Lorem ipsum.<br />
  20.       Lorem ipsum.
  21.     </div>
  22.     <div class="links">
  23.       Lorem ipsum.
  24.     </div>
  25.     <div class="versions">
  26.       Lorem ipsum.
  27.     </div>
  28.   </div>
  29.  
  30. </body>
  31.  
  32. </html>
[HTML] pobierz, plaintext


Tak natomiast wygląda kod CSS:
Kod
body {
    text-align: center;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}

div.main {
    border-style: solid;
    border-width: 1px;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    text-align: justify;
    width: 760px;
}

div.info {
    border-style: solid;
    border-width: 1px;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px;
    text-align: justify;
}

div.links {
    border-style: solid;
    border-width: 1px;
    float: left;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-left: 0px;
    margin-right: auto;
    padding: 5px;
    text-align: center;
    width: 300px;
}

div.versions {
    border-style: solid;
    border-width: 1px;
    float: right;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-left: auto;
    margin-right: 0px;
    padding: 5px;
    text-align: justify;
    width: 431px;
}


Kombinowałem z tym bardzo długo ale nie mogę nic wymyślić. W jaki sposób zmienić te pliki, aby we wszystkich przeglądarkach strona wyglądała tak jak w Operze?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
mpps
post
Post #2





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 14.03.2003
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

niestety, to nie opera właściwie zinterpretowała style - to... ie.
1. opera wyświetliła ci ramkę na 772 zamiast na 760
2. mozilla kompletnie wszystko popaprała

może powoduje to justowanie?
nie wiem...
Go to the top of the page
+Quote Post
Jojo
post
Post #3





Grupa: Zarejestrowani
Postów: 405
Pomógł: 1
Dołączył: 19.09.2003
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Rzeczywiście, masz rację. Nie zauważyłem tego wcześniej. Co ciekawsze prosta arytmetyka i kilka pomiarów doprowadziły mnie do takich wniosków:
772 = 760 + 5 + 5 + 1 +1
Mówiąc po ludzku to jest dokładnie tyle ile wynoszą razem zadana szerokość diva, 2*wartość padding i 2*szerokość obramowania. Sprawdziłem i dla innych ramek takie sumy również się zgadzają.
Ciekawe jest również to, że Mozilla te wilekości interpretuje tak samo jak Opera - tam też szerokość największej ramki wynosi 772 piksele.

Wie ktoś może dlaczego tak się dzieje?

Justowanie odpada. Po zmianie wszystkich text-align na left jest nadal to samo.

Ten post edytował Jojo 26.09.2004, 15:29:50
Go to the top of the page
+Quote Post
bregovic
post
Post #4





Grupa: Zarejestrowani
Postów: 562
Pomógł: 15
Dołączył: 8.08.2003
Skąd: Denmark/Odense

Ostrzeżenie: (0%)
-----

napewno pomoze ci wstawienie takiego durnego br'a, z atrybutem clear="all" pod koniec struktury:
[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div class="main">
  4. <div class="info">
  5. Lorem ipsum.<br />
  6. Lorem ipsum.
  7. </div>
  8. <div class="links">
  9. Lorem ipsum.
  10. </div>
  11. <div class="versions">
  12. Lorem ipsum.
  13. </div><br clear="all" />
  14. </div>
  15.  
  16. </body>
[HTML] pobierz, plaintext


a co do dokladnych pixelowych layoutow, proponuje lektore "Box Model Hack", Tanteka Celicka - http://www.tantek.com/CSS/Examples/boxmodelhack.html
W skrocie: IE zle interpretuje box model i umieszcza ramki i padding w srodku box'a zamiast tak jak powinno byc, czyli na zewnatrz.

edit:
dodam jeszcze ze nieprzebytym zrodlem informacji na temat layoutow jest strona Box Lessons Owena Briggsa, a zwlaszcza jego Little Boxes. polecam kazdem zainteresowanemu designem ponadprzegladarkowym (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował bregovic 26.09.2004, 15:43:29
Go to the top of the page
+Quote Post
sobstel
post
Post #5





Grupa: Zarejestrowani
Postów: 853
Pomógł: 25
Dołączył: 27.08.2003
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Cytat(mpps @ 2004-09-26 14:59:16)
opera wyświetliła ci ramkę na 772 zamiast na 760

opera wyswietla poprawnie. wedlug standardu CSS bowiem szerokosc wskazuje na sama wewnetarzna czesc BEZ paddingu i obramowania. w IE 5.x liczy sie to wszystko razem na szerokosc, ale to tylko jeden z wielu bugow tej przegladarki. wspomniana wyzej sztuczka tantecka powinna pozwolic ci poradzic sobie z tym problemem.
Go to the top of the page
+Quote Post
wassago
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

tak bedzie lepiej
Kod
clear="all" => style="clear: both"
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 14:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn