Det finns många olika metoder att välja då man ska placera något med hjälp av CSS.
Jag tänkte förespråka en absolut placering av ett element, i detta fallet min egen logotyp för nthdesign. Det kommer att vara en logotyp som ligger i en länkad <div>-taggs bakgrund.
Min hemsida består av en toppdel, som jag väljer att kalla header, samt min logotyp.
<div id="header">
<div id="logga">
<a href="http://www.nthdesign.se/"></a>
</div>
</div>
#header {
height: 185px;
width: 800px;
position:relative;
}
#logga a {
position:absolute;
left:510px;
top:80px;
width:247px;
height:64px;
background-image: url(../images_hp/Logga.png);
background-repeat: no-repeat;
background-position: left top;
}
Det viktiga är att få positioneringen relativ för header-elementet och absolut för logga-elementet. Detta gör att loggans position är absolut relativ till header. Varför? Jo, för att <div logga> ligger i <div header>.
Loggans position justeras av top- och leftparametrarna i CSS-koden.
Då det ligger en <a>-tagg i <div logga> måste CSS identiteten döpas till #logga a (ID för logga vid länkning). <a>-taggen gör också att <div logga>-elementet blir en länk.
Okej, va är poängen med relativ och absolut? Kommer alltid loggan att ligga på samma plts i header (absolut) och header justera sig relativt något som den taggen ligger i?
Ja, om du sätter header till relativ kommer du kunna sätta något element i header till absolut posistionering.
Dess postition kommer då att utgå från header.
Tror att du fattat rätt.
[...] Jag går igenom metoden här. [...]