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_choic e", 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_choic e" without any text style or positioning ("Menu_choic e" does
have some style given to it because of the "A:link" property).
If I move the "Date" and "Menu_choic e" 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>TE ST</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:unde rline; }
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,2 55,255); }
#LEFT_RIGHT { padding:0px; }
#Left { position:absolu te; 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,2 55,255); }
#left-text { position:relati ve; 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:relati ve; float:right; top:0px;
width:150px; padding-top:20px; padding-bottom:10px;}
#Footer { position:relati ve; clear:both; text-align:center;
font-size:0.8em; padding-bottom:20px; }
#Date ( position:absolu te; left:350px; z-index:3;
font-size:10px; font-family:zapf chancery, sans-serif; color:#000000; }
#Menu_choice { position:relati ve; 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.sh tml">Welkom</A> <a
class="val" href="hosting.s html">Hosting</A> <a class="val"
href="domeninen .shtml">Domeine n</A> <a class="val"
href="faq.shtml ">FAQ</A> <a class="val"
href="login.sht ml">Login</A> <a class="val"
href="contact.s html">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_t ext.shtml" -->
</DIV>
</DIV>
</DIV> <!-- Close the Container DIV -->
<DIV ID="Footer">
Copyright 2002 / 2003
</DIV>
</BODY>
</HTML> 2 2305
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:absolu te and position:relati ve
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_choic e", 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_choic e" without any text style or positioning ("Menu_choic e" does have some style given to it because of the "A:link" property).
If I move the "Date" and "Menu_choic e" 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:absolu te; 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:absolu te; 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,2 55,255); }
Why do you position this absolutely? And then float it? Doesn't make
sence.
#left-text { position:relati ve; 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:absolu te; left:350px; z-index:3;
^^^^ shoudl be { font-size:10px; font-family:zapf chancery, sans-serif; color:#000000; } #Menu_choice { position:relati ve; 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************ ************@ne ws.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_choic e", 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:absolu te; left:350px; z-index:3; ^^^^^^^^^^^^
Ah, I missed that one, thanks for that "(" instead of an {. #LEFT_RIGHT { padding:0px; }
#Left { position:absolu te; 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,2 55,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:relati ve; 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 yet though, tables are a lot easier."
That's because we have a lot of developers who aren't ready to move to
CSS-P and DIVs just yet.
But I'm being told our policies were contradictory. If we're going to
|
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: when the
definition term (<dt>) on the left is too long, as in the HTML
code posted below, the whole definition list gets messed up.
I have tested the example with mozilla 1.2.1. Complete code
is provided below so you can see what I mean. Anyone...
|
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 images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.
I've made a test page at http://www.americanstate.org/test/gal01/ that
illustrates what I'm aiming for and how close I've gotten. I've...
|
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 you.
In IE, the page looks how I want it to look (picture below):
www.sunbadgeco.com/sunmetal/ie.jpg
In Mozilla Firefox, somehow it's not quite right (pic below):
www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
| |
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 trying for is a simple layout with a header and two colums (left
and right) positioned immediately below it.
Here's what I've got so far:
http://www.captainsoftheworld.com/modernrepublic/test/index.php...
|
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. I've
uploaded 2 draft pages, an index and a list of definitions:
http://www.spartanicus.utvinternet.ie/CssLayout/index.htm.remove
http://www.spartanicus.utvinternet.ie/CssLayout/definitions.htm.remove
The urls are not valid because of the added...
|
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 the whole point here, its too long.
But, from this first line does this mean that the element has empty
|
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 top right table cell. These elements
should stay on one line and the table should keep a minimum width in
order to prevent wrapping.
-------------------------------------------------
|
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 should flow right past. In the code below, #float1 is displayed on line 1 and #float2, #float3 are on the next.
After adding #txt I should expect it to be displayed next to #float1 but it's displayed on line 2. If #txt's width is not specified then...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |