ok
ga dit even uit werken.
Ik ben namelijk bezig om naast mijn afbeeldingen een tekst vak te maken
nu heb ik het volgende gemaakt en dat werkt goed in alle browsers behalve die ie6 die maakt er weer een zooitje van.
Wat ik mijn afvraag zit er toch nog iets fout met mijn aanpak of moet ik nu aan conditional comments gaan denken. het gaat om #tekst1 en tekst2
ik moet hem -570 geven om hem op juiste plaats te krijgen dat is me toch niet helemaal duidelijk
<!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="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="nieuwvenster.js"></script>
<meta name="description" content="wlvdmeer voor diversen montagewekzaamheden zoals scherming beluchting hijsverwarming hekwerken kasonderhoud alle service werkzaamheden" />
<meta name="keywords" content="scherming, beluchting, hijsverwarming, machines, materiaal, service, gebruikte materialen" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="3 days" />
<meta name="wlvdmeer" content="webmaster wlvdmeer" />
<title>
wlvdmeer machines
</title>
<style type="text/css">
@charset "utf-8";
body{
background-color: #c0c0c0;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 2600px;
width: 958px
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #fff;
background-repeat: no-repeat;
background-color: #000;
position: relative
}
#menu {
background-color: #14285f;
height: 558px;
float:left;
width:139px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
margin-top: 0px
}
#content {
float:left;
position:relative;
height: 513px;
width: 794px;
background-color: #14285f;
color:#99ccff;
padding: 45px 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px
}
#vak1{
height:24px;
width:40px;
position:absolute;
margin:-30px 0 0 -23px;
background-color:#fff;
color:#000
}
#vak2{
height:24px;
width:40px;
position:absolute;
margin:-30px 0 0 35px;
background-color:#fff;
color:#000
}
#vak3{
height:24px;
width:40px;
position:absolute;
margin:-30px 0 0 95px;
background-color: #fff;
color:#000
}
#vak4{
height:24px;
width:40px;
position:absolute;
margin:-30px 0 0 156px;
background-color: #fff;
color:#000
}
img#fotoboven {
float:right;
margin: 20px 30px 0 0;
background-color: #FFF;
border: thin solid #fff
}
img#fotoonder {
clear:right;
float:right;
margin: 45px 30px 0 0;
background-color:#FFF;
border:thin solid #fff
}
#logo {
background-color: #FFF;
background:url(image/logo.jpg);
position: absolute;
left: 0;
top: 0
}
#sublogo1{
background-color: #FFF;
position: absolute;
left: 141px;
top: 0
}
#sublogo2{
background-color:#FFF;
position:absolute;
left:342px;
top:0
}
#sublogo3{
background-color:#FFF;
position:absolute;
left:543px;
top:0
}
#sublogo4{
background-color:#FFF;
position:absolute;
left:758px;
top:0
}
ul.navbar {
background:#14285f;
padding: 0;
height: 360px;
width: 130px;
border-right: 1px solid #fff;
list-style-type: none;
margin-left: 3px;
margin-top:70px
}
li:hover {background-color: #000; color:#000; text-decoration:none;
}
a:link {color:#fff; text-decoration:none;
}
a:visited {color:#fff; text-decoration:none;
}
a:hover {color:#fff; text-decoration:none;
}
a:active {color:#fff; text-decoration:none;
}
#paginakop{
background-color: #14285f;
width:300px;
height:30px;
color:#99ccff;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
margin: 55px 0 0 250px;
padding: 3px 0 0 2px
}
#foto1 {
background-color: #14285f;
height: 150px;
width: 200px;
margin: 20px 0 0 20px
}
#tekst1{
position:absolute;
width:500px;
height:150px;
background-color:#FFFFFF;
color:#000000;
margin-left:230px;
margin-top:-570px;
padding-left:50px;
}
#foto2 {
background-color: #14285f;
height: 150px;
width: 150px;
margin: 60px 0 0 20px
}
#tekst2{
position:absolute;
width:500px;
height:150px;
background-color:#FFFFFF;
color:#000000;
margin-left:230px;
margin-top:-360px;
}
#foto3 {
background-color: #14285f;
height: 150px;
width: 150px;
margin: 60px 0 0 20px
}
#info{
width: 480px;
height:350px;
background-color:#14285f;
color:#99ccff;
padding: 5px 0 0 5px;
margin: 25px 0 0 20px
}
ul#menu-hor {padding: 0; margin: 0; list-style: none;
}
ul#menu-hor li {float: left; height: 15px; border: solid 1px #14285f; padding: 0 10px;
}
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="welkom op deze website"/>
<img id="sublogo1" src="image/kas.jpg" width="200" height="120" alt="alles voor in en rond de kast"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="hekwerken"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="rolgevels"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="200" height="120" alt="hijsverwarming"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materiaal.html" title="materiaal">Materialen</a>
</li>
<li>
<a href="onderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" rel="external" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="webdesign.html" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="contact.html" title="contact wlvdmeer">Contact</a>
</li>
<li>
<a href="catalogusscherming.html" title="catalogus">Catalogus</a>
</li>
</ul>
</div>
<div id="content">
<ul id="menu-hor">
<li><a href="teeltsystemen.html" title="teeltsystemen">Teeltsystemen</a></li>
<li><a href="teeltmaterialen.html" title="teeltmaterialen">Teeltmaterialen</a></li>
<li><a href="machines.html" title="machines">Machines</a></li>
<li><a href="koelcellen.html" title="koelcellen">Koelcellen</a></li>
<li><a href="elektra.html" title="elektra">Elektra</a></li>
<li><a href="motoren.html" title="motoren">Motoren</a></li>
<li><a href="spuitkarren.html" title="spuitkarren">Spuitkarren</a></li>
<li><a href="overige.html" title="overige">Overige</a></li>
</ul>
<h1 id="paginakop">machines</h1>
<div id="foto1"><img src="foto'smateriaal/Radijslijn/SNC00858.jpg" width="200" height="150" alt="radijslijn" /><br />Radijslijn <a href="http://montage.wlvdmeer-montage.nl/#19.0" rel="external" title="radijslijn"><br />Voor meer info klik hier</a></div>
<div id="foto2"><img src="foto'smateriaal/radijsoogstmachine/SNC00851.jpg" width="200" height="150" alt="radijs oogstmachine" /><br />radijs oogstmachine <a href="http://montage.wlvdmeer-montage.nl/#20.1" rel="external" title="radijs oogstmachine"><br />Voor meer info klik hier</a></div>
<div id="foto3"><img src="foto'smateriaal/radijszaaimachine/SNC00860.jpg" width="200" height="150" alt="radijs zaaimachine" /><br />radijs zaaimachine <a href="http://montage.wlvdmeer-montage.nl/#21.1" rel="external" title="radijs zaaimachine"><br />Voor meer info klik hier</a></div>
<div id="tekst1">Radijslijn</div>
<div id="tekst2">Radijs oogstmachine</div>
</div>
</div>
</body>
</html>
