Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I make a centered site overflow?

    Hi,
    I would like my website to be centered even if the window width is smaller than my website's width. There should be no scroll bar, the right and left sides should just be cropped when they overflow.

    The two images on the sides are 1px wide and should stretch to adapt the window resolution if it's larger than the website center.

    Here is an image than explains exactly what i want:
    http://img404.imageshack.us/img404/4698/aide.jpg

    And this is the code I have at the moment:
    Code:
    <body topmargin="0" leftmargin="0">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="69" background="stretchingside.png">&nbsp;</td>
        <td width="1278" height="69" align="center" background="center.gif">&nbsp;</td>
        <td height="69" background="stretchingside.png">&nbsp;</td>
      </tr>
    </table>
    </body>
    I'm beginning with web coding and i'm sure a HTML/PHP code could do the job. Could you guys help me?

    These are the two images in case you want to test:
    center.gif
    stretchingside.png

    Thanks.

    -g1g010

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello g1g010,
    This will close down to the width of #wrap before getting any scrollbar. Does that help?
    Code:
    <!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: 12px "Comic Sans MS";
    	background: #FC6 url(stretchingside.png) repeat-x;;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 936px;
    	height: 69px;
    	margin: 0 auto;
    	background: url(center.gif) center;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
        <!--end wrap--></div>
    </body>
    </html>
    To make #wrap close down when the browser gets sized smaller can be done with percentages... like this - http://css-tricks.com/examples/PerfectFluidWidthLayout/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, that solved my problem!
    Thanks a lot for your time.
    My only problem right now is that, as you maybe figured, that's just the top of my site, the rest still has to be added. How can I fit this into a table? Because right now it looks like it's considered as the background of the whole page, not the background of a cell.

    I'm used to only use Dreamweaver in Design mode, I rarely modify the code manually, as i'm more a designer than a coder. Pardon my coding ignorance and again thanks for the help.

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind, i found it.


  •  

    Posting Permissions

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