[CSS] DIVy nachodzą na siebie pod FF i operą, pod IE6 jest OK Opcje

[AboutMe]

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 
#content {
    width: 630px;
    margin-left: 240px;
    padding: 10px 10px 10px 10px;
    font: 8pt Verdana, Arial, sans-serif;
    color: white;
}
 
#post {
    width: 623px;
    margin-top: 23px;
    padding: 10px 10px 10px 10px;
    border: 1px solid white;
    background: black; 
    text-align: justify;
}
 
#text {
    width: 500px;
    border: 1px solid white;
    float: left;
}
 
#info {
    width: 100px;
    float: top;
    float: right;
    border: 1px solid white;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="content">
 
 
<div id="post">
 
<div id="text">
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.
</div><!--text-->
 
 
<div id="info">
Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
</div><!--info-->
 
 
</div><!--post-->
 
<div id="post">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.
</div><!--post-->
 
<div id="post">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.
</div><!--post-->
 
 
</div><!--content ends-->
[HTML] pobierz, plaintext 

Ten post edytował AboutMe 30.03.2010, 15:40:25

[blooregard]

Możesz nadać wątkowi jakiś bardziej sensowny tytuł?
Dziękuję.

[mortus]

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]

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]

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>

Ten post edytował krzysztof_kf 30.03.2010, 23:32:02

[mortus]

@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 
<style type="text/css">
    .post {
        width: 800px;
        padding: 10px 10px 10px 10px;
        border: 1px solid #fff;
        margin-top: 10px;
    }
    .first-post {
        margin-top: 0;
    }
</style>
 
<div class="post first-post">Treść posta</div>
<div class="post">Treść posta</div>
<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]

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

[mortus]

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

@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.

Ten post edytował mortus 31.03.2010, 07:49:14

[piotrooo89]

@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]

Weźcie zerknijcie na ten kod bo ja już nie mam zielonego pojęcia co jest źle:

[HTML] pobierz, plaintext 
<!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">
 
 
<head>
 
<title>Blogger</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
</head>
<body>
 
<style>
 
body {
    margin:0;
    padding:0;
    background: black;
}
 
 
 
#content {
    width: 630px;
    margin-left: 240px;
    padding: 10px 10px 10px 10px;
    font: 8pt Verdana, Arial, sans-serif;
    color: white;
}
 
.post {
    width: 623px;
    margin-top: 23px;
    padding: 10px 10px 10px 10px;
    border: 1px solid white;
    background: black;
    text-align: justify;
}
 
.text {
    width: 500px;
    border: 1px solid white;
    float: left;
}
 
.info {
    width: 100px;
    float: right;
    border: 1px solid white;
}
 
 
</style>
 
<div id="content">
 
 
<div class="post">
 
<div class="text">
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.
</div><!--text-->
 
 
<div class="info">
Nulla risus lacus, viverra vel euismod at, lobortis eu leo.
</div><!--info-->
 
 
</div><!--post-->
 
<div class="post">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.
</div><!--post-->
 
<div class="post">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.
</div><!--post-->
 
 
</div><!--content-->
 
</body>
</html>
[HTML] pobierz, plaintext 

Ten post edytował AboutMe 31.03.2010, 12:08:32

[mortus]

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 
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                text-align: center;
            }
 
            .content {
                margin: 0 auto;
                border: 1px dotted #ccc;
                width: 500px;
                text-align: left;
            }
 
            .left {
                margin: 10px;
                border: 1px solid #ccc;
                width: 275px;
                min-height: 200px;
                float: left;
            }
 
            .right {
                margin: 10px;
                border: 1px solid #ccc;
                width: 180px;
                min-height: 200px;
                float: right;
            }
 
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="left">
            </div>
            <div class="right">
            </div>
            <div class="clear">
            </div>
        </div>
    </body>
</html>
[HTML] pobierz, plaintext 

Za wyczyszczenie float-ów odpowiada div o klasie .clear

[AboutMe]

No zaraz ale ten min-height nic nie daje bo raz potrzebuję żeby div miał wysokość 200px a raz 1000px.

[Rysh]

Zobacz czym jest min-height: http://algorytmy.pl/doc/xhtml/?id=3080

[AboutMe]

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

Ten post edytował AboutMe 2.04.2010, 15:36:16