Jak z externího souboru styl.css pozicovat v html
Mám obrázek pozicovaný v html dokumentu.
<span style="position:absolute; top:40px; left:100px;"><img src=1.jpg alt="obr"></span> ale jelikož mám těch "span" více, nelíbí se to síle webu. Vytvořil jsem soubor styl.css a z html na něj odkazuji <link rel="stylesheet" type="text/css" href="styl.css">.
Ale nevím co mám zadat do styl.css aby se obrázek zobrazil na tom samém místě a nemusel jsem používat "span". Díky za každou radu
nejlepší je, dát tomu obrázku třídu (class), nastylovat onu class v externím css a pak už pouze psád do kódu to class. Příklad:
styl.css
.nejlepsijeporadnanet {
position: relative;
top: 111px;
border: 5px solid red;
}
a v souboru pak jen
<img class="nejlepsijeporadnanet" src="1.jpg" alt="1.jpg" title="Pier Fernet obraz Papoušek špejlující jitrnice">
Ono to jde i jinak jsou tu moznosti taky jako je float: left; a pak je tu margin-top bottom, left, right a padding tema se da delat taky zazraky a nejen plus ale i minus hodnoty, jen zalezi na pozici, umistneni a velikosti.
Jo tu marginy jsou mé oblíbené pozicování. Jiné skoro nepoužívám (málokdy). Kdybych to dělal pro sebe, udělám to třeba takto:
.nejlepsijeporadnanet {
float: left;
margin: 222px 11px 11px 144px;
border: 5px solid red;
}
a ještě bych to dal do <div>
Jenomže když to udělam
.nejlepsijeporadnanet {
position: relative;
top: 111px;
border: 5px solid red;
}
a v souboru pak jen
<img class="nejlepsijeporadnanet" src="1.jpg" alt="1.jpg" title="Pier Fernet obraz Papoušek špejlující jitrnice">
Tak se mi to zobrazuje v každém prohlížeči jinak, jenom v IE je to dobré, ale v ostatních je to rozházené.
mozna jsem mimo, ale mas korektni html?
Mrkni na mody-prohlizecu.html . Std. bez doctype IE jede v Quirk modu, ostatni ve standardnim modu. Kazdy z modu pocita velikosti jinak...
Jednak záleží na doctype jak píše kolega, druhak je dobré dělat u toho "vůle", třeťak, dát to třeba do toho <div>, čtvrťak mám za to, že zrovna IE zobrazuje to pozicování (relative/absolute) úplně jinak než například FF.
Zkus to vyladit těmi float a marginy. Muselo by se to samozřejmě vidět.