Avatar billede cronaldo Nybegynder
29. marts 2008 - 21:28 Der er 4 kommentarer og
1 løsning

Positionering efter height i stedet for med position

Kan det ikke lade sig gøre, at man ikke behøver regne ud hvad et elements position skal være alt efter det seneste elements position-top + height ..
Altså:
<style type="text/css">
.top {
position:absolute; top:6px;
height:113px;
}
.content {
position:absolute; top: 119px; (udregnet udfra position-top + height fra .top)
height:500px;
</style>
<div class="top"></div>
<div class="content"></div>

Kan det ikke gøres ved at den ene div (content) bare kommer automatisk efter den første (top), når denne har været(altså, at contents position automatisk bliver 119 uden at man skal skrive det)?
Avatar billede olebole Juniormester
29. marts 2008 - 21:35 #1
<ole>

Nej

/mvh
</bole>
Avatar billede olebole Juniormester
29. marts 2008 - 21:36 #2
- det er jo lige netop dét, der er hele forskellen på et absolut positioneret element og elementer, som følger flow'et  ;o)
Avatar billede cronaldo Nybegynder
29. marts 2008 - 21:57 #3
Hej ole .. Men hvad så hvis teksten er større end div'en med class="frame_content", vil det så ikke ødelægge designet, så vil "frame_content" jo overlappe "frame_bottom" når jeg har gjort på flg. måde:
INDEX.HTM
<html>
    <head>
        <title>Hej! :D</title>
        <link rel="stylesheet" href="style.css">
    </head>
   
    <body>
        <span class="main_table">
            <span class="frame_top">Toppen</span>
            <span class="frame_left">Venstre</span>
            <span class="frame_banner">Banneret</span>
            <span class="frame_right">Højre side</span>
            <span class="frame_menu_top">Menuen, i toppen.</span>
            <span class="frame_content">Indhold</span>
            <span class="frame_bottom">Bunden</span>
        </span>
    </body>
</html>







STYLE.CSS
body {
text-align: center;
margin-top:0px; margin-bottom:0px;
}

.main_table {
width: *;
height: 100%;
background-color: #342480;
text-align: left;
width:790px;
max-width:1000px;
}

.frame_top {
position: absolute; top:0px;
height: 50px;
width: 100%;
background-color: red;
}

.frame_banner {
position: relative; top:20px;
height: 75px;
background-color: green;
text-align: left;
}

.frame_menu_top {
position: relative; top:95px;
width: 140px;
background-color: blue;
height: *;
text-align: left;
}

.frame_left {
position: relative; top:115px;
width: 140px;
background-color: blue;
text-align: left;
}

.frame_content {
position: relative; top:115px; left: 140px;
width: *;
background-color: purple;
text-align: left;
}

.frame_right {
position: relative; top:115px; right:0px;
width: 140px;
background-color: black;
text-align: left;
}

.frame_bottom {
position: absolute; bottom: 0px;
width: 100%;
background-color: yellow;
text-align: left;
}
Avatar billede olebole Juniormester
30. marts 2008 - 00:33 #4
Hvilken DTD bruger du?
Avatar billede cronaldo Nybegynder
19. juni 2008 - 11:31 #5
HMM, LUKKER!
Hvis du vil have point skriver du bare lige olebole! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester