|
|
|
|
Thread Tools | Display Modes |
01-15-2008, 07:25 PM | #1 |
Scooby Specialist
Member#: 42645
Join Date: Sep 2003
Chapter/Region:
NESIC
Location: MA
Vehicle:2014 Audi S4 Brilliant Black |
HTML/CSS Help
Hey OT,
I'm in the process of working on a website. I've been using Dreamweaver 8, and have created most of my images using Photoshop. Basically I'm going for a solid color background, with a rounded edge rectangle box in the middle. Therefore I've created the body, header, and footer images for this. I'm using CSS, and I've created 4 DIV's so far, all with classes. Basically I have the folllowing: -header DIV -body/content DIV -footer DIV -wrap DIV, which contains all other DIV's inside The problem I'm having is the following: Basically the middle portion, or 'box' on my site has a white background with graphically applied borders. The background for each DIV is set to the respective image that I created for it. So the header has the header one with no repeat, body with body image, and set to repeat, and footer set to it's own with no repeat. The header and body DIV's seem to "come together" fine, without any space between the two. Although the body and footer DIV's, there is a space. This space does not appear in the WYSIWYG editor, nor does it appear in IE. It only shows up in firefox. I've tried moving the DIV up in the editor, and it appears to be snug right up next to the body DIV. But the gap still appears when previewed in Firefox, and firefox only. I have tried to describe this problem to the best of my knowledge. I have included a screenshot which should basically say everything. Any ideas on how to fix this gap? Thanks!
* Registered users of the site do not see these ads.
|
01-15-2008, 07:27 PM | #2 |
Scooby Newbie
Member#: 80916
Join Date: Feb 2005
Chapter/Region:
BAIC
Vehicle:My name isn't Max. Sonoma. XJ. |
Put this as the first argument in your stylesheet:
* { margin: 0; padding: 0; } Also, use div id's for things that appear once, like headers, wrappers, footers, etc. Use classes when things appear more than once, like list items. |
01-15-2008, 07:27 PM | #3 |
Scooby Specialist
Member#: 42645
Join Date: Sep 2003
Chapter/Region:
NESIC
Location: MA
Vehicle:2014 Audi S4 Brilliant Black |
And before I forget, code:
HTML Page: 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="cb.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { background-color: #034DA4; } --> </style></head> <body> <div class="#wrap" id="wrap"> <br /> <div class="header-class" id="header"></div> <div class="main-content" id="main-block"> <div id="navbar"> <ul> <li><a href="services.html">services</a></li> <li><a href="rates.html"> rates</a></li> <li><a href="contact.html"> contact us </a></li> <li><a href="about.html">about us</a></li> </ul> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div class="footer-bottom" id="footer"></div> <p> </p> <p> </p> <p> </p> </div></body> </html> CSS Code Code:
#wrap { width: 790px; margin: 0 auto; } #header { width: 790px; position: relative; background-image: url(images/header.jpg); background-repeat: no-repeat; background-position: center top; height: 102px; padding: 0px; } #main-block { background-image: url(images/body.jpg); background-repeat: repeat; background-position: center top; width: 790px; position: relative; padding: 0px; clear: both; } #footer { width: 790px; height: 68px; background-image: url(images/footer.jpg); background-repeat: no-repeat; background-position: center top; position: relative; padding: 0px; } #table-main { background-position: center center; display: inline; } .table-main { background-position: center center; display: inline; text-decoration: none; text-align: left; } #navbar ul li a:hover { color: #034DA4; } #navbar { height: 20px; width: 790px; text-decoration: none; font-family: "HandelGothic BT"; font-size: 18px; color: #DB7F40; } #navbar ul { list-style-type: none; display: inline; margin: 0px; padding: 0px; text-indent: 5px; } #navbar ul li { display: inline; text-indent: 3cm; } #navbar ul li a { text-decoration: none; float: none; color: #DB7F40; font-family: "HandelGothic BT"; font-size: 18px; } |
01-15-2008, 07:29 PM | #4 | |
Scooby Specialist
Member#: 42645
Join Date: Sep 2003
Chapter/Region:
NESIC
Location: MA
Vehicle:2014 Audi S4 Brilliant Black |
Quote:
Before I even had a chance to post the code, you solved my problem! It works perfectly now! Thanks a TON! |
|
01-15-2008, 07:29 PM | #5 |
Scooby Newbie
Member#: 80916
Join Date: Feb 2005
Chapter/Region:
BAIC
Vehicle:My name isn't Max. Sonoma. XJ. |
Also, the reason the gap is there is because you have all those empty <p> tags. My fix should work for that, but you will have to add an argument for <p> styling, such as:
p { margin: 7px 0; } Otherwise they won't contain any space around them. |
01-15-2008, 07:31 PM | #6 |
Scooby Newbie
Member#: 80916
Join Date: Feb 2005
Chapter/Region:
BAIC
Vehicle:My name isn't Max. Sonoma. XJ. |
You should always use that global reset when starting out on a page from scratch.
I have an actual default stylesheet that I import to every CSS document I use, which basically resets all the default browser values to be consistent. If you search the web you can find some to use as well. That way when you start out, you never have any of those problems. |
01-15-2008, 07:31 PM | #7 | |
Scooby Specialist
Member#: 42645
Join Date: Sep 2003
Chapter/Region:
NESIC
Location: MA
Vehicle:2014 Audi S4 Brilliant Black |
Quote:
I put those in for now just to space out the main body DIV so I could view what it would look like physically when filled with content. Thanks again! |
|
Thread Tools | |
Display Modes | |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
HTML email help... | Honkey3k | Off-Topic | 2 | 04-05-2006 05:18 PM |
HTML Frames Help? | roffle | Off-Topic | 61 | 05-17-2005 12:49 PM |
html css help image borders | SgWRX | Off-Topic | 12 | 03-01-2005 09:34 AM |
HTML guru's: Help! | eurojax | Off-Topic | 1 | 08-05-2004 06:09 AM |
HTML Guru's: HELP! | Remy E. LeBeau | Off-Topic | 19 | 06-20-2003 03:22 PM |