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 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

    Centering an Image Problem

    Having trouble centering an image. I have margin set to auto but it's lining up on the left. I also used a jquery fix to have full coverage of a background. THE CSS
    Code:
        
    
    html, body {border: 0; margin: 0; padding: 0;}
    
    body {
      	font: 85%/0.9 arial, helvetica, sans-serif;
    	background: #99A989 url(../images/bg.jpg) repeat 0 0;
      	line-height: 130%;
      	width: 100%;
      	min-width: 970px;
      	color: black;
    }
    
    a {
    	color: #0099CC;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #00CCFF;
    }
    
    a img {
      border: none;/*remove border for linked images*/
    }
    .header {
    	margin-left: auto;
    	margin-right: auto;
    }
    
    
    
    
    
    h1 {
    	font-size: 1.6em;
    	height: 20px;
    	padding-top: 0;
    }
    
    h2{
    	font-size: 1.2em;
    	height: 20px;
    	padding-top: 0;
    }
    
    .highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}
    
    /***** Main Layout ****/
    #container {
      	width: 100%;
      	height: 100%;
      	text-align: center;/* IE fix to center the page */
    }
    
    
    #content {
    	margin: 0 auto;
    }
    
    
    
    img.bg {
    	/* Set rules to fill background */
    	min-height: 100%;
    	min-width: 1024px;
    
    	/* Set up proportionate scaling */
    	width: 100%;
    	height: auto;
    
    	/* Set up positioning */
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    
    @media screen and (max-width: 1024px){
    	img.bg {
    		left: 50%;
    		margin-left: -512px; }
    }
    
    
    div#content {
    	/* This is the only important rule */
    	/* We need our content to show up on top of the background */
    	position: relative;
    }
    THE HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      	
    	<!-- stylesheets -->
      	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
      	<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
    	
      	<!-- PNG FIX for IE6 -->
      	<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
    	<!--[if lte IE 6]>
    		<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
    	<![endif]-->
    	 
        <!-- jQuery - the core -->
    	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    	<!-- Sliding effect -->
    	<script src="js/slide.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    <!-- Panel -->
    <div id="toppanel">
    	<div id="panel">
    		<div class="content clearfix">
    			<div class="left">
    	
    				<p class="grey">Home | Issues | Info | Forum | Connect</p>
    
    			</div>
    			<div class="left">
    				<!-- Login Form -->
    
    			</div>
    			<div class="left right">			
    				<!-- Register Form -->
    
    			</div>
    		</div>
    </div> <!-- /login -->	
    
    	<!-- The tab on top -->	
    	<div class="tab">
    		<ul class="login">
    			<li class="left">&nbsp;</li>
    
    			<li class="sep">|</li>
    			<li id="toggle">
    				<a id="open" class="open" href="#">Navigation</a>
    				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
    			</li>
    			<li class="right">&nbsp;</li>
    		</ul> 
    	</div> <!-- / top -->
    	
    </div> <!--panel -->
    <img src="images/bg.png" class="bg" />
    <div id="content">
    <div id="header"><img src="images/header2.png" /></div>
    
    </div>
    
    </body>
    </html>
    
    Any ideas?

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Are you trying to center the background image? I think margin should be set to:

    html, body {border: 0; margin: 0 auto; padding: 0;}
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Hey thanks for the quick reply. I have the background as I want it.

    I'm trying to center this image :
    Code:
    <div id="content">
    <div id="header"><img src="images/header2.png" /></div>
    
    </div>
    header2.png is aligning to the left and not in the center. the div header has margins set to auto, so I don't know why it's not centering.

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Gotcha. Change this:

    .header {
    margin-left: auto;
    margin-right: auto;}

    to this:

    #header {text-align:center;}

    In you original css, your calling the class name header, but you should be calling the id name header.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • Users who have thanked optimus203 for this post:

    pennella (09-08-2010)

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    You sir are awesome. Thanks a million times. I really appreciate it. Thank you for the explanation too.

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Also, just a question. I thought the difference between class and id was just a naming convention. Could you elaborate on what actually was the culprit here.
    Thanks again

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    CSS:

    Code:
    #header {
    width: XXpx;
    height: YYpx;
    margin: 0 auto;
    background:  url(../images/header2.png) no-repeat center scroll;
    }
    HTML:

    Code:
    <div id="content">
    <div id="header"></div>
    
    </div>
    That's all you need for the header unless you want to make it clickable, then CSS can set up a background image as a clickable link or you can return to using the image tag and wrap it in the link tags. Be sure to set width/height to at least the size of the image used. To center an element, you must have a width set before using the CSS property, margin: 0 auto;.

    If you want your page centered:

    CSS:

    Code:
    body {
    width: 1024px;
    height: YYYpx; /* Optional */
    font: 85%/0.9 arial, helvetica, sans-serif;
    background: #99A989 url(../images/bg.jpg) repeat 0 0 scroll;
    line-height: 130%;
    color: #000;
    }
    If you want image as a link, the easy way is:

    HTML:
    Code:
    <div id="content">
    <div id="header"><a href="URL path to external link" title="Mouseover Description"><img style="width: XXpx; height: YYpx; border: 0;" src="../images/bg.jpg" alt="Text Description" /></a></div>
    
    
    </div>
    Last edited by Major Payne; 09-07-2010 at 05:29 PM.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    pennella (09-08-2010)

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Ok thanks a lot for all the help. I do have one more question. I got the #header to center. After that I have another div (#navbar)I want to center it as well but again, its lining up on the left. Any ideas? Here's all the Code

    CSS:
    Code:
    html, body {border: 0; margin: 0 auto; padding: 0;}
    
    body {
      	font: 85%/0.9 arial, helvetica, sans-serif;
    	background: #99A989 url(../images/bg.jpg) repeat 0 0;
      	line-height: 130%;
      	width: 100%;
      	min-width: 970px;
      	color: black;
    }
    
    a {
    	color: #0099CC;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #00CCFF;
    }
    
    a img {
      border: none;/*remove border for linked images*/
    }
    #header {text-align:center;}
    #navbar {
    	text-align:center;
    	background-image: url(../images/nav_bg.png);
    	height: 32px;
    	width: 737px;
    	margin: 0%;
    	background-repeat: no-repeat;
    	background-position: center;
    }
    
    
    
    
    
    
    h1 {
    	font-size: 1.6em;
    	height: 20px;
    	padding-top: 0;
    }
    
    h2{
    	font-size: 1.2em;
    	height: 20px;
    	padding-top: 0;
    }
    
    .highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}
    
    /***** Main Layout ****/
    #container {
      	width: 100%;
      	height: 100%;
      	text-align: center;/* IE fix to center the page */
    }
    
    
    #content {
    	margin: 0 auto;
    }
    
    
    
    img.bg {
    	/* Set rules to fill background */
    	min-height: 100%;
    	min-width: 1024px;
    
    	/* Set up proportionate scaling */
    	width: 100%;
    	height: auto;
    
    	/* Set up positioning */
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    
    @media screen and (max-width: 1024px){
    	img.bg {
    		left: 50%;
    		margin-left: -512px; }
    }
    
    
    div#content {
    	/* This is the only important rule */
    	/* We need our content to show up on top of the background */
    	position: relative;
    }
    The HTML
    Code:
    	<!-- stylesheets -->
      	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
      	<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
    	
      	<!-- PNG FIX for IE6 -->
      	<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
    	<!--[if lte IE 6]>
    		<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
    	<![endif]-->
    	 
        <!-- jQuery - the core -->
    	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    	<!-- Sliding effect -->
    	<script src="js/slide.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    <!-- Panel -->
    <div id="toppanel">
    	<div id="panel">
    		<div class="content clearfix">
    			<div class="left">
    	
    				<p class="grey">Home | Issues | Info | Forum | Connect</p>
    
    			</div>
    			<div class="left">
    				<!-- Login Form -->
    
    			</div>
    			<div class="left right">			
    				<!-- Register Form -->
    
    			</div>
    		</div>
    </div> <!-- /login -->	
    
    	<!-- The tab on top -->	
    	<div class="tab">
    		<ul class="login">
    			<li class="left">&nbsp;</li>
    
    			<li class="sep">|</li>
    			<li id="toggle">
    				<a id="open" class="open" href="#">Navigation</a>
    				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
    			</li>
    			<li class="right">&nbsp;</li>
    		</ul> 
    	</div> <!-- / top -->
    	
    </div> <!--panel -->
    <img src="images/bg.png" class="bg" />
    <div id="content">
    <div id="header"><img src="images/header2.png" /></div>
    <div id="navbar"></div>
    
    </div>
    
    </body>
    </html>

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    This worked for me:
    Code:
    #navbar {
    width: 737px;
    height: 32px;
    margin: 0% auto;
    text-align: center;
    background: url(../images/nav_bg.png) no-repeat center scroll;
    }
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    pennella (09-08-2010)

  • #11
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    That worked! Could you please explain why it worked for you and why it didn't work for me (thus explaining what I did wrong)
    Thank you so much

  • #12
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    You had margin: 0%; . I used margin: 0% auto;, but it should have been margin: 0 auto; without the percent sign. When using margins:

    margin: [top/bottom] [right/left]; or expanded:

    margin: [top] [right] [bottom] [left];

    Ron
    Last edited by Major Payne; 09-08-2010 at 03:39 AM.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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