SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Homepage Logo imgage center error

    Hi, I started coding CSS few days ago so I am a very beginner...

    Current CSS code:
    Code:
    body
    {
    	margin: 0;
    	height: 100%;
    	padding: 0 0 40px;
    	background-color: #BBB;
    }
    
    .content
    {
    	width: 960px;
    	margin: 0 auto;
    	padding: 0 0 80px;
    	background-color: #555
    }
    
    .logo
    {
    	width: 440px;
    	margin: 40px auto 0;
    	position: relative;
    	text-align: center;
    }

    HTML body code:
    Code:
    <body>
    
    	<div class="content">
    			<div class="logo">
    				<img src="img/logotest.png" />
    			</div>
    	</div>
    
    
    </body>
    With this current coding my logo image is not placed at the center (middle of "content") nor the left edge of the image is placed at the center.

    Please help me solve this issue. (Please request any additional information you need)

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Indeed it should be working bud as I took your above code apart from making one very minor change and it works fine, see the below example link.

    http://jsfiddle.net/DtLve/1/

    If you could please upload the image you're using as that may yield some light on why it may not be working.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by successfulfail View Post
    With this current coding my logo image is not placed at the center
    With the code you've posted, the image should indeed be centered horizontally. So if that's not the case, these is some other code interfering with it. You could either post all your page code here (along with the CSS (preferably in <style> tags in the <head>) or post a live link (which is the ideal).

    Edit:

    Beaten by Chris.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All file format of the images I used were png.

    Here is one of them:
    logotest.png

    You probably won't be able to see the text since the text color is white...

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the full HTML coding. For CSS, my original post includes all of my CSS code for the website.


    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">
    
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" href="css/mock.css" type="text/css" />
    
    <title>Web Design Mock</title>
    
    </head>
    
    
    <body>
    
    	<div class="content">
    			<div class="logo">
    				<img src="img/logotest.png" />
    			</div>
    	</div>
    
    
    </body>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Whoops, there was something in you code messing up the layout. It's the width on the .logo div:

    Code:
    .logo {
    width: 440px;
    margin: 40px auto 0;
    position: relative;
    text-align: center;
    }
    Remove that and you will be OK. There's no point putting a width on the element if it content (the image) is wider! An alternative would be to set a width on the image itself if you don't want it to display so wide. E.g.

    Code:
    .logo img {width: 440px;}

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved. Thank you.


Tags for this Thread

Bookmarks

Posting Permissions

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