By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,710 Members | 1,613 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,710 IT Pros & Developers. It's quick & easy.

Help with a CSS-P problem (floats etc.)

P: n/a

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> &nbsp;&nbsp;<a
class="val" href="hosting.shtml">Hosting</A> &nbsp;&nbsp;<a class="val"
href="domeninen.shtml">Domeinen</A> &nbsp;&nbsp;<a class="val"
href="faq.shtml">FAQ</A> &nbsp;&nbsp;<a class="val"
href="login.shtml">Login</A> &nbsp;&nbsp;<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>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In article Dariusz wrote:

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
Since your clueless use of position:absolute and position:relative
everywhere, I get footer that is behind first image. Get rid all of them
unless you really need one.
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.
Well, I see no reason using positioning here.
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
Hard to say without URL. I don't have your images, nor SSI. Looked
anyway, and noticed you hadn't bothered to chaec your CSS for errors:
#Date ( position:absolute; left:350px; z-index:3;
^^^^^^^^^^^^
You have copy pasted lot of stuff together, whitout really understanding
what you do? I see parts of tantek hack, and an empty comment that is
only needed if elements would be in reversed order etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You use strict. That's good.
<STYLE TYPE="text/css">
<!--
body { margin: 0; padding: 0; background: #fff; color:
#000; }
/*for Opera*/
html>body { width:100%; }
Other part of Tantek hack (nice to opera rule), this also does nothing.
DIV.Text { text-align:justify; margin-left:10px;
margin-right:10px; color:#000000; font-size:0.9em; font-family:zapf
chancery, sans-serif; }
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

/*** Setup the header, 3 columns and footer ***/
#Container { margin:0px auto; padding:0px; voice-family:
"\"}\""; voice-family:inherit; }
What is this hack trying to do? Currently it does nothing.
#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); }
Why do you position this absolutely? And then float it? Doesn't make
sence.
#left-text { position:relative; left:10px; top:20px; z-index:2;
padding-bottom:20px; margin-bottom:20px; }
Don't use relative positioning instead top and left margin. It doesn't
make sence 99% of times.
#Date ( position:absolute; left:350px; z-index:3; ^^^^ shoudl be { 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; }


Also not used, as selector doesnt make sence (whole thing since #Date is
that is)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

P: n/a
In article <MP************************@news.cis.dfn.de>, Lauri Raittila <la***@raittila.cjb.net> wrote:
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.
Well, I see no reason using positioning here.


I do, because I wanted to position these two DIV's within the Header block.
Hard to say without URL. I don't have your images, nor SSI. Looked
anyway, and noticed you hadn't bothered to chaec your CSS for errors:
#Date ( position:absolute; left:350px; z-index:3;
^^^^^^^^^^^^


Ah, I missed that one, thanks for that "(" instead of an {.
#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); }


Why do you position this absolutely? And then float it? Doesn't make
sence.


Again, didn't notice this one - I was amending my standard code for the
float layout and didn't think to take out the positioning statements.
#left-text { position:relative; left:10px; top:20px; z-index:2;
padding-bottom:20px; margin-bottom:20px; }


Don't use relative positioning instead top and left margin. It doesn't
make sence 99% of times.


In this case, taking out the positioning for this DIV breaks the design
idea and works in none of the browsers as I intend.

Anyway, with your extra "eyes" on my code, removing the redundant
positioning declarations in the Left and Right DIV's fixed the design and
all the elements now display as I intended to.

Thanks for your help.

Dariusz
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.