Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    image header help

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

  • #2
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Add:
    margin: 0 auto;
    to the .css of the div in which the image is.

  • Users who have thanked Avril for this post:

    purplegirl93 (08-10-2011)

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>
    Last edited by purplegirl93; 08-10-2011 at 12:11 PM.

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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!
    Last edited by Avril; 08-10-2011 at 12:30 PM.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    no effect.

  • #6
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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 .

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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

  • #9
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    no effect either. but thank you for you're help so far

  • #10
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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!!

  • #11
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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!

  • #14
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by resdog View Post
    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!

  • #15
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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