SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make website 100% of screen...

    I like using Dreamweaver to design and I cannot get the website to span 100% the width of the screen. I know you have to put the table width to 100% instead of px but that still doesn't work. My table will not stretch the width. Also what size should I make a header image should I figure out how to stretch a table the width of the screen? Should the image be 800 px in width? Normally when I have a header image 800 px in width for a normal 800x600 screen resolution I get the dredded horizonal scroll bar.

  2. #2

    Join Date
    Oct 2003
    Location
    €uroLand
    Posts
    1,340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you wondering about the margin on the sides? If so .....
    HTML Code:
    <style type="text/css">
    <!--
    body {  margin: 0px;}
    -->
    </style>

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    body {
      margin: 0px;
      padding: 0px;
    }
    You also need to set padding to 0px for Opera.

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I guess I would be talking about the margins...

    check out www.good-tutorials.com this site is the whole width of the screen...this is the affect I am looking for but cannot achieve. I also would like to know how to use a banner in which I have designed....what size would it have to be to stretch the width of the screen? Sorry if I'm not making hardly any sense...I'm kinda new to this.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [I also would like to know how to use a banner in which I have designed....what size would it have to be to stretch the width of the screen? [/QUOTE]


    I always make any banner smaller than 800px to prevent the scrollbar showing on 800x600 resolution. You should be fine with 750px width.

    I would suggest you place the banner into a cell that stretches the whole of the screen and blends in with it's background color, like eg. at http://www.kottke.org/
    Then you can work easily even with smaller images, but it'll still look like a banner, or headding.

  6. #6
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try those CSS ideas. You can also (pedantically) reduce the CSS to:

    Code:
    <style type="text/css">
    body
    {
    padding: 0;
    margin: 0;
    }
    As for your banner - if it has any areas of straightforward colour - or a repetitious area, use a slice of the repeating part of the header graphic and assign it as the background image to a <td> <div> or whatever. Then in the remaining <td> or <div> use the remainder of the header graphic (without any repeating areas).

    Someting like:

    HTML Code:
    <table width="100%" cellpadding="0" cellspacing="0">
    <tr valign="top">
    <td style="background: url(/images/header_slice.gif;">&nbsp;</td>
    <td style="background: url(/images/header_main.gif no-repeat;">&nbsp;</td>
    </tr>
    </table>
    You could of course further simplify the code by addressing the table width, padding and image backgrounds into two CSS rules.

    Good luck


Bookmarks

Posting Permissions

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