SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center <h1> with CSS

    Hi,

    I am struggling to center a logo, using a <h1> tag and CSS.

    I have the following so far:

    Code:
    #header{
      height: 65px;
      background-color: #ffffff;
      border-bottom: 5px solid #808080;
    }
    #header .container{
      width: 990px;
      margin: auto;
    }
    #header h1 {
    	display:block;
    	width: 250px;
    	height:46px;
    	text-indent:-9009px;
    	color:Blue;
    	background:transparent url(images/logo.jpg) no-repeat 0 0;
    	float: right;
    	}
    #header h1 a {
    	display:block;
    	width:100%;
    	height:100%;
    	outline:none;
    	}
    Html
    Code:
    <div id="wrapper">
    		<div id="header">
    		<div class="container">
    			    <h1><a href="http://www.logo.com">logo</a></h1>
    		</div>
            </div>
    </div>
    Could someone please help me to get the logo to align in the center of the screen?

    Many Thanks for your time.

    Al

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to have too many divs here but try removing float:right and add margin:0 auto; to #header h1 {
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you change your h1 CSS to look like this you should have more success.
    HTML Code:
    #header h1 {
    	display:block;
    	height:46px;
    	color:Blue;
    	background:transparent url(images/logo.jpg) no-repeat 0 0;
    	text-align: center;
    	}

  4. #4
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have updated it to this but it still hasn't done the trick! Below is the updated code:

    CSS
    Code:
    #header{
      height: 65px;
      background-color: #ffffff;
      border-bottom: 5px solid #808080;
    }
    #header .container{
      width: 990px;
      margin: auto;
    }
    #header h1 {
    	display:block;
    	width: 250px;
    	height:46px;
    	text-indent:-9009px;
    	color:Blue;
    	background:transparent url(images/logo.jpg) no-repeat 0 0;
    	}
    #header h1 a {
    	display:block;
    	width:100&#37;;
    	height:100%;
    	outline:none;
    	}
    HTML:
    Code:
    		<div id="header">
    		    <div class="container">
    			    <h1><a href="http://www.logo.com">logo.com</a></h1>
    		    </div>
            </div>
    Thanks,

    Al

  5. #5
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Read my post again, I added to it.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  6. #6
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by neildonald View Post
    If you change your h1 CSS to look like this you should have more success.
    HTML Code:
    #header h1 {
    	display:block;
    	height:46px;
    	color:Blue;
    	background:transparent url(images/logo.jpg) no-repeat 0 0;
    	text-align: center;
    	}

    Neil,

    I have just changed my code for yours but the image is still aligned to the left but the text is now in the center.

    How do I move the image over?

    Cheers,

    Al

  7. #7
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rob_D View Post
    Read my post again, I added to it.
    I have just made your change and nothing has happened.

  8. #8
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code as it now stands:

    css:

    Code:
    #header{
      height: 65px;
      background-color: #ffffff;
      border-bottom: 5px solid #808080;
    }
    #header .container{
      width: 990px;
      margin: auto;
    }
    #header h1 {
    	display:block;
    	height:46px;
    	color:Blue;
    	background:transparent url(images/logo.jpg) no-repeat 0 0;
    	text-align: center;
    	margin: 0 auto;
    	}
    	
    #header h1 a {
    	display:block;
    	width:100%;
    	height:100%;
    	outline:none;
    	}
    html:
    Code:
    <div id="header">
    		    <div class="container">
    			    <h1><a href="http://www.logo.com">logo.com</a></h1>
    		    </div>
            </div>
    Thanks for your help

    Al

  9. #9
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the size of your logo?
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  10. #10
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change
    Code:
    #header .container{
      width: 990px;
      margin: auto;
    }
    to
    Code:
    #header .container{
      margin: auto;
    }
    The logo will not center while it is in a container of a width greater than the browser window
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  11. #11
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rob_D View Post
    Change
    Code:
    #header .container{
      width: 990px;
      margin: auto;
    }
    to
    Code:
    #header .container{
      margin: auto;
    }
    The logo will not center while it is in a container of a width greater than the browser window
    That, moves the logo right to the left of the screen.

  12. #12
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rob_D View Post
    What is the size of your logo?

    It's small (http://www.allanmuller.co.uk/images/logo.jpg)

  13. #13
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All you need to do is this:
    Code:
    <style type="text/css">
    h1 {
    	background:transparent url(images/logo.jpg) no-repeat center center;
    	text-align:center;
    	margin: 0 auto;
     	height: 65px;
    	background-color: #ffffff;
    	border-bottom: 5px solid #808080;
    	}
    </style>
    HTML Code:
    <body>
    <h1><a href="http://www.logo.com">logo.com</a></h1>
    </body>
    Reasons:
    h1 is a block element anyway
    "center center" centers the background image (you had 0 0 which puts the images 0 pixels from the top and left of h1)
    all the other divs you don't need.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  14. #14
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or even do this
    Code:
    <style type="text/css">
    * {
    padding:0;
    margin:0;
    }
    #header{
    	margin:0 auto;
    	background-color: #ffffff;
    	border-bottom: 5px solid #808080;
    	text-align:center;
    }
    </style>
    HTML Code:
    <body>
    <div id="header">
    <img src="http://www.allanmuller.co.uk/images/logo.jpg" alt="logo" />
    </div>
    </body>
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  15. #15
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, Thanks Rob_D

    Al

  16. #16
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And put the link around
    HTML Code:
    <img src="http://www.allanmuller.co.uk/images/logo.jpg" alt="logo" />
    of course
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke


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
  •