problem sa float (i neocekivani bonus)

[nel`chee]

dakle, imam ovo:

Code:

<div class="outer"> <div class="inner"> <h4>name</h4> <p>tekst</p> <div class="footer"> <div><a href="mailto:email">e-mail</a></div> <div><a href="http://l">website</a></div> </div> </div> </div>

i ovaj css:

Code:

.outer { margin: auto; border: #fff 1px solid; } .inner { margin: 1em 1em; border: #000 1px dotted; } h4, .footer { background: #000; color: #fff; text-align: center; } .footer div { width: 50%; float: left; }

ovo pisem napamet pa sam mozda nesto izostavila, ali problem je slijedeci: kada nije namjesten float, sve je normalno. kada ima float, onda cijeli .footer div kao da izleti iz .inner (nalazi se izvan bordera), nema crne pozadine, cak i kad namjestim background: none. a treba mi taj float, sto mogu napravit da proradi? isto je u FF-u, IE6 i Operi 7

Last edited by nel`chee on 08.04.2005 17:33; edited 1 time in total

[PaNtHeR]

probaj 'vako:

Code:

<div class="outer">   <div class="inner">     <h4>name</h4>     <p>tekst</p>     <div class="footer">       <div><a href="mailto:email">e-mail</a></div>       <div><a href="http://l">website</a></div>     </div>     <div style="clear:both">&nbsp;</div>   </div> </div>

Stvar je u tome kad su divovi floatani ispadaju iz normal flowa pa ti ne povecavaju div u kojem se nalaze... Napravi si stil .afterfloat sa clear:both; jer bi ti mogao često trebat

[nel`chee]

ok hvala, djelomicno je rijesilo problem, sad je prave velicine ali ne prikazuje se crna pozadina a ne mogu svakom divu posebno dodijelit pozadinu jer sto ako budem htjela pozadinsku sliku? moglo bi je alignat na jednom left i na drugom right, ali to je pod uvjetom da cu u svim takvim boxevima koristiti dva floatana div-a, a to nije garantirano

[nel`chee]

http://wip.inobscuro.com/guestbook.html

[Sulien]

PaNtHeR wrote:

Napravi si stil .afterfloat sa clear:both; jer bi ti mogao često trebat

uh ja sam jako protiv toga

mislim ovdje je to donekle OK:
http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating (obavezno pročitati)
anne se nešto igra sa overflow (najčešće korišten CSS property za razne smicalice i hackove)
http://annevankesteren.nl/archives/2005/03/clearing-floats
my fav hack - http://www.positioniseverything.net/easyclearing.html - ružno izgleda u CSS-u ali ne treba dodatnih elemenata ili klasa u HTML-u i radi skroz oke mislim ima i protivnika ove metode, but hey... nema niti jedne savršene dok god ne počnemo svi koristit css kako se zaista spada

[nel`chee]

Sulien wrote:

PaNtHeR wrote: Napravi si stil .afterfloat sa clear:both; jer bi ti mogao često trebat uh ja sam jako protiv toga

zasto?

Sulien wrote:

mislim ovdje je to donekle OK: http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating (obavezno pročitati)

halo, pa covjek predlaze istu stvar

Code:

<div id="outer">   <div id="inner">     <div id="content">Content</div>     <div id="menu">Menu</div>     <div class="cleared">&nbsp;</div>   </div>   <div id="sidebar">Ads</div>   <div class="cleared">&nbsp;</div> </div>

Sulien wrote:

anne se nešto igra sa overflow (najčešće korišten CSS property za razne smicalice i hackove) http://annevankesteren.nl/archives/2005/03/clearing-floats

mmkay, trying it out as we speak
hmmm i dalje se ne prikazuje crna pozadina. crap.

Sulien wrote:

my fav hack - http://www.positioniseverything.net/easyclearing.html - ružno izgleda u CSS-u ali ne treba dodatnih elemenata ili klasa u HTML-u i radi skroz oke mislim ima i protivnika ove metode, but hey... nema niti jedne savršene dok god ne počnemo svi koristit css kako se zaista spada

ovaj je okej, ali hmm dobro chekirat cu kako radi...

[nel`chee]

ne vidi se pozadina!!!
dakle, nije mi vise problem floatanje nego sto se unatoc svemu pozadina ne prikazuje!

[nel`chee]

proradilo!!
dala sam taj :after h5, a ne div-u i eto sljaka... doduse pojavljuje se nekakav bijeli razmak na nekim mjestima, ali to cu valjda rijesit..

EDIT: hm, cini se da se taj razmak pojavljuje samo u FF-u

EDIT 2: jos veci hmmm, kopirala sam onaj jedan box na kojem je sve valjalo i izbrisala preostala dva, i sada sve stima. sve je super, samo mi nije jasno zasto. ali to valjda nije bitno.

thank you people

[nel`chee]

don't you just love this stuff?

http://web.vip.hr/nelchee.vip/slike/contact-screen.gif
isla sam sve moguce poduzet da mi u operi izgleda okej, i kad uspijem - sto dobijem? govno u ie-u i firefoxu.

Code:

.formtitle {display: block; width: 5.5em; float: left;} form div {margin: .2em .2em; clear: both;} select, input, textarea {    font-size: 70%;    padding-top: 0em;    padding-bottom: 0em;    padding-left: .3em;    padding-right: .3em;    font-family: "Trebuchet MS", "tahoma", verdana, arial, sans-serif;    border: #000000 solid;    border-width: 1px 1px 1px 1px;    background: #ccc; } input {line-height: 1.3em; height: 1.3em;} select, option {    padding: 0em 0em;    width: 13em;    background: #ccc; } textarea, .textfield {width: 250px;} .formtitle {font-weight: bold; font-size: 70%; line-height: 1.3em;}

khm evo evo html

Code:

<form action="' . $PHP_SELF . '" method="post" enctype="multipart/form-data">               <div>                   <label>                <span class="formtitle">name</span>                     <input name="name" class="textfield" type="text" value="' . $name . '" size="50" maxlength="50" />                </label>                </div>               <div>                   <label>                <span class="formtitle">e-mail</span>                     <input name="email" class="textfield" type="text" value="' . $email . '" size="50" maxlength="50" />                </label>                </div>               <div>               <label>                <span class="formtitle">website</span>                     <input name="website" class="textfield" type="text" value="' . $website . '" size="50" maxlength="50" />                </label>                </div>               <div>                   <label>                <span class="formtitle">subject</span>                     <input name="subject" class="textfield" type="text" value="' . $subject . '" size="50" maxlength="50" />                </label>                </div>               <div>                   <label>                <span class="formtitle">message</span>                     <textarea name="message" cols="50" rows="5" id="message">' . $message . '</textarea>                </label>                </div>               <div>                   <label>                <span class="formtitle">action</span>                <input type="hidden" name="ip" value="' . $_SERVER['REMOTE_ADDR'] . '" />                <input type="hidden" name="browser" value="' . $_SERVER['HTTP_USER_AGENT'] . '" />                     <input class="button" type="submit" name="send" value="Send" />                     <input class="button" type="reset" name="clear" value="Clear" />                </label>                </div>                 </form>

muci me to sto "naslovi" nisu lijepo vertikalno alignani, a IE i FF ignoriraju padding 0, izrazila ga ja u pixelima, emovima, za sve nula pa onda left i right, posebno top bottom left i right... tako da gumbi izgledaju jadno.