Autor | Zpráva | ||
---|---|---|---|
Radim24 Profil * |
#1 · Zasláno: 28. 4. 2009, 17:17:08
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 |
#2 · Zasláno: 28. 4. 2009, 17:29:44
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 * |
#3 · Zasláno: 28. 4. 2009, 17:39:33
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 * |
#4 · Zasláno: 28. 4. 2009, 17:56:54
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 |
#5 · Zasláno: 28. 4. 2009, 18:04:45 · Upravil/a: Plaváček
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 * |
#6 · Zasláno: 29. 4. 2009, 09:03:42
Včera jsem si četl články o float (jen abych si to připomněl a nic nového jsem nezjistil)
|
||
radim24 Profil * |
#7 · Zasláno: 29. 4. 2009, 09:04:08
<!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 * |
#8 · Zasláno: 29. 4. 2009, 09:05:28
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 * |
#9 · Zasláno: 29. 4. 2009, 09:10:08
Třeba takhle:
<div class="cleaner"> </div> .cleaner { font-size: 0; line-height: 0; height: 0; clear: both; margin:0; padding: 0; } |
||
Radim24 Profil * |
#10 · Zasláno: 29. 4. 2009, 13:41:57
To cos napsal mi v IE nefunguje, v Mozille ano...
|
||
Radim24 Profil * |
#11 · Zasláno: 29. 4. 2009, 13:57:20
tady na tom prikladu ten clear left funguje:
http://interval.cz/clanky/trisloupcovy-plovouci-css-layout-s-relativnim-pozicovanim/ |
||
Radim24 Profil * |
#12 · Zasláno: 29. 4. 2009, 14:01:58
<!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 |
#13 · Zasláno: 29. 4. 2009, 17:46:25
Radim24
Dodej živou ukázku, ať víme, o čem se bavíme. |
||
Radim24 Profil * |
#14 · Zasláno: 30. 4. 2009, 08:17:34
Problém vyřešen, uvádím hotový příklad.
|
||
Radim24 Profil * |
#15 · Zasláno: 30. 4. 2009, 08:18:15
<!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 * |
#16 · Zasláno: 30. 4. 2009, 08:25:38
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 |
#17 · Zasláno: 30. 4. 2009, 09:08:00 · Upravil/a: Bubák
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 * |
#18 · Zasláno: 30. 4. 2009, 09:23:51
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. |
||
Časová prodleva: 16 let
|
0