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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tabbed navigation w/ image backgrounds-text-align problems

    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-temp...late-error.png.

    Thanks for any help you guys can offer.

    Peace,

    Jason

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    What would be the best approach to fix this?
    Code:
    #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.
    Last edited by abduraooft; 08-09-2010 at 11:30 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Ok, so for the tabbed menu images, to centre the text you should just need to apply:

    Code:
    #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:

    Code:
    #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:

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

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much, SB65 and abduraooft. That did the trick.

    You guys rock!


  •  

    Posting Permissions

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