I have re-styled my Web site at http://www.douglaidlaw.net/boykett/ . It
now uses a CSS stylesheet basically copied from "Beginning CSS Web
Development" with a fluid main content area, and passes the validator for
HTML 4.01 (except api_sample.html . I tried to get the XHTML out of that,
but Kompozer kept putting it back till I gave up. It isn't part of the
main stream of the site, more like an aside, and it looks O.K. in XP's
Internet Explorer.)
My query is about the footer. On the start page, index.html, it has
content. On other pages, if I took it out, the background color in the
Main div would not come down far enough, stopping a short distance below
the header, so I left it in. That sounds to me as though it just should
not happen. What is wrong?
TIA,
Doug. 5  1819 
Doug Laidlaw wrote:
http://www.douglaidlaw.net/boykett/
My query is about the footer. On the start page, index.html, it has
content. On other pages, if I took it out, the background color in the
Main div would not come down far enough
This is VFAQ. Read up on the "clear" property. And see http://www.quirksmode.org/css/clearing.html
BTW, your layout is not as fluid as you think. Try setting your browser
window to about 800px wide. The trouble is
#content {
width: 80%;
padding: 10px;
}
#sidebar {
width: 15%;
padding: 10px;
}
Padding is added to the width. That extra 40px puts it over 100% when
the window isn't as large as you expect. I'd drop the padding
altogether. I'd drop floating #content, too, and just set a left margin
to clear the navigation menu. That would take care of stretching the
background color, as well.
But why don't you set background color on the body element instead?
--
Berg
Bergamot wrote:
Doug Laidlaw wrote:
>http://www.douglaidlaw.net/boykett/
My query is about the footer. On the start page, index.html, it has
content. On other pages, if I took it out, the background color in the
Main div would not come down far enough
This is VFAQ. Read up on the "clear" property. And see
http://www.quirksmode.org/css/clearing.html
BTW, your layout is not as fluid as you think. Try setting your browser
window to about 800px wide. The trouble is
#content {
width: 80%;
padding: 10px;
}
#sidebar {
width: 15%;
padding: 10px;
}
Padding is added to the width. That extra 40px puts it over 100% when
the window isn't as large as you expect. I'd drop the padding
altogether. I'd drop floating #content, too, and just set a left margin
to clear the navigation menu. That would take care of stretching the
background color, as well.
But why don't you set background color on the body element instead?
Slavishly following a precedent or precedents. That is the problem with
being a self-taught amateur. I am so used to <body bgcolor= >.
Actually, moving the background-color to the <bodytag in the stylesheet
made the whole screen take the color. That is what I really wanted, but I
expected that it would be restricted to the defined area, and leave the
external margins white (or browser default) as the container does, for
example. Probably a result of not thinking logically one step at a time.
Thanks for your other tips as well. I will adopt them all. Looking at it,
40px does seem a lot. The left margin really needs to be fixed, not
percentage. Is the way I have created the third column on index.html O.K.?
I would like eventually to make the pages into an e-book, but that is long
term, and different considerations will arise.
Doug.
Doug Laidlaw wrote:
Bergamot wrote:
>Doug Laidlaw wrote:
>>http://www.douglaidlaw.net/boykett/
My query is about the footer. On the start page, index.html, it has
content. On other pages, if I took it out, the background color in the
Main div would not come down far enough
This is VFAQ. Read up on the "clear" property. And see
http://www.quirksmode.org/css/clearing.html
BTW, your layout is not as fluid as you think. Try setting your browser
window to about 800px wide. The trouble is
#content {
width: 80%;
padding: 10px;
}
#sidebar {
width: 15%;
padding: 10px;
}
Padding is added to the width. That extra 40px puts it over 100% when
the window isn't as large as you expect. I'd drop the padding
altogether. I'd drop floating #content, too, and just set a left margin
to clear the navigation menu. That would take care of stretching the
background color, as well.
But why don't you set background color on the body element instead?
Slavishly following a precedent or precedents. That is the problem with
being a self-taught amateur. I am so used to <body bgcolor= >.
Actually, moving the background-color to the <bodytag in the stylesheet
made the whole screen take the color. That is what I really wanted, but I
expected that it would be restricted to the defined area, and leave the
external margins white (or browser default) as the container does, for
example. Probably a result of not thinking logically one step at a time.
Thanks for your other tips as well. I will adopt them all. Looking at
it,
40px does seem a lot. The left margin really needs to be fixed, not
percentage. Is the way I have created the third column on index.html
O.K.? I would like eventually to make the pages into an e-book, but that
is long term, and different considerations will arise.
Doug.
But if I delete all padding, and with no footer, the content wraps around
the links column.
Doug.
Doug Laidlaw wrote:
>Bergamot wrote:
>>Doug Laidlaw wrote:
http://www.douglaidlaw.net/boykett/
I'd drop floating #content, too, and just set a left margin
to clear the navigation menu.
But if I delete all padding, and with no footer, the content wraps around
the links column.
You need to set margin-left on the content container. Make it a little
more than the width of the navigation menu.
--
Berg
Bergamot wrote:
Doug Laidlaw wrote:
>>Bergamot wrote:
Doug Laidlaw wrote:
http://www.douglaidlaw.net/boykett/
I'd drop floating #content, too, and just set a left margin
to clear the navigation menu.
But if I delete all padding, and with no footer, the content wraps around
the links column.
You need to set margin-left on the content container. Make it a little
more than the width of the navigation menu.
Makes sense. Thanks.
Doug. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Andrew |
last post by:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.
I have the following (very simple) markup:
<div id="head">...</div>
<div id="left">...</div>
|
by: markthedoc |
last post by:
Hi
I've got a problem with excess space under my footer.
I want the page to finish at the bottom of my footer, but the background image of the body tag carries on until it reaches the bottom of the browser window.
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
|
by: stevenews |
last post by:
Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the div above the footer for reference, and the footer itself. I have the pertinent html below the css. BTW, this is only breaking in IE!! (comments added only for this post)
Thanks!!!
/* THE BODY FOR LAYOUT CENTERING */
body {...
|
by: Death Slaught |
last post by:
I have my entire page in my "main" div.
div.main
{
width: 100%;
height: 100%;
border: 1px solid gray;
}
on the left of the page I have a banner.
|
by: sannymak |
last post by:
Hello All,
I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution:
HTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/templatetest.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta...
| | |
by: darkzone |
last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now
be viewed.
?=
<!DOCTYPE HTML PUBLIC...
|
by: rassklass |
last post by:
HI all,
I have designed a site found at www.pickupnewspapers.co.uk/nottinghamshire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime the ticker types the footer jumps up and down. Also the ticker does not work in firefox but does in IE7 (cant test in any others as dont have a computer with it on) . I am quite amateur to html and no nothing about javascript. I am aware there are...
|
by: donpro |
last post by:
Hi,
I'm creating a template paging sing pure CSS and all looks good except
the footer which I am having problems with.
1) When I space out each of the FOUR DIVS at 25%, it wraps in IE. I
hacked it by changing to 24% but don;t know why.
2) I can't get the right border to extend down to the bottom border
(both IE and Firefox).
|
by: Noorain |
last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all information to show as displace. please help me.
my coding are as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>...
|
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: 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: 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: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
