HTML and CSS Help

MikuruX · January 24 '10, 05:25 PM (#1)

Hello!

This is my first time ever trying to make a website using CSS to make a web page. I'm currently using Dreamweaver CS4 (noob with this also) and I've managed to get the basic layout of my page done but when I check it in a browser, It never comes out to full width/height and I keep getting the white border around the far edges of my page.

Live Example: http://www.animetoshokan.org/template.html

Here is what my current code looks like so far:

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" xml:lang="en" lang="en" >
<head>
<title>Anime Toshokan Inc. :: We've Been Waiting For You! :: Ver 11.1 :: Revival Serenade</title>
<style type="text/css">
#body {background: #ffffff;
       border-left: solid;
       border-left-width: 0;
       border-right: solid;
       border-right-width: 0;
       border-top-style: solid;
       border-top-width: 0;
       border-bottom-style: none;
       border-bottom-width: medium;
       }

#header {background: #0000ff;
         background-image: url(headerbg.png);
         border-left: solid;
         border-left-width: 0;
         border-right: solid;
         border-right-width: 0;
         border-top-style: solid;
         border-top-width: 0;
         border-bottom-style: none;
         border-bottom-width: medium;
         }

#menu {background: #00ff00;
       background-image: url(menubarbg.png);
       }

#maincol {background: #ffffff;
          background-image: url(contentbg.png);
          background-repeat: no-repeat;
          }

#footer {background: #ff0000;
         background-image:url(footerbg.png);
         }

</style>
</head>



<body id="body">
<div id="pagewidth">
<!--------- Header Area --------->
<div id="header">

<center>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bordercolor="#111111"  style="height: 168px">
 <tr valign="top">
     <td height="168">
     
     
     
     </td>
 </tr>
</table>
</center>


</div>

<!--------- Main Menu Area --------->
    <div id="menu" >

<center>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bordercolor="#111111"  style="height: 75px">
 <tr valign="top">
     <td height="75">
     
     
     
     </td>
 </tr>
</table>
</center>


</div>

<!--------- End of Main Content Area --------->


<!--------- Main Content Area --------->
<div id="maincol" >
<center>
<table width="85%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" bordercolor="#111111"  style="height: 800px">
 <tr valign="top">
     <td height="180">
     
     Main Content Here
     
     </td>
 </tr>
</table>
</center>
</div>
<!--------- End of Main Content Area --------->

<!--------- Footer Area --------->
    <div id="footer" >
    
<center>    
    <table width="85%" cellpadding="0" cellspacing="0" border="0" bordercolor="#111111"  style="height: 80px">
 <tr valign="top">
     <td height="80">
     
     
     
     </td>
 </tr>
</table>
</center>
</div>
<!--------- End of Footer Area --------->
    </div>
</body>
</html>

Can anyone help me out with this by pointing out my error or giving me some tips on what to do so I wont this kind of mistake again?

Dorky · January 24 '10, 06:58 PM (#2)

add this line in the body css

margin: 0px;

MikuruX · January 24 '10, 07:22 PM (#3)

Ah! That did the trick. Thank you so much for that, I really appreciate it. ^^

Dorky · January 24 '10, 08:35 PM (#4)

very cool, glad i could help.

~~5online~~ · February 2 '10, 08:04 AM (#5)

following will work:
for css :
background: #ffffff;
background-image: url(contentbg.png);
background-repeat: no-repeat;

for table:

<table width="100%" cellpadding="0" cellspacing="0" border="0" bordercolor="#111111" style="height: 75px">
<tr valign="top">
<td height="75">

</td>
</tr>
</table>

diddy · February 6 '10, 11:08 PM (#6)

Glad that you got the help you're looking for.

Just wanted to point some things out in your code (remembering that you're a noob).

Try not to use the <center> tag. text-align: center; will work just fine in CSS. Try to do as much with CSS as you pssibly can. Remember your XHTML doctype and stick to it. Try to use DIVs over <table> for site layout. Tables are for tabular data, not website layout.
I found it a great help going to these links, it'll clear a lot up:
http://www.w3schools.com/css
http://www.w3schools.com/xhtml
http://w3schools.com/tags/default.asp

Dorky · February 8 '10, 12:55 PM (#7)

text-align: center; is for text, as implied by the leading word "text". center is just fine providing you are not using it with position: absolute; and the proper way to center using css is to declare a width and left/right auto margins.

when talking down to a noob, be sure you dont look as one yourself.

Dorky · February 8 '10, 12:59 PM (#8)

oh yes, and to center for a dynamic width use position: absolute; width: auto; and declare your left/right px.

diddy · February 8 '10, 05:01 PM (#9)

<center>, while technically not 'wrong" (allthough in html 5 it probably will be) is frowned upon by the w3c. There are better ways imo.

diddy · February 10 '10, 04:31 AM (#10)

Quote:

Originally Posted by 5online5

the thing is that you full width then you need to give table width 100% so it will extend as much as resolution streches .

Yes, that will work. In fact it works in any element, for example tables and divs.
I would wrap the site in a div, not a table, but the point is that the 100% width statement is the key. But definately use the CSS:

Code:

width: 100%;

Dorky · February 10 '10, 07:56 PM (#11)

Quote:

is frowned upon by the w3c

no such thing in data. 1 or 0 - on or off - true or false.

HTML and CSS Help

Can't Make Page Full Width - HTML/CSS Prob