PDA

View Full Version : css layout help needed



itssawyer
Apr 29th, 2009, 03:23 PM
i am making a layout for a new website and i am linking the css to the html page. everything is lining up good, but there is a small gap between the images. I know that the gaps being created are not from the images because you can see the bg color. The code is below, any ideas?

css


h1 {
color: #cccccc;
font-size: 16px;
text-decoration: underline overline;
font-family: arial;
}

body {
background-color: #CCCCCC;

}

table {
border: 0px;
cell-padding: 0px;
border-spacing: 0px;
cell-spacing; 0px;
border-collapse: 0px;
}

tr {
border: 0px;
padding: 0px;
border-spacing: 0px;
cell-spacing; 0px;
border-collapse: 0px;
}


td {
border: 0px;
bgcolor: #ffffff;
p align: center;
border-spacing: 0px;
padding: 0px;
border-collapse: 0px;
}


#header {
background-image: url(header.png);
width: 1000px;
height: 250px;
padding: 0px;
border-spacing: 0px;
border: 0px;
border-collapse: 0px;
}

#menu {
background-image: url(menu.png);
height: 50px;
padding: 0px;
border-spacing: 0px;
border: 0px;
border-collapse: 0px;
}

#body {
background-image: url(body.png);
height: 500px;
border-spacing: 0px;
padding: 0px;
border: 0px;
border-collapse: 0px;
}


#footer {
background-image: url(footer.png);
height: 55px;
border-spacing: 0px;
padding: 0px;
border: 0px;
border-collapse: 0px;

}

h3 {
font-size: 12px;
}

a:link {
color: silver;
}

a:hover {
color: #000000;
}

a:visited {
color: silver;
}

a:active {
color: #ffffff;
}


html


<html>
<head>
<title>Home</title>

<LINK href="css.css" rel="stylesheet" type="text/css">

</head>
<body>

<table>


<!-- HEADER -->


<tr>
<td p align="center">
<div id="header">





</div>
</td>
</tr>


<!-- MENU -->



<tr>
<td p align="center">
<div id="menu">
News

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

forum

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

contact

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

about

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</td>
</tr>
<tr>
<td p align="center">
<div id="body">
BODY
</div>
</td>
</tr>


<!-- FOOTER -->



<tr>
<td p align="center">
<div id="footer">

<h3>&copy; Copyright 2009-'10</h3>

</div>
</td>
</tr>
</body>
</html>

Rowsdower!
Apr 29th, 2009, 03:34 PM
i am making a layout for a new website and i am linking the css to the html page. everything is lining up good, but there is a small gap between the images. I know that the gaps being created are not from the images because you can see the bg color. The code is below, any ideas?
...

Hi there. You're using PNG images (which support transparency) so seeing the background color isn't necessarily any confirmation that the images themselves aren't the problem.

I'll also say, since you are bound to hear it anyway, that you shouldn't be using tables for page layout.

Anyway, try inserting * {margin:0;padding:0;border:0;} at the very top of the CSS and see if the problem persists. If so, please link us to a live test site (or at least upload your image files so we can re-create the page).

itssawyer
Apr 30th, 2009, 04:20 AM
thanks Rowsdower! for your reply. I know that the gaps are not from the images because i just recently made them png images. they used to be jpgs and had a white bg color and the body bg was #cccccc, and the gaps were still there. i did have the padding and spacing in many parts of the css already. nothing worked. i will try more with the margin and reply later. thanks

itssawyer
Apr 30th, 2009, 04:32 AM
the gaps are still there. Here is the link to a free host i used to upload the site for you.

any ideas?

http://www.freewebs.com/layoutsxtreme/phumu.html

SB65
Apr 30th, 2009, 03:17 PM
cell-spacing; 0px;

should be


cell-spacing: 0px;

I think this would be easier without the tables....

Edit: Or make:


border-collapse: 0px


border-collapse: collapse

Rowsdower!
Apr 30th, 2009, 03:26 PM
Ok, we'll start off with the obligatory "tables for layout is bad practice" statement. The new wave is using <div> elements with padding, margins, floats, and positioning to create layouts that are more flexible. Do some google searching for tableless layouts for inspiration and a few tutorials and consider updating what you have.

I will also recommend adding a valid doctype (http://www.w3.org/QA/2002/04/valid-dtd-list.html) to your code. The common wisdom is to use the strict doctype and only back down to transitional if you have to for page requirements (not for ease of coding). This will make you page look as similar as possible in all browsers. Right now, for instance, you page looks fine in FF2. The gaps only show up in IE. A valid and strict doctype combined with valid code and the * {margin:0;padding:0;border:0;} CSS mentioned earlier will go a long way toward making your pages render well in all browsers.

In your specific case, the band-aid solution is adding this red/highlighted part to your table attributes:
...
<body>

<table cellspacing=0>


<!-- HEADER -->


<tr>
...
Really though I would strongly recommend re-working your design now to get rid of tables, while the site is in development.

D'oh! I was beaten to the punch! I need to work on my typing speed... ;)

abduraooft
May 1st, 2009, 12:27 PM
There is no CSS properties like cell-padding or cell-spacing. They are the attributes of table tag.


Ok, we'll start off with the obligatory "tables for layout is bad practice" statement. The new wave is using <div> elements with padding, margins, floats, and positioning to create layouts that are more flexible. Do some google searching for tableless layouts for inspiration and a few tutorials and consider updating what you have. I second! Know why tables for layout is stupid (http://www.hotdesign.com/seybold/) and the importance of having a semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) and valid markup (http://validator.w3.org/docs/help.html#validation_basics).

itssawyer
May 2nd, 2009, 03:17 PM
alright. Thanks everyone for your help.

Excavator
May 2nd, 2009, 04:31 PM
Hello itssawyer,
Here is a different approach that may help you get started -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 1000px;
margin: 30px auto;
overflow: auto;
}
#menu {
height: 59px;
background: url(http://www.freewebs.com/layoutsxtreme/menu.png)
}
ul#navlist {
width: 400px;
margin: 0 auto;
}
#navlist li {
display: inline;
}
#navlist li a {
width: 100px;
height: 59px;
line-height: 59px;
color: #000;
text-decoration: none;
float: left;
}
#navlist li a:hover {color: #f00;}
#page {
background: url(http://www.freewebs.com/layoutsxtreme/body.png) repeat-y;
text-align: left;
padding: 0 15px;
}
#footer {
height: 59px;
line-height: 59px;
background: url(http://www.freewebs.com/layoutsxtreme/footer.png);
}
</style>
</head>
<body>
<div id="container"> <img src="http://www.freewebs.com/layoutsxtreme/SQRL_header.png" alt="header image" />
<div id="menu">
<ul id="navlist">
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!--end menu-->
</div>
<div id="page">
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<!--end page-->
</div>
<div id="footer">&copy; Copyright 2009-'10 phumu</div>
<!--end container-->
</div>
</body>
</html>

itssawyer
May 6th, 2009, 04:42 AM
cell-spacing; 0px;

should be


cell-spacing: 0px;

I think this would be easier without the tables....

Edit: Or make:


border-collapse: 0px


border-collapse: collapse

Thank you, this solved my problem.