Forcing line on navigation bar (unordered list)?

Question 1

Rachelle Bennington’s Questions:

My navigation bar currently is scrunching all my text together. I have “headers” for the dropdown list, and the headers aren’t forcing a line.

The HTML looks like this:

<li><p>Services</p><ul>
    <li id="ITServices"><p>IT Services</p></li>
    <li><a href="port_collab_work.html">Portals, Collaboration & Workflows</a></li>
    <li><a href="business_intel_dash.html">Business Intelligence & Dashboards</a></li>
    <li><a href="mobile_development.html">Mobile Development</a></li>
    <li><a href="custom_application_development.html">Custom Application Development</a></li>
    <li id="healthcare"><p>Healthcare Services</p></li>
    <li><a href="healthcare.html">EMR, ICD 10 and Healthcare Consulting</a></li>
</ul></li>

CSS looks like this:

#healthcare p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

#ITServices p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

.navbar li:hover ul {
    left: 15px;
    top: 40px;
    background: #7FBA00;
    padding: 1px;
    width: 280px;
    border: none;
    text-align: left;
}

.navbar li:hover ul a {
    margin: -7px -10px -7px -15px;
    text-align: left;
    padding: 0px 0px 0px 10px;
    display: block;
    font-size: 11px;
    width: 259px;
    line-height: 25px;
    color: #000;
    background-color: #F0F0F0;
    text-decoration: none;
    border-left: 10px solid #7FBA00;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}

.navbar li:hover ul a:hover {
    background: #7FBA00;
    border-left: solid 10px #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    width: 260px;
}

Ahhh! Right? I’m trying to get it to all display in a list with basically line breaks after each li element. Help?

Answer

Starx

Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.

Your use might be the following, so try this

li > ul li { display: block; }

Question 2

Question by Pjack

Pjack

OMG I’m pulling my hair out trying to figure out why some links don’t work in the UL. However if your right click open in new tab that works. I don’t understand why some are not clickable. The first two links work but they are events used by jQuery. 3rd and 4th links are actual pages and those don’t work and never does the last javascript/jquery link. Just the first two using jQuery. The others do not. I’ve reformatted my CSS several times and no difference. The unusual tags is because I use Smarty. BTW using Chrome.

This is the HTML

Edit: rendered markup

<div id="phomenu" class="photoMenu">
    <ul>
    <li><a id="avatar_13885_10028" class="set_avatar" href="#13885">Use This Photo As Avatar</a></li>
    <li><a id="cover_13885_10028" class="set_cover" href="#13885">Use This Photo As Album Cover</a></li>
    <li><a href="/page-13885-k4cjGSDSG4K.html">Page Photo</a></li>
    <li><a href="/?page=photo&amp;section=desc&amp;pho_id=13885">Edit Photo Information</a></li>
    <li><a id="remove_k4cjGSDSG4K_13885" class="remove_photo" href="javascript:void(0)">Delete this photo</a></li>
    <li><a id="feature_13885" class="feature_photo" href="javascript:void(0)">Feature Photo</a></li>
    </ul>
</div>

And this is the CSS

.photoMenu ul{
        list-style-type: none;
        list-style-position: outside;
        margin: 0;
        padding: 0;
        font-size:9pt;
        border-top: 2px solid #ffa449;
    }
    .photoMenu li {
        margin: 0;
    }
    .photoMenu li a {
        color: #FFFFFF;
        border-bottom: 1px solid #e6e6e6;
        display:block;
        min-height:25px;
        padding-top:10px;
        background-color:#C6711B;
        text-decoration: none;

    }
    .photoMenu li a:hover {
        color: #FFF;
        background-color: #f2a83a;
    }

Answer

Answer by Starx

Starx

The code you have shown so far does not have any problem. The problem is somewhere else, may be your script is interfering with the link.

Proof

If the browser is just made at you, it can get angry with the javascript:void(0) part

Although unnecessary it may require a ; at the last

<li><a id="remove_k4cjGSDSG4K_13885" class="remove_photo" href="javascript:void(0);">Delete this photo</a></li>
<li><a id="feature_13885" class="feature_photo" href="javascript:void(0);">Feature Photo</a></li>

Question 3

Question by lucky13

lucky13

I have this list

<ul style="display:none">
  <li id="key1" title="Look, a tool tip!">item1 with key and tooltip
  <li id="key2" class="selected">item2: selected on init
  <li id="key3" class="folder">Folder with some children
    <ul>
      <li id="key3.1">Sub-item 3.1
      <li id="key3.2">Sub-item 3.2
    </ul>

  <li id="key4" class="expanded">Document with some children (expanded on init)
    <ul>
      <li id="key4.1">Sub-item 4.1
      <li id="key4.2">Sub-item 4.2
    </ul>
</ul>

Is there any way to select each < li > by its “id” with query?

Ive tryed it like this but its now working

$("ul li:#key1").qtip({
         content: '<img src="icons/Icon.png" />'
    });

Thanx for the answers but none of the above was working.. Ive tryed this

$("ul li:first").qtip({
 content: '<img src="icons/Icon.png" />'
});

and im able to see the qtip.But only for the first on the list (key1).
Trying

$("ul li#key1").qtip({
 content: '<img src="icons/Icon.png" />'
});

or

$("#key1").qtip({
 content: '<img src="icons/Icon.png" />'
});

its not working for me.. =/

Answer

Answer by Starx

Starx

Why the extra colon :? You dont need it.

$("ul li#key1").qtip({
     content: '<img src="icons/Icon.png" />'
});

Question 4

Question by JohannesM

JohannesM

I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)

goal

If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>

Answer

Answer by JohannesM

JohannesM

I gave up. I’m a pretty worse inquirer 🙂
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.

http://jsfiddle.net/UyrdS/6/

But it’s not dynamic. It has a static width. That is still the problem.

Answer

Answer by Starx

Starx

I think this is what you wanted

alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
    alllinks.hide(); //First hide all the links
    e.preventDefault();
    if ($(this).parent().children('ul').size() > 0) {
        $(this).parent().children('ul').toggle();
    }
});

Question 5

Question by missybecks

missybecks

setting overflow and text-overflow property makes the li hide bullets. I’ve tried putting the bullets “inside” but it still didn’t show bullets. Plus I’d prefer to put it “outside”

ul.hbox_poplist {
    list-style: circle url('/img/bpt_clear.png');
}

ul.hbox_poplist li {
    margin: 0 0 8px;
    max-height:32px;
    text-overflow: ellipsis;
    overflow-y: hidden;
}

does anyone know any solution to this?

Answer

Answer by Diodeus

Diodeus

Using a CSS background is much more dependable across browsers than using list-style-image for custom bullets. Controlling the position of a list-image is quite difficult on its own.

Something like:

.bullets {
  background-image:url(/img/bpt_clear.png); 
  background-repeat:no-repeat; 
  padding-left:30px; 
  margin-left:-30px;
}

See: http://preview.moveable.com/JM/ilovelists/

Answer

Answer by Starx

Starx

I remember this problem long before. Yes, its better to follow to what @Diodeus suggests, but adding padding-left to the ul, miraculously solved my problem a couple of times.

Question 6

Question by Narek

Narek

I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?

Answer

Answer by Starx

Starx

The trick is too remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.

I have set up a simple example of what you want. Check it on the fiddle here

Question 7

Question by JamWaffles

JamWaffles

I have the following structure in some HTML:

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

With the CSS like this:

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).

Can someone suggest some CSS I can use so that the inner (li_block) lists’ <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?

Thanks,

James

Answer

Answer by Starx

Starx

Use a reset rule.

ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }

In your case using the !important can get your job done. But try not to use it

UPDATE

Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)

Tag: html-lists

Forcing line on navigation bar (unordered list)?

Rachelle Bennington’s Questions:

Link not working in LI

Question by Pjack

Answer by Starx

jquery ul li selector

Question by lucky13

Answer by Starx

unordered HTML list with unordered list inside. Wrapped next each other

Question by JohannesM

Answer by JohannesM

Answer by Starx

setting overflow hides li bullets (overflow property conflict with list-style)

Question by missybecks

Answer by Diodeus

Answer by Starx

Move text baseline in <li> 2 px up

Question by Narek

Answer by Starx

<ul> within another <ul> inherits style

Question by JamWaffles

Answer by Starx

UPDATE

Please fill the form - I will response as fast as I can!