Grow your CSS skills. Land your dream job.

Header text does not center on background

  • # August 5, 2008 at 7:44 am

    Hi I have a header div at the top of my page with a background header image. I am trying to add some text to the center of that image using a H1 tag instead of adding it to the image in photoshop(so that I can change it quickly when needed). This H1 tag is inside my header div as shown below:

    The problem is it just sits at the top of my header image and I cant move it into position using padding or margin? Any help will be gratefully appreciated.

    <div id="header">
    <div id="logo">
    <hr/>
    Your logo or web ad: could go here
    <hr/>
    </div>

    <div id="date">
    <hr/>
    <div>
    <p style="font-size: 9px;">MAY/JUNE</p>
    <p class="date">
    </p>
    </div>
    </div>
    <hr/>

    <h1>
    <a href="index.html">
    Your Company
    </a>
    </h1>
    </div>

    box
    # August 5, 2008 at 8:31 am

    What CSS have you used? A link to the live page would be best – but just the HTML tells us nothing.

    # August 5, 2008 at 9:38 am

    OOOooops! sorry here it is.

    Code:
    /*Main page setings*/

    body {
    background:#999999 url(images/bg.jpg) repeat scroll 0%;
    margin:0pt;
    padding:5px 0pt 50px;
    text-align:center;
    font-family: arial, tahoma, sans-serif 62.5%;
    }

    .center {
    text-align:center;
    }

    .hidden {
    display:none;
    }

    .right {
    float:right;
    margin:5px 10px 10px 20px;
    }

    .left {
    float:left;
    margin:5px 20px 10px 0px;
    }

    .border {
    border:1px solid #B2AFA3;
    }

    #page-wrap {
    background:#999999 url(images/background.jpg) repeat scroll 0%;
    margin:0px auto 30px;
    width:966px;
    }

    #container {
    margin-top:-20px;
    width:950px;
    }
    #container a {
    background:transparent none repeat scroll 0%;
    color:black;
    text-decoration:underline;
    }

    #container a:hover {
    text-decoration:none;
    }

    #container img {
    border:0pt none;
    }

    #header {
    background:transparent url(images/header.png) no-repeat scroll 0%;
    width:966px;
    }

    #header a {
    display:block;
    height:160px;
    margin:auto;
    width:746px;
    }

    h1 {
    margin: 0;

    }

    #logo {
    float:left;
    font-size:10px;
    letter-spacing:3px;
    margin:58px 0pt 0pt 40px;
    text-transform:uppercase;
    width:75px;
    }

    #logo hr, #date hr {
    margin:3px 0pt;
    }

    #date {
    float:right;
    margin:58px 40px 0pt 0pt;
    width:95px;
    }

    #date div {
    background:#000000 none repeat scroll 0%;
    display:block;
    font-size:20px;
    height:68px;
    }

    #date p {
    background:#000000 none repeat scroll 0%;
    color:#FFFFFF;
    font-size:11px;
    letter-spacing:1.8px;
    margin:0pt;
    padding:8px 4px 4px;
    }

    #date p.date {
    background:transparent url(images/datebg.png) no-repeat scroll center top;
    font-size:40px;
    letter-spacing:3px;
    padding:3px 0pt;
    }

    #topnav {
    border-bottom:1px solid #B2AFA3;
    border-top:1px solid #B2AFA3;
    height:33px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-bottom:15px;
    margin-left:38px;
    margin-top:-25px;
    padding:0pt 20px;
    text-align:center;
    width:850px;
    }

    #topnav li {
    display:block;
    float:left;
    margin:5px 0pt 0pt;
    padding: 5px 0px 0px 0px;
    }

    #topnav a {
    border-left:1px dotted #B2AFA3;
    font-size:14px;
    letter-spacing:4px;
    padding:5px 16px;
    text-decoration:none;
    }

    #topnav li:first-child a {
    border:0pt none;
    }

    #topnav a:hover {
    background:#000000 none repeat scroll 0%;
    color:#FFFFFF;
    }

    #content {
    border-right:1px solid #B2AFA3;
    clear:right;
    float:left;
    font-size:14px;
    margin:0pt 0pt 30px 45px;
    padding:0pt 15px 70px 0pt;
    position:relative;
    text-align:left;
    width:605px;
    }

    #content p {
    font-size:14px;
    line-height:23px;
    margin-right:10px;
    }

    #content p.credit {
    font-size:10px;
    margin:0pt;
    text-align:right;
    }

    #content p sup {
    font-size:10px;
    }

    #content li {
    list-style-image:url(images/bullet.gif);
    }

    #content h2 {
    font-size:35px;
    font-weight:normal;
    letter-spacing:3px;
    margin:0pt;
    padding:0pt;
    text-transform:uppercase;
    }

    #content h3 {
    font-size:16px;
    font-weight:normal;
    letter-spacing:3px;
    margin-bottom:15px;
    margin-top:5px;
    padding:0pt;
    text-transform:uppercase;
    }

    #content p.blurb {
    font-size:20px;
    }

    #content p.byline {
    margin-top:0px;
    text-align:center;
    }

    #content object {
    background:#000000 none repeat scroll 0%;
    }

    .pullquote {
    color:#908C7F;
    float:right;
    font-size:20px;
    font-style:italic;
    line-height:25px;
    margin:10px 20px 15px 30px;
    padding:0pt;
    width:25%;
    }

    .pullquote img {
    padding:0pt 10px 10px 0pt;
    text-align:left;
    }

    .pullquoteleft {
    color:#908C7F;
    float:left;
    font-size:20px;
    font-style:italic;
    line-height:25px;
    margin:10px 30px 15px 20px;
    padding:0pt;
    width:25%;
    }

    .gallery {
    width:100%;
    }

    .gallery img {
    border:1px solid #B2AFA3;
    margin:0pt 5px 5px 0pt;
    }

    #blueprint {
    border-bottom:1px solid #B2AFA3;
    float:right;
    font-size:10px;
    font-style:italic;
    letter-spacing:2px;
    line-height:16px;
    margin:-5px 10px 20px 20px;
    padding:0pt 0pt 10px;
    text-align:center;
    width:180px;
    }

    #blueprint a {
    text-decoration:none;
    }

    #blueprint a:hover {
    color:#8B9CB0;
    }

    #recipe {
    background:#F8F4EA none repeat scroll 0%;
    border:1px dotted #B2AFA3;
    padding:0px 10px 5px 20px;
    }

    #recipe h3 {
    font-size:20px;
    letter-spacing:2px;
    }

    #content li {
    list-style-image:url(http://cdn.css-tricks.com/images/bullet.gif);
    }

    blockquote {
    background:transparent url(images/quote.jpg) no-repeat scroll 0px;
    margin-left:0pt;
    padding-left:35px;
    }

    #sidebar {
    clear:right;
    float:left;
    font-size:12px;
    padding-left:15px;
    text-align:left;
    width:246px;
    }

    #sidebar p {
    color:#4C453E;
    font-size:12px;
    line-height:16px;
    margin:5px 0pt 15px;
    padding:0pt;
    }

    #sidebar h4 + p {
    margin-bottom:7px;
    }

    #sidebar a {
    background:transparent none repeat scroll 0%;
    color:inherit;
    text-decoration:none;
    }

    #sidebar a:hover {
    text-decoration:underline;
    }

    #sidebar img {

    }

    #sidebar h2 {
    color:#B2AFA3;
    font-size:8px;
    font-style:italic;
    font-weight:normal;
    margin:20px 0pt 8px;
    }

    #sidebar h2:first-child {
    border:0pt none;
    margin:0pt;
    text-align:center;
    }

    hr {
    background:#B2AFA3 none repeat scroll 0%;
    border:0pt none;
    color:#B2AFA3;
    height:1px;
    margin-top:10px;
    }

    hr + hr {
    margin-top:-5px;
    }

    #sidebar h3 {
    background:transparent none repeat scroll 0%;
    color:black;
    font-size:11px;
    font-weight:normal;
    letter-spacing:1px;
    margin:10px 0pt 8px;
    text-transform:uppercase;
    }

    #sidebar h4 {
    font-size:13px;
    letter-spacing:1px;
    margin:10px 0pt 5px;
    text-transform:uppercase;
    }

    #preved h4 {
    border:0pt none;
    font-size:small;
    font-style:normal;
    font-weight:normal;
    margin:10px 0pt 0pt;
    padding:0pt;
    }

    /*#cclicense {
    margin-top:20px;
    }*/

    #footer {
    clear:both;
    height:15px;
    margin-top:0px;
    padding:0pt;
    }

    /*Lightbox Styles*/

    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/lightbox/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

    # August 7, 2008 at 5:55 am

    add "margin: 0 auto" to your header I think ;)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".