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 9 of 9
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    2 Simple Header images not centering ??

    Hi,

    Some very basic html code.

    Should give me centered images, but I must have got it
    wrong somewhere

    My html:
    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css" media="all">
    * {
        
    margin0;
        
    padding0;
        }

    #mainC {
        
    width:100%;
        
    margin:0px auto;
        }

    #mainL {
        
    width:100%;
        
    float:left
        }
        
    #mainR {
        
    width:100%;
        
    float:right
        }
        
    #banner {
        
    displaynone;
        
    positionrelative;
        
    top0px;
        
    left0px;
        
    border3px solid black;
        
    overflowhidden;
    }

    #imgContainer {
        
    positionabsolute;
        
    top0px;
        
    left0px;
    }

    #imgContainer img{
        
    margin0px 0px 0px 0px;
        
    padding0px 0px 0px 0px;
        
    displayinline;
    }
        
        
    img 
        
    bordernone
        }

    h1{
         
    color:#4B4B4B;
        
    }

    h2{
         
    font-size:32px;
        
    text-align:center;    
        
    font-weightbold;
        
    color:#773500;
        
    }    
    </
    style>    
    </
    head>
    <
    body>
    <
    div id="bk_image">    </div>
        
    <
    div id="mainC">
        
        <
    div style="margin:10px 0 0 100px ; "
        <
    span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Auto World</span>
        <
    span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The Maddest Auto Community</span>
        <
    br><br>
        </
    div>
        <
    img alt="Auto World" title "Auto World" src="/images/trees.jpg" >
        <
    div style "margin: 0 auto;">
        <
    div id="banner">
        <
    div id="imgContainer"></div>
        </
    div// end banner div
        
    </div>  // end center div
        
    <br><br>
    </
    div>
    </
    div>
    </
    body>
    </
    html
    The live page is here:

    http://professional-world.com/

    Any one see the problem ??


    Thanks




    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Enclose your piece of code in a <center> tag as shown below -
    Code:
    <center>
        <img alt="Auto World" title = "Auto World" src="/images/trees.jpg" > 
        <div style = "margin: 0 auto;"> 
        <div id="banner"> 
        <div id="imgContainer"></div> 
        </div> // end banner div 
        </div>  // end center div
    </center> 

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Since you have a fixed width (1800) you could put in a fixed padding of 1800 - 900 / 2 or 450. But if the screen is less than the 1800 then the image will not appear centered.

    If you wanted to do it more that css way then add margin-left: auto; and margin-right: auto; to the image container. This also has the problem that it won't appear centered if the screen is less than 1800 wide.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try this:

    Code:
    <div id="container" style="width: 960px;margin: 0 auto;">
    <div id="bk_image"></div><div id="mainC">
    	
    	<div style="margin:10px 0 0 100px ; "> 
    	<span style="font:Helvetica,Arial,sans-serif; font-size:20px; color:#000000;">Auto World</span>
    	<span style="font:Helvetica,Arial,sans-serif; font-size:16px; color:#000000;">The Maddest Auto Community</span>
    	<br><br>
    	</div>
    	<img alt="Auto World" title="Auto World" src="/images/trees.jpg">
    	<div style="margin: 0 auto;">
    	<div id="banner" style="height: 150px; width: 900px; display: block;">
    	<div id="imgContainer" style="width: 1800px; left: 0px;"><img id="img_1" src="http://expert-world.org/banners/top-ten-fitness-diets.jpg"><img id="img_2" src="http://expert-world.org/banners/family-fitness-activities.jpg"></div>
    	</div> // end banner div
    	</div>  // end center div
    	<br><br>
    </div>
    
    </div>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jeddi,
    Do not use deprecated <center> tags!

    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


    Since your #banner gets it's 900px width from inline styling, adding this bit in red to your CSS will center it.
    Code:
    #banner {
        border: 3px solid black;
        display: none;
        /*top: 0;
        left: 0; */
        margin: auto;
        overflow: hidden;
        position: relative;
    }
    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

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks for all the replies.

    I don't understand this comment:

    Since you have a fixed width (1800)

    I have declared width:100%;

    I don't think I have any 1800 statement ???


    I thought this would center everything inside it. ??

    Code:
    #mainC { 
        width:100%; 
        margin:0px auto; 
        }
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quote Originally Posted by jeddi View Post
    Thanks for all the replies.

    I don't understand this comment:




    I have declared width:100%;

    I don't think I have any 1800 statement ???


    I thought this would center everything inside it. ??

    Code:
    #mainC { 
        width:100%; 
        margin:0px auto; 
        }
    When I looked at it in Firebug and the element.style width.

    You override the mainC margin. Look at "banner" in firebug and you will see the margin becomes "0".
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jeddi View Post

    I thought this would center everything inside it. ??

    Code:
    #mainC { 
        width:100%; 
        margin:0px auto; 
        }
    No, not quite. In that bit of CSS the margin: 0 auto; only affects the outside of #mainC, not the contents. It can't center #mainC because, at 100% width, there is nothing to center.
    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

  • #9
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    OK - thanks for your patience.

    I really should know this stuff by now !!

    Anyway, so the answer is,
    If I want to center my page - I NEED to give it a width ?

    So If I choose, say 1200px.
    For 90 % of monitors, I guess that will be OK ?


    EDIT: Well, just tried that on mine and the image was not centered
    but over to the LEFT hand side.

    I changed the width to 1000px and now, on my monitor, it looks centered.

    Don't know about others though


    .
    Last edited by jeddi; 01-24-2013 at 06:43 AM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

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