...

View Full Version : image header help



purplegirl93
08-10-2011, 12:40 PM
How do i center my image header on my site? you can see my site here (purplebliss93.tumblr.com). you're help would be greatly appreciated.

Avril
08-10-2011, 12:58 PM
Add:
margin: 0 auto;
to the .css of the div in which the image is.

purplegirl93
08-10-2011, 01:08 PM
thanks for replying so quickly. i have no idea where to put the code. here is the html code of my site.


<!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, 01: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, 01:41 PM
no effect.

Avril
08-10-2011, 01: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, 02: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, 02: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, 02:49 PM
no effect either. but thank you for you're help so far :)

Avril
08-10-2011, 03: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, 03:54 PM
hi i tried it out. here's how it looks (http://i.imgur.com/TGsPG.jpg). 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, 04: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, 04: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, 04:40 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.
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, 04: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:



#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.

Avril
08-10-2011, 04:58 PM
Yes, resdog, that will probably work. But since #masthead h1 has already been defined, she will have to change it. Replace:

#masthead h1 {
margin-bottom: 0;
}

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

I'm not sure that minus works on all browsers though??

resdog
08-10-2011, 05:18 PM
When using position, any negative values assigned to left, top, right and bottom work, as they are based on the items top left corner position.

When you relatively position an item, the top:0 and left:0 of the item is the top left corner of that item. If you absolutely position it, the top:0 and left:0 is the top left corner of the nearest ancestor that is positioned, or the top left of the screen if no element is positioned. Adding negative numbers moves it from that point. I haven't seen anything that shows the negative values on these css declarations to not work.

You are right on adding the code to the existing defined element, although adding it anywhere will still allow it to work. You would declare it twice if for example you didn't have access to update the css code in the header, but could add css code to the body, or somewhere else. Since you aren't changing any values, it doesn't matter where you add it.

Avril
08-10-2011, 05:38 PM
Thanks for the explanation!

purplegirl93
08-11-2011, 06:50 AM
thanks resdog it worked. and thank you avril to for helping me out.

resdog
08-11-2011, 02:25 PM
You're welcome!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum