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> 2 2286
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.
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Jack Hughes |
last post by:
This argument has come up two or three times lately.
We have a web standards document at our company that say "Use valid
HTML 4; We don't recommend switching to DIV-based CSS-P for layout
just...
|
by: Neil Zanella |
last post by:
Hello,
I have posted the following message before but got no replies...
I am trying to format an HTML definition list with CSS so that it
appears as follows, but am having the following problem:...
|
by: Mason A. Clark |
last post by:
Is there information content in this observation?
use html tables for layout:
http://www.microsoft.com and http://www.netscape.com
uses styles:
http://www.opera.com
|
by: Filippo Giarratano |
last post by:
Hi -- I'm trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the...
|
by: Applebrownbetty |
last post by:
Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a
completely CSS positioned page, and was wondering if any resident CSS guru
might quickly be able to find the problem(s). Thank...
|
by: Geoff Hague |
last post by:
I've decided I need to rebuild my website from scratch to work properly
accross browsers (the previous version of the site worked fine in IE6, but
was really wonky in other browsers).
What I'm...
|
by: Spartanicus |
last post by:
I've started work on a css layout tutorial. I expect that it will take a
minimum of several weeks to get to a complete draft stage.
I hope to get better feedback by publishing individual pages....
|
by: yb |
last post by:
Hi,
I'm looking for clarification of css 2.1 specification in section 8.3.1
"Collapsing Margins"
The 6th bullet reads "If the top and bottom margins of a box are
adjoining ..."
I won't paste...
|
by: Daniel Kabs |
last post by:
Hi there,
for a long time I've been using tables to layout elements on a web page.
Example: Say we have a 2x2 table and I'd like to put text (left aligned)
and buttons (right aligned) in the...
|
by: somelongusername |
last post by:
Hi all,
I've been playing around with CSS floats, trying to understand how they work and I've come across a situation that doesnt make sense.
From my understanding, any non-float elements...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |