...

View Full Version : Tabbed navigation w/ image backgrounds-text-align problems



libwebmaster74
08-08-2010, 07:23 PM
Hi all,

I purchased a pre-built template from a company. Yes, I know most people would say this was my 1st mistake. But I'm trying to re-design a site for a professional org. I'm involved with in a hurry.

So, the XHTML/CSS files they sent me have some serious issues. Live links are below.

#1-The tabbed nav. menu has individual images as backgrounds. I'm having trouble moving the text for the menu to the right because it won't line up with the images. Everytime I try to use margin-left or padding-left on either the <li> or <a> tags, all the background images move to that value & screw up the flow of the nav. menu. What would be the best approach to fix this? Use <div>'s instead of <ul>?

#2-The <div> header has a nested div element for a search box. It looks like this was done because the two div elements each have a separate background image. Whatever the reason, in Dreamweaver the nested search div box appears below the tabbed nav. menu. I've tried tweaking the widths of the header div and search div, but they won't line up. Of course they line up perfectly in a browser preview. Is there something I'm missing or is this a DW fluke?

Here's the live link to the page w/ the tabbed nav. alignment issue: http://www.alarchivists.org/new-template/subpage1.html. And here is a screenshot of how DW is screwing up the header alignment. http://www.alarchivists.org/new-template/dw-template-error.png.

Thanks for any help you guys can offer.

Peace,

Jason

abduraooft
08-09-2010, 10:28 AM
What would be the best approach to fix this?

#mainmenu ul li {
float:left;
line-height:36px;

margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
}
#mainmenu a {
color:#FFFFFF;
float:left;
height:36px;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
text-align:center;
}


Whatever the reason, in Dreamweaver the nested search div box appears below the tabbed nav. menu. You don't have to check the compatibility of the display in DW's design view. It's not browser and thus it may not render everything right.

SB65
08-09-2010, 10:38 AM
Ok, so for the tabbed menu images, to centre the text you should just need to apply:


#mainmenu a {
color:#FFFFFF;
display:block;
float:left;
height:36px;
margin:0;
text-align:center;/*centre the text horizontally*/
line-height:36px;/*centre the text vertically*/
}

That sorts out the tabs in the middle, but because of the odd way the images are constructed, the tab in the left and right hand tabs isn't quite right.

To sort out the left one:



#mainmenu1 {
background-image:url("images/homepage04.jpg");
padding-left:10px;/*move the text over to the right a bit*/
width:116px;/* reduced width to account for the padding
}

and similarly for the right tab:


#mainmenu6 {
background-image:url("images/homepage09.jpg");
padding-right:10px;
width:117px;
}

Re your search box, if it's OK in a (decent) browser don't worry about it.

libwebmaster74
08-09-2010, 04:08 PM
Thanks so much, SB65 and abduraooft. That did the trick.

You guys rock!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum