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

Navigation background image pushes everything else down; help!

P: n/a
Hi--

Things have gone well for me on this page design, but when I added a
background image, it pushed everything down and messed up my page
layout.

Before I added the navigation background image, here is the CSS code:

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#e2edff;
line-height:125%
padding:0px;
margin:0px;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:navy;
color:white;
}
h1 {
font-size:x-large;
background-color:navy;
color:white;
padding-top:2em;
padding-bottom:.2em;
padding-left:.4em;
margin:0;
}
h2 {
color:navy;
font-size:130%;
font-weight:normal;
padding-top:15px;
}
li {
font-size:small;
list-style-type:circle;
}
h2 {

font-size:medium;
font-weight:normal;
}
li {
font-size:small;
}
p {
font-size:small;
color:navy;
}
#tagline p {
font-style: italic;
font-family:Georgia, Times, serif;
background-color:#bed8f3;
border-top:3px solid #7DA5D8;
border-bottom:3px solid #7DA5D8;
padding-top:.2em;
padding-bottom:.2em;
padding-left:.8em;
margin:0;
}
em {

text-transform:uppercase;
}
a {
font-weight:bold;
}
a:link {
color:black;
}
a:visited {
color:navy;
}
a:hover {
text-decoration:none;
color:white;
background-color:navy;
}
a:active {
color:aqua;
background-color:navy;
}
..fun {
color: #339999;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:bold;
letter-spacing:0.05em;
}
blockquote.fun {
font-style:italic;
font-weight:normal;
}

I added the navigation ID and code, which is the following, to the
code at the end:

#navigation {
width:180px;
height:484px;
background:#7da5d8 url(images/nav-bg.jpg) no-repeat;
}

You can view the completed page at http://www.china-ready.com/ianlloyd/
gallery.htm

Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.

Paul

Feb 15 '07 #1
Share this Question
Share on Google+
8 Replies


P: n/a
In article
<11**********************@h3g2000cwc.googlegroups. com>,
"pa************@gmail.com" <pa************@gmail.comwrote:
Hi--

Things have gone well for me on this page design, but when I added a
background image, it pushed everything down and messed up my page
layout.

Before I added the navigation background image, here is the CSS code:
....
>
#navigation {
width:180px;
height:484px;
background:#7da5d8 url(images/nav-bg.jpg) no-repeat;
}

You can view the completed page at http://www.china-ready.com/ianlloyd/
gallery.htm

Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.
What do you expect given you specify a height of 484px for the
div?

--
dorayme
Feb 15 '07 #2

P: n/a
On Feb 15, 1:41 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1171573995.219223.208...@h3g2000cwc.googlegroups. com>,

"paul.denlin...@gmail.com" <paul.denlin...@gmail.comwrote:
Hi--
Things have gone well for me on this page design, but when I added a
background image, it pushed everything down and messed up my page
layout.
Before I added the navigation background image, here is the CSS code:

...
#navigation {
width:180px;
height:484px;
background:#7da5d8 url(images/nav-bg.jpg) no-repeat;
}
You can view the completed page athttp://www.china-ready.com/ianlloyd/
gallery.htm
Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.

What do you expect given you specify a height of 484px for the
div?

--
dorayme
I would like to get the body copy to flow to the right of the
navigation background image, instead of having the BG image pushing
everything down and underneath it. The navigation image should form
the BG for the navigation in a column on the left.

How do I do that?

Feb 15 '07 #3

P: n/a
On 2007-02-15, pa************@gmail.com <pa************@gmail.comwrote:
[...]
#navigation {
width:180px;
height:484px;
background:#7da5d8 url(images/nav-bg.jpg) no-repeat;
}
You can view the completed page athttp://www.china-ready.com/ianlloyd/
gallery.htm
Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.

What do you expect given you specify a height of 484px for the
div?
[...]
I would like to get the body copy to flow to the right of the
navigation background image, instead of having the BG image pushing
everything down and underneath it. The navigation image should form
the BG for the navigation in a column on the left.

How do I do that?
You could add float: left to #navigation and change "left: 200px" on
#bodycontent to "margin-left: 200px".

The left property only applies to positioned boxes (position: absolute,
fixed or relative).
Feb 15 '07 #4

P: n/a
In article
<11*********************@v45g2000cwv.googlegroups. com>,
"pa************@gmail.com" <pa************@gmail.comwrote:
On Feb 15, 1:41 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
You can view the completed page athttp://www.china-ready.com/ianlloyd/
gallery.htm
Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.
What do you expect given you specify a height of 484px for the
div?

--
dorayme

I would like to get the body copy to flow to the right of the
navigation background image, instead of having the BG image pushing
everything down and underneath it. The navigation image should form
the BG for the navigation in a column on the left.

How do I do that?
float #navigation left:

float: left;

You then need to adjust margins and padding.

You repeat (harmlessly enough I suppose) stuff in your CSS.

BTW, you have a wrong colour for your <h2If you make it white
and background navy, it will show up. Best to specify a
background along with color. I think you have just made a simple
error here, it will then show up unlike at present.

--
dorayme
Feb 15 '07 #5

P: n/a
On Feb 15, 2:06 pm, Ben C <spams...@spam.eggswrote:
On 2007-02-15, paul.denlin...@gmail.com <paul.denlin...@gmail.comwrote:
[...]
#navigation {
width:180px;
height:484px;
background:#7da5d8 url(images/nav-bg.jpg) no-repeat;
}
You can view the completed page athttp://www.china-ready.com/ianlloyd/
gallery.htm
Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.
What do you expect given you specify a height of 484px for the
div?
[...]
I would like to get the body copy to flow to the right of the
navigation background image, instead of having the BG image pushing
everything down and underneath it. The navigation image should form
the BG for the navigation in a column on the left.
How do I do that?

You could add float: left to #navigation and change "left: 200px" on
#bodycontent to "margin-left: 200px".

The left property only applies to positioned boxes (position: absolute,
fixed or relative).
Thank you; it worked.

Feb 15 '07 #6

P: n/a
On Feb 15, 2:09 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1171576360.459838.33...@v45g2000cwv.googlegroups. com>,

"paul.denlin...@gmail.com" <paul.denlin...@gmail.comwrote:
On Feb 15, 1:41 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
You can view the completed page athttp://www.china-ready.com/ianlloyd/
gallery.htm
Can you tell me why the addition of the navigation code messes up the
whole layout, pushing all the elements down, and what can I do to
correct it? Thanks in advance for your help.
What do you expect given you specify a height of 484px for the
div?
--
dorayme
I would like to get the body copy to flow to the right of the
navigation background image, instead of having the BG image pushing
everything down and underneath it. The navigation image should form
the BG for the navigation in a column on the left.
How do I do that?

float #navigation left:

float: left;

You then need to adjust margins and padding.

You repeat (harmlessly enough I suppose) stuff in your CSS.

BTW, you have a wrong colour for your <h2If you make it white
and background navy, it will show up. Best to specify a
background along with color. I think you have just made a simple
error here, it will then show up unlike at present.

--
dorayme
Thank you for the suggestions.

I'm just learning CSS; I'm working my way through the book Build Your
Own Website the Right Way Using HTML & CSS by Sitepoint.

What suggestions do you have re margins and padding I can make to
improve the layout? I'm new to this, so any suggestions would be
appreciated.

Thanks again.

Feb 15 '07 #7

P: n/a
pa************@gmail.com wrote:
>
I'm just learning CSS; I'm working my way through the book Build Your
Own Website the Right Way Using HTML & CSS by Sitepoint.

What suggestions do you have re margins and padding I can make to
improve the layout? I'm new to this, so any suggestions would be
appreciated.
Well, I'm graphically challenged, so I won't presume to give you any
advice about margins and padding. I'm not sure I like the left-nav
thingy being up against the edge of the viewport when the header looks
like it has space (it's a border), but I have to leave it to you.

I would presume to suggest that you consolidate your CSS rules, though.
I think you can't possibly keep track of your effective specifications
the way things are now. I mean, you could get rid of all of these lines:

In the h1 selector:
background-color:navy;

In the h2 selector:
color:white; background-color:navy; font-size:130%; font-weight:normal;

The entire li { font-size:small; } line.

In the .fun selector:
font-weight:bold; /* if .fun will only on blockquote */

The entire #navigation { width:180px; background-color:#7da5d8; } line.

But in general my point is that if you prudently move your rules to
their selectors you will notice more redundancies and conflicts.

BTW: You have a permanent horizontal scrollbar on your page. I trace
this to the fact that you have 100% width for #header as well as 4
pixels of horizontal padding for same (in a different place). 100% plus
2px + 2px = scrollbar.

I really like the look of the page. It just needs some interesting
content. Keep going!

--
John
Feb 15 '07 #8

P: n/a
In article
<11**********************@a75g2000cwd.googlegroups .com>,
"pa************@gmail.com" <pa************@gmail.comwrote:
Thank you for the suggestions.

I'm just learning CSS; I'm working my way through the book Build Your
Own Website the Right Way Using HTML & CSS by Sitepoint.

What suggestions do you have re margins and padding I can make to
improve the layout? I'm new to this, so any suggestions would be
appreciated.
You could look at some quick fiddling of mine to your code at

<http://members.optushome.com.au/droovies/test/paul.html>

You need to go there and copy paste the code into your file
system so the pics will appear.

It is only for some ideas for you, cutting out a few things,
adding a few things and pleasing at least my eye more. Do check
your css and stuff for simple errors, use a strict doc type,
forget about target, simplify even more than I have and so on....
See how you go...

--
dorayme
Feb 15 '07 #9

This discussion thread is closed

Replies have been disabled for this discussion.