So, I have the following HTML structure:
<div id="category-filter">
<div class="column full">
<ul class="float-clear" id="category-filter">
<li>All Categories</li>
<li>Educator Workshops</li>
<li>Exhibitions</li>
<li>Family Activities</li>
<li>Films</li>
<li>Lectures + Gallery Talks</li>
<li>Music</li>
<li>Other Activities</li>
<li>Tours</li>
<li>Workshops</li>
</ul>
</div>
</div>
Which, after styling produces the following in Firefox:
However, in Webkit, the link text wraps:
The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?
Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.
It's guesswork without seeing your CSS, but try this:
#category-filter a {
white-space: nowrap
}
That should stop the text from wrapping.
And as already mentioned, it's invalid to have a div as a direct child of a ul. You should change it to <li class="column full">. You might also have to adjust some of the selectors in your CSS.
Related
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
I am trying to add a div tag to show after the <ul>. But the div keeps showing alongside the list items.
I have tried putting the <ul> to block display, and even wrapping it with a block level div tag, but the other div element still shows along side. Can anyone please help me fix this? Thanks!
<section id="sub_nav_wrapper">
<div>
<ul class="unordered_style_nav">
<li class="sub_nav_list_item"> Job Overview </li>
<li class="sub_nav_list_item"> Job Description </li>
</ul>
</div>
<div class="job_info_container">
This element should show below the ul class above
</div>
I think you should use
#elementId {
clear: both;
}
to achieve the goal.
You could change the css of one or the other to dominate the row or just put a <br> tag underneath the first <div>.
I want to have wrapped contents automatically indent according to the first line. In order to do this I have used the following HTML and CSS code:
li {
padding-left: 10px;
text-indent: 10px;
}
.Slides {
width: 20em; //Showing wrap-around
}
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<li>First line</li>
</div>
<div>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</div>
</div>
This gives me a nice indentation in case of multiple lines but only in webkit browsers. In Firefox and IE the contents are overlapping with the bullet point.
In order to check for this I have also tried wrapping the contents inside li elements. But this again gives me very different layout across browser. How can I achieve a consistent behaviour in all browsers?
Please try this. I wrapped li tags in ul. sometimes it creates issue if li's are not wrapped properly in ul's
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<ul>
<li>First line</li>
</ul>
</div>
<div>
<ul>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</ul>
</div>
</div>
Dont use the <li> element at all. Just use plain old <p> elements and style the indent purely with css. You can even use a glyphcon or css to add the bullet point back if youd like. Also in css if something works in one browser and not others, try adding vendor prefixes. Sometimes a browser dev adds features in beta, so you have to ad the vendor prefix to use them.
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>