/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Absolute positionering + float
Fra : Thomas Møller Nexø


Dato : 19-08-06 23:14

Hejsa.

Kan det lade sig gøre at arbejde med både position : absolute på
fx. en top div, samt floate underliggende divs i dokumentet?

Lige nu ryger de underliggende divs op under toppen når jeg
forsøger dette, men måske har jeg overset noget.

Koden til mine divs er som følger:

#containerTop {
position : absolute;
background-color : #99CC99;
}

#topLeft {
float : left;
width : 36%;
padding : 2%;
background-color : #99CC99;
}

#topRight {
float : right;
width : 30%;
height : 100px;
padding : 0;
border-left : solid 1px #ffffff;
text-align : left;
color : #ffffff;
background-color : #CCFF99;
}

#topBottom {
width : 98%;
clear : both;
padding-right : 2%;
border-top : solid 1px #CCFF99;
text-align : right;
background-color : #000000;
color : #ffffff;
}

#contentLeft {
float : left;
width : 70%;
background-color : #CCFF99;
}

#contentRight {
float : right;
width : 28%;
padding : 0.5%;
padding-top : 1%;
background-color : #cccccc;
}

Ovenstående og nedenstående er en forenkling da der mangler nogle
divs, men bør vise strukturen på siden.

Min kildekode ser således ud:

<div id="containerTop">
<div id="topLeft">Noget tekst...</div>
<div id="topRight">Testing</div>
<div id="topBottom">Dette er en test</div>
</div>

<div id="contentLeft"></div>
<div id="contenRight"></div>

Jeg spørger fordi jeg gerne vil have placeret min top under de to
andre divs i selve kildekoden pga. optimering til søgemaskinerne,
men selvfølgelig stadig vil have toppen vist foroven.

Med venlig hilsen,
Thomas

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Jørgen Farum Jensen (20-08-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 20-08-06 11:30

Thomas Møller Nexø skrev:
> Hejsa.
>
> Kan det lade sig gøre at arbejde med både position : absolute på
> fx. en top div, samt floate underliggende divs i dokumentet?
>
> Lige nu ryger de underliggende divs op under toppen når jeg
> forsøger dette, men måske har jeg overset noget.
>
> Koden til mine divs er som følger:
>
> #containerTop {
> position : absolute;
> background-color : #99CC99;
> }
>
> #topLeft {
> float : left;
> width : 36%;
> padding : 2%;
> background-color : #99CC99;
> }
>
> #topRight {
> float : right;
> width : 30%;
> height : 100px;
> padding : 0;
> border-left : solid 1px #ffffff;
> text-align : left;
> color : #ffffff;
> background-color : #CCFF99;
> }
>
> #topBottom {
> width : 98%;
> clear : both;
> padding-right : 2%;
> border-top : solid 1px #CCFF99;
> text-align : right;
> background-color : #000000;
> color : #ffffff;
> }
>
> #contentLeft {
> float : left;
> width : 70%;
> background-color : #CCFF99;
> }
>
> #contentRight {
> float : right;
> width : 28%;
> padding : 0.5%;
> padding-top : 1%;
> background-color : #cccccc;
> }
>
> Ovenstående og nedenstående er en forenkling da der mangler nogle
> divs, men bør vise strukturen på siden.
>
> Min kildekode ser således ud:
>
> <div id="containerTop">
> <div id="topLeft">Noget tekst...</div>
> <div id="topRight">Testing</div>
> <div id="topBottom">Dette er en test</div>
> </div>
>
> <div id="contentLeft"></div>
> <div id="contenRight"></div>
>
> Jeg spørger fordi jeg gerne vil have placeret min top under de to
> andre divs i selve kildekoden pga. optimering til søgemaskinerne,
> men selvfølgelig stadig vil have toppen vist foroven.
>
> Med venlig hilsen,
> Thomas
>

Det er altid meget bedre med et link til en
side end noget kode i en posting.

Når det er sagt, ser det ud til, at
der er en ting, du har glemt:


Et absolut positioneret element er
uden for omløbet af de øvrige elementer
- det udgør et lag, der så at sige svæver
over siden. Dermed dækker dette lag
over sidens øvrige elementer, in casu
toppen af de to nederste elementer.

Det ville du tydeligt kunne se, hvis
du giver de to nederste elementer noget
indhold.

Remediet er naturligvis at afsætte noget
margin-top på sidens øvrige elementer.

I dette tilfælde gøres det lettest ved at
indføje endnu et element eller to:

<div id="wrapper">
<div id="contentLeft"></div>
<div id="contenRight"></div>
<div class="clear"></div>
</div>

Giv #wrapper-elementet en margin-top,
der er tilstrækkelig til at rumme
de elementer, du ønsker absolut
positioneret.

Clear'ing elementet er nødvendigt for at
skubbe bunden af #wrapper nedad
alt efter indholdet i den ene eller den
anden spalte.

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste