Hey mensen,
Ik ben momenteel met een 1 pagina site bezig waarvan ik dacht dat het mij max 3 uur zou kosten om het ontwerp om te zetten naar HTML + CSS ben ik nu al meer dan 2 dagen aan het tobben. Het volgende is het geval;
Ik heb een wrapper met daarin 3 div's (3 kolommen). Ik heb een linker background div, een center (content) div en een rechter background div. Nou moeten de linker en rechter bg div altijd tegen de center div aanblijven zitten. Wanneer het scherm kleiner wordt moet dit ten koste gaan van de background div's en niet van de content div. Nou krijg ik het ten eerste niet voor elkaar om de div's tegen de center div aan te blijven plakken en valt de center div naar beneden wanneer het scherm kleiner wordt.
In IE 7 ziet de HTML er nu het beste uit. In Firefox is het een rommeltje door mijn laatste aanpassingen om de div's niet omlaag te laten vallen...
Ik zit hier nu al ruim 2 dagen op te tobben en kom er maar niet uit. Ik hoop dat iemand mij hier advies kan geven hoe dit te fixen.
De site is hier te bekijken.
Het ontwerp zoals het zou moeten worden vind je hier:
Hierbij de HTML code en CSS:
Ik ben momenteel met een 1 pagina site bezig waarvan ik dacht dat het mij max 3 uur zou kosten om het ontwerp om te zetten naar HTML + CSS ben ik nu al meer dan 2 dagen aan het tobben. Het volgende is het geval;
Ik heb een wrapper met daarin 3 div's (3 kolommen). Ik heb een linker background div, een center (content) div en een rechter background div. Nou moeten de linker en rechter bg div altijd tegen de center div aanblijven zitten. Wanneer het scherm kleiner wordt moet dit ten koste gaan van de background div's en niet van de content div. Nou krijg ik het ten eerste niet voor elkaar om de div's tegen de center div aan te blijven plakken en valt de center div naar beneden wanneer het scherm kleiner wordt.
In IE 7 ziet de HTML er nu het beste uit. In Firefox is het een rommeltje door mijn laatste aanpassingen om de div's niet omlaag te laten vallen...
Ik zit hier nu al ruim 2 dagen op te tobben en kom er maar niet uit. Ik hoop dat iemand mij hier advies kan geven hoe dit te fixen.
De site is hier te bekijken.
Het ontwerp zoals het zou moeten worden vind je hier:
Hierbij de HTML code en CSS:
Code:
html, body {
height:100%;
margin:0;
padding:0;
background-color:#990000;
text-align:center;
}
/******* WRAPPERS *********/
#background-wrapper-left{
width:17%;
min-height: 810px;
height: auto !important;
height: 100%;
background-color:#00FF00;
background-image:url(../images/background_left.jpg);
background-position:top right;
background-repeat:no-repeat;
float:left;
/* clear:none;*/
}
#background-wrapper-right{
width:17%;
min-height: 810px;
height: auto !important;
height: 100%;
background-color:#FF0000;
background-image:url(../images/background_right.jpg);
background-position:top left;
background-repeat:no-repeat;
float:right;
/* clear:none;*/
}
#content-wrapper{
/* margin-left: 214px;
margin-right: 214px;*/
width:700px;
height:810px;
padding-right:35px;
padding-left:35px;
background-color:#FFF;
float:none;
/*clear:none;*/
}
#wrapper{
height: auto !important;
height: 100%; /* IE6 treats this as min-height */
min-height: 100%;
overflow:hidden;
/*width:100%;*/
/*max-width:1198px;*/
height:auto;
margin: 0 auto;
background-color:#00FFFF;
}
/******** DIV's **********/
#logo{
height:80px;
width:228px;
margin-top:21px;
margin-left:2px;
border:none;
float:left;
}
#logo-ondertitel{
margin-top:21px;
margin-right:2px;
padding-top:22px;
height:58px;
float:right;
}
#content-vlak-links{
width:208px;
height:373px;
padding:24px;
margin-top:30px;
margin-left:2px;
background-image:url(../images/Content_left_bg.jpg);
background-repeat:no-repeat;
float:left;
}
#content-vlak-rechts{
width:440px;
height:373px;
margin-top:30px;
background-color:#993366;
float:left;
}
#footer{
width:inherit;
height:30px;
margin-top:30px;
border-top: 1px solid #d1d1d1;
text-align:left;
clear:both;
}
/******** TEKSTOPMAAK ********/
.logo-ondertitel-tekst{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#b3b3b3;
font-style:italic;
}
.content{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#454545;
text-align:justify;
line-height:14px;
}
.footer-tekst{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#454545;
text-align:left;
line-height:14px;
}
.footer-tekst-blauw{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#005b98;
text-align:left;
font-weight:bold;
line-height:14px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facet Vision</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="background-wrapper-left"></div><!-- einde background wrapper left -->
<div id="background-wrapper-right"></div> <!-- einde background wrapper right -->
<div id="content-wrapper">
<!-- START LOGO + ONDERTITEL -->
<div id="logo"><img src="images/logo_Facet_Vision.jpg" /></div><!-- einde logo div -->
<div id="logo-ondertitel">
<span class="logo-ondertitel-tekst">Innovatieve communicatie oplossingen</span> </div><!-- einde logo ondertitel div -->
<!-- EINDE LOGO + ONDERTITEL -->
<!-- START FLASH HEADER -->
<div id="flash-header">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','696','height','250','title','Facet Vision Flash header','src','flash/fotoTool','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/fotoTool' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="696" height="250" title="Facet Vision Flash header">
<param name="movie" value="flash/fotoTool.swf" />
<param name="quality" value="high" />
<embed src="flash/fotoTool.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="696" height="250"></embed>
</object>
</noscript>
</div><!-- einde flash header div -->
<!-- EINDE FLASH HEADER -->
<!-- START CONTENT -->
<div id="content-vlak-links">
<p class="content">Wereldwijd neemt elektronische, audiovisuele communicatie nog steeds exponentieel toe. Het dataverkeer dat deze communicatie genereert verbruikt enorme hoeveelheden bandbreedte, wat resulteert in hoge transportkosten.</p>
<p class="content">Is het mogelijk deze verzending van gigantische hoeveelheden audiovisuele data te realiseren tegen zo laag mogelijke kosten en, gelijktijdig, tegen zo hoog mogelijke beeld- en geluidskwaliteit? Met andere woorden, hoe kan continu de optimale balans worden gerealiseerd tussen prijs, kwaliteit en kwantiteit bij de distributie van beeld en geluid?</p>
<p class="content">Facet Vision biedt voor een deel van de beantwoording van deze vraag twee innovatieve, technologische oplossingen:<br />
<strong>YouPlaySo™</strong>, kortweg <strong>YPS™</strong> en <strong>YouRecordSo™</strong>, kortweg <strong>YRS™</strong>.</p>
</div><!-- einde content vlak links -->
<div id="content-vlak-rechts"> </div><!-- einde content vlak -->
<!-- EINDE CONTENT -->
<div id="footer">
<span class="footer-tekst-blauw">Facet Vision </span><span class="footer-tekst">© 2009</span> </div><!-- einde footer div -->
</div><!-- einde content-wrapper -->
</div>
<!-- einde wrapper -->
</body>
</html>
