I've got a horizontal list with long items that I want to wrap. The list wraps fine if one list item is really long or if all the list items are really short.
However, if two list items are both long, they will not split across the available space. This image shows the problem:
Here's the markup I'm using:
<html>
<style>
ul {text-align:left; width:400px}
li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;}
li a {display:inline; white-space:normal;}
</style>
<body>
<ul>
<li>>alf; fa sadlf; </li>
<li>>a sdf; fa sd; asd;lfgj </li>
<li>>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj </li>
<li>>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</li>
</ul>
</body>
</html>
You can do this by getting rid of some of your code. If I understand correctly, all you'll need is the following:
ul { width:400px; }
li {
list-style-type:none;
display:inline;
padding-left:20px
}
Here's an example: http://jsfiddle.net/M9zqE/
It's fixed by not floating items (thus not removing them from the flow)
See http://jsfiddle.net/pRCFR/
Related
Hi I have a unordered list where I have a section where theres a list as seen in this code
<li id = "project"> My Projects </li>
Where the id project corresponds too
#project
{
list-style-image:url(link.png);
position:relative;
left:20px;
top:100px;
}
Im wondering on how I can make this link.png clickable. I have found an example where you click a picture and it goes into a link, but im kind of confused what to do here since this is inside of an unordered list ( I dont know any Javascript by the way, just recently started relearning html and css)
The question is WHY would you make only a LI bullet clickable?
Think about a better use experience. Bigger clickable area = total happiness.
Set a left padding to the inner anchors,
Set an equal negative left margin to cover the custom bullet image
#menu li{
position:relative;
}
#menu li a{
display:block;
background:rgba(255,0,0, 0.1); /* demo: to make visible the clickable area */
padding-left:45px;
margin-left:-45px;
}
#li_videos {list-style-image:url(//placehold.it/30x30/af8);}
#li_project {list-style-image:url(//placehold.it/30x30/f0f);}
<ul id="menu">
<li id="li_videos">Videos</li>
<li id="li_project">Projects</li>
</ul>
If you want only your list icon clickable you could do:
<li>
<!-- move me till I overlay the icon list image -->
My Projects
</li>
than using CSS give the li a anchor a size and move it till it overlays completely your list-style-image.
Pretty simple, but I can't figure it out.
I have a word followed by an <ul>. I made the unordered list have inline styling, but I want it to be on the same line as the word before it.
JSfiddle: http://jsfiddle.net/fm74R/4/
Use this template to make it look like: "Tags: funny unique Add a tag to the post"
Thanks!
Working Fiddle
ul{
display:inline-block;
padding:0;
}
Best way to do this is give everything an inline form of display.
HTML:
Tags:
<ul style="list-style: none;">
<li>funny</li>
<li>unique</li>
<li>
Add a tag to the post
</li>
</ul>
CSS:
li {margin:0; padding:0;display:inline;}
ul {margin:0; padding:0; display:inline;}
http://jsfiddle.net/fm74R/10/
I have some legacy html markup and I need to enable Arabic language support.
So, I have a list of news headlines and render them in <li> elements.
Here is sode:
..
<li>
<a>some Arabic text</a>
<em>news datetime</em>
</li>
..
So, I need to apply rigth text-alignment and direction rtl for anchor, but not for datetime.
I applied text aligment for <li> element and everything is fine.
But I need to apply "direction: rtl" style to anchor and here goes my problem.
I've tried to create <div> element with rtl direction attribute and put anchor into it. This works fine in chrome, but I need to support IE6+
Also I've tried to apply direction attribute to <li> and override this attr in <em>, but this doesn't work.
Any suggestions?
Thanks in advance,
Vitali.
li {direction:rtl}
em {direction:ltr; float:left}
if em is out of li
<ul dir="rtl">
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
</ul>
if u need em inside div
<style>
ul { direction:rtl; } ul li em{direction:ltr;} /* em{direction:ltr; float:left;} */
</style>
<ul>
<li>العربية
<em>11/24/2011</em>
</li>
<li>العربية
<em>11/24/2011</em>
</li>
<li>العربية
<em>11/24/2011</em>
</li>
</ul>
if your arabic script contain english words
<style>
ul { direction:rtl; } ul li{ direction:rtl; } ul li em{direction:ltr;} /* em{direction:ltr; float:left;} */
</style>
What's the best way to mark up a navigation menu with captions for each element? (I think the term 'speaking' is attributable to Smashing Magazine, see http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/)
A definition list seems most appropriate, something like:
<dl id="menu">
<dt>About</dt>
<dd>Our work, mission, history and people</dd>
<dt>Events</dt>
<dd>We put on workshops, talks and debates</dd>
<dt>Media</dt>
<dd>See videos from our archive of past events</dd>
<dt>Contact</dt>
<dd>Get in touch with us for further information</dd>
</dl>
But I can't think how to style it to look like this: http://i.stack.imgur.com/Etd4K.png
without extra DIVs around each menu item which I don't think is valid HTML.
Thanks in advance.
demo: http://jsfiddle.net/Afh9N/
The CSS isn't pretty...
dt, dd {
width:120px;
padding:0 10px;
border-left:2px solid #333;
float:left;
}
dt {
margin-left:-120px;
font-weight:bold;
}
dt:first-child {
margin:0;
}
dd {
position:relative;
top:20px;
font-family:verdana;
font-size:9px;
left:-142px;
}
I don't think a definition list is best way to go about this.
I would style a ul and use spans for the "speaking part". Something like this:
<ul id="menu">
<li>About <span>Our work, mission, history and people</span></li>
<li>Events <span>We put on workshops, talks and debates</span></li>
</ul>
CSS
li{display:block; float:left; background:blue; border:1px; color:white;
font-family:arial; font-size:1.25em; width:150px; padding:1em;}
span{display:block; font-size:.7em;}
http://jsfiddle.net/Yzx8K/1/
Try something like this:
<ul>
<li><h2>Menu Item 1</h2> Menu Item 1 "Speaking Text"</li>
<li><h2>Menu Item 2</h2> Menu Item 2 "Speaking Text"</li>
<li><h2>Menu Item 3</h2> Menu Item 3 "Speaking Text"</li>
<li><h2>Menu Item 4</h2> Menu Item 4 "Speaking Text"</li>
</ul>
Then you can style the list elements into the menu however you like. The header in each list element provides both a style target and a semantic way to show the importance of the main "Menu Item" text.
Go HERE, and you will notice that the "Audio" tile's player can be seen on both tiles when I need it only to be seen on the tile that says Audio. When it slides, I mean. I tried setting a width to the UL element that the tiles are in but that screws it up. I'm at a loss. I have tried everything I can think of. Any input?
CSS
#audioTile {
padding:5px;
}
#audioTile ul, #audioTile li {
width:115px;
height:105px;
margin:0px;
padding:0px;
list-style:none;
}
JS
$(document).ready(function(){
$("#audioTile").easySlider({
auto: true,
continuous: true,
controlsShow: false
});
});
HTML
<div class="trigger" id="audioTile"> <ul>
<li> <h5>Audio</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
<div class="player1">{AudioPlayerWhite}</div>
</li>
<li> hey big fat weirdo loL!
</li> </ul>
</div>
your problem is that you didn't set overflow:hidden on your ul and you are scrolling with your js... since you set list-style:none, and explicitly set the li 's width.( by default, overflow is allowed)
ps, firebug suggests to me that you have included two players in the same tile... not sure if that's what you want...