Autor Zpráva
Radim24
Profil *
Ahoj.
Dříve jsem se s float docela dost namordoval. Po delší době se k tomu vracím a zase mi to nějak nejde.

Snažím se nakódovat design, konkrétně hlavičku.

Situace je asi taková, že kdyby šlo o tabulku vypadalo by to asi takhle:

(čísla znamenají řádky)

1.TR TD /TD .. TD /TD ... TD /TD /TR
2.TR TD /TD .. TD /TD ... TD /TD /TR
3.TR TD /TD .. TD /TD ... TD /TD /TR

Když to chci převést na DIV,
moje logika je taková, že nejdříve nastavuji v celém dokumentu DIV float:left.

Když chci "zalomit řádek" strčím na začátek následujícího řádku clear:left.

1. DIV /DIV .. DIV /DIV .. DIV .. /DIV
2. DIV /DIV (clear left) .. DIV /DIV .. DIV .. /DIV
3. DIV /DIV (clear left) .. DIV /DIV .. DIV .. /DIV

Ale ono to nějak nefunguje*. No, tak jsem to zkusil dát do vnořených DIVů. Takže má to tento formát:

1. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

2. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

3. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

zase nic*, takže jsem tam dodal clear:

1. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

2. DIV (clear:left;)
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

3. DIV (clear:left;)
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

nakonec jsem zkousel cistic - prvek HR s vlastností clear:left;

1. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

HR (clear_left)

2. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

HR (clear_left)

3. DIV
DIV /DIV .. DIV /DIV .. DIV .. /DIV
/DIV

HR (clear_left)

opět nic*.

* - když říkám, nic , neznamená to, že by se neprojevila změna, ale že prvky jsou rozházené.

To co chci vytvořit je vlastně obyčejná tabulka, těm DIVům pak nastavuji odstíny modré barvy, takže to vytváří čtverce v hlavičce. Jestli mi tu někdo může poradit v čem dělám chybu, budu vděčný:-)
panther
Profil
Radim24
v hlavičce 6 nebo více divů? Možná zkus odkazát na konkrétní obrázek, jak by ta hlavička měla vypadat, bude snažší ti pooci. Takhle teoreticky to moc nejde, když nevím, čeho se snažíš dosáhnout.. Ale rozhodně není dobře nahradit každé „td“ za „div“.
Radim24
Profil *
Tohle je jenom jedna malá část. Celý dokument je podobně nafloutovaný - rozdělený do řádků a sloupců. A momentálně řeším tu hlavičku. Ve skutenčosti jich tam je víc, a to co jsem uvedl je zjednodušená verze vyjmutá "z mozaiky".
Radim24
Profil *
Tady jde spíše o princip, než o konkrétní řešení. Já tam mám podobnou situaci několikrát. Když dám ten clear a očekával bych že se to tím zalomí, tedy ty DIVy které následují za DIV s clear:left, včetně, by měli skočit doleva zarovnat se. A ty další by měly jít zase za ním.... v řadě. A mě to třeba dělá právě to, že to skočí dolů, doleva ... zarovná se, ale s tím i ty ostatní vnořené DIVy, takže je každý DIV na jendom "řádku" místo aby byly všeci v jednom řádku.... Místo druhého řádku je z toho sloupec na druhém řádku.
Plaváček
Profil
Radim24

Pokud má něco tabulkovou strukturu, což soudě podle tvé nedostatečné ukázky má, prostě použij tabulku. DIVy nejsou a nemají být náhradou za tabulku. Něco zřejmě děláš špatně anebo dostatečně dobře neovládáš problematiku plovoucích prvků. Tohle by ti mohlo pomoci http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
radim24
Profil *
Včera jsem si četl články o float (jen abych si to připomněl a nic nového jsem nezjistil)
radim24
Profil *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
</head>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
}

div {
float:left;
}

div.clear {
clear:left;
}

HR.cistic {
clear: both;
height: -10;
border: none;
margin: -1em 0 0 0;
visibility: hidden;
}

#top-sq-1 {
width:140px;
height:85px;
background: #ABD9F3;
}

#top-sq-2 {
width:140px;
height:85px;
background: #B8DFF5;
}

#top-sq-3 {
width:140px;
height:85px;
background: #C6E6F8;
}

#top_stred_10 {
width:346px;
height:35px;
background: #red;
}

#top-spojka {
width:74px;
height:35px;
background: #C6E6F8;
}
</style>
<body>


<div>
<div id="top-sq-1"></div> <div id="top-sq-2"></div> <div id="top-sq-3"></div>

<HR class=cistic>

<div class=clear id="top_stred_10">
<img src="images/top_stred_10.gif" width="346" height="35" alt="">
</div>

<div id="top-spojka"></div>
</div>

TEST DIV "tabulky" o dvou řádcích, třemi sloupci*. Dle mého úsudku, by se druhý řádek měl zalomovat automaticky pomocí clear:left; uvedeného v druhém řídku na začátku.
Zapomněl jsem zmínit, že problém se vyskytuje u IE, kdežto MOZILA problémy nedělá. Ladím v MOZILE firebug, ale problém s chováním IE, firebug nevyřeší.

Problém u HR (cistic) je v tom, že mezi druhým a prvním řádkem zanechá mezeru cca 5-10 px. Pagging je 0 a margin 0, height je 0; nevím už kde hledat problém.

* - Ve druhém řádku jsou první dva sloupce spojeny (ve smyslu TD COLSPAN=2 a místo zabírá obrázek - pro test není nutný, je tam nastavená výška a šířka)
</body>
</html>
radim24
Profil *
oprava ne pagging ale padding. Pokud mi poraditjak vyresit cistic, aby nenechal mezeru mezi řádky, tak to bude vyřešeno
zvěřiňák
Profil *
Třeba takhle:
<div class="cleaner">&nbsp;</div>

.cleaner             { font-size: 0; line-height: 0; height: 0; clear: both; margin:0; padding: 0; }
Radim24
Profil *
To cos napsal mi v IE nefunguje, v Mozille ano...
Radim24
Profil *
tady na tom prikladu ten clear left funguje:

http://interval.cz/clanky/trisloupcovy-plovouci-css-layout-s-relativnim-pozicovanim/
Radim24
Profil *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Třísloupcový plouvoucí layout.</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>

<body>

<style type="text/css">
<!--
DIV {padding:0; margin:0;}

body {
margin: 0px;
padding: 0px;
font-family: "arial ce", "helvetica ce", arial, helvetica, sans-serif;
font-size: 14px;
}

.main {
margin: 0px;
}
.hlavicka {
width: 100%;
margin-bottom: 0px;
background-color: #b9b9b9;
}

.banner-ie {
text-align: center;
}

.banner {
width: 468px;
height: 60px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0px;
text-align: left;
background-color: #cccccc;
}
.left {
width: 150px;
height: 250px;
float: left;
background-color: #cccccc;
}

.right {
width: 150px;
height: 250px;
float: right;
background-color: #cccccc;
}

.middle {
margin-left: 0px;
margin-right: 0px;
height: 120px;
background-color: #dedede;
}

.paticka {
width: 100%;
margin-top: 0px;
clear: both;
background-color: #b9b9b9;
}

--> </style>

<div class="main">

<!-- hlavička designu -->
<div class="hlavicka">HLAVA HLAVA HLAVA HLAVA HLAVA HLAVA HLAVA HLAVA HLAVA HLAVA HLAVA

HLAVA HLAVA HLAVA HLAVA HLAVA KONEC HLAVA </div>

<!-- prostor pro reklamní banner -->
<div class="banner-ie"><div class="banner">Prostor pro reklamní banner</div></div>

<!-- levý sloupec -->
<div class="left">LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT

</div>


<!-- pravý sloupec -->
<div class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT </div>

<!-- prostřední sloupec -->
<div class="middle">MID MID MID MID MID MID MID MID MID MID MID MID MID MID MID MID

MID MID MID MID MID MID MID MID MID MID MID MID MID MID </div>

<!-- patička -->
<div class="paticka">pata PATA PATA PATA PATA PATA PATA PATA PATA PATA pata </div>

</div>

</body>
</html>
Plaváček
Profil
Radim24

Dodej živou ukázku, ať víme, o čem se bavíme.
Radim24
Profil *
Problém vyřešen, uvádím hotový příklad.
Radim24
Profil *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
</head>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
}

div {
float:left;
}

div.clear {
float: none;
clear:left;
}

HR.cistic {
clear: both;
height: 0px;
border: none;
margin: 0;
padding:0;
visibility: hidden;
}

#top-sq-1 {
width:140px;
height:85px;
background: #ABD9F3;
}

#top-sq-2 {
width:140px;
height:85px;
background: #B8DFF5;
}

#top-sq-3 {
width:140px;
height:85px;
background: #C6E6F8;
}

#top_stred_10 {
width:346px;
height:35px;
background: #red;
}

#top-spojka {
width:74px;
height:35px;
background: #C6E6F8;
}


#top-sq-4 {
width:140px;
height:85px;
background: #ABD9A3;
}

#top-sq-5 {
width:140px;
height:85px;
background: #B8DFA5;
}

#top-sq-6 {
width:140px;
height:85px;
background: #C6E6A8;
}


</style>
<body>


<div>
<div id="top-sq-1"></div> <div id="top-sq-2"></div> <div id="top-sq-3"></div>

<div class=clear>

<div id="top-sq-4"></div> <div id="top-sq-5"></div> <div id="top-sq-6"></div>

<div class=clear>

<div id="top_stred_10">
<img src="images/top_stred_10.gif" width="346" height="35" alt="">
</div>
<div id="top-spojka"></div>


</div>

<HR class=cistic>

TEST DIV "tabulky" o dvou řádcích, třemi sloupci*.

PŮVODNÍ PROBLÉM:
Zelená řada neskočila na druhý řádek.
První pokus s HR cisticem.
Problém: element HR zanechává v IE bílou mezeru (vertikální posun 5-10px). CSS řešení nenalezeno.

ŘEŠENÍ:
JAKO ČISTIČ POUŽÍT DIV. JE VŠAK NUTNO VYPNOUT FLOAT, protože HR není plovoucí prvek. Všechny DIV nastaveny jako plovoucí. DIV s clearem vypnout. Elegantní a lehké.

</body>
</html>
Radim24
Profil *
Tabulka pomoci DIV je vyresena a funguje skvele.

Při řešení hlavičky jsem ale narazil ještě na jeden problém - v Mozile. Můžete mi ještě pomoci? Díky

Jde o to, že mám opět "kostku" z DIV. Uvnitř je obrázek s logem. Ten potřebuji odsadit o 28 px zhora. Pouzil jsem padding-top:28px; IE funguje dle očekávání (28+y= celková výška 85 px;). Mozila mě šokovala tím, že vytvořila 28px margin zezhora a k tomu přičetla výšku, místo aby vytvořila padding uvnitř, udělala ho mimo dle vzorce (očekávaná výška 85px + 28px tloušťka okraje = 113px; tím se vytváří přesah, který vytváří velkou bílou mezeru v hlavičce (ostatní čtverce se posunou nahoru). Celé si to můžete představit na předchozím příkladu, který jsem odeslal.
.
Bubák
Profil
Nechápu, proč bych si měl odtud kopírovavat kód, ten upravit podle slovního popisu a ještě si vytvořit obrázek jen proto, abych mohl začít řešit zdarma tvůj problém.
Založ se stránky, třebas na volny.cz (není tam reklama), nebo na wz.cz (a reklamu nastav na první stránku nahoru) a na stránku s problémem odkazuj.
Jinak bych si tipnul, že jsi narazil na problematiku odlišných box-modelů, zkus třeba tohle (moje oblíbené, včetně Chrome, jen u Konqueroru 4.x si nejsem jistý, krerá deklarace zabere) přidat do CSS:
 * {-moz-box-sizing: border-box; /* pro Firefox */
-webkit-box-sizing: border-box; /* pro Safari a Chrome */
box-sizing: border-box; /* pro Operu */}

Dodatek: koukám, že jsem měl chybně CSS komentáře.
Radim24
Profil *
To Bubák:
Celé řešení jsem zaslal. Nic upravovat nemusíš. Ani obrázek. Pokud tě to nezajímá tak se o to nezajímej. Kod který jsem poslal naposled, staci zkopirovat vlozit do html kitu, a vidis, že to funguje. Za tvuj tip ohledně box modelů samozřejmě díky a hned se na to podívám.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: