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 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Aligning non-linked text to linked text in UL LI menu

    I have a UL LI text menu in which one menu item I want as non-linkable text.

    The plain text item wrapped in the li tag is not vertically aligning with the linked text items. It also doesn't seem to have the appropriate horizontal spacing that other linkable items have between themselves.

    You can see it here:
    http://www.norrislakevilla.com/new-site/index.html

    Where "Explore Villas »" is the non-linkable text.

    HTML Code:
    Code:
    <div class="menu">
      <ul>
        <li><a href="index.html" class="active"><span>Home</span></a></li>
        <li><a href="contact.html"><span>Contact</span></a></li>
        <li><span>Explore Villas »</span></li>
        <li><a href="night-sky.html"><span>Night Sky</span></a></li>
        <li><a href="big-dipper.html"><span>Big Dipper</span></a></li>
        <li><a href="slice-of-heaven.html"><span>Slice of Heaven</span></a></li>
      </ul>
    </div>
    CSS Code:
    Code:
    .menu { float:right; padding:25px 15px 0 0; margin:0; width:580px; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; color:#00A900;}
    .menu ul { text-align: right;  padding:0; margin:0; list-style:none; border:0; float:right;}
    .menu ul li { float:left; margin:0; padding:0 5px; border:0;}
    .menu ul li a { float:left; margin:0; padding:13px 0; color:#a1a1a1; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
    .menu ul li a span { padding:13px; background:none;}
    .menu ul li a:hover { color:#fff;  background: url(images/r_menu.gif) no-repeat right;}
    .menu ul li a:hover span { color:#fff;  background:url(images/l_menu.gif) no-repeat left;}
    .menu ul li a.active { color:#fff; background:url(images/r_menu.gif) no-repeat right;}
    .menu ul li a.active span { color:#fff;  background:url(images/l_menu.gif) no-repeat left;}
    Obviously the ".menu ul li a" & "span" has other styling imposed upon it, but I've tried several styling commands to make the plain text align & space correctly with no luck.

    Any suggestions?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You have a padding on this:

    Code:
    .menu ul li a {
        color: #A1A1A1;
        float: left;
        font: 12px Arial,Helvetica,sans-serif;
        margin: 0;
        padding: 13px 0;
        text-decoration: none;
    but not on the span around your Explore Villas text. Remove the padding or add it to the Explore Villas span.

    Firebug is an awesome tool that would point out things like this. You should download it and really learn to use it.
    Last edited by teedoff; 04-03-2011 at 02:27 AM.
    Teed

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Here is a good question why would you be putting something on the menu as a none linkable item? Whats the end result goal here?

    If you wanted to do something like removing the background on that specific link or something like that.... that's easy to do.

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I added the following plain text span styling:

    Code:
    .menu ul li span { padding:13px; background:none;}
    This corrected the horizontal spacing between the other text menu items, but it is still positioned about 13px too high.

    I tried breaking up the padding individually and increasing the top padding to push it down more, but it didn't work.

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    it helps me to separate the grouping of the menu and provides additional guidance & direction to the user.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    .menu ul li span { padding:13px; background:none;}
    Thats going to target every li that has a span, which is all of them. You'll have to give that particula span an id or class. You should do some reading about CSS specificity.
    Teed

  • #7
    New Coder
    Join Date
    Aug 2009
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Added the following span class to my CSS:
    Code:
    .menu ul li span.nolink { padding:13px; background:none;}
    and adjusted my HTML:
    Code:
    <li><span class="nolink">Explore Villas »</span></li>
    Not sure what I'm still missing here to get it right. Although would I need to create a separate span class since all of the li's should have the same padding assigned to it?
    Last edited by lsargent; 04-03-2011 at 04:16 AM.

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by lsargent View Post
    Added the following span class to my CSS:
    Code:
    .menu ul li span.nolink { padding:13px; background:none;}
    and adjusted my HTML:
    Code:
    <li><span class="nolink">Explore Villas »</span></li>
    Not sure what I'm still missing here to get it right.
    hmm not sure whats wrong. If you remove the padding from

    Code:
    .menu ul li a {
        color: #A1A1A1;
        float: left;
        font: 12px Arial,Helvetica,sans-serif;
        margin: 0;
        /*padding: 13px 0;*/    
        text-decoration: none;
    then add padding: 13px 0; to:

    Code:
    .menu ul li a {
        color: #A1A1A1;
        float: left;
        font: 12px Arial,Helvetica,sans-serif;
        margin: 0;
        padding: 13px 0;    
        text-decoration: none;
    Teed

  • #9
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by lsargent View Post
    Added the following span class to my CSS:
    Code:
    .menu ul li span.nolink { padding:13px; background:none;}
    and adjusted my HTML:
    Code:
    <li><span class="nolink">Explore Villas »</span></li>
    Not sure what I'm still missing here to get it right. Although would I need to create a separate span class since all of the li's should have the same padding assigned to it?
    try this:
    Code:
    .menu ul li span.nolink {
    display:block;
    padding:13px;
    }
    best regards


  •  

    Posting Permissions

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