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
..