homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Adding css code superimposes one section on another
Trying to figure our strange phenomonen...
arthur22




msg:4471352
 9:40 pm on Jun 30, 2012 (gmt 0)

I'm having a strange problem with CSS for a header section which I can't figure out. I should say this is for the header of a vbulletin forum so there may be complications there, but even so, the css problem seems fairly simple, if only I had the right knowledge...


I have this code in my main html page:

<div id="headerimage">
<img src="http://www.example.com/images/image1.jpg" alt="Header Image" width="700" height="50" />
</div>

<div id="navigationlinks">
<p><a href="http://www.example.com">Home</a> |
<a href="http://www.example.com/one.htm">Section One</a> |
<a href="http://www.example.com/two.htm">Section two</a> |
</div>


And this code in my css:

#headerimage{width:700px;height:50px}
#navigationlinks{width:700px;height:38px}


What the code produces is the header image with the navigation links superimposed over the top of the image. This isn't what I want - I want the image at the top and then the links underneath.


However, when I remove this line:

#headerimage{width:700px;height:50px}

the code works fine, and I get the image at the top and the links underneath, rather than the second div superimposed over the first one.

And I can't for the life of me figure out why...is there some rule of css that might be producing this phenomonen? I could just leave the code without the #headerimage line, but I feel like I need to understand why it is working this way.

Any help gratefully received!

 

lucy24




msg:4471412
 12:57 am on Jul 1, 2012 (gmt 0)

Get the obvious stuff out of the way first. Does your code say anything about divs in general-- that is

div {blahblah, et cetera}

--or about divs with an id property--

div[id] {blahblah}

-- or about things-in-general with an id property?

*[id]

(But don't quote me on that last bit of syntax.)

Second: Does the page include any inherited CSS from somewhere "upstairs"? That includes things the browser will do on its own, unless given instructions to the contrary. It's a good idea to spell out your defaults, even if that's what 9 out of 10 browsers would do anyway:

hr {text-align: center}
seems a waste of time and space until you run into the one browser that thinks hr's should be left-aligned.

Having to say

div, p, blockquote, table, ul, h1, h2 et cetera {diaplay: block;}

may seem a bit over the top, but it can't hurt. (Especially when, like me, you expect your table cells to be top-aligned and your headers to be centered-- unless you specifically declare otherwise.)

Uhm. What was the question again?

rainborick




msg:4471435
 5:32 am on Jul 1, 2012 (gmt 0)

This is the kind of situation where a browser plug-in/tool can be a real help. Try the F12 Developer Tools in IE or Firebug in Firefox. Then you can inspect individual elements and see exactly what the CSS settings are and where they came from.

rocknbil




msg:4471540
 5:43 pm on Jul 1, 2012 (gmt 0)

That CSS alone won't be the cause, you likely have a float or absolute positioning somewhere that is taking the elements out of the natural document flow, causing the overlap. As mentioned, Firebug. :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved