Say that I have images contained inside a list, as below.
<ul>
<li>
<img src="http://placehold.it/250x400">
</li>
<li>
<img src="http://placehold.it/250x200">
</li>
<li>
<img src="http://placehold.it/250x200">
</li>
<li>
<img src="http://placehold.it/250x400">
</li>
</ul>
This fiddle shows what the setup would look like on a page. Is it possible using only CSS to make the second and third list items take up space to the right of the first? If not possible within a list structure, what changes would I need to make to the HTML to make it possible? The solution would ideally work no matter how many images were present in the list.
edit: the image below shows the sort of thing that I'm looking for. The left is what I currently have (as shown in the fiddle), but I would like to have it look like the right hand side of the image.
You can use the float property and set li to float: left;
ul li {
float: left;
}
DEMO
I'd warmly recommend the following article about floats
Eplanation:
Adding a float property to these images basically sets their behavior to the following:
They will get block display type ( display: block; )
They won't take up as much space as block elements (or li) would normally do, but they will shrink to:
a size explicitly set to them (if there is such)
to a size that fits their !non-floated! content
If the floated element has space near a previously floated element, it will be displayed near it (on the same "row") rather then displaying it on the next "line" as block elements normally behave
On the other hand
I guess you are more like after a mosaic layout, to cover your available space regardless of image sizes.
This you can only accomplish with js. One of the libs I'd recommend are masonry
http://jsfiddle.net/VpcBY/5/
You need something like that?
ul li
{
float: left;
}
You can use the vertical-align property and set img to vertical-align: top:
img {vertical-align: top;}
Please view the DEMO.
Try this:
ul li {
list-style: none;
float: left !important;
}
Related
I'm trying to create a list (ul) with each li containing an img on the left and a text left aligned (title and one or more paragraphs) next to the image, on the right.
I played around with float: left and some display but can't get it working, the text float around (under) the image while I'd like to keep it left aligned but next to the image.
If possible I'd like to keep html and css to the minimal needed (and compatible with most browsers).
<ul>
<li>
<img />
<div>
<span></span>
<p></p>
</div>
</li>
</ul>
img, div {
display: inline-block;
vertical-align:top;}
Use float:right for text (or the element which contains all the paragraphs of text) and then clear:both underneath or play a little bit with flexbox (preferable).
Using the "before" pseudo selector could be a good way to go for the image.
Something like: https://jsbin.com/sumomebolu/edit?html,css,output
ul {
list-style-type: none;
}
li:before{
content:url('url.jsg');
position:relative;
left:-20px;
}
I want to put a bunch of clickable links in a sidebar with a hover effect that covers the entire width of the sidebar. Some of these links also include an image that needs to be aligned so that it's vertically centered in relation to the text. Here's what I currently have:
As you can see, the hover effect and the <a> tag don't cover the entire width of the sidebar yet. That's bad because of big link targets are easier to click. I've tried tinkering with horizontally stretched CSS-based table cells, but then the text parts didn't stay aligned properly.
What's the proper way to do it? ~I could post my current HTML if it's helpful, but I was planning to rewrite my markup based on this answer's solution anyway.~
Edit: here's the relevant HTML snippet.
<nav id="sidebar">
<ul>
<li>Home</li>
</ul>
<header>Recently Added</header>
<ul id="recents">
<li><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></li>
</ul>
</nav>
Putting display: block; on the relevant links should make them full width. Or if it doesn't, display: block; width: 100%;. width: 100% on its own doesn't seem to be much use on inline elements.
…And some positioning to fix the alignment, e.g.
ul li a {
display:block;
text-decoration:none;
position:relative;
}
ul li a span {
position:absolute;
top:50%;
}
Have you tried position: absolute; width: 100% (or something like that) on your links? That should make it the parent's full width.
How I solved it
First I made my <a> tags render as a one-row CSS table by setting them to display: table and its children to display: table-cell. You'll need to add width: 100% to the table tag to make it stretch horizontally. But then the text didn't align properly:
Adding a width: 100% to <span> containing the text does the trick:
Uh oh... the 5 pixels of left padding on my links are causing spillover on the right. The fix was fairly easy: wrap the link tags in another <span> tag and adjust the CSS display rules so that the new <span> renders as a table. Bam!
Summary
I've prepared a minimally working HTML5-compliant example for the benefit of future readers.
i am making business company website, there is a menu bar at top of the page. Now this menubar contains four li tags (below code), these li sticks at left of the page. i want to make it to distribute equally horizontal. Help!
<div id="wrapper-menu">
<div id="menu">
<ul>
<li>home</li>
<li>about us</li>
<li>news</li>
<li>contact us</li>
<li>links</li>
</ul>
</div>
</div>
You need to make the li inline-block items, and don't forget to apply a text-align to the ul:
li {
display: inline-block;
}
ul {
text-align: center;
}
example here:
http://jsfiddle.net/evmDv/
I'm assuming with no other example that your problem is that you want them to be horizontal instead of vertical (you say they are all on the left). If this is not the problem then this answer will not apply.
You probably want something in your css along the lines of:
li {display: inline-block;}
You may want to look up exactly what inline blocks do but in a nutshell it means the block is not the full width of the screen but just wide enough and the blocks act like inline elements meaning you don't start a new line with each one.
You will of course want further styling to make it look good but this should do the trick I think.
http://jsfiddle.net/NqgZ4/ for a jsfiddle example.
As a followup to your comment to have them spread out then the easiest way is to apply a width to them.
li
{
display: inline-block;
width: 19%;
}
Note that I use 19% instead of 20% to avoid rounding issues that may cause the width to exceed the pixels (eg if the width available is 999 px then 20% would make each of them 200 pixels which would then add up to too much).
If you have a dynamic number of menu items then its a bit trickier and I'd start thinking about a bit of script to equalise them (by setting the widths dynamically) though there may be a pure CSS method that will work with variable number of items.
Updated fiddle: http://jsfiddle.net/NqgZ4/1/
I have looked at all the similar questions which suggest:
Adding overflow: auto to the <ul />.
Float the <li /> left.
Both cause the list to either display below the image or in a column to the left of the image. I want the list to wrap around the image. Is this possible?
In the example I have used a border instead of background
http://jsfiddle.net/jvh6N/
What is wrong with floating the <li>? You just need to have it be the first <li> for the other ones to wrap around it:
li:first-child { float: left; }
http://jsbin.com/ekonuf/
That sounds weird I know, but I am having trouble getting a piece of text to move down a tiny bit so it's centered on the tab it's on.
here's what it looks like:
I want buy to be centered vertically.
Here is the html:
<div class="row-2">
<ul>
<li>Buy</li>
</ul>
</div>
You can set the line height on the text, for example within the active class:
.active {
...
line-height: 2em;
....
}
<div class="row-2">
<ul>
<li><p style="margin-top: 10px;">Buy</p></li>
</ul>
Play with it
You can use vertical-align to move items vertically.
Example:
<div>This is an <span style="vertical-align: -20px;">example</span></div>
This will move the span containing the word 'example' downwards 20 pixels compared to the rest of the text.
The intended use for this property is to align elements of different height (e.g. images with different sizes) along a set line. vertical-align: top will for instance align all images on a line with the top of each image aligning with each other. vertical-align: middle will align all images so that the middle of the images align with each other, regardless of the height of each image.
You can see visual examples in this CodePen by Chris Coyier.
Hope that helps!
A simple way is to set line-height to the height of the element.
You can use the top margin-top and adjust the text or you could also use padding-top both would have similar visual effect in your case but actually both behave a bit differently.
Try it like this:
.row-2 ul li {
margin-top: 15px;
}
<style>
.row-2 UL LI A
{
margin-top: 10px; /* or whatever amount you need it to move down */
}
</style>
It's simple, just use:
<br />