Mala šola CSS-ja IV.: Float

CSS_sola_image“Float” je temeljni CSS atribut pri izdelovanju spletnih strani. Uporablja se pri izdelovanju “okostij” spletnih strani(templajtih) in pri pozicioniranju slik v besedilu. Atribut “Float” lahko ravnamo na levo ali desno stran elementa.

 

Primer uporabe v besedilu:

float:right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

float:right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 
Koda:


<div style="width: 450px; vertical-align: top;">
<div style="border: 5px solid #ff7e00; float: right; width: 100px; height: 100px; background-color: #cccccc; margin-left: 20px; margin-bottom: 10px;">float:right</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div style="border: 5px solid #ff7e00; float: left; width: 100px; height: 100px; background-color: #cccccc; margin-right: 20px; margin-bottom: 10px;">float:right</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

 

Primer uporabe za templajte:

GLAVA
NAVIGACIJA
VSEBINA
NOGA

 
Koda:

<div style="border: 5px solid #ff7e00; width: 450px; background-color: #cccccc; text-align: center; margin-bottom: 10px;">GLAVA</div>
<div style="border: 5px solid #ff7e00; width: 150px; background-color: #cccccc; float: left; margin-bottom: 10px;">NAVIGACIJA</div>
<div style="border: 5px solid #ff7e00; width: 280px; background-color: #cccccc; float: left; margin-bottom: 10px; margin-left: 10px;">VSEBINA</div>
<div style="border: 5px solid #ff7e00; width: 450px; background-color: #cccccc; text-align: center; margin-bottom: 10px; clear: both;">NOGA</div>

 

Nekateri elementi se raztegnejo na 100% širine, zato naš element “skoči” pod njega. Zaradi tega je potrebno DIV polje z float značko postaviti pred ta element. Pri postavitvi templajtov pa uporabljamo za takšne elemnte še dodatno DIV polje, ki ima dodatna atributa “float: left” in fiksno širino. Tako se elementa poravnata v isto linijo.

IE6 lahko povzroča težave pri “marginu”, zato se uporablja dodatna značka “display: inline”.

Komentiraj


*