I've got a list item with an image inside, for example:
<ul>
<li>
<img></img>
</li>
</ul>
The image does not take up the full width of the li.
How can I get the li width to shrink to the size of its containing image?
Do the height of images
<ul>
<li>
<img src="" width="xxx" height="xxx"></img>
</li>
</ul>
Live demo http://jsfiddle.net/CZqEc/
updated live demo http://jsfiddle.net/CZqEc/1/
If you set your li to display: inline, since li are blocks by default, the width would match the largest/widest element.
If <li> is display:block or similar (list-item also)
use li img{max-width:100%}
If <li> is display:inline-block or display:inline
you also need to set <li> width
or try
li
{
background:url('');
display: ;
background-size:xx xx;
}
Related
I have a dropdown link on a horizontal navigation bar as follows:
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
The first ul is positioned relatively, and the second ul is positioned absolutely. The second ul has a class, through which I have set a percentage width (about 200% to 250%, I don't remember). However, the li elements within have a rollover background that is as large as the padding set on. What I'm trying to do is to get the padding to span the entire width of the ul, so that when the user rolls over the link, the entire row gets highlighted.
I don't have any example code at this time. Perhaps in several hours I'll edit it in. Hopefully the above is enough to get some ideas rolling.
Following your example and the text you provided I constructed this: fiddle.
Is this close to what you are after? As you can see, the yellow in the second li highlights the full length:
so that when the user rolls over the link, the entire row gets highlighted.
If not perhaps you could fill in the details in the jsfiddle and update it to help us out.
Here is the code. The main trick is to set the display to block on hover:
HTML:
<ul id='firstUl'>
<li>1</li>
<li>2</li>
<li>3
<ul id='secondUl'>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
</ul>
</li>
</ul>
css:
#firstUl
{
background-color:green;
position:relative;
}
#secondUl
{
width:200%;
background-color:blue;
position:absolute;
}
.li
{
background-color:red;
}
#secondUl li
{
width:100%
}
#secondUl li:hover a
{
background-color:yellow;
display:block;
}
I wrote the following code, including a div and a span. I want the span inside the div to have a different colour, but it doesnt seem to work.. This is the html code:
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
<br/>
</span>
</div>
In CSS I set the background color of the div 'menu' to a dark blue color, and the background color of the span 'decorationBox' to a lighter blue color. I also tried using a higher z-index to bring the span up to the front, but it wont display. Is it because of the span being inside the div?
You don't have any 'real' content in the <span>, therefore it won't (at least with default CSS settings) be displayed.
Setting display to block would make the width fit to the parent width:
→ jsFiddle
span#decorationBox {
background-color: red;
/* the default setting is "display: inline" for <span>s */
display: block;
}
Most of CSS properties does not work properly with span. Try to use a div instead.
It's because your span width is 0px. Place content in the span and you will see. With the br tag, you just have 18px on height in the span.
You can add property display:block; on span to see the difference.
The tag is used to group inline-elements in a document.
span is an inline tag by default, it doesn't have width or height properties, so if it is empty you cannot see it as bold or italic... You can change span to div or give block property in css:
.decorationBox {
display:block;
}
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
Content here.
</span>
</div>
Css
div.menu {
background-color: blue;
}
.menu #decorationBox {
background-color: red;
display: block;
}
OR
div.menu{background:blue;}
.menu span{background-color:red;}
Ex. http://jsfiddle.net/2NwmU/1/
How do I remove text wrapping for the child elements in a dropdown?
JSFiddle with CSS here: http://jsfiddle.net/6Bqfn/4/
<ul>
<li>Home</li>
<li>Shop
<ul class="children">
<li>Longer Title</li>
<li>Short</li>
<li>Short</li>
</ul>
</li>
</ul>
I can't get the ul holding the children elements to resize to the size of the largest child li.
You need to include white-space:nowrap; in your css for the items you wish not to wrap:
ul.children li {
white-space:nowrap;
}
This will force all items to show up on a single line, and since all your widths are set to auto, it'll expand accordingly. I updated your jsFiddle as well.
You might try something like embedding a non-breaking space...
Longer Title
I have
<footer class="meta">
<ul>
<li>3 notes</li>
<li>10 comments</li>
<li>3rd Feb 2011</li>
<li class="tags">
<ul>
<li>Tag name</li>
<li>Tag name</li>
</ul>
</li>
</ul>
</footer>
I am wondering why my last tag item goes to the next line
http://jiewmeng.kodingen.com/demos/folio-wip/index.html
You could try to enforce a one-line display, by adding:
li.tags,
li.tags > ul {
white-space: nowrap;
}
As others have pointed out, however, it drops to the next line due to width of the content being greater than the width of the parent element.
Having played around with this, it turns out that, for white-space: no-wrap; to work, you'd also need to use display: inline; (or display: inline-block;) on the li elements.
JS Fiddle demo.
The second tag name doesn't have space to float so it drops to the next line.
If you give the parent li more width it will stay on the same line
It's just overflowing since there's too much content to fit in the parent box. You can very easily check these things if you install firebug in your Firefox browser.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.