|
|
css help!
|
|
|
|
Professional Poster
Join Date: Sep 2000
Location: San Francisco
Status:
Offline
|
|
I'm a web newbie, but have acquired the webmaster duties for our organization. I'm trying to revamp the site using proper css so that it is easier to maintain than using tables (yikes!) as it has been up to now.
I'm having a problem getting a few elements to abut one another top-to-bottom. Here's the relevant code:
Code:
.mainlayout {position:relative; margin-left:auto; margin-right: auto; width: 924px}
.toprunner {background-color: 666666}
.topline {background-color: ff9900; height:5px}
.mainbody { position:relative}
.introbox {clear: both; width: 924px}
.leftcolumn { float:left; width: 144px; background-color: #ddecfe }
.rightcolumn { float:left; width: 660px; background-color: #FFFFFF }
.adcolumn {float:left; width: 120px; top:186; left:760; background-color: #FFFFFF}
.runner {clear:both; width: 924px; background-color: #336699}
<DIV Class="mainlayout">
<img name="index_new_r1_c1" border="0" usemap="#index_new_r1_c1Map" width="760" src="test-images/index_new_r1_c1.gif" height="184" />
<DIV Class="toprunner">
<p Class="style2" size="14"> Our organization</p>
</DIV>
<DIV Class="topline">
</DIV>
<DIV Class="mainbody">
<DIV Class="leftcolumn">
<!--table here-->
</DIV>
</DIV>
I can't get 'toprunner' or 'topline' to abut the element above. They have about 10px of space between them. 'leftcolumn' is flush with 'topline' which is what I want.
Any help?
thanks!
kman
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status:
Offline
|
|
It's the <p> tag that's doing it. Browsers automatically put a bit of a margin on paragraphs. Set margin:0 either on p or on style2.
Though I'm not really sure you need a p tag if that's really the sort of thing it's being used for — it's not semantically a paragraph and you can just put any relevant styling on the div itself.
|
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Sep 2000
Location: San Francisco
Status:
Offline
|
|
Originally Posted by Chuckit
It's the <p> tag that's doing it. Browsers automatically put a bit of a margin on paragraphs. Set margin:0 either on p or on style2.
Though I'm not really sure you need a p tag if that's really the sort of thing it's being used for — it's not semantically a paragraph and you can just put any relevant styling on the div itself.
Thank you! As a newb, I appreciate any help I can get!
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
I'd also suggest killing off the capital letters in your tag names. If you are coding in XHTML I believe these will cause validation errors, forcing browsers into quirks mode.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|