Načrtovanje in razvoj spletnih aplikacij

Float

 

float

Z oblikovno lastnostjo float lahko element prestavimo na levi ali desni rob. Pri tako postavljenem elementu se vsebina drugih elementov odmika od njegovih robov. V tem se tudi razlikuje od absolutne postavitve, kjer se vsebina drugih elementov ne odmika.

Vrednost Pomen
left element je ob levem robu
right element je ob desnem robu
none običajna postavitev
inherit vrednost podeduje od nadrejenega elementa

<p><img src="obala.jpg" width="204" height="182" alt="Deklica na obali"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci 
quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum 
convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor 
tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt 
ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et 
magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus 
consectetur aliquam. Nulla facilisi.</p>
img {
  float: right;
  margin: 0 0 1em 1em;
}

Deklica na obaliLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus consectetur aliquam. Nulla facilisi.

clear

Pri uporabi lebdečih elementov, ki jih imamo postavljene ob levem ali desnem robu strani, lahko tekočo vrstico prestavimo za toliko navzdol, da na levi in/ali desni strani ne bo nobenega lebdečega elementa.

Vrednost Pomen
none dovolimo lebdeče elemente na obeh straneh
left na levi strani ne dovolimo lebdečih elementov
right na desni strani ne dovolimo lebdečih elementov
both na obeh straneh ne dovolimo lebdečih elementov
inherit vrednost podeduje od nadrejenega elementa

<img src="obala.jpg" width="204" height="182" alt="Deklica na obali"/>
<p class="ozadje">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci 
quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. 
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p> 
<p class="clear">Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat 
nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer 
tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse 
et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus 
consectetur aliquam. Nulla facilisi.</p>
img {
   float: right;
}

p.ozadje {
   background-color:#FCCC88;
}

p.clear {
   clear: both;
}
Deklica na obali

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus consectetur aliquam. Nulla facilisi.