I am trying out a fully CSS-P layout (first time with floats) and am having
problems with getting certain DIV's from displaying properly - or rather -
they are being completely ignored.
Below is a copy of the code I have written. It is arranged as follows:
Header
Left Middle Right
Footer
The "Left" and "Right" DIV's are fixed width and the "Middle" DIV takes the
remaining space in the middle. There is _NO_ problem with the displaying
of these DIV's positions and their respective content.
However, in the "Header" DIV, I have two further DIV's called "Date" and
"Menu_choice", and it is these DIV's that are not being rendered in terms
of positioning or style.
The text for these two DIV's do show in the "Header" DIV, but it shows them
(position approx top:0px left:0px) as the "Date" then underneath
"Menu_choice" without any text style or positioning ("Menu_choice" does
have some style given to it because of the "A:link" property).
If I move the "Date" and "Menu_choice" DIV declarations to be underneath
the "Header" declaration - the entire design breaks in all browsers.
Does anyone know how to fix the code so the two DIV's do get the styles
they are supposed to be getting? This problem has got me perplexed for
days.
Dariusz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<HEAD><TITLE>TEST</TITLE></HEAD>
<STYLE TYPE="text/css">
<!--
body { margin: 0; padding: 0; background: #fff; color:
#000; }
/*for Opera*/
html>body { width:100%; }
A:link { color:#FF00FF; font-style:italic; font-weight:600;
text-decoration:none; }
A.val:visited { color:#FF000F; font-style:italic; font-weight:600;
text-decoration:none; }
A.val:hover { background-color:#FF00FF; color:#FFFFFF;
font-style:italic; font-weight:600; text-decoration:underline; }
A.borders:link { text-decoration:none; border-width:0px; }
A.borders:hover { background-color:#F5E2F4; text-decoration:none;
border-width:0px; }
DIV.Text { text-align:justify; margin-left:10px;
margin-right:10px; color:#000000; font-size:0.9em; font-family:zapf
chancery, sans-serif; }
/*** Setup the header, 3 columns and footer ***/
#Container { margin:0px auto; padding:0px; voice-family:
"\"}\""; voice-family:inherit; }
#Header { width:99%; height:100px;
background:url("img/Funhost_nl-head.gif"); background-repeat:no-repeat;
background-color:rgb(255,255,255); }
#LEFT_RIGHT { padding:0px; }
#Left { position:absolute; float:left; z-index:1;
width:255px; padding:0; margin:0;
background:url("img/Funhost_nl-left.gif"); background-repeat:no-repeat;
background-color:rgb(255,255,255); }
#left-text { position:relative; left:10px; top:20px; z-index:2;
padding-bottom:20px; margin-bottom:20px; }
#Middle { padding-top:20px; margin-left:260px;
margin-right:155px; }
#Right_news { position:relative; float:right; top:0px;
width:150px; padding-top:20px; padding-bottom:10px;}
#Footer { position:relative; clear:both; text-align:center;
font-size:0.8em; padding-bottom:20px; }
#Date ( position:absolute; left:350px; z-index:3;
font-size:10px; font-family:zapf chancery, sans-serif; color:#000000; }
#Menu_choice { position:relative; top:50px; left:300px;
z-index:3; font-size:1em; font-family:zapf chancery, sans-serif;
color:#000000; }
//-->
</STYLE>
<BODY BGCOLOR="FFFFFF">
<DIV ID="Container">
<DIV ID="Header">
<!-- BLANK -->
<DIV ID="Date">
<!--#include virtual="php/Dutch-date.php" -->
</DIV>
<DIV ID="Menu_choice">
<a class="val" href="welkom.shtml">Welkom</A> <a
class="val" href="hosting.shtml">Hosting</A> <a class="val"
href="domeninen.shtml">Domeinen</A> <a class="val"
href="faq.shtml">FAQ</A> <a class="val"
href="login.shtml">Login</A> <a class="val"
href="contact.shtml">Contact</A>
</DIV>
</DIV>
<DIV ID="LEFT_RIGHT">
<DIV ID="Left">
<DIV ID="left-text">
<img src="img/package-starter.gif" width="240" height="149"
alt="" border="0"><BR>
<BR>
<img src="img/package-standaard.gif" width="240"
height="149" alt="" border="0"><BR>
<BR>
<img src="img/package-zakelijk.gif" width="240"
height="149" alt="" border="0"><BR>
<BR>
<img src="img/package-extreme.gif" width="240" height="149"
alt="" border="0"><BR>
</DIV>
</DIV>
<DIV ID="Right_news">
<DIV CLASS="Text">
<!--#include virtual="nieuws.shtml" -->
</DIV>
</DIV>
</DIV>
<DIV ID="Middle">
<DIV CLASS="Text">
<!--#include virtual="main_text.shtml" -->
</DIV>
</DIV>
</DIV> <!-- Close the Container DIV -->
<DIV ID="Footer">
Copyright 2002 / 2003
</DIV>
</BODY>
</HTML>
