Avatar billede marzman Nybegynder
24. juni 2009 - 11:04 Der er 7 kommentarer

css Design: menu lige så lang som content

Hej Eksperter...

Jeg har tidligere lavet en del html og css og har nu brug for det igen... der er bare lige en ting jeg ikke kan huske hvordan man konstuerer i css.

Jeg vil godt have et design hvor jeg har en menu hvis højde tilpasser sig til højden af indholdet.

Løsningen kunne være at lave det i tabeller, men nej nej nej tabeller hører foretiden til!

Da menuen skal være i højre side går jeg ud fra jeg skal lave en float: right; på den.

content får en hvis højde udfra hvor stort indholdet nu er, men hvordan får jeg højden til at være den samme på den floatet menu?


Er godt klar over det er lidt uforståligt, men det er meget svært at forklare... :)
Avatar billede downunder Nybegynder
24. juni 2009 - 11:49 #1
Tja man kan gøre det på sådan en måde her.

index.html:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="indexcss.css">
</head>
<body>
<div id = "centerBack">
<div id = "grundven">
<center><h1>Sponsorer</h1></center>
adasd<br>dasd<br>das<br>Tlf:<br><br><br><br><br>
</div>
</div>
</body>
</html>

indexcss.css:

body
{
    background-color: #fff100;
    margin: 0% 0% 0% 0%;

}

#centerBack
{
    background-color: #008000;
    width: 70%;
    height:100%;

    position:absolute;
    top: 0%;
    left: 15%;
   

    border-right-width: 1px;   
    border-right-style: solid ;   
    border-right-color: black;

    border-left-width: 1px;   
    border-left-style: solid ;   
    border-left-color: black;

}



#topTekst
{
    color: #fff100;

    font-family: "Times New Roman", serif;
    font-style: italic;
    font-size: 200%;

    position:absolute;
    top:2%;
    left: 15%;
   
}




#topMenu
{
    background-color: #f0f0f0;

    height: 2%;
    width: 100%;

    position: absolute;
    top: 8%;
    left: 0%;

    padding:0% 0% 0% 1%;
    margin:0% 0% 0% 0%;
   
      list-style:none;


}
a.tmLink:link,a.tmLink:visited,a.tmLink:active
{

    color:#000000;
    background-color:transparent;
   
    border-left-width: 1px;   
    border-left-style: solid ;   
    border-left-color: transparent;
   
    border-right-width: 1px;   
    border-right-style: solid ;   
    border-right-color: transparent;

    padding:0% 1% 0% 1%;
    margin:0% 0% 0% 0%;

    text-decoration: none;


}
a.tmLink:hover
{
    background-color: #ddf0f0;
    color: #000000;



    padding:0% 1% 0% 1%;
    margin:0% 0% 0% 0%;

    border-left-width: 1px;   
    border-left-style: dotted ;   
    border-left-color: black;
   
    border-right-width: 1px;   
    border-right-style: dotted ;   
    border-right-color: black;
}
#grundven
{
    background-color: #f0f0f0;
   
    position: absolute;
    top:58%;
   
    Width: 30%;
    height:auto;


    padding:0% 0% 0% 2%;


}
Avatar billede marzman Nybegynder
24. juni 2009 - 11:51 #2
Posission absolute og så top:, left: nej det er holder sq ikke.. min side er centeret!
Avatar billede downunder Nybegynder
24. juni 2009 - 11:52 #3
Sorry du skal lige kigge lidt væk fra noget af det. her er en mulighed...

index.html:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="indexcss.css">
</head>
<body>
<div id = "centerBack">
<div id = "grundven">
<center><h1>Sponsorer</h1></center>
adasd<br>dasd<br>das<br>Tlf:<br><br><br><br><br>
</div>
</div>
</body>
</html>

indexcss.css:
body
{
    background-color: #fff100;
    margin: 0% 0% 0% 0%;
}

#centerBack
{
    background-color: #008000;
    width: 70%;
    height:100%;
    position:absolute;
    top: 0%;
    left: 15%;
    border-right-width: 1px;   
    border-right-style: solid ;   
    border-right-color: black;
    border-left-width: 1px;   
    border-left-style: solid ;   
    border-left-color: black;
}
#grundven
{
    background-color: #f0f0f0;   
    position: absolute;
    top:58%;   
    Width: 30%;
    height:auto;
    padding:0% 0% 0% 2%;


}
Avatar billede downunder Nybegynder
24. juni 2009 - 11:58 #4
har du prøvet det her,,,?
Avatar billede marzman Nybegynder
24. juni 2009 - 12:56 #5
Jeg tror slet ikke du har forstået opgaven rigtigt. jeg har nu prøvet at smide det ind og der ser ikke ud til det ligner noget jeg kan bruge desværre...
Men se det her screenshot og se om det kan hjælpe lidt med forståelsen.
http://it4000.dk/web/shot.jpg

Som du kan se vil jeg have min menu (som er float: right) til at gå lige så langt ned som indholdet i den <div> der er til venstre.

Forstod det det anderledes nu?
Avatar billede marzman Nybegynder
24. juni 2009 - 13:19 #6
Har lige lavet eksemplet i tables hvis det skulle give en større forståelse...

http://it4000.dk/web
Avatar billede larsny Nybegynder
24. juni 2009 - 14:11 #7
hey,

jeg støder også selv tit på dette problem, og mig bekendt er der ikke en metode til at gøre dem lige store lige som en tabel.

det jeg plejer at gøre er at lave en div rundt om både menuen og indholdet. Den div giver jeg så den baggrundsfarve som menuen skal have og på den måde ser det så ud som om menuen er lige så høj som indholdet.

Håber det kan bruges
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