« 1 2 »
Autor Zpráva
Keilew
Profil
#1 · Zasláno: 5. 4. 2007, 22:23:29
Odpovědět Citovat
Ahoj, můžete mi někdo říct, co tam mám ještě přidat, aby se hr skutečně ztratila? Sice není přímo vidět, ale stále zabírá místo: 

hr.cleaner {

border: 0; 

margin: 0px; 

margin-top: -100px; /* to už je recese... */

padding: 0px;  

clear: both; 

height: 0px; 

line-height: 0px; 

font-size: 0px; 

visibility: hidden;

}

Je to určitě 100x omleté téma, ale Google se se mnou dneska nechce kamarádit a nabízí samé OT...
Petr Tichý
Profil
#2 · Zasláno: 5. 4. 2007, 22:37:55
Odpovědět Citovat
A co třeba:

hr.cleaner { display: none; }
habendorf
Profil
#3 · Zasláno: 5. 4. 2007, 22:44:45
Odpovědět Citovat
Petr Tichý: krapet blbost :o)

To by moc neclearovalo.
Petr Tichý
Profil
#4 · Zasláno: 5. 4. 2007, 23:02:25
Odpovědět Citovat
Heh, já to v nadpisu přehlédl a v obsahu o tom nebyla ani zmínka. V tom případě bych to obalil <div>em, který by clearoval :o) (ale to není řešení tvého problému)
Zdeněk Košťál
Profil
#5 · Zasláno: 5. 4. 2007, 23:11:17
Odpovědět Citovat
Přidat tam div znamená vystavit se riziku, že si pro vás přijde Lukáš Havrlant s kosou v ruce...
habendorf
Profil
#6 · Zasláno: 5. 4. 2007, 23:48:39
Odpovědět Citovat
Keilew

display:block;
margin:-8px 0;

Třeba.
Keilew
Profil
#7 · Zasláno: 6. 4. 2007, 09:49:57 · Upravil/a: Keilew
Odpovědět Citovat
habendorf

A já si celou dobu myslel, že hr je blokový element. Navíc v MSIE 6 ten margin zabírá jen pro margin-top: -8px; Na bottom nereaguje správně (užírá obsah pod sebou, nikoli sebe sama).

Petr Tichý
clear: both je snad dostatečná zmínka:-) A ten div navrch - to by asi šlo, ale že by to bylo kdovíjak pěkné řešení, to asi ne:-) Já bych přecejen radši řešení se samotným hr.
Keilew
Profil
#8 · Zasláno: 6. 4. 2007, 10:47:49
Odpovědět Citovat
Petr Tichý

Zatím jediné funkční řešení, ale fakt se mi nelíbí: 

div.cleaner {

  height: 0;

  clear: both;

}



hr {

  display: none;

}
Petr Tichý
Profil
#9 · Zasláno: 6. 4. 2007, 11:30:17
Odpovědět Citovat
Keilew
Pěkné není, skoro prázdný div není nikdy pěkný. Nicméně v knize hotová řešení je použita neviditelná čára obalená divem s nulovou výškou + vlastnost content nastavená na jednu mezeru. Úplně prázdný div prý není stoprocentně spolehlivý, takže tam někdo zase vkládá tvrdou mezeru.

Zřejmě ať si každý používá co se mu líbí.
Keilew
Profil
#10 · Zasláno: 6. 4. 2007, 11:34:55
Odpovědět Citovat
Petr Tichý
No a když je obsahem <hr />, ač má display:none, to by mohlo stačit, nebo ne?
Petr Tichý
Profil
#11 · Zasláno: 6. 4. 2007, 11:41:43
Odpovědět Citovat
Keilew
Na to se musíš zeptat profíků, ale já myslím, že prázdý <div> a <div> s <hr />, které má display: none, je to samé a v nějakých verzích prohlížečů se to nechová správně. Nicméně jsem to již nejednou použil přesně takto.
habendorf
Profil
#12 · Zasláno: 6. 4. 2007, 21:50:32
Odpovědět Citovat
Když jsem dříve používal pro clearování div, dával jsem do něj vždycky nbsp. Teď v drtivé většině používám <br />.
habendorf
Profil
#13 · Zasláno: 6. 4. 2007, 21:54:00
Odpovědět Citovat
Jo a když tam chci ještě neviditelnou čáru, vůbec se nestydím dát tam <hr /><br />.

br {fotn-size:0;line-height:0;height:0;clear:both;}
hr {display:none;}

Rozhodně lepší než obalovat hr do divu.
Keilew
Profil
#14 · Zasláno: 7. 4. 2007, 00:10:37 · Upravil/a: Keilew
Odpovědět Citovat
habendorf

+ display: block pro br samozřejmě...

A zdá se, že to produkuje v IE6 i 7 "gilotinu"...
stnly
Profil
#15 · Zasláno: 7. 4. 2007, 10:26:39
Odpovědět Citovat
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=36 159&page=0#12
habendorf
Profil
#16 · Zasláno: 7. 4. 2007, 11:21:39
Odpovědět Citovat
Keilew:

+ display: block pro br samozřejmě...
Ne, žádný display:block.

A zdá se, že to produkuje v IE6 i 7 "gilotinu"...
Neprodukuje.
Keilew
Profil
#17 · Zasláno: 7. 4. 2007, 11:31:56
Odpovědět Citovat
stnly
Co jsem zatím vyzkoumal, tak problém je v tom, že na toto řešení se špatně tváří Opera 9.1. Pokud se "vyhackuje" jen pro všechny MSIE, tak je funkční.
habendorf
Profil
#18 · Zasláno: 7. 4. 2007, 11:36:27
Odpovědět Citovat
No a než nějaké hackování už mi opravdu jednodušší přijde se s tím nemazlit a bouchnout tam <hr /><br />. Ale uznávám, je to věc názoru.
Keilew
Profil
#19 · Zasláno: 7. 4. 2007, 11:39:13
Odpovědět Citovat
habendorf
Bez display:block to produkuje jeden řádek prázdnýho místa navíc ve FF.
Gilotinu to produkuje v MSIE ať je tam display nebo ne. Ale zatím z neznámých důvodů...
habendorf
Profil
#20 · Zasláno: 7. 4. 2007, 11:55:34
Odpovědět Citovat
Bez display:block to produkuje jeden řádek prázdnýho místa navíc ve FF.
Jen za určitých okolností, jimž lse předejít.

Gilotinu to produkuje v MSIE ať je tam display nebo ne. Ale zatím z neznámých důvodů...
Tu ti způsobuje něco jiného.

Ono je to celé věcí širší filosofie přístupu ke kódování. Já se třeba kdykoliv to jde (což je téměř vždy) vyhýbám tomu, aby mi sousedily floatované a nefloatované boxy. Prostě ten layout řeším dopředu tak, aby problémy nevznikaly a mám svatý klid :o)

Nechci aby to znělo nějak nabubřele, ale tohle je věc určité zkušenosti, ke které nelze dojít studiem, pouze praxí.
Keilew
Profil
#21 · Zasláno: 7. 4. 2007, 12:18:40
Odpovědět Citovat
habendorf

Takže vedle float:left na zbytek místa hodíš float:right, jestli dobře chápu, co píšeš. Takhle jsem to taky řešil, ale přišlo mi hezčí floatovat jen to, co opravdu chci... ale to bude spíš o tom, dělat to tak, aby to fungovalo a nedělalo problémy:-)
habendorf
Profil
#22 · Zasláno: 7. 4. 2007, 12:30:32
Odpovědět Citovat
Takže vedle float:left na zbytek místa hodíš float:right

Nebo left, to je celkem fuk.
stnly
Profil
#23 · Zasláno: 7. 4. 2007, 13:20:02
Odpovědět Citovat
A co nastavit pro ie predchozim prvkum margin-bottom: -15, jak rikal Dero.
Co myslite tou gilotinou? 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="description" content="">

  <title></title>

  <style type="text/css">

    body {

      background-color: #fff;

      font: 100%/1.3 sans-serif;

      color: #000;

      padding: 1em;

    }

    * {margin: 0; padding: 0;}

    #main {

      background-color: #f00;

    }

    #left, #right {

      float: left;

      width: 50%;

      _margin-bottom: -15px;

      background-color: #ffc;

    }

    #right {background-color: #cff;}

    #rightin, #leftin {padding: 2em;}

    .cleaner {

      height: 0;

      border: 0;

      clear: both;

      visibility: hidden;

    }

  </style>

  </head>

  <body>

    <div id="main">

      <div id="left">

      <div id="leftin">

        <p>Lorem ipsum dolor sit amet consectetuer Sed ut ullamcorper consectetuer volutpat. Turpis vel est nulla nibh convallis ac Curabitur Ut felis vel. </p>

        <p>Eu feugiat et mus tincidunt pellentesque fames Pellentesque egestas leo mattis. Ornare tellus Vivamus Quisque sed scelerisque eros Curabitur laoreet et ante. </p>

        <p>Sed Curabitur condimentum Phasellus quis pede Morbi malesuada et justo Nam. </p>

      </div>

      </div>

      <div id="right">

      <div id="rightin">

      <p>Lorem ipsum dolor sit amet consectetuer Vestibulum Curabitur volutpat et Maecenas. Mauris at et magna vitae Pellentesque orci sem mauris et ligula. Praesent elit quis wisi nisl sollicitudin consectetuer auctor amet ridiculus id. </p>

      <p>Volutpat ipsum Integer et Nam sed dignissim pretium id nunc leo. Ut malesuada augue odio urna augue nibh tempor magna congue a. </p>

      </div>

      </div>

      <hr class="cleaner">

    </div>

</body>

</html>
habendorf
Profil
#24 · Zasláno: 7. 4. 2007, 14:03:00
Odpovědět Citovat
Co myslite tou gilotinou?

http://www.google.cz/search?hl=cs&q=guillotine+bug&btnG=Hledat&lr=
stnly
Profil
#25 · Zasláno: 7. 4. 2007, 14:27:53
Odpovědět Citovat
Hmm, to by me zajimalo, co sem to do toho Googlu psal, kdyz sem ho hledal :-)
Zajimavej bug, i kdyz v praxi sem se s nim jeste nikdy nesetkal (ani mi to neprijde, jako moc casta konstrukce), ale ted uz budu alespon pripravenej. dik
Keilew
Profil
#26 · Zasláno: 7. 4. 2007, 14:43:27
Odpovědět Citovat
stnly

V tom kódu bych dal místo podtržítka hvězdičku, ať na to může i IE 7, kde to taky funguje blbě, to hr. Jinak jak jsem psal výše. S hackem použitelné.
stnly
Profil
#27 · Zasláno: 7. 4. 2007, 14:56:45 · Upravil/a: stnly
Odpovědět Citovat
Vidis, to mi nedoslo, nebo nejlip podminenej komentar. A nemusis hackovat a Opera se taky tvari dobre.
Keilew
Profil
#28 · Zasláno: 7. 4. 2007, 16:48:04
Odpovědět Citovat
Mě Opera právě ukradla těch 15px z obalovýho elementu. Podmíněné komentáře jsou pěkná věc, ale dělám je jen u komerčních projektů:-)
Keilew
Profil
#29 · Zasláno: 7. 4. 2007, 16:51:38
Odpovědět Citovat
...bez podtržítka samozřejmě. FF neukradne nic...zajímavé...
stnly
Profil
#30 · Zasláno: 7. 4. 2007, 18:28:50
Odpovědět Citovat
Bez podtrzitka mi krade jak Opera tak FF 2.
Bez rozdilny deklarace to podle me resitelny nebude, IE proste bere hr ze systemu, takze jeji rozmery prohlizecem nezmenime, tim padem ji muzeme odstranit jenom prez predchozi prvek.
Téma pokračuje na další straně.
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.

0