View Full Version : Arg! Messed up centering again...
clsx2
Jan-27-2009, 10:52 AM
I thought I was starting to get the hang of the relationship between all the pieces of my home page, so I went ahead and updated my logo. The new logo is the same size, however once I changed the link the logo and my home page graphic are now not centered.
Could someone please check to see what I screwed up?
Thanks,
Crystal
http://www.crystallynnphotography.com
jfriend
Jan-27-2009, 02:29 PM
I thought I was starting to get the hang of the relationship between all the pieces of my home page, so I went ahead and updated my logo. The new logo is the same size, however once I changed the link the logo and my home page graphic are now not centered.
Could someone please check to see what I screwed up?
Thanks,
Crystal
http://www.crystallynnphotography.com
Hmmm. There are several issues with your homepage. First, the banner isn't centered because the height and width in the CSS don't match the image. You can fix that by changing to this:
#my_banner {
width: 800px;
height: 127px;
margin: 0 auto;
text-align: center !important;
background: url(http://crystallynnphotography.smugmug.com/photos/462926958_YgCaR-L.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://crystallynnphotography.smugmug.com/photos/462926958_YgCaR-L.png');
}
Then, you are missing a </div> at the end of your custom header. Please add that because it is messing up our ability to make other things line up right.
Then, to center the main image on your homepage, change these two blocks to this:
#myhomepagepic {
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://crystallynnphotography.smugmug.com/photos/455299378_p7Zsd-XL.png');
height: 389px;
width: 800px;
border: none;
background-repeat: no-repeat;
background-position: center; !important;
margin: 0 auto;
}
#homePageTop {
display:none;
margin: 0 auto;
text-align:center;
}
clsx2
Jan-27-2009, 07:19 PM
where am I putting the </div>? when I look at my custom header it is closed off, so I must be looking at the wrong spot...
jfriend
Jan-27-2009, 08:22 PM
where am I putting the </div>? when I look at my custom header it is closed off, so I must be looking at the wrong spot...
Here's the HTML I see in your custom header:
<div id="my_header">
<div class="menu">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/gallery/7055402_uBQ8P">About Me</a></li>
<li><a class="drop" href="/gallery/7055223_oVkHa">Contact
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/7055223_oVkHa">Contact Form</a></li>
<li><a href="/gallery/7033021_rU8iM">Sign Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/galleries">GALLERIES
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/6954682_YWkGd">Children</a></li>
<li><a href="/gallery/6954854_MpQAX">Pets</a></li>
<li><a href="/gallery/6954862_KWNUR">Families</a></li>
<li><a href="/gallery/7082310_tfMhp">Christian Life Center</a></li>
<li><a href="/gallery/7102502_AHsrb">Charity Events</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/7055409_R7JKs">Pricing</a></li>
<li><a href="add%20link%20here">Blog</a></li>
</li>
<li><div id="mysearch"><form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('Search','searchWords',' ')"><input type="text" onclick="checkInput('Search','searchWords','')" onblur="checkInput('','searchWords','Search')" id="searchWords" name="searchWords" value="Search" /><input type="hidden" name="searchType" value="InUser" /><input type="hidden" name="NickName" value="crystallynnphotography" /><input type="image" src="http://www.crystallynnphotography.com/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onClick="if(document.searchBox.searchWords.value == 'Search') { document.searchBox.searchWords.value = ' '; }" /></form></div></li>
</ul> <!--[if lte IE 6]></td></tr></table></a>
<![endif]-->
</div>
<div id="my_banner"> </div>
</div>
Add the </div> in red at the end (you may have to scroll to see it).
You have an opening <div id="my_header">, but no matching </div> for it. The </div> right about my_banner closes the menu div.
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.