How do I center this header image?

  • sandyclifton2

    (@sandyclifton2)


    13 years, 10 months ago

    http://precisionfab.com/ That is the website and this is the code but it wont center.

    /* Headers */

    h1{
    font-size:43px;
    color:#ffffff;
    font-family:”Helvetica 65 Medium”, Helvetica, sans-serif;
    text-align:center;
    height:200px;

    text-indent: -9999px;

    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • vellkan

    (@vellkan)

    13 years, 10 months ago

    You should add to link with image a new class like ‘HeaderImage’ and write this in Your CSS file:

    a.HeaderImage {
    width: image width;
    height: image height;
    display: block;
    margin: 0 auto;
    }

    Try this, I check this in Firebug.

    Thread Starter sandyclifton2

    (@sandyclifton2)

    13 years, 10 months ago

    that didn’t work. I added it to my style sheet and changed it in the header to reflect and removed the old code to only link up to the a.Headerimage and it doesnt work. any ideas?

    Thread Starter sandyclifton2

    (@sandyclifton2)

    13 years, 10 months ago

    What am I doing wrong I still can’t get it to center.

    style sheet code

    /*
    Theme Name: Capricorn
    Theme URI: http://www.random-is.me/themes/
    Version: 1.3
    Description: Capricorn is a light simple one cloumn theme, designed for people with simple taste.
    Author: Shaibanii
    Tags: white, black, one-column, fixed-width, light
    For the WordPress community (GPL), enjoy!
    by Shaibanii – Random-is.me

    For WordPress 2.7+ 🙂
    */

    body{
    background-color:#fff;
    color:#000000;
    font:14px “arial”, “Verdana”, Lucida Sans, Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
    }

    a{
    color:#110;
    text-decoration:none;
    }

    a:hover{
    color:#e61b1b;
    text-decoration:none;
    }

    blockquote {
    padding:0 0 0 20px;
    color:#000;
    }

    blockquote a{
    color:#999;
    }

    cite{
    font-size:inherit;
    font-style:normal;
    }

    code{
    background:#efefef;
    color:#000;
    }

    ul{
    list-style:square;
    }

    /* Headers */

    h1{
    font-size:43px;
    color:#000000;
    font-family:”Helvetica 65 Medium”, Helvetica, sans-serif;

    }

    a.HeaderImage {
    width: 210px;
    height: 200px;

    margin: 0 auto;

    }

    h1 a, h1 a:hover{
    color:#000000;
    text-decoration:none;

    }

    h2{
    font-size:26px;
    margin:5px 0 7px 0;
    text-align:justify;
    }

    h2 a{
    color:#222;
    text-decoration:none;
    }

    h2 a:hover{
    color:#c00;
    }

    h3{
    text-align:justify;
    font-size:16px;
    color:#000;
    }

    h4{
    text-align:justify;
    font-size:12px;
    color:#000;
    }

    /* Blog Contents */

    #wrapper{
    width:650px;
    margin:0 auto;

    }

    /* Navigation */

    #nav{
    padding:3px;
    }

    ul.nav{
    width:500px;
    list-style:none;
    margin:0;
    }

    ul.nav li {
    display:inline;
    }

    ul.nav li a {
    display:inline;
    padding:20px 4px 20px 4px;
    width:92px;
    height:auto;
    color:#ffffff;
    text-align:center;
    font-family:Helvetica;
    font-size:12px;
    text-transform:lowercase;
    text-decoration:none;
    }

    ul.nav li a:hover {
    color:#ffffff;
    text-decoration:none;
    }

    /* Posts */

    #main{
    float:left;
    width:685px;
    }

    .post{
    padding:5px;
    text-align:justify;
    }

    .main{
    text-align:justify;

    }

    .main p{
    line-height:18px;
    margin:0 0 15px 0;
    }

    .main ol{
    line-height:18px;
    margin:0 0 15px 30px;
    }

    .main ul{
    line-height:18px;
    margin:0 0 15px 30px;
    }

    .main li{
    margin:0 0 5px 0;
    }

    .main img{
    padding:5px;
    border:1px solid #999;
    }

    .main img:hover{
    padding:5px;
    border:1px solid #444;
    background:#666;
    }

    img.wp-smiley{
    padding:0px;
    border:0px;
    }

    img.wp-smiley:hover{
    padding:0px;
    border:0px;
    }

    .meta{
    font-size:9px;
    line-height:15px;
    display:inline;
    color:#333;
    padding:5px;
    margin:0 0 30px 0;
    }

    .navigation{
    font-size:11px;
    }

    /* Comments */

    .gravatar{
    float:left;
    padding:2px;
    border:1px solid #999;
    margin:5px;
    }

    .gravatar:hover{
    padding:2px;
    border:1px solid #444;
    }

    .alt{
    color:#777;
    }

    ol#comments{
    text-align:justify;
    }

    .gravatar{
    float:right;
    border:1px solid #222;
    }

    /* Forms */

    input, textarea, select, button{
    background:#fafafa;
    border:1px solid #efefef;
    color:#666;
    padding:2px;
    margin:3px 0 5px 0;
    font:10px “Lucida Grande”, “Lucida Sans”, Verdana, Arial, Helvetica, sans-serif;
    }

    input:focus{
    border:1px solid #555;
    }

    /* Footer */

    #footer{
    font-size:9px;
    text-align:center;
    float:left;
    margin:10px 0 0 0;
    padding:10px 0 10px 0;

    width:100%
    }

    #footer a{
    color:#999999;
    }

    #footer a:hover{
    color:#777;
    }

    /* Others */

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How do I center this header image?’ is closed to new replies.