Remove padding last item on inline list.

Discussion in 'Web Design and Development' started by Dal123, Sep 2, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I've managed to hand-code, slideshows, and lightbox 2 into my pages with absolutely no errors (Can't take credit for that really mostly thanks to angelwatt :eek:) but I'm still struggling with lists:eek:.
    I have an inline list as my navigation on the top and I'm starting to try to format them before I really mess up my site:p.
    I want the last bar (contact us) to have no padding, because the padding-right is causing it to over-run and go to bottom:eek:. I would like it neat and flush with the right, but can't get my head around it, I've tried everything. Floats, margins, lists within lists and other lists etc.
    One question for the pro's; should my primary font 'lucidia grande' not be available just realised all the work I'm putting in now to try to get a neat layout will be worthless. What do you guys do about this; I'm guessing fluid layouts :confused:.
    Thanks guys..
    CSS:
    HTML:
    #nav_list ul{
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px:
    float:left;
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    }
    
    
    #no_pad ul {
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px:
    float:left;
    }
    #no_pad li {
    padding-right:0px;
    text-align:right;
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    }
    #navbar {
    padding:15px 0px 8px 0px;
    }
    
    #navbar ul{
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px:
    float:left;
    }
    #navbar li{
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    display:inline;
    width:225px;
    padding:0px 30px 0px 0px;
    margin:0px;
    line-height:0px;
    }
    HTML:
    HTML:
    <div id="navbar">
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee</li>
    	<li id="no_pad">contact us</li>
    </ul>
    </div>
     

    Attached Files:

  2. samwich macrumors regular

    Joined:
    Aug 5, 2007
    #2
    my best guess would be the syntax in your css with no_pad

    if you want to define the CSS for the id no_pad, you can just use
    #no_pad {padding:0; etc}

    if you want to define the CSS for a list item that has the id no_pad you use

    li#no_pad {padding:0;}

    either of those will work, but #no_pad li {padding:0;} probably won't work
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    In your situation all you need is:

    HTML:
    #no_pad { ...styles... }
    That's it. :) What, you wanted a drumroll or fireworks?! heh

    Since you used an ID, remember in CSS ID's are intended to unique identifiers no matter where the element is in your markup. Thus, you can directly reference the ID and single out one specific item and apply your styling.

    You might want to learn more about selectors here.

    The problem people run into is when they use the same ID for many elements (use class instead) or fail to assign an ID at all when the objective is to identify unique situations or elements. Some authors make their menu scripts generate a class such as "active" as well as an ID for each LI, i.e.

    HTML:

    HTML:
    <li id='item'><a href='test' class='active'>Test</a></li>
    CSS:

    HTML:
    #item a.active  {  ... styles... }
    Interpreted as "Find me an element who's div has an ID named item which has a child descendant anchor tag which has its own class named active."

    Get the idea?

    So you can identify the button that's active at the time. Heck, uou can even add in multiple class names to make it even easier to select only what you want:

    HTML:
    <li id='contact_us' class='first active'>contact us</li>
    
    #contact_us.active { ...styles... } 
    #contact_us.first { ...styles... }
    
    Both work and the point is both can have unique styles! Cool, huh? :)

    -jim
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Right, because that's interpreted as find me an element with an ID named "no_pad" which contains a descendant LI. The LI element is actually a child of UL, and happens to have an ID assigned to it named no_pad, but the interpreter won't apply the style since the selector match is false.

    The space is used as a combinator between elements indicating their is ancestry involved. This ancestry is interpreted left to right as parent and children and grandchildren and so on.

    -jim
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Just to throw out an alternative approach to the situation;

    You could center the text (text-align:center) on each li a (it may be better to apply the styles to the links inside the li items so the clickable regions are larger), then provide a background color as well. The background-color will fill each spot and give the appearance of being flush with each end of the navigation. Then you won't worry about having to give special styles to the last item. That has a downside that it will create more space between the last to items and the other spacings. Just something for you to try out and see if you like it.

    Code:
    #nav_list li a {
     background-color: #0f0; /* just picked random color */
     text-align: center;
     ...
    }
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Thanks for all your input and advice :) I really appreciate it :D.
    Jim I read the whole tutorial, and believe me it's about the 15th one I've read regarding selctors and lists attributes etc. I still don't fully understand it:eek:.
    Angelwatt, thanks for that, it helps me to understand a little more, and I'm gonna do exactly that (bigger click area) on my sidebar. Thanks bud:).
    Samwich cheers buddy, still don't get it all properly yet.
    I don't understand why when I'm using the developer toolbar I get space to the right of the <li> elements (attached picture). You'd think it would only select the text written.
    So thinking logically I thought if I go into the child <li> of class no_pad (took your advice and changed it to a class Jim :)) You would think logically I could change the text to align-right. But nothing happens (Believe me chaps I've tried a thousand combinations of all different things. I cannot get it flush with the right of the ruler logo :eek:. Padding is set to 0 and margin :confused:. Cannot even get the text to change alignment :mad:.
    I think it's quite hard to get the grasps of how everything is displayed in internet design, very different from graphic design:eek:. The harder the battle the sweeter the victory.
    Here is what I currently have:
    CSS:
    Code:
    .no_pad {
    padding:0;
    margin:0;
    }
    ul.no_pad {
    text-align:right;
    }
    li.no_pad{
    text-align:right;
    }
    ul#nav_list{
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px;
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    }
    #nav_list li {
    display:inline;
    padding:0px 25px 5px 0px;
    margin:0px;
    }
    HTML:
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee</li>
    	<li class="no_pad">contact us</li>
    </ul>
     
  7. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    Based on the HTML you posted earlier you need to use what angelwatt posted to find the right content to change its text alignment:

    #nav_list li a { text-align: center; }

    Like the examples I posed earlier, just read it left to right. In English:

    "Find me an element with an ID named nav_list which has a list item as its descendant which in turn has an anchor as its descendant." Remember, spaces combine things in CSS which have a parent/child relationship - i.e. a UL is a parent and LI is a child. If an anchor tag wraps an image, the anchor is the parent, the image is the child. And so on.

    What you did was:

    ul.no_pad { text align: center; }

    In English:

    "Find me a UL with a class named no_pad."

    Look at your HTML - try to find a UL with that class name. You won't! And neither will the interpreter! There is only one UL, and it has an ID (not class) named nav_list.

    Making sense now?

    -jim
     
  8. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    Cheers Jim,
    I get the gist of what you're saying. I need to look for an unordered list, called 'nav_list', that has children tags <li> that has a class 'no_pad'. Which I have no clue how to write:confused:, I have just tried:
    #nav_list li .no_pad {
    text-align:right;
    }
    No luck so tried html:
    HTML:
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee
    	<ul><li class="no_pad">contact us</li>
    	</ul>
    	</li>
    </ul>
    with css:
    Code:
    .no_pad {
    padding:0;
    margin:0;
    }
    #nav_list li .no_pad {
    text-align:right;
    }
    li.no_pad{
    text-align:right;
    }
    ul#nav_list{
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px;
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    }
    #nav_list li {
    display:inline;
    padding:0px 25px 5px 0px;
    margin:0px;
    }
    No luck. I should understand this by now, put in about 100 hours since I last attempted lists and had done over 100 hours before that. I bet no-one else has struggled this badly with lists after doing a quarter of the hours I've done :eek:.
    I see that the <a> sort of changes it a little, but I haven't yet created the 'contact us' page and even so, I should be able to move it as text.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    The li .no_pad part translates to li tags having a child somewhere inside it that has a class of no_pad. You want an li tag that has a class of no_pad in itself, which is accomplished by removing the space. Having the space there means it's looking at children of the item mentioned to the left.

    li .no_pad would match: <li><span class="no_pad">...</span></li>
    li.no_pad would match: <li class="no_pad"><span>...</span></li>
     
  10. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #10
    li.no_pad {
    padding:0;
    margin:0;
    text-align:right;
    }

    Still no luck :eek:.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    OK, the issue is that we've been providing multiple directions to take to fix your problem and you're mixing those solutions, which doesn't really work.

    Using the below HTML and CSS:
    HTML:
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee
    		<ul>
    			<li class="no_pad">contact us</li>
    		</ul>
    	</li>
    </ul>
    Code:
    #nav_list {
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px;
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    }
    #nav_list li {
    display:inline;
    padding:0px [B][COLOR="Red"]25px[/COLOR][/B] 5px 0px; /* [COLOR="Red"]you set the right padding here[/COLOR] */
    margin:0px;
    }
    #nav_list li.no_pad{
    [B][COLOR="Red"]padding-right: 0;[/COLOR][/B] /* [COLOR="Red"]now you unset it for the one list item[/COLOR] */
    }
     
  12. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #12
    Thanks angelwatt, really appreciate your help.
    It has caused the last item to run off (attached picture), and still cannot get the text to align right :eek:.
    Thanks again bud.
     

    Attached Files:

  13. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #13
    Thanks for all your help angelwatt, and Jim. I tried:
    ul#nav_list li.no_pad {
    padding:0;
    float:right;
    }
    which brings the text flush to the right as wanted. Only thing is now big gap (see pic).
    Thanks again:).
     

    Attached Files:

  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    The text-align won't work with the current CSS because they all equal the same position. This is because the li tags are set as inline. Inline elements can't have text-align applied to them, only block elements like div and p tags.

    From the picture you attached it looks like that last item has some padding applied to the left side since it's not sitting flush. You should make sure you have the padding setup right in your CSS. That's at least one possibility.

    Edit: You'll also need to update one of the CSS selectors to control the margins and padding around the embedded ul tag,
    Code:
    #nav_list, [B]#nav_list ul[/B] {
    Though, I'm not sure that embedded ul should be there. You posted it that way back on post 8, but it wasn't that way earlier in the thread. I thought it was a sub-menu so just went with it, but looking back that's likely causing the current issue with it moving to the next line and having the spacing on the left. So, I believe you should just get rid of the embedded ul so you have,
    HTML:
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee</li>
    	<li class="no_pad">contact us</li>
    </ul>
     
  15. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #15
    I believe it is because you have float right in your CSS, which is putting in the break.

    @Angelwatt: Does the non text align to inlines also apply to divs? So of he puts a div into his <li> no pad, displays it inline (since the div will have 100% of the li's width) and then text align right?

    Edit: Or maybe use a span, set its width to the li, text align it right? Then we dont have to worry about inlines...
     
  16. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #16
    Angelwatt thanks so much for taking the time to explain. I've found it very difficult to understand css and selectors. I think I'm starting to get it now, thanks for showing me #nav_list, #nav_list ul { so understand now how to format long selectors.
    Really appreciate it :). Thanks also to Jim, and Cerebrus Maw.:)
    For reference for those that struggling with lists this is how it worked in the end thanks to angelwatt:
    HTML:
    HTML:
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee
    	<li class="no_pad">contact us</li>
    </ul>
    CSS:
    HTML:
    ul#nav_list li.no_pad {
    padding:0px 0px 5px 0px;
    margin:0;
    float:right;
    }
    
    ul#nav_list{
    list-style:none;
    margin:0px;
    padding:0px;
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    }
    ul#nav_list li{
    display:inline;
    padding:5px 29px 5px 0px;
    }
     
  17. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #17
    While others are helping you with styling your site, I'll spend a little more time generally helping you understand selectors and CSS , remember anything I write is merely example CSS to help you learn:

    In English, your selector actually says:

    Find me any element with ID named nav_list which has a descendant LI tag which has a decesdant class named no_pad. [wrong!]

    See that space between li and .no_pad in your selector? That is the problem, that specific space should not be there. In CSS, when you want to associate an element with a class or ID, the . or # immediately follows the element, don't use a space. A space is only for combining elements in a parent/child relationship.

    The correct selector is: #nav_list li.no_pad { ... styles ... }

    Find me any element with ID named nav_list which has a descendant LI tag which has a class named no_pad. [better]

    In the REAL selector, based on the last few replies I've seen from others, includes UL added on the front so the ID nav_list is associated with it, and hopefully by now you see it is optional because you only have one ID nav_list in your HTML and it can be referenced directly.

    -jim
     
  18. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #18
    Cool I understand that bit now, was getting complicated with ul then the id or other way around. That makes sense now as there's only one id.
    Thanks Jim, really appreciate it :).
     
  19. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #20
    text-align will apply to a div, as it's a block element. If you make the div inline via CSS then it will no longer take 100% of the li's width (unless there's nothing else inside this li which is also set as inline). The li items here haven't been given a width, which makes applying text alignment harder. One alternative is set a width on the li items and float them, which allows them to keep their block status and text aligning could be used on them. There's also display:inline-block that can be powerful (though IE is sometimes stupid on that so it's not used as much, but does work properly when applied to tags that are naturally inline elements such as the span and label tags.).

    @Dal
    On that last posting of the HTML, it looks like there's a missing end li tag on the guarantee item. And don't worry too much about my above paragraph, it was a general discussion so don't try to apply it to your navigation, it was just discussing alternative approaches. CSS has it's strength and confusion that things can be accomplished through multiple tactics, but look the same in the end.
     
  20. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
  21. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #22
    Sorry I've just found a decent tutorial, Please ignore this thread:eek:. Sorry :eek:.
     
  22. kedruff macrumors newbie

    Joined:
    Jul 6, 2009
    #23
    I would also use an advanced selector of li:last-child in my CSS which should work with all browsers. You'd have something like this:

    Code:
    <div id="navbar">
    <ul id="nav_list">
    	<li><a href="index.htm">home</a></li>
    	<li>services</li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li>guarantee</li>
    	<li>contact us</li>
    </ul>
    </div>
    And your css would read

    Code:
    ul#nav_list li { padding-right:30px;}
    ul#nav_list li:last-child{padding-right:0px;}
     
     
  23. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #24
    Limited support for last-child. (No IE support <= v8)

    --

    (Edit: The below part was actually meant for this thread. Dal123 found it though.)

    In your HTML move the H3 block to after the #case section and before your br tag. Then, in your CSS we'll change the h3's CSS to,
    Code:
    h3 {
    padding:0;
    margin:0;
    /*float:left;  [COLOR="Red"]REMOVED[/COLOR] */
    }
     
  24. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #25
    kedruff thanks for that, didn't realise it was possible to use a selector like that. Angelwatt, great links, bookmarked one of them :D. Cheers chaps :), excellent input :). Thanks :).
     

Share This Page