roosje1996
Gebruiker
- Lid geworden
- 7 feb 2007
- Berichten
- 18
Hoi,
Ik heb wederom een probleem en ik hoop dat iemand hier weet hoe ik dit kan oplossen;
Ik heb een website gebouwd die bestaat uit een apdiv links en een apdiv rechts.
Links met een constante foto die meerekt met het venster. Dus altijd even hoog moet zijn als de grootte van dat venster.
Trek je het venster groter, wordt de foto ook groter.
Rechts is met de navigatie, logo en tekst.
Nu wil bij een aantal pagina's de tekst zo lang zijn dat er dan links een balk met ruimte komt onder de linker apdiv.
Dit is natuurlijk niet de bedoeling. Ik heb de linkerdiv op 100% hoogte gezet evenals de image die hierin staat.
Toch komt er dus een balk met ruimte wanneer de tekst te lang wordt voor het venster.
Hoe kan ik dit verhelpen?
Hieronder de code van een van de pagina's... Meer tips zijn altijd welkom!!!
Ik heb wederom een probleem en ik hoop dat iemand hier weet hoe ik dit kan oplossen;
Ik heb een website gebouwd die bestaat uit een apdiv links en een apdiv rechts.
Links met een constante foto die meerekt met het venster. Dus altijd even hoog moet zijn als de grootte van dat venster.
Trek je het venster groter, wordt de foto ook groter.
Rechts is met de navigatie, logo en tekst.
Nu wil bij een aantal pagina's de tekst zo lang zijn dat er dan links een balk met ruimte komt onder de linker apdiv.
Dit is natuurlijk niet de bedoeling. Ik heb de linkerdiv op 100% hoogte gezet evenals de image die hierin staat.
Toch komt er dus een balk met ruimte wanneer de tekst te lang wordt voor het venster.
Hoe kan ik dit verhelpen?
Hieronder de code van een van de pagina's... Meer tips zijn altijd welkom!!!
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"><!-- InstanceBegin template="/Templates/proef float-def.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Allure Couture | Rosa Clará</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
-->
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
#floatleft {
position:absolute;
left:0;
top:0;
height:100%;
z-index:1;
background-color: #000;
float: left;
overflow: visible;
}
#floatright {
position:absolute;
left:50%;
top:0;
width:500px;
height:900px;
z-index:2;
float: left;
background-color: #000;
}
#logo {
position:absolute;
width:90%;
z-index:1000;
height: 79px;
text-align: center;
top: 35px;
float: left;
left: 5%;
text-decoration: none;
border: none;
margin-right: 5%;
}
#menucontainer {
position:absolute;
width:301px;
z-index:2;
top: 105px;
height: 228px;
text-align: center;
padding-left: 40%;
}
#apdivaccessoires {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 112px;
}
#apdivallure {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 20px;
}
#apdivbook {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 156px;
}
#apdivbruiden {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 134px;
}
#apdivcontact {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 200px;
}
#apdivdress {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 178px;
}
#apdivhome { position:absolute;
width:200px;
height:20px;
z-index:4;
top: 3px;
}
#apdivnieuws {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 90px;
}
#apdivrosaclara {
position:absolute;
width:200px;
height:20px;
z-index:4;
top: 42px;
}
#bodycontainer {
position:relative;
z-index:3;
top: 335px;
width: 90%;
left: 5%;
height: 550px;
overflow: hidden;
visibility: inherit;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.kopgrootgrijs {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #333;
text-decoration: none;
font-weight: bold;
font-variant: normal;
text-transform: none;
font-style: normal;
line-height: normal;
}
.bodytekstwit {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFF;
text-decoration: none;
text-align: left;
}
.linkgrijs {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #666;
text-decoration: none;
}
.kopnieuwgrijs {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #333;
text-decoration: none;
}
body {
background-color: #000;
}
#apdivcollectie {
position:absolute;
width:200px;
height:20px;
z-index:3;
top: 66px;
}
.formgrijs {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #333;
text-decoration: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
#apDiv1 {
position:absolute;
width:200px;
height:20px;
z-index:3;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#000000" link="#000000" vlink="#000000" alink="#000000" onload="MM_preloadImages('images/lallurecouture-hover.jpg','images/lrosaclara-hover.jpg','images/laccessoirehover.jpg','images/lnieuwshover.jpg','images/linkcontacthover.jpg','images/linkthedresshover.jpg','images/linkbookhover.jpg','images/linkbruidenhover.jpg','images/linkcollectiehover.jpg','images/linkhomehover.jpg')">
<!-- InstanceBeginEditable name="floatlinks" -->
<div id="floatleft"><img src="images/allure1024.jpg" alt="bruid" height="100%" /></div>
<!-- InstanceEndEditable -->
<div id="floatright">
<div id="logo"><a href="index.html"><img src="images/logogroot.jpg" width="100%" alt="logo" /></a></div>
<div id="menucontainer">
<div id="apdivallure"><a href="allurecouture.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding4','','images/lallurecouture-hover.jpg',1)"><img src="images/lallurecouture.jpg" alt="" name="Afbeelding4" width="96" height="12" border="0" id="Afbeelding4" /></a></div>
<div id="apDiv1"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home button','','images/linkhomehover.jpg',1)"><img src="images/linkhome.jpg" name="home button" width="37" height="12" border="0" id="home button" /></a></div>
<p><br />
</p>
<div id="apdivrosaclara"><a href="rosaclara.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding5','','images/lrosaclara-hover.jpg',1)"><img src="images/lrosaclara.jpg" alt="" name="Afbeelding5" width="72" height="12" border="0" id="Afbeelding5" /></a></div>
<div id="apdivcollectie"><a href="collectie.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('link collectie','','images/linkcollectiehover.jpg',1)"><img src="images/linkcollectie.jpg" name="link collectie" width="59" height="13" border="0" id="link collectie" /></a></div>
<p><br />
</p>
<div id="apdivnieuws"><a href="accessoires.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding6','','images/laccessoirehover.jpg',1)"><img src="images/laccessoire.jpg" alt="" name="Afbeelding6" width="77" height="12" border="0" id="Afbeelding6" /></a></div>
<div id="apdivaccessoires"><a href="nieuws.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding7','','images/lnieuwshover.jpg',1)"><img src="images/lnieuws.jpg" alt="" name="Afbeelding7" width="49" height="12" border="0" id="Afbeelding7" /></a></div>
<div id="apDivbruiden"></div>
<div id="apdivcontact"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding11','','images/linkcontacthover.jpg',1)"><img src="images/linkcontact.jpg" alt="" name="Afbeelding11" width="51" height="12" border="0" id="Afbeelding11" /></a></div>
<div id="apdivdress"><a href="thedress.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding10','','images/linkthedresshover.jpg',1)"><img src="images/linkthedress.jpg" alt="" name="Afbeelding10" width="64" height="12" border="0" id="Afbeelding10" /></a></div>
<div id="apdivbook"><a href="blackbook.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding9','','images/linkbookhover.jpg',1)"><img src="images/linkbook.jpg" alt="" name="Afbeelding9" width="107" height="12" border="0" id="Afbeelding9" /></a></div>
<div id="apdivbruiden"><a href="bruidenallure.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding8','','images/linkbruidenhover.jpg',1)"><img src="images/linkbruiden.jpg" alt="" name="Afbeelding8" width="122" height="12" border="0" id="Afbeelding8" /></a></div>
</div>
<!-- InstanceBeginEditable name="bodycontainer" -->
<div class="kopgrootgrijs" id="bodycontainer">
<p><span class="kopnieuwgrijs">ALLURECOUTURE</span></p>
<p class="MsoNormal"><span class="bodytekstwit">AllureCouture begon tien jaar geleden als eerste in Nederland met het Spaanse merk </span><a href="rosaclara.html"><span class="linkgrijs">Rosa Clará</span></a><span class="bodytekstwit"> en heeft sindsdien heel wat stijlvolle vrouwen laten schitteren op die ene speciale dag. Met de grootste </span><a href="collectie.html"><span class="linkgrijs">collectie</span></a><span class="bodytekstwit"> in Nederland, zal je bij AllureCouture zeker slagen voor een bruidsjurk van Rosa Clará.</span></p>
<p class="MsoNormal"><span class="bodytekstwit"> AllureCouture is gevestigd in Voorburg, een voorstad van Den Haag. De exclusieve ambiance van ons historische pand in het oude centrum, biedt de intimiteit die past bij het zoeken van de mooiste bruidsjurk.</span></p>
<p class="MsoNormal"><span class="bodytekstwit"> Voorburg is zowel met de auto als met het openbaar vervoer zeer goed bereikbaar en biedt ruime parkeergelegenheid (blauwe zone). De Herenstraat waar AllureCouture gevestigd is, is een geliefde winkelstraat met diverse mooie boutiques, originele speciaalzaakjes en gezellige restaurantjes. Voorburg is slechts 15 minuten rijden van het centrum van Den Haag. </span></p>
<p class="MsoNormal"><a href="contact.html"><span class="linkgrijs">Routebeschrijving >></span></a><span class="bodytekstwit"><br />
<br />
Eva Roelandt ontvangt jou en je gezelschap graag op afspraak, zodat zij alle tijd voor jou heeft om je te helpen aan die ene jurk waarin jij zult stralen op je bruiloft. De bruidsjurken van Rosa Clará kunnen dan in alle rust gepast worden. <br />
<br />
Heb je eenmaal een keuze gemaakt, dan bestellen wij de jurk bij Rosa Clará en wordt deze speciaal voor jou gemaakt in het atelier in Spanje. Uit ervaring weten wij dat Rosa Clará stipt is met haar leveringen. Onze zeer ervaren coupeuses maken – zo nodig – de laatste aanpassingen, zodat jouw jurk echt helemaal perfect zit! </span></p>
<p class="MsoNormal"><span class="bodytekstwit"> Naast de uitgebreide bruidsjurkencollectie van Rosa Clará, bieden wij ook de accessoires aan van Rosa Clará om jouw bruidsjurk te complementeren.</span></p>
<p class="MsoNormal"><span class="linkgrijs"><a href="afspraak.html" class="linkgrijs">Klik hier voor het maken van een afspraak.</a></span></p>
</div>
<!-- InstanceEndEditable --></div>
</body>
<!-- InstanceEnd --></html>
