div zelfde grote aanemen van de andere

carlo boy7 · 16 mrt 2010

hallo, ik ben bezig met een website, en alles ging goed behalven het uitelijk

Ik heb al op het forum gekeken maar niks gevonden wel wat maar daarmee was mijn vraag niet beandwoord.

Ik heb 3 divs naast elkaar die alle drie in een div staan. De hele pagina is opgebouwd in % en wel eigenlijk daarin blijven.
Maar in de linker en rechte div is een menu, als ik nu in het midden (waar de tekst komt) veel tekst zet zou ik graag willen dat de linker en rechter div die lengte ook krijgen.

Ik krijg het niet voor elkaar, kunnen jullie mee helpen?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" >
body
{
	background-image:url(achtergrond.jpg);
	color:#FFC;
}
a
{
	color:#FF6;
	text-decoration: none; 
}
hr
{
	color: #F00;
}
#header
{
	border: 2px outset #800;
    border-color: #800 #800 #800 #800;
	background-color:#000;
	position:absolute;
	left:10%;
	width:80%;
	height: 100px;

}
#content
{
	height:80%;
	width:80%;
	position:absolute;
	top: 125px;
	background-color:#F00;
	left:10%;
}
#links
{
	border: 2px outset #800;
    border-color: #800 #800 #800 #800;
	background-color:#000;
	position:absolute;
	width:9%;
	top: 125px;

}
#midden
{
	border: 2px outset #800;
    border-color: #800 #800 #800 #800;
	background-color:#000;
	position:absolute;
	left:20%;
	width:59%;


}
#rechts
{
	border: 2px outset #800;
    border-color: #800 #800 #800 #800;
	background-color:#000;
	position:absolute;
	left:80%;
	width:10%;
    overflow-y:auto;


}
#laag
{
	position:absolute;
	width: 100%;
	font-variant:normal;
}
.header1
{
	height: auto;
	width: 50%;
	float: left; 	
}
.header2
{
  width: 50%; 
  margin-left: 50%;  
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>

<body>
<div id="header"><div class="header1"><img src="logo.png" width="507" height="97" style="width: 100%"/></div>

<div class="header2">rechts </div>
</div>
<div id="content">
    <div id="links"><img src="knop/menu.png" style="width: 100%" /></div>
    <div id="rechts"><img src="knop/forum.png" style="width: 100%" /><br />
      <img src="knop/help.png" style="width: 100%" /> <br />
      <img src="knop/registreer.png" style="width: 100%" /> <br />
      <img src="knop/login.png" style="width: 100%" /> <br />
      <img src="knop/clan.png" style="width: 100%" /> <br />
      <img src="knop/links.png" style="width: 100%" /> <br />
    </div>
    <div id="midden">tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
    tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst</div>
</div>
<div id="laag"><center> <script language="JavaScript"> copyright=new Date(); update=copyright.getYear(); document.write("Copyright © 2009-2"+ update + "    rs-help.nl    All rights Reserved."); </script><noscript>Copyright © 2009rs-help.nl    All rights Reserved</noscript><center/></div>
</body>
</html>

alvast bedankt

Naarling · 17 mrt 2010

Beetje te laat om nog grondig te gaan testen maar als je de container en de midenste div position:relative; meegeeft dan rekt de container netjes mee met het middenstuk en krijg je dus twee rode balken aan de zijkanten (dan nog wel even de height op 100% zetten)

vreugde · 17 mrt 2010

Naarling zei:
...
position:relative;
...

Kleine rectificatie, Carlo Boy7 wilt alles in procenten houden en dus geen pixels. Wat er gebeurt bij "position:relative", is er relatief een aantal pixels wordt bij geteld en je dus geen "px" in je CSS zet. Het procent teken overschrijft deze regel van CSS en is dus overbodig.

CSS position
Bijvoorbeeld:
Je wilt 20 pixels aan de linkerkant bij zetten dan kan je met position:relative het volgende doen:

Code:

postion:relative;
left:20;

i.p.v.

Code:

left:20px;

Dus dit heeft er niets mee te maken. Wel kan je de height op 100% zetten en misschien gebruik maken van float maar durf ik niet te zeggen of dit helpt, dit zou je dan moeten testen

groeten vreugde

carlo boy7 · 17 mrt 2010

Ik heb het opgelost om de body een achtergrond te geven die wordt herhaald.
Dan lijkt het net als de div ziet, maar in feiten zie je de achtergrond

http://www.flashfocus.nl/forum/showthread.php?t=9273

div zelfde grote aanemen van de andere

carlo boy7

Gebruiker

Naarling

Terugkerende gebruiker

vreugde

Gebruiker

carlo boy7

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy