Grafische gevorderde |
|
Dit zul je met javascript moeten doen.
De elementen die je nodig hebt
Hier een voorbeeldje van mij:
function fixH()
{
var lh=document.getElementById('content_left').offsetHeight;
var rh=document.getElementById('content_right').offsetHeight;
document.getElementById('content_right').style.height=(lh>rh)? lh+"px" : rh+"px";
document.getElementById('content_left').style.height=(rh>lh)? rh+"px" : lh+"px";
if(rh>lh) {
document.getElementById('content_info').style.height=((rh-172)+"px");
}
if(lh>rh) {
document.getElementById('project_txt').style.height=((lh-104)+"px");
}
}
function fixH() { var lh=document.getElementById('content_left').offsetHeight; var rh=document.getElementById('content_right').offsetHeight; document.getElementById('content_right').style.height=(lh>rh)? lh+"px" : rh+"px"; document.getElementById('content_left').style.height=(rh>lh)? rh+"px" : lh+"px"; if(rh>lh) { document.getElementById('content_info').style.height=((rh-172)+"px"); } if(lh>rh) { document.getElementById('project_txt').style.height=((lh-104)+"px"); } }
De html die erbij hoort
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AYCE Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body onload="fixH()">
<div class="backbar"><!-- No Content --></div>
<div class="content">
<div class="box">
<div class="bar_left"><!-- No Content --></div>
<div class="bar_right"><!-- No Content --></div>
<div class="header"><!-- No Content --></div>
<div class="header_sep"><!-- No Content --></div>
<div class="menu">
<div class="menuitem"><a href="index.html">Home</a></div>
<div class="menusep"><!-- No Content --></div>
<div class="menuitem"><a href="diensten.html">Diensten</a></div>
<div class="menusep"><!-- No Content --></div>
<div class="menuitem"><a href="ayce.html">AYCE</a></div>
<div class="menusep"><!-- No Content --></div>
<div class="menuitem"><a href="portfolio.html">Portfolio</a></div>
<div class="menusep"><!-- No Content --></div>
<div class="rmenuitem"><a href="contact.html">Contact</a></div>
<div class="rmenusep"><!-- No Content --></div>
<div class="rmenuitem"><a href="sitemap.html">Sitemap</a></div>
<div class="rmenusep"><!-- No Content --></div>
</div>
<div class="container">
<div id="content_left">
<div class="subheader_home"><!-- No Content --></div>
<div class="balk">
<img src="images/nav.png" alt="" /> Welkom bij AYCE Webdesign
</div>
<div id="content_info">
Welkom op de site van All You Can Eat (AYCE) Webdesign. AYCE Webdesign
is onderdeel van de AYCE-groep, waartoe ook AYCE Comics en AYCE Studio behoren.
AYCE ontwikkelt, ontwerpt en produceert verschillende grafische producten.
AYCE Webdesign specificeert zich hierbij tot de (web)design en development. Meer
informatie over AYCE vindt u onder de tab "AYCE".
<br />
Zo kan voor u een gehele website gerealiseerd worden. Van een hele website tot
enkel losse grafische digitale werkzaamheden. Meer informatie over onze mogelijke
producten vindt u onder de tab "Diensten".
<br /><br /><img src="images/mainimg.png" alt="" /><br /><br />
Bij het ontwikkelen en ontwerpen van producten, maken we gebruik van de nieuwste
technieken met betrekking tot design, programmering en flash. Hierdoor is het mogelijk
om onze werkzaamheden dynamisch en interactief te maken. Doordat wij gebruik maken
van een Content Management System (CMS) is uw site snel en makkelijk te onderhouden
door uzelf! Indien u het wenst, kunnen wij ook de hosting voor u realiseren.
</div>
<div class="bottom"><!-- No Content --></div>
</div>
<div id="content_right">
<div class="project_img"><!-- No Content --></div>
<div class="balk">
<img src="images/nav.png" alt="" /> Sitenaam
</div>
<div id="project_txt">
<div class="project_txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dolor magna, luctus nec, luctus quis, faucibus vel, wisi. Vestibulum mollis, urna at luctus ullamcorper, diam quam fringilla odio, quis porttitor turpis sem ultrices turpis. Cras et eros. Pellentesque magna. Ut quam dolor, ultrices in, pulvinar vel, facilisis eu, tellus. Pellentesque.
</div>
<div class="more">
<a href="#"><img src="images/more.png" alt="Portfolio" /></a>
</div>
</div>
</div>
<br style="clear: both" />
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>AYCE Webdesign</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="javascript.js"></script> </head> <body onload="fixH()"> <div class="backbar"><!-- No Content --></div> <div class="content"> <div class="box"> <div class="bar_left"><!-- No Content --></div> <div class="bar_right"><!-- No Content --></div> <div class="header"><!-- No Content --></div> <div class="header_sep"><!-- No Content --></div> <div class="menu"> <div class="menuitem"><a href="index.html">Home</a></div> <div class="menusep"><!-- No Content --></div> <div class="menuitem"><a href="diensten.html">Diensten</a></div> <div class="menusep"><!-- No Content --></div> <div class="menuitem"><a href="ayce.html">AYCE</a></div> <div class="menusep"><!-- No Content --></div> <div class="menuitem"><a href="portfolio.html">Portfolio</a></div> <div class="menusep"><!-- No Content --></div> <div class="rmenuitem"><a href="contact.html">Contact</a></div> <div class="rmenusep"><!-- No Content --></div> <div class="rmenuitem"><a href="sitemap.html">Sitemap</a></div> <div class="rmenusep"><!-- No Content --></div> </div> <div class="container"> <div id="content_left"> <div class="subheader_home"><!-- No Content --></div> <div class="balk"> <img src="images/nav.png" alt="" /> Welkom bij AYCE Webdesign </div> <div id="content_info"> Welkom op de site van All You Can Eat (AYCE) Webdesign. AYCE Webdesign is onderdeel van de AYCE-groep, waartoe ook AYCE Comics en AYCE Studio behoren. AYCE ontwikkelt, ontwerpt en produceert verschillende grafische producten. AYCE Webdesign specificeert zich hierbij tot de (web)design en development. Meer informatie over AYCE vindt u onder de tab "AYCE". <br /> Zo kan voor u een gehele website gerealiseerd worden. Van een hele website tot enkel losse grafische digitale werkzaamheden. Meer informatie over onze mogelijke producten vindt u onder de tab "Diensten". <br /><br /><img src="images/mainimg.png" alt="" /><br /><br /> Bij het ontwikkelen en ontwerpen van producten, maken we gebruik van de nieuwste technieken met betrekking tot design, programmering en flash. Hierdoor is het mogelijk om onze werkzaamheden dynamisch en interactief te maken. Doordat wij gebruik maken van een Content Management System (CMS ) is uw site snel en makkelijk te onderhouden door uzelf! Indien u het wenst, kunnen wij ook de hosting voor u realiseren. </div> <div class="bottom"><!-- No Content --></div> </div> <div id="content_right"> <div class="project_img"><!-- No Content --></div> <div class="balk"> <img src="images/nav.png" alt="" /> Sitenaam </div> <div id="project_txt"> <div class="project_txt"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dolor magna, luctus nec, luctus quis, faucibus vel, wisi. Vestibulum mollis, urna at luctus ullamcorper, diam quam fringilla odio, quis porttitor turpis sem ultrices turpis. Cras et eros. Pellentesque magna. Ut quam dolor, ultrices in, pulvinar vel, facilisis eu, tellus. Pellentesque. </div> <div class="more"> <a href="#"><img src="images/more.png" alt="Portfolio" /></a> </div> </div> </div> <br style="clear: both" /> </div> </div> </div> </body> </html>
|