Newbie question. How would I Attain that "centered" look?

Discussion in 'HTML & Website Design' started by KGL, May 25, 2006.

  1. #1
    Still a bit of a greenhorn as far as coding is concerned.
    How would I code a layout like this one?
    I'm shooting for that "centered" look, where the website is not the whole page and theres a background image.
    HTML or CSS? Or both?

    Any help would be appreciated.
     
    KGL, May 25, 2006 IP
  2. Slapyo

    Slapyo Well-Known Member

    Messages:
    266
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    You can make a table that has a set width and in the table tag put align="center". If you use DIV's and CSS you set the DIV to your width that would be the container. Then set margin-right: auto; margin-left: auto;.
     
    Slapyo, May 25, 2006 IP
  3. KGL

    KGL Peon

    Messages:
    1,155
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Newbie here, remember?
    Could you give me some "example" code?
     
    KGL, May 25, 2006 IP
  4. Slapyo

    Slapyo Well-Known Member

    Messages:
    266
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Sorry, here you go. It's very simple but should point you in the right direction.

    <html>
    	<body>
    		<table width="750" align="center">
    			<tr>
    				<td>hi</td>
    			</tr>
    		</table>
    	</body>
    </html>
    Code (markup):
    <html>
    	<body>
    		<div id="container" style="width: 750px; margin-right: auto; margin-left: auto;">
    			<div id="content">hi</div>
    		</div>
    	</body>
    </html>
    Code (markup):
     
    Slapyo, May 25, 2006 IP
  5. studioexcel

    studioexcel Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Try centering a DIV.
     
    studioexcel, May 25, 2006 IP
  6. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #6
    You could use the "body" tag's bgcolor attribute (an old dinosaur), but you don't want to do that, i.e. instead use CSS like this:

    <body style="background: url('http://somedomain.com/someimage.gif');">
    Code (markup):
    /EDIT: Oh and if you want to check out my home-site (see the link in my sig); it's centered with "divs" exactly as you wish yours to be ...


    hope this helps, tayiper
     
    tayiper, May 27, 2006 IP
  7. mt.bum

    mt.bum Guest

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Failing to specify the width is the most common mistake when centering blocks of stuff. The css should look like the following:

    margin-left: auto;
    margin-right: auto;
    width: 774px;

    That will work for div and other properties. Choose a width small enough to not create a horizontal scroll bar when viewing at 800 x 600. The width above, 774 pixels, works when there are no other properties squeezing things down. Sometimes a smaller number is needed.
     
    mt.bum, Jun 9, 2006 IP
  8. belledumonde

    belledumonde Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    i cant help with this one, sorry. but i just wanted to say, i like your site! especially the flash and the concept! :)
     
    belledumonde, Jun 10, 2006 IP
  9. Dimenty

    Dimenty Peon

    Messages:
    20
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    site is beautiful, but it looks like template :(
     
    Dimenty, Jun 13, 2006 IP
  10. KGL

    KGL Peon

    Messages:
    1,155
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You guys are funny.
    That site is not mine.
     
    KGL, Jun 13, 2006 IP