image header help

purplegirl93 · 08-10-2011, 11:40 AM

How do i center my image header on my site? you can see my site here. you're help would be greatly appreciated.

Avril · 08-10-2011, 11:58 AM

Add:
margin: 0 auto;
to the .css of the div in which the image is.

purplegirl93 · 08-10-2011, 12:08 PM

thanks for replying so quickly. i have no idea where to put the code. here is the html code of my site.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
     Theme: The Minimalist v1.
     Design: The Minimalist (http://minimalist.co)
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
     <title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>	
     <meta name="description" content="{MetaDescription}" />
     <meta name="if:Show description" content="1" />	
     <meta name="if:Show search" content="1" />
     <meta name="text:Twitter name" content="" />
     <meta name="text:Disqus Shortname" content="" />
     <meta name="text:Google Analytics ID" content="" />	
     <link rel="shortcut icon" href="{Favicon}" />
     <link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />

<!-- Styles -->

<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">

/*----- GENERAL -----*/

     header, footer, section, article, nav, aside {
        display: block;
     }

     body {
        background: #ffffff;
        color: #222;
        font: 12px/20px Georgia, "Times New Roman", Times, serif;
        padding-top: 25px;
        text-align: center;
        width:500px;
        margin: 0 auto;
     }

     h1, h2, h3, hQ {
        font-family: Cufon;
     }

     h1 {
        font-size: 50px;
        line-height: 50px;
     }

     h2 {
        font-size: 31px;
        line-height: 37px; 
     }

     h3 {
        font-size: 21px;
        line-height: 27px; 
     }

     a:link, a:visited {
        color: #222222;
        font-weight: bold;
        text-decoration: none;
     }
     
     a:hover, a:active {
        text-decoration: underline;
     }

     hr{
        border:0 #ccc solid;
        border-top-width:1px;
        clear:both;
        height:0;
     }

     ol{list-style:decimal}

     ul{list-style:disc}

     li{margin-left:30px}

     p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}

     #main {
        padding: 0px;
     }

/*----- MASTHEAD -----*/

     .noMeta > div {
        padding: 0px;
     }

     #masthead {
        margin-bottom: 0px;
     }

     #masthead h1 {
        margin-bottom: 0;
     }

     #masthead h1 a:link, #masthead h1 a:visited {
        text-transform: Uppercase;
        color: #222;
        text-decoration: none;
     }

     #masthead h1 a:active {
        outline: 0;
     }

     #masthead p {
        font-family: Georgia, serif;
        font-size: 20px;
        color: #fff;
        margin-bottom: 0;
     }

     #masthead a:link, #masthead a:visited {
        color: #fff;
     }

     #siteDescription{
        font-size: 13px;
        color: #222;
        text-transform: Uppercase;
        border-top: 1px solid #222;
        margin-top: 20px;
        margin-bottom: -5px;
        padding: 15px 0 0 0;
        font-family: Cufon;
     }

/*----- SEARCH FORM -----*/

     #frmSearch {
        padding-top: 20px; 
        display: none;
     }

     #txtSearch {
        background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
        width: 225px;
        padding: 2px 0 0 20px;
        font: 12px/12px Georgia, "Times New Roman", Times, serif;
        color: #222;
        border: 0px;
     }

/*----- MAIN HEADER NAV STRIP -----*/

     #mainNav {
        border-top: 1px solid #222;
        border-bottom: 2px solid #222;
        margin-top: 20px;
        padding: 15px;
        font-family: Cufon;
     }

     #mainNav ul {
        list-style: none;
        margin: 0;
        padding: 0;
     }

     #mainNav li {
        margin: 5px;
        display: inline;
        padding: 0;
     }

     #mainNav a:link, #mainNav a:visited {
        padding: 0;
        font-size: 14px;
        line-height: 14px;
        margin: 0 2px;
        text-decoration: none;
        color: #222;
        text-transform: Uppercase;
     }

     #mainNav a:hover, #mainNav a:active {
        outline: none;
        text-decoration: none;
        border-bottom: 1px solid #222;
     }

     #mainNav a.active {
        text-decoration: none;
        border-bottom: 1px solid #222;
     }

/*----- ARTICLE META INFO -----*/

     #designline {
        margin-top: 50px;
     }

     h5{
        position: relative;
        top: -35px;
        margin-bottom: 0px;
        font-family: Georgia, serif;
        font-size: 10px;
        color: #bca474;
        text-decoration: none;
        text-transform: Uppercase;
        font-weight: bold;
        border-bottom: 1px solid #bca474;
        background: #fff;
     }

     h5 a:link, .line a:visited{
        font-family: Georgia, serif;
        font-size: 10px;
        color: #bca474;
        text-decoration: none;
        text-transform: Uppercase;
        font-weight: bold;
     }

     h5 a:hover{
        text-decoration: underline;
     }

     h5 abbr{
        display: inline-block;
        position: relative;
        margin: 0 auto;
        padding: 0 8px;
        background: #fff;
        top: 10px;
     }

     h5.postDate a{
        color: #bca474;
     }

/*----- ARTICLE -----*/

     article {
        background: #fff;
        margin-bottom: 20px;
        text-align: left;
       position: relative;
      }

     article img {
        border: none;
        margin-bottom: 15px;
        max-width: 500px;
     }

     article p img {
        margin: 0;
     }
     article > div {
        padding: 0px;
        overflow: hidden;
     }
     article .searchPage {
        margin: 35px 0 0 0;
     }

     .searchPageText {
        margin: 0 0 30px 0;
     }

     article .meta a:link, article .meta a:visited {
        text-decoration: none;
     }

     article .meta a:hover, article .meta a:active {
        text-decoration: underline;
     }

     article h2 {
        text-align: center;
        color: #222222;
     }

     article h2 a:link, article h2 a:visited {
        text-transform: Uppercase;
        color: #222;
        text-decoration: none;
     }

     article h2 a:hover, article h2 a:active {
        text-decoration: none;
        border-bottom: 1px solid #222;
     }

     blockquote {
        border-left: 2px solid #bca474;
        margin-left: 0;
        padding-left: 1em;
     }

     #quoteSource{
        margin: 0 auto;
        text-align: left;
     }

     #quoteText h2 {
        text-align: left;
        color: #222222;
     }

     article .chat {
        list-style: none;
        padding: 0;
        margin: 0;
     }

     article .chat li {
        margin: 0 0 2px;
        padding: 2px 0 2px 0;
     }

     .photoCaption {
        text-align: center;
     }

/*----- AUDIO PLAYER -----*/

     .audio {
        height: 28px;
        width: 26px;
        overflow: hidden;
        margin: auto;
        padding-top: 7px;
     }

     .audioc {
        background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
        background-repeat: no-repeat; 
        height: 41px;
        width: 41px;
     }

     .audioCaption {
        margin-top: 1px;
     }

     .audioleft {
        width: 41px;
        float: left;
      }

     .audioright {
        width: 444px;
        float: right;
      }

     .audioContainer {
        margin-top: 5px;
     }

     .audioClear {
        clear:both;
     }

/*----- ARTICLE NOTES -----*/

     .notes {
        border-top: 1px solid #bca474;
        list-style: none;
        padding: 20px 0 5px 0;
        margin: 30px 0 0 0;
     }
     .notes li {
        margin: 0;
     }

     .notes .avatar {
        margin: 0 5px 0 0;
        position: relative;
        top: 5px;
     }

     .notes blockquote {
        margin: 10px 0 0 35px;
        padding-left: 10px;
        border-left: 2px solid #222222;
     }

     .media {
        width: 500px;
        margin-bottom: 20px;
     }

/*----- PAGE NAVIGATION -----*/

     #pageNav {
        margin-top: 20px;
        border-top: 1px solid #222;
     }

     #pageNav ul {
        list-style: none;
        padding: 10px 15px;
        margin: 10px 0;
     }

     #pageNav li {
        margin: 0;
        display: inline;
     }

     #pageNav a:link, #pageNav a:visited {
        font: 11px Georgia, "Times New Roman", Times, serif;
        padding: 0;
        margin: 0 2px;
        background: #34hdf5;
        color: #222;
        text-decoration: none;
     }

     #pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
        text-decoration: underline;
     }

     #pageNavOlder:after {
        content: " »";
        font-size: 10px;
     }

     #pageNavNewer:before {
        content: "« ";
     }

/*----- FOOTER META -----*/

     #sitemeta {
        border-top: 2px solid #222;
        color: #222;
        padding: 20px 0 32px 0;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 11px;
     }

     #sitemeta p {
        margin: 0;
     }

     #sitemeta a:link, #sitemeta a:visited {
        color: #222;
        font-weight: bold;
     }

{CustomCSS}
</style>

<!-- Scripts -->

<!--[if IE]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
     <script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>

     <script type="text/javascript">
        Cufon.replace('h1',{ fontFamily: "Cufon" });
        Cufon.replace('h2',{ fontFamily: "Cufon" });
        Cufon.replace('h3',{ fontFamily: "Cufon" });
        Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
        Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
     </script>

<script>
     $(function() {
        var search = $("#txtSearch").val();
        var placeholder = "Search...";
        var fadeToOpacity = 0.4;
        $("#txtSearch").fadeTo("normal", fadeToOpacity);
        if (search == "") {
     $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").blur(function() {
        search = $("#txtSearch").val();
        if (!(search != "" && search != placeholder)) {
        $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").fadeTo("normal", fadeToOpacity);
     });
     $("#txtSearch").focus(function() {
        search = $("#txtSearch").val();
        if (search == placeholder) {
        $("#txtSearch").val("");
     }
     $("#txtSearch").fadeTo("normal", 1);
     });
     $("#btnSearch").click(function() {
     $("#frmSearch").slideToggle("normal");
     $(this).toggleClass("active");
 //  $("#txtSearch").focus();
     });
     });
</script>

</head>
<body>

     <header id="masthead" class="clearfix">
        <div id="thehead">        
              <h1 class="cufon"><a href="/"><img src="http://i.imgur.com/FUwIC.jpg" /></a></h1>
              <form action="/search" method="get" id="frmSearch">
              <input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
              </form>    

     {block:Description}
        <div id="siteDescription">{Description}</div>
     {block:Description}

           <nav id="mainNav">        
              {block:HasPages}
              {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
              {/block:HasPages}
              {block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
              {block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}                 
              <li><a href="/archive">Archive</a></li>
              <li><a href="/random">Random</a></li>
              <li><a href="{RSS}">RSS</a></li>
              <li><a href="javascript:;" id="btnSearch">Search</a></li>
              {block:IfTwitterName}
              <li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
              {/block:IfTwitterName}
           </nav>         
        </div>
     </header>

     <section id="main" class="clearfix">
     <div class="layout">           
     {block:SearchPage}
        <article>
           <div>
              <div class="searchPage">
                 <h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
              </div>
                    {block:NoSearchResults}
                    <div class="searchPageText">
                       <p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
                       <ul>
                          <li>Make sure all words are spelled correctly.</li>
                          <li>Try different keywords.</li>
                          <li>Try more general keywords.</li>
                       </ul>
                    </div>
                    {/block:NoSearchResults}
           </div>
        </article>
     {/block:SearchPage}
      
     {block:TagPage}
     <article>
        <div>
           <div class="searchPage">
           <h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
           </div>
        </div>
     </article>
     {/block:TagPage}      

{block:Posts}
     <div id="designline">
        <h5 class="postDate">
           <abbr>{block:Date}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
           </abbr>
        </h5>
     </div>

     <article>
        <div>
           {block:Text}
              {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
              {Body}
           {/block:Text}
          
           {block:Photo}
              {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
              {block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
           {/block:Photo}
          
           {block:Photoset}
              <div class="media">{Photoset-500}</div>
              {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
           {/block:Photoset}
          
           {block:Quote}
              <div id="quoteText"><h2>{Quote}</h2></div>
              {block:Source}<div id="quoteSource"><p>&mdash;{Source}</p></div>{/block:Source}
           {/block:Quote}

           {block:Link}
              <h2><a href="{URL}" {Target}>{Name}</a></h2>
              {block:Description}
              <div>{Description}</div>
              {/block:Description}
           {/block:Link}       
          
          {block:Chat}
             {block:Title}<h2>{Title}</h2>{/block:Title}
             <ul class="chat">
                {block:Lines}
                <li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
                {/block:Lines}
             </ul>
          {/block:Chat}

          {block:Audio}
             <div class="audioleft">
                <div class="audioc">
                <div class="audio">{AudioPlayerBlack}</div>
                </div>
             </div>
             <div class="audioright"> 
                <div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>&mdash;{block:TrackName}{TrackName}{/block:TrackName}</p>
                </div>
             </div>
             <div class="audioClear"></div>
             <div class="audioContainer">
                {block:Caption}{Caption}{/block:Caption}
             </div>
          {/block:Audio}
         
          {block:Video}
             <div class="media">{Video-500}</div>
             {block:Caption}<div>{Caption}</div>{/block:Caption} 
          {/block:Video}
          
          {block:Answer}
             <h3>{Asker} asked: {Question}</h3>
             {Answer}
          {/block:Answer}
          
          {block:Date}
 
                    {block:IfDisqusShortname}
  <script type="text/javascript">
  //<![CDATA[
  (function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
      if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
      }
    }
    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
  {/block:IfDisqusShortname}
            
          {block:PostNotes}
             {PostNotes}
          {/block:PostNotes}
          
          {block:Date}
 
        </div>
     </article>
{/block:Posts}

     {block:PermalinkPagination}
        <nav id="pageNav">
           <ul class="clearfix">
              {block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
              {block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}  
           </ul>
        </nav>
     {/block:PermalinkPagination}
      
     {block:Pagination}
        <nav id="pageNav">
           <ul class="clearfix">
             {block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage} 
             {block:JumpPagination length="5"}
             {block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
             {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
             {/block:JumpPagination}
             {block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage} 
           </ul>
        </nav>
     {/block:Pagination} 
      
     {block:DayPagination}
        <nav id="pageNav">
           <ul class="clearfix">
              {block:PreviousDayPage}<li><a href="{PreviousDayPage}">&laquo; {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} &raquo;</a></li>{block:NextDayPage}
           </ul>
        </nav>
     {/block:DayPagination}
     
     </div><!-- END layout -->
     </section>

     <footer id="sitemeta">
        <div class="clearfix">
           <div class="thefooter">
              <p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
           </div>
        </div>
     </footer>

     {block:IfGoogleAnalyticsID}
        <script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
     {block:IfGoogleAnalyticsID}

</body>
</html>

Avril · 08-10-2011, 12:27 PM

Not sure which the div is, but it might be this one:

#masthead {
margin: 0 auto;
}

Change it and let me know if it works!

purplegirl93 · 08-10-2011, 12:41 PM

no effect.

Avril · 08-10-2011, 12:50 PM

In which div is your header photo inserted? That's the one that needs to be changed. If it's not in the .css (above) it is probably in the linked .css file. You would need to open it and search for the div called 'thehead', and change it there .

purplegirl93 · 08-10-2011, 01:12 PM

i think header 1(h1)?

if you search "<h1 class="cufon"><a href="/"><img src="http://i.imgur.com/FUwIC.jpg" /></a></h1>" in my code above, you can see what i mean.

Avril · 08-10-2011, 01:39 PM

Okay, I see it. No the .css is not in the .html page, so another (less elegant) way to try would be:

<div id="thehead"> -> change it to:
<div id="thehead" align="center">

No guarantee that it will work because it is linked to an external .css file and is clickable, but worth a try

purplegirl93 · 08-10-2011, 01:49 PM

no effect either. but thank you for you're help so far

Avril · 08-10-2011, 02:20 PM

Looked again (I just love challenges!!), and found that the div in which the photo is (body) is only 600px wide, so it's possible that your image is just too wide for the div. If you make your image 600px wide it will probably fit in.

Worth a try!!

purplegirl93 · 08-10-2011, 02:54 PM

hi i tried it out. here's how it looks. Although the way you mentioned makes it look more centered, i would like to have the header as its current size. when i resize it to 600px it makes the whole header to small.

resdog · 08-10-2011, 03:13 PM

The issue is your body element has a defined width of 500px, but your image is 806px; Change the width of your body element to be 806px and it will work.

Avril · 08-10-2011, 03:35 PM

In fact, the width is only 500px, not 600px (my mistake). If I changed the .html to accommodate the width of the photo, that would screw up the whole site layout. All the other divs would change too, so it would be better to ask the designer of the site to do it for you as he/she knows all the links and .css used. So sorry, I don't want to risk ruining it!

Avril · 08-10-2011, 03:40 PM

Quote:

Originally Posted by resdog

The issue is your body element has a defined width of 500px, but your image is 806px; Change the width of your body element to be 806px and it will work.

resdog - if you look at the site you will see that changing the body will alter the whole layout, and would require re-coding the rest of the page. Too risky!

resdog · 08-10-2011, 03:44 PM

The problem is that you have defined your body element to be 500px. If you want the rest of the content to stay that 500px, but have wider image to be centered, and you don't want to change the HTML structure, add this css to your code:

Code:

#masthead h1 {
    left: -153px;
    margin-bottom: 0;
    position: relative;
    width: 806px;
}

the above code is dependent on your image being 806px. If you ever changed the image and the width is different, here's the process to edit the css. The width is the width of the image. The left position is a math formula:

-((image width - body width) / 2)

so in the above case:

-(806 - 500) / 2 =
-(306) / 2 =
-153

That's the number that goes in.

The rest of the site will stay the same and only the image would change.

Hope this helps.