I'm using DIVs in a test site for my page layout. It's working fairly
well so far but there's 2 problems I'm having that I didn't have with
tables. I'm sure it's just something small in my CSS.
Here's the link to my page with the first problem... http://levelwave.com/dev/
1) You'll notice that the body of the page in the <div id="rh-col">
section, is scrolling down past the footer <div id="footer"at the
bottom of the page. How do I set it so that when the body grows
vertically it pushes the footer down with it?
Here's the link the second problem... http://levelwave.com/dev/index2.htm
2) You'll notice that the first line in the body section pushes to the
right causing you to scroll... well the logo at the top (<div
id="rh-logo"and <div id="lg-logo">) does not expand to the right with
it, instead it stays static. I would like for it to expand with the
body.
I'll post my CSS below... I'm guessing my <div id="rh-logo"and my
<div id-"footer"tag s are not set correctly.
thanks!
~john
----------------------
<!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">
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0 0 0 0;
}
#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}
#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
font-size: 10px;
color: #888888;
absolute;
bottom: 5px;
clear: both;
}
#lh-col
{
width: 145px;
height: 80%;
float: left;
border: solid #AAAAAA;
border-width: 1px 1px 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#rh-col
{
background: #ffffff;
height: 80%;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
/*margin: 0 0 0 160px;*/
padding: 0 0 0 0;
position: absolute;
left: 146px;
} 6  1229 
John,
First things first, fix your HTML.
Use the right DTD... your page isn't even HTML, let alone XHTML.
For one thing, you're missing the BODY and HTML closing tags.
Also, your CSS is incorrect in places...
Run http://validator.w3.org/ over your page... fix the errors, then see
how it looks.
If you're still having problems, post again
Best of luck,
Dan da*******@warpm ail.net wrote:
John,
First things first, fix your HTML.
Use the right DTD... your page isn't even HTML, let alone XHTML.
For one thing, you're missing the BODY and HTML closing tags.
Also, your CSS is incorrect in places...
Run http://validator.w3.org/ over your page... fix the errors, then see
how it looks.
If you're still having problems, post again
Best of luck,
Dan
As for the missing closing tags, that was a bad cut and paste job...
all those tags are generated in PHP include files and a PHP footer
tag... must have forgot to track down all the HTML to copy over.
Also, your CSS is incorrect in places...
Yeah.. I know... I'm a programmer having to learn all this web nonsense
:P... My CSS is really bad and I don't have time to brush up on it
right now. I"m in the middle of a large project at work and just need
the CSS to display the page properly in IE. I was hoping someone could
take a quick look at the header and footer issues I was having. I can't
validate the project at work because I'm behind a firewall... what's in
the links is just a small skeleton of the shell. Guess I could validate
that.
~john
~john wrote:
I'm using DIVs in a test site for my page layout. It's working fairly
well so far but there's 2 problems I'm having that I didn't have with
tables. I'm sure it's just something small in my CSS.
Here's the link to my page with the first problem...
http://levelwave.com/dev/
1) You'll notice that the body of the page in the <div id="rh-col">
section, is scrolling down past the footer <div id="footer"at the
bottom of the page. How do I set it so that when the body grows
vertically it pushes the footer down with it?
Here's the link the second problem...
http://levelwave.com/dev/index2.htm
2) You'll notice that the first line in the body section pushes to the
right causing you to scroll... well the logo at the top (<div
id="rh-logo"and <div id="lg-logo">) does not expand to the right with
it, instead it stays static. I would like for it to expand with the
body.
I'll post my CSS below... I'm guessing my <div id="rh-logo"and my
<div id-"footer"tag s are not set correctly.
thanks!
~john
----------------------
<!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">
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0 0 0 0;
}
#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}
#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
font-size: 10px;
color: #888888;
absolute;
bottom: 5px;
clear: both;
}
#lh-col
{
width: 145px;
height: 80%;
float: left;
border: solid #AAAAAA;
border-width: 1px 1px 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#rh-col
{
background: #ffffff;
height: 80%;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
/*margin: 0 0 0 160px;*/
padding: 0 0 0 0;
position: absolute;
left: 146px;
}
not entirely sure this will fix your problem, but try putting
clear: both;
in #footer
Mark wrote:
not entirely sure this will fix your problem, but try putting
clear: both;
in #footer
It is there :P
~john
~john wrote:
Mark wrote:
not entirely sure this will fix your problem, but try putting
clear: both;
in #footer
It is there :P
~john
oopsies. didnt see it because of your crazy indentation.
~john wrote:
I'm using DIVs in a test site for my page layout. It's working fairly
well so far but there's 2 problems I'm having that I didn't have with
tables. I'm sure it's just something small in my CSS.
Here's the link to my page with the first problem...
http://levelwave.com/dev/
1) You'll notice that the body of the page in the <div id="rh-col">
section, is scrolling down past the footer <div id="footer"at the
bottom of the page. How do I set it so that when the body grows
vertically it pushes the footer down with it?
Here's the link the second problem...
http://levelwave.com/dev/index2.htm
2) You'll notice that the first line in the body section pushes to the
right causing you to scroll... well the logo at the top (<div
id="rh-logo"and <div id="lg-logo">) does not expand to the right with
it, instead it stays static. I would like for it to expand with the
body.
I'll post my CSS below... I'm guessing my <div id="rh-logo"and my
<div id-"footer"tag s are not set correctly.
thanks!
~john
----------------------
<!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">
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0 0 0 0;
}
#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}
#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
font-size: 10px;
color: #888888;
absolute;
bottom: 5px;
clear: both;
}
#lh-col
{
width: 145px;
height: 80%;
float: left;
border: solid #AAAAAA;
border-width: 1px 1px 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#rh-col
{
background: #ffffff;
height: 80%;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
/*margin: 0 0 0 160px;*/
padding: 0 0 0 0;
position: absolute;
left: 146px;
}
im not sure why you have so much markup.. keep it simple. with all that
extra junk in there, it could be any number of things causing the
problem. try deleting everything, and only use the minimal amount of
code to get the desired effect. preview often, so you know what is
breaking it.
you might find this link helpful http://blog.html.it/layoutgala/
could be your absolute positioning that's killing it..in fact, it
probably is. but im no css expert. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Max Quordlepleen |
last post by:
Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.
I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.
Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of...
|
by: kaeli |
last post by:
I've been trying to get away from using tables as a layout tool, but I've
just come across what I consider to be a serious liability.
If I specify a width (minimum, really) in a div, such as
#body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid navy;
padding: 10px;
|
by: Screwball |
last post by:
Hi,
I'm having problems getting 2 divs to display side-by-side correctly.
I've done the google bit, but cannot find anything which is similar
enough to what I want. Most of the descriptions I've found seem to use
individual ID= (versus class=) - I don't understand how "cascading"
works in those circumstances. :(
Anyway, I have two specific questions.
|
by: Alan Silver |
last post by:
Hello,
I understand the issue that tables should be used for tabular data and
not for layout, but I would like some clarification as to exactly what
constitutes tabular data.
For example, if I have a form, in which the user is required to fill in
various bits of information, then laying out with a table makes it easy.
A basic example...
|
by: phil-news-nospam |
last post by:
In followups by Brian O'Connor (ironcorona) to other posts, he repeats
the idea that using tables in CSS is not something that should be done
because IE doesn't support it. Of course I'm not happy about the fact
that IE doesn't support CSS tables. But what can one do about that?
And tables of one type or the other are needed in some cases (regardless
of whether some people feel it is appropriate or not). So the issue I
and considering...
| | |
by: Simon Dean |
last post by:
Duh...
Not another one...
Hopefully simple though, I hate the way *I* (and it might be a CSS
trait) can't intermix fixed width divisional elements with a variable
auto expanding div???
The great thing I loved with Tables, was being able to say:
|
by: =?Utf-8?B?Tkg=?= |
last post by:
Hi,
What do you recommend for defining the layout of an asp.net 2.0 page?
Leaving masterpages and user controls aside for the moment is the use of
tables or Divs the best approach?
I have been using tables so far to define the layout and use % based sizes
so things stretch or shrink to fit the screen size. It works fine.
I read about using DIVs and saw this approach being used in some MS Asp.net
|
by: brave1979 |
last post by:
Please check out my javascript library that allows you to create any
layout for your web page, nested as deep as you like, adjusting to
width and height of a browser window. You just describe it in
javascript object and that's all. No need to know CSS hacks, no need
to clutter your html with tables.
http://www.bravelayout.scarabeo.biz/Quickstart
|
by: Chris F.A. Johnson |
last post by:
On 2008-07-09, Denis McMahon wrote:
If the left-hand column contains any text, use em rather than
px to size it.
In CSS, less is more. Most problems are caused by specifying too
much rather than too little. The default width of a block
element is 100%; you don't need to specify it.
|
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: 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: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
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.
| |
