CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

system_slayer Nybegynder

29. september 2010 - 15:33 Der er 8 kommentarer og
1 løsning

Div height

Jeg ved godt alle har det her problem, men synes ikke rigtig jeg kan finde en løsning.

Jeg har følgende:

<div id="container">
<div id="menu"></div>
<div id="indhold"></div
</div>

Det vil jeg gerne ha vist så #menu altid er lige så lang som #indhold.

Så hvis #indhold er 300px høj vil jeg gerne have #menu til at følge med selvom der ikke er indhold til det.

-------------------
| menu | indhold |
| | indhold |
| | indhold |
| | indhold |
| | indhold |
| | indhold |
-------------------

Jeg kan kun få menu til at holde en fast højde, eller 100% af det indhold der er i boksen.

-------------------
| menu | indhold |
-------| indhold |
| indhold |
| indhold |
| indhold |
| indhold |
------------

Nogen der ved hvordan dette gøres?

Synes godt om

system_slayer Nybegynder

29. september 2010 - 15:34 #1

Mine små tegninger lykkedes ikke lige så godt, men håber i forstår meningen.

Synes godt om

showsource Seniormester

29. september 2010 - 16:13 #2

Vil mene du skal bruge noget javascript, medmindre du sætter en fast højde.

Synes godt om

Slettet bruger

29. september 2010 - 16:27 #3

Er der en årsag til at du vil lave det som divs og ikke lister?

Synes godt om

aners Nybegynder

29. september 2010 - 17:45 #4

Kan du ikke lige lave en tegning af hvad du mener? Din ASCII-art bliver som du selv nævner ødelagt.

Synes godt om

Slettet bruger

29. september 2010 - 19:26 #5

Er det noget i den her stil du er ude efter?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
.menu{
margin:0px;
padding:0px;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
width:100px;
}
.menu li a{
background:#333333;
color:#cccccc;
display:block;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 ;
color:#FFFFFF;
text-decoration:none;
}
.menu li .products{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
margin-left:-100px;
padding-left:100px;

}
.menu li .faq{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
margin-left:-200px;
padding-left:200px;
}
.menu li:hover ul{
display:block;

}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 ;
border:0px;
color:#ffffff;
text-decoration:none;
}
</style>
</head>
<body>
<br>
<br>
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul class="products">
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul class="faq">
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</body>
</html>

Synes godt om

system_slayer Nybegynder

10. november 2010 - 09:27 #6

Mange tak for forslaget aalandriel..

Men det er desværre ik' helt det jeg har brug for...

Problemet er at jeg gerne vil lave en menu der er vertikal, som ligger ved siden af mit indhold.

<div id="menu"></div>
<div id="indhold"></div>

Hvis menu-div kun har indhold til at gøre den 100px høj og indhold-div har indhold til den er 200px høj, skal menu-div også blive 200px høj.

Det skal virker som om menu-div har height="100%" i forhold til dens parent.

Ved ik om det overhovedet giver mening...

Men ja javascript eller tables er sikkert den eneste måde man kan få det til at virke på..

Synes godt om

Slettet bruger

10. november 2010 - 10:28 #7

Lad mig lige se om jeg har forstået det korrekt.

Du vil gerne have en menu, der tilpasses i højden automatisk i forhold til den menu med flest punkter og alle menu punkter skal være vist hele tiden?

Synes godt om

system_slayer Nybegynder

10. november 2010 - 14:33 #8

Ja det lyder meget rigtigt..

Jeg har lavet en hurtig tegning af hvad jeg mener:
http://rapidshare.com/files/429963736/eksperten_forklaring.jpg

Boksen til højre skal styre højde af menuen til venstre.

Synes godt om

system_slayer Nybegynder

07. august 2012 - 15:17 #9

jeg afslutter lige :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS