Pozadi a (ne)prekryti divem – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Pozadi a (ne)prekryti divem – CSS – Fórum – Programujte.comPozadi a (ne)prekryti divem – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Mucha
~ Anonymní uživatel
2 příspěvky
29. 9. 2007   #1
-
0
-

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: ...–
Reklama
Reklama
Petroff0
Věrný člen
30. 9. 2007   #2
-
0
-

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
-
0
-

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
-
0
-

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
-
0
-

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: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 8 hostů

Podobná vlákna

Problém s DIVem — založil Bali

Překryti zvuku zvukem — založil SmitH

Překrytí objektů, jakto? — založil Tomaash

Prekryti globalniho stylu — založil Honza Sova

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý