CSS wrap list around image without background appearing behind - html

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/

Related

minimal css/html text paragraphs next to image within list

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;
}

positioning an image next to a menu bar with html/css

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!

Making images take up all space available in a div

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;
}

How to move an element down a litte bit in html

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 />

CSS: UL's/OL's vs. Div floating left in IE

The scenario is that the client wants a floating div (the gray box) with text that wraps around it. However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
I tried wrapping the ul's/ol's in a div to see if that would help, but have been unsuccessful. Has anyone experienced this problem before and found a suitable solution?
(note: This is an old site with limited ability to be able to modify much else within the layout)
I think you can modify the li's to display their bullets inside instead of outside and that should help you...
ul {
list-style-position: inside;
}
However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
If we're talking something as simple as this:
<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
<li>potato</li>
<li>yoghurt</li>
</ol>
Then what happens here happens on all browsers, not just IE. You can see it from the borders on this example: the left-padding of the list occurs behind the float, not pushing the list content further to the right. This is because floats only repel items in a line box, not block elements.
If you want a quick hack workaround, wrap the <ul> in a <div> with style ‘display: inline-block’.
Floating + IE6 is always a causes some unintentional pain and suffering. Some simple fixes:
Add more margin to the floating box
Add some left margin to your ul/ol