Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] DIVy nachodzą na siebie pod FF i operą
Forum PHP.pl > Forum > Przedszkole
AboutMe
30.03.2010, 15:20:31
Witam,

Co jest nie tak z tą stroną

http://img337.imageshack.us/i/div.gif/


pod IE6 jest ok http://img641.imageshack.us/i/divm.gif/


[HTML] pobierz, plaintext 
  1. #content {
  2.     width: 630px;
  3.     margin-left: 240px;
  4.     padding: 10px 10px 10px 10px;
  5.     font: 8pt Verdana, Arial, sans-serif;
  6.     color: white;
  7. }
  8.  
  9. #post {
  10.     width: 623px;
  11.     margin-top: 23px;
  12.     padding: 10px 10px 10px 10px;
  13.     border: 1px solid white;
  14.     background: black; 
  15.     text-align: justify;
  16. }
  17.  
  18. #text {
  19.     width: 500px;
  20.     border: 1px solid white;
  21.     float: left;
  22. }
  23.  
  24. #info {
  25.     width: 100px;
  26.     float: top;
  27.     float: right;
  28.     border: 1px solid white;
  29. }
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. <div id="content">
  2.  
  3.  
  4. <div id="post">
  5.  
  6. <div id="text">
  7. Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus.
  8. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis,
  9. id lacinia libero. Pellentesque eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada.
  10. Proin egestas urna ac lectus pellentesque congue. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus,
  11. quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh. Sed luctus lobortis porttitor. Maecenas a quam
  12. lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus, elementum sagittis viverra eu,
  13. venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet. Proin tempus sapien orci.
  14. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum velit.
  15. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi
  16. pharetra euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  17. </div><!--text-->
  18.  
  19.  
  20. <div id="info">
  21. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  22. </div><!--info-->
  23.  
  24.  
  25. </div><!--post-->
  26.  
  27. <div id="post">Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus.
  28. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis, id lacinia libero.
  29. Pellentesque eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada. Proin egestas urna ac lectus pellentesque congue.
  30. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus, quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh.
  31. Sed luctus lobortis porttitor. Maecenas a quam lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus,
  32. elementum sagittis viverra eu, venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet.
  33. Proin tempus sapien orci. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum
  34. velit. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi pharetra
  35. euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  36. </div><!--post-->
  37.  
  38. <div id="post">Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus. Vestibulum
  39. ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis, id lacinia libero. Pellentesque
  40. eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada. Proin egestas urna ac lectus pellentesque congue.
  41. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus, quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh.
  42. Sed luctus lobortis porttitor. Maecenas a quam lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus,
  43. elementum sagittis viverra eu, venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet.
  44. Proin tempus sapien orci. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum
  45. velit. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi pharetra
  46. euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  47. </div><!--post-->
  48.  
  49.  
  50. </div><!--content ends-->
[HTML] pobierz, plaintext
blooregard
30.03.2010, 15:37:26
Możesz nadać wątkowi jakiś bardziej sensowny tytuł?
Dziękuję.
mortus
30.03.2010, 16:15:17
Po pierwsze w dokumencie może istnieć tylko jeden element o danym identyfikatorze, czyli nie możesz mieć trzech elementów <div id="post">. Twoje elementy <div> raczej powinny posiadać klasy, aniżeli identyfikatory <div class="post">, a w css-ie .post. Po drugie sprawdź, czy zadeklarowałeś dobrze typ dokumentu (DOCTYPE).
emtiej
30.03.2010, 20:40:57
dla ścisłości, najpierw składasz theme dla nowszych przeglądarek, potem sprawdzasz ją pod starszymi, jeżeli pod starszymi coś jest nie tak to próbujesz naprawić, jeżeli nie da rady no to zostają Ci komentarze warunkowe
krzysztof_kf
30.03.2010, 23:25:57
Miałem trochę czasu to zrobiłem ci gotowy szablon działa włącznie z ie6 tylko szerokość sobie dopasuj jak chcesz itp itd ...
Kod
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<http equiv="Content-Type" content="text/html" charset=iso-8859-2" />
<http equiv="Content-Language" content="pl" />
</head>
<body>
<style>

body {
background: #000;
}

#content {
width: 800px;
margin: 0 auto;
}

#post {
width: 800px;
padding: 10px 10px 10px 10px;
float: left;
border: 1px solid #fff;
}

#text {
width: 600px;
float: left;
color: #fff;
border: 1px solid #fff;
padding: 10px 10px 10px 10px;
}

#text-info {
width: 100px;
float: left;
color: #fff;
margin: 0 0 0 10px;
padding: 3px 3px 3px 3px;
border: 1px solid #fff;
}

.post {
width: 800px;
float: left;
color: #fff;
border: 1px solid #fff;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}

p {
margin: 0;
font-family: verdana;
font-size: 0.8em;
}
</style>
<div id="content">
<div id="post">
<div id="text">
<p>
Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis,
id lacinia libero. Pellentesque eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada.
Proin egestas urna ac lectus pellentesque congue. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus,
quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh. Sed luctus lobortis porttitor. Maecenas a quam
lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus, elementum sagittis viverra eu,
venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet. Proin tempus sapien orci.
Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum velit.
Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi
pharetra euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.</p>
</div><!--text-->

<div id="text-info">
<p>Nulla risus lacus, viverra vel euismod at, lobortis eu leo.</p>
</div></div><!--info-->


<!--post-->

<div class="post"><p>Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis, id lacinia libero.
Pellentesque eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada. Proin egestas urna ac lectus pellentesque congue.
Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus, quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh.
Sed luctus lobortis porttitor. Maecenas a quam lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus,
elementum sagittis viverra eu, venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet.
Proin tempus sapien orci. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum
velit. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi pharetra
euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.</p>
</div><!--post-->

<div class="post"><p>Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis, id lacinia libero. Pellentesque
eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada. Proin egestas urna ac lectus pellentesque congue.
Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus, quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh.
Sed luctus lobortis porttitor. Maecenas a quam lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus,
elementum sagittis viverra eu, venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet.
Proin tempus sapien orci. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum
velit. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi pharetra
euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.</p>
</div><!--post-->


</div><!--content ends-->

</body>
   </html>
mortus
31.03.2010, 06:53:04
@krzysztof_kf A po co robić klasę .post i jednocześnie identyfikator #post, skoro różnią się one tylko jednym parametrem? Przyjrzyj się takiemu rozwiązniu:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.     .post {
  3.         width: 800px;
  4.         padding: 10px 10px 10px 10px;
  5.         border: 1px solid #fff;
  6.         margin-top: 10px;
  7.     }
  8.     .first-post {
  9.         margin-top: 0;
  10.     }
  11. </style>
  12.  
  13. <div class="post first-post">Treść posta</div>
  14. <div class="post">Treść posta</div>
  15. <div class="post">Treść posta</div>
[HTML] pobierz, plaintext
Po drugie po co elementom klasy .post styl float: left;, skoro mają one zajmować całą szerokość content-u? Zresztą źle policzyłeś szerokość elementów .post, bo uwzględniając dopełnienia (padding) width powinna wynosić 780px. Nie wiem, jak z pozostałymi elementami, ale nie chce mi się sprawdzać. Nie podawaj złych rozwiązań, bo zdaje się, że specjalistą nie jesteś. Ja też nie jestem, ale widziałem już setki tak zakodowanych stron, kiedyś nawet sam tak pisałem, a nawet teraz zdarza mi się coś przeoczyć czy zepsuć. Różnica pomiędzy nami jest taka, że ja staram się pomóc podając dobre rozwiązanie, a Ty podajesz jakiekolwiek, które może działać, ale niekoniecznie musi.
krzysztof_kf
31.03.2010, 07:38:45
mortus ? a widziałeś w czym jest problem widziałeś screena co z tego że dałeś 3 klasy jedna pod drugą ? które jeszcze nie trzymają się ładu a po za tym na szybkiego robiłem ale efekt jest pozdrawiam smile.gif
mortus
31.03.2010, 07:44:32
Cytat(krzysztof_kf @ 31.03.2010, 08:38:45 ) *
mortus ? a widziałeś w czym jest problem widziałeś screena co z tego że dałeś 3 klasy jedna pod drugą ? które jeszcze nie trzymają się ładu a po za tym na szybkiego robiłem ale efekt jest pozdrawiam smile.gif
@krzystof_kf Widziałem screena, ale kolega jeszcze nie odpowiedział. Możliwe, że po prostu nie ma doctype zadeklarowanego i stąd te błędy. Podejrzewam, że floatowane elementy przybierają styl display: inline;, a to dlatego, że właśnie doctype-a brakuje, albo jest on niewłaściwy.
EDIT:
U mnie w treści posta wpisujesz co chcesz, co oznacza, że możesz sobie dwa div-y wstawić jeden obok drugiego.
Kod kolegi AboutMe wygląda dobrze, choć pomylił on się w jednym miejscu (nie ma czegoś takiego jak float: top;) i zamiast klas używa identyfikatorów.
piotrooo89
31.03.2010, 08:11:24
@krzysztof_kf czy będziesz dawał w końcu swoje listingi w odpowiednich bbcode? w przeciwnym wypadku będę zamykał tematy w których bierzesz udział. przez barak odpowiedniego bbcode zaciemniasz swoje rozwiązania i stają się nieczytelne.
AboutMe
31.03.2010, 12:06:41
Weźcie zerknijcie na ten kod bo ja już nie mam zielonego pojęcia co jest źle:


[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. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.  
  5. <head>
  6.  
  7. <title>Blogger</title>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.  
  10. </head>
  11. <body>
  12.  
  13. <style>
  14.  
  15. body {
  16.     margin:0;
  17.     padding:0;
  18.     background: black;
  19. }
  20.  
  21.  
  22.  
  23. #content {
  24.     width: 630px;
  25.     margin-left: 240px;
  26.     padding: 10px 10px 10px 10px;
  27.     font: 8pt Verdana, Arial, sans-serif;
  28.     color: white;
  29. }
  30.  
  31. .post {
  32.     width: 623px;
  33.     margin-top: 23px;
  34.     padding: 10px 10px 10px 10px;
  35.     border: 1px solid white;
  36.     background: black;
  37.     text-align: justify;
  38. }
  39.  
  40. .text {
  41.     width: 500px;
  42.     border: 1px solid white;
  43.     float: left;
  44. }
  45.  
  46. .info {
  47.     width: 100px;
  48.     float: right;
  49.     border: 1px solid white;
  50. }
  51.  
  52.  
  53. </style>
  54.  
  55. <div id="content">
  56.  
  57.  
  58. <div class="post">
  59.  
  60. <div class="text">
  61. Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus.
  62. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis,
  63. id lacinia libero. Pellentesque eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada.
  64. Proin egestas urna ac lectus pellentesque congue. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus,
  65. quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh. Sed luctus lobortis porttitor. Maecenas a quam
  66. lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus, elementum sagittis viverra eu,
  67. venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet. Proin tempus sapien orci.
  68. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum velit.
  69. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi
  70. pharetra euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  71. </div><!--text-->
  72.  
  73.  
  74. <div class="info">
  75. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  76. </div><!--info-->
  77.  
  78.  
  79. </div><!--post-->
  80.  
  81. <div class="post">Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus.
  82. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis, id lacinia libero.
  83. Pellentesque eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada. Proin egestas urna ac lectus pellentesque congue.
  84. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus, quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh.
  85. Sed luctus lobortis porttitor. Maecenas a quam lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus,
  86. elementum sagittis viverra eu, venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet.
  87. Proin tempus sapien orci. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum
  88. velit. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi pharetra
  89. euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  90. </div><!--post-->
  91.  
  92. <div class="post">Aenean tempor varius felis, id hendrerit mi eleifend eget. Morbi placerat fermentum lectus vitae faucibus. Vestibulum
  93. ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu elit turpis, id lacinia libero. Pellentesque
  94. eu ante non urna rutrum facilisis. Curabitur porta dapibus risus ac malesuada. Proin egestas urna ac lectus pellentesque congue.
  95. Praesent ut velit ipsum. Fusce volutpat, orci at commodo tempus, quam nulla commodo tellus, eget sollicitudin dolor tortor ut nibh.
  96. Sed luctus lobortis porttitor. Maecenas a quam lectus, vel sodales lectus. Phasellus vulputate sagittis ultrices. Maecenas est tellus,
  97. elementum sagittis viverra eu, venenatis sit amet arcu. Mauris suscipit fermentum justo, facilisis elementum diam accumsan sit amet.
  98. Proin tempus sapien orci. Sed diam erat, fermentum et ultrices in, lacinia quis nulla. In ut ligula eu urna pharetra rutrum in dictum
  99. velit. Maecenas vehicula sem sit amet sapien facilisis sit amet bibendum augue iaculis. Fusce sit amet velit pulvinar nisi pharetra
  100. euismod vitae eu turpis. Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
  101. </div><!--post-->
  102.  
  103.  
  104. </div><!--content-->
  105.  
  106. </body>
  107. </html>
[HTML] pobierz, plaintext
mortus
31.03.2010, 13:59:00
Przede wszystkim style powinny być w sekcji head, więc je przekopiuj. Jako, że nadajesz elementom w klasie .post atrybuty float, to aby się wszystko dobrze wyświetlało musisz to opływanie wyczyścić. Przykład:
[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. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <style type="text/css">
  6.             body {
  7.                 margin: 0;
  8.                 padding: 0;
  9.                 text-align: center;
  10.             }
  11.  
  12.             .content {
  13.                 margin: 0 auto;
  14.                 border: 1px dotted #ccc;
  15.                 width: 500px;
  16.                 text-align: left;
  17.             }
  18.  
  19.             .left {
  20.                 margin: 10px;
  21.                 border: 1px solid #ccc;
  22.                 width: 275px;
  23.                 min-height: 200px;
  24.                 float: left;
  25.             }
  26.  
  27.             .right {
  28.                 margin: 10px;
  29.                 border: 1px solid #ccc;
  30.                 width: 180px;
  31.                 min-height: 200px;
  32.                 float: right;
  33.             }
  34.  
  35.             .clear {
  36.                 clear: both;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <div class="content">
  42.             <div class="left">
  43.             </div>
  44.             <div class="right">
  45.             </div>
  46.             <div class="clear">
  47.             </div>
  48.         </div>
  49.     </body>
  50. </html>
[HTML] pobierz, plaintext
Za wyczyszczenie float-ów odpowiada div o klasie .clear
AboutMe
2.04.2010, 12:02:57
No zaraz ale ten min-height nic nie daje bo raz potrzebuję żeby div miał wysokość 200px a raz 1000px.
Rysh
2.04.2010, 13:05:01
Zobacz czym jest min-height: http://algorytmy.pl/doc/xhtml/?id=3080
AboutMe
2.04.2010, 13:28:41
Ja wiem co znaczy min-height, problem jest taki że div nie zwiększa swojej długości jeśli potrzebuję więcej niż 200px.

EDIT:
Źle wstawiłem

<div class="clear">
</div>

teraz jest ok
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.