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;
}
Related
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 very new to html and css. I am trying to build my first website. I would like to have a picture on the same line as a nav bar, with the picture to the left. I first tried using some prewritten code for a drop down nav bar, but I was unable to position an image to the left of it. I tried some very basic code, but I still cannot figure our how to put a div (my image) next to a nav. I don't quite know when to use position and when to use float. My goal is simple to start. Get a div and nav to sit side-by side. Here is the html I am using to test:
<!DOCTYPE html>
<html>
<head>
<title>
Nav and div
</title>
<link rel="stylesheet" type="text/css" href="styleside.css">
</head>
<body>
<div>
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%">
</div>
<nav>
<ul>
<li>Home</li>
<li>Big Friendly Button</li>
<li>TARDIS</li>
</ul>
</nav>
</body>
</html>
Can Anyone point me to a starting place for how to move these elements around? Thank you!
<sytle> // Put this in css
.anynames{ // this css is for position an image to the left
position:relative;
float:left;
}
</sytle>
<div id="anynames"> //<---- Id this use to indicate specific DIV
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%" />
</div>
If this is correct Mark it if this is not We Finds ways :D
There are two common methods of forcing two block (commonly div) elements to sit beside each other.
Floats
Floats are used to force elements to strictly align along the left or right of a page. However, they are also useful for placing two block elements beside one another:
div.image {
float: left;
}
nav {
float: left;
}
See this Fiddle
One key advantage floating elements over inline blocks is that floating elements don't have a default margin to space text (see Inline blocks section).
You can also change the code under nav to float: right; which will separate the image and nav on separate sides of the screen.
Inline blocks
Inline blocks are often used to display block elements inside a paragraph. But since two inline elements are placed beside each other given enough room, we can use these to position blocks horizontally:
div.image {
display: inline-block;
}
nav {
display: inline-block;
}
And the Fiddle.
In the Fiddle I've colored the nav red to show the space in between the two elements. If you did the same for the floating elements, you'll see no space between the image and the nav. However, here there is a small margin caused by the default spacing given to inline-block elements - the browser wants to put space between an inline element and the surrounding text. To get rid of the space, you must add
body {
font-size: 0;
}
nav {
font-size: 12pt;
}
Why would you want no spacing? We often want widths described in percentages. However, if you were to keep the spacing while specifying percentages that add up to 100%, the second element would spill over onto the next line because we didn't take the extra spacing into account: see this Fiddle.
Your two elements div and nav need to be formated in CSS. Like this:
<style>
.myDiv{
display:inline-block;
width:50%;
}
nav{
display:inline-block;
width:50%;
}
</style>
You must enter in a class for div to understand this code
<div class="myDiv">
The code inline-block will allow elements that are smaller then the remaining width of the page to be stacked beside it.
Hope this helps!
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;
}
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 />