Pozadi a (ne)prekryti divem

~ Anonymní uživatel
~ 2 příspěvky

29. 9. 2007 #1

Nazdar, narazil jsem na nasledujici problem:
mam na strance div s obrazkem na pozadi a na nej jsem umistnil vedle sebe dalsi 3 divy, css je:

.LevyCast {
display: inline-block;
float: left;
height: 100%;
text-align: left;
padding-right: 10px;
}
.PravaCast {
height: 100%;
display: inline-block;
float: left;
padding-left: 10px;
text-align: left;
}
.StredniCast {
height: 100%;
display: inline-block;
float: left;
text-align: justify;
}

(sirku si nastavuji na konkretni strance mimo css souboru)
problem ale je, ze v mozile a opere se mi misto pozadi zobrazuje jen bile pozadi, tj. asi ty divy nejsou pruhledne, ale ja jim pozadi nikde nenastavil a ani pokud nastavim pruhledne, tak pruhledne nejsou ale v IE 7 se to zobrazuje hezky jak ma, kde muze bejt chyba?

Dik za help

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

30. 9. 2007 #2

Tady máš na žlutém pozadí ty tvé 3 sloupce (jednomu jsem dal pozadí = jedině ten to pozadí překryje).
Chyba je někde na stránce nebo v dalších stylech - ukaž kód.

<html><head><title>Lay</title>

<style>

    .page {

        background: yellow;

        width: 800px;

        height: 800px;

    }

    .LevyCast {

	     height: 100%;

         width: 222px;

	     display: inline-block;

	     float: left;

	     text-align: left;

	     padding-right: 10px;

	}

	.PravaCast {

	     height: 100%;

         width: 222px;

	     display: inline-block;

	     float: left;

	     padding-left: 10px;

	     text-align: left;

	}

	.StredniCast {

	     height: 100%;

         width: 222px;

	     display: inline-block;

	     float: left;

	     text-align: justify;

	 background: red;

	}

</style>

</head>

<body>



<div class="page">



<div class="LevyCast">

BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

     BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

</div>



<div class="StredniCast">

BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

     BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

</div>



<div class="PravaCast">

BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

     BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

</div>



</div>



</body>

</html>

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

30. 9. 2007 #3

Asi už vím. Když si zobrazíš ten můj fungující příklad a pak odstraníš z class page height:800px zmizí žluté pozadí.
Ale ne proto že je teď bílé, prostě ten obalový DIV.page zmizí (nulová výška).
Náprava: umístit čistič za DIV třetího sloupce

<html><head><title>Lay</title>

<style>

    .page {

        background: yellow;

        width: 800px;

          }

    .LevyCast {

          height: 100%;

         width: 222px;

          display: inline-block;

          float: left;

          text-align: left;

          padding-right: 10px;

     }

     .PravaCast {

          height: 100%;

         width: 222px;

          display: inline-block;

          float: left;

          padding-left: 10px;

          text-align: left;

     }

     .StredniCast {

          height: 100%;

         width: 222px;

          display: inline-block;

          float: left;

          text-align: justify;

      background: red;

     }

     .cistic {clear:left}

     .cistic hr {display:none}

</style>

</head>

<body>



<div class="page">



<div class="LevyCast">

     BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

</div>



<div class="StredniCast">

     BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

</div>



<div class="PravaCast">

     BEGINUM dolor sit amet, consectetuer adipiscing elit.

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     Duis at felis a erat lobortis congue. Sed eget turpis.

     Donec tempor mauris in ligula. Suspendisse ac dolor

     ENDUS.

 </div>



<div class="cistic"><hr /></div>



</div>



</body>

</html>

Nahlásit jako SPAM

IP: ...–

Mucha

~ Anonymní uživatel
~ 2 příspěvky

30. 9. 2007 #4

To Petroff: tak tohle reseni jsem nezkousel, protoze to lze udelat jednoduseji a to tak, ze tomu vnejsimu div-u nastavim float na left a je to, ale stejne dik za pomoc :)

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

3. 10. 2007 #5

Jasně, můžeš mít všechno na stránce plovoucí (v praxi jsem se s tím moc často nesetkal)(budeš chtít přidat patičku a problém se vrací....)(nebo pokud bys chtěl obal vycentrovat u širokých WINDOW...těžké)
Místo toho mého divu navíc to jde čistě jen styly pro obal:
buď Ashletova metoda (#obal:after {content....}) + pro IE6 použít: * html #obal {height:1%}
nebo #obal {overflow:auto;width:xxx}

Můžu se zeptat k čemu slouží inline-block ?

Nahlásit jako SPAM

IP: ...–

← Zpět na seznam vláken ← Zpět do Fóra