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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    478
    Thanks
    7
    Thanked 3 Times in 3 Posts

    how do i center everything on the page and inside the divs ?

    I have been playing around with the code and just can not get this image to be in the center of the page.

    How do I do this correctly?

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    
    <title>.........</title>
    
    </head>
    
    <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);">
    
    <div style="width: 760px; align: center;"><img src="images/header4.jpg" alt=""></div>
    
    
    
    
    
    
    
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    align is a deprecated tag.

    Use:
    <div style="text-align: center;">

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    rather use the margin:auto
    Code:
    <div style="width: 760px"><img src="images/header4.jpg" alt="" style="display:block;margin:0 auto 0 auto"></div>
    It would be better if you will use CSS classes instead of style...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep, true Kor! You can use text-align for the image, as that is a quick and dirty way to centre it...

    Also, to centre the parent div, need:
    style="margin auto;"

    So it would be:

    <code>
    <div style="width:780px; margin:0 auto;">
    <img src="images/header4.jpg" alt="" style="display:block;margin:0 auto;">
    </div>
    </code>

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    478
    Thanks
    7
    Thanked 3 Times in 3 Posts
    EDIT *


    ok i have been playing around a little more and now got this far..
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    
    <title>.........</title>
    
    </head>
    
    <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);">
    
    <div style="width: 100%; height: 100%; text-align: center; margin: 0 auto;">
    	<div style="width: 100%; height: 192px; text-align: center; margin: 0; background-image: url(&quot;images/header4.jpg&quot;); background-repeat: no-repeat; background-position: center;"></div>
    	<div style="width: 100%; height: 100px; text-align: center; margin: 0; background-image: url(&quot;images/navi.jpg&quot;); background-repeat: no-repeat; background-position: center;">nav</div>
    	<div style="width: 100%; height: 100%; text-align: center; margin: 0; background-image: url(&quot;images/pgbackgrd.jpg&quot;); background-repeat: repeat-y; background-position: center;">MAIN<br><br>CONTENT,<br><br>IMAGE<br><br>NEEDS<br><br>TO<br><br>REPEAT<br><br>DOWN<br><br>PAGE.</div>
    	<div style="width: 100%; height: 100px; text-align: center; margin: 0; background-image: url(&quot;images/bottombanner.jpg&quot;); background-repeat: no-repeat; background-position: center;"></div>
    </div>
    
    
    </body>
    </html>
    viewing in Firefox (*and IE) i get a gap between the images. how do i get rid of this gap ?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello needsomehelp,
    That is good advice from Kor, you should use attached or linked CSS instead of the inline styles you are working with now.

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    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


  •  

    Posting Permissions

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