Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member MikuruX's Avatar
    Join Date
    Jan 2010
    Posts
    4
    Member #
    20967
    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?

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    add this line in the body css

    margin: 0px;

    while($get_it !== true){ continue; }

  4. #3
    Junior Member MikuruX's Avatar
    Join Date
    Jan 2010
    Posts
    4
    Member #
    20967
    Ah! That did the trick. Thank you so much for that, I really appreciate it. ^^

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    very cool, glad i could help.

    while($get_it !== true){ continue; }

  6. #5
    Banned
    Join Date
    Jan 2010
    Posts
    1
    Member #
    20990
    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>

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    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

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    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.

    while($get_it !== true){ continue; }

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    oh yes, and to center for a dynamic width use position: absolute; width: auto; and declare your left/right px.

    while($get_it !== true){ continue; }

  10. #9
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    <center>, while technically not 'wrong" (allthough in html 5 it probably will be) is frowned upon by the w3c. There are better ways imo.

  11. #10
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    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%;


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

i keep getting a strange border around my dreamweaver header

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com