I'm new to coding and will be so grateful if anyone could help me to put 4 images spaced evenly apart on the same line.
<div id="kudobuzz_badge_widget"></div>
[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]
[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]
[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]
There are many ways to skin this cat, as it were. One way is to make a list and then float those list items left. I leave the responsiveness up to you, i.e. what happens when the viewport gets smaller. Make sure all the images are the same size for the best appearance, and don't size them with inline styles so you can use media queries for responsiveness and use the cascade properly. I put in the blue borders on every 2nd box so you can see the images are lining up horizontally:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul img {
display: block;
width: 100%;
}
ul li {
float: left;
width: 25%;
}
ul li:nth-child(2n) {
border: 1px solid blue;
}
<ul>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
</ul>
Related
I'm trying to vertically align text with an image (or vice-versa?). Here's some code:
<div class="row">
<div class="col-md-3">col-md-3
<ul>
<li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
</ul>
{# 3 more columns like this #}
</div>
also CSS:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
display: table-row;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
vertical-align: middle;
}
also, might be important all images are the same fixed size, let's say 60x60 like in example and I can not use it as a background.
How can I align it? Thanks.
Update: as were pointed out, I'm looking for text to be in the middle of the right edge of the picture, thanks.
My solution works with one line of text as well as multiple lines.
Working Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari
HTML: same as you posted
I'm assuming you meant middle alignment. if not: use top | bottom instead of middle
CSS
*
{
padding: 0;
margin: 0;
}
ul
{
list-style-type: none;
}
div ul li
{
margin: 5px;
}
img
{
vertical-align: middle; /* | top | bottom */
}
div ul li p
{
display: inline-block;
vertical-align: middle; /* | top | bottom */
}
Just remove the <p> tag and the float:left from img and you got it.
Demo at http://jsfiddle.net/BA2Lc/
I am not a big fan of using those table display options, had some bad cross-browser experiences with them.
Seems to me you could use line-height here. Something like this:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
line-height: 60px;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
}
and a fiddle: http://jsfiddle.net/qjSpj/1/
You can modify the <p> style from the default display to inline:
p {display: inline}
You can use the vertical-align: top; declaration on the li element. But you will need to use a clearfix since you're floating the image.
I just added vertical-align:middle/top/bottom; to the images and worked.
I'm trying to make a list of images, 2 per row.
The uneven rows (1, 3, 5, etc.) should have a small image first, and a wide one second. The even rows (2, 4, 6, 8, etc.) should have the wide image first and the smaller one second.
I'm now at row 3, and I cannot get the small image to the left for whatever reason. As you can see in the image below it floats to the right.
My code is very basic, and Dreamweaver displays it correctly in its Split function.
HTML:
<div id="portfolio-screen"></a>
<ul>
<li><img src="images/portfolio-jaar1.png" width="228"/></li>
<li><img src="images/portfolio-pr1_2.png" width="500"/></li>
<li><img src="images/portfolio-pr1_4.png" width="500"/></li>
<li><img src="images/portfolio-pvs1.png" width="228"/></li>
<li><img src="images/portfolio-jaar2.png" width="228"/></li>
<li><img src="images/portfolio-pr2_2.png" width="500"/></li>
</ul>
</div>
CSS
#portfolio-screen {margin-top: 8px; width: 768px; height: 602px; background-color:#37322d; overflow: auto;}
#portfolio-screen li {margin-top: 8px; margin-left: 8px; float: left;}
For some reason it is not allowed to post images, so I have supplied a link to one: http://oi51.tinypic.com/b63vkk.jpg
You can try something like this - the CSS height for the images could be removed for your size needs.
HTML
<div id="portfolio-screen">
<ul>
<li>
<img src="images/portfolio-jaar1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr1_2.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pr1_4.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pvs1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-jaar2.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr2_2.png" class="imgLarge" />
</li>
</ul>
</div>
CSS:
img {
height:20px;
}
.imgSmall {
width:228px;
}
.imgLarge {
width: 500px;
}
#portfolio-screen {
margin: 0;
padding: 0;
width: 768px;
height: 602px;
background-color:#37322d;
}
#portfolio-screen ul {
margin: 0;
padding: 15px;
width: 768px;
}
#portfolio-screen li {
margin-top: 8px;
margin-left: 8px;
display: inline-block;
}
#portfolio-screen li:nth-child(odd) {
margin:0;
}
JS Fiddle: http://jsfiddle.net/5qREV/
First, you have a broken </a> in there.
Secondly, make sure your unorder list has Margin and padding of 0
Lastly, mess with JSfiddle:
http://jsfiddle.net/Riskbreaker/NT4DS/10/
Instead of floats try inline-block
I am trying to design a web-page where I have a list of bands, and every image will be a small set picture of the band logo(or something). I am setting the style inline and I have tried vertical-align and line-height etc and nothing seems to work.
I am pretty sure I could accomplish this with tables but I have been told many times that is not the proper use of the table.
<div id ="Content">
<ul>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
</ul>
</div>
Here is the small amount of CSS I have
#content li{display:inline;}
img {
max-height:100px;
max-width: 100px;
}
#content ul{list-style-type: none;
clear:left;
}
Any help or tips would be greatly appreciated
If I understood what you're trying to do, try this:
#content li {
display: inline-block;
background-color: #eaeaea;
border: 1px solid red;
text-align: center;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
margin: 5px;
}
img {
max-height:100px;
max-width: 100px;
display: block;
}
#content ul{
list-style-type: none;
clear:left;
}
Have a look at it here: http://jsfiddle.net/zDhKQ/
My best guess is that you are looking for this:
#content ul li {
float:left;
}
otherwise you'd have to be a bit more specific on what you are trying to accomplish.
I believe you want the align tag. Something like this:
<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>
Will result in something that looks nice.
i am a newbie of html and css.now i want to know other gurus how to layout the above image with html and less css. thank you.
my way:
at first,slice eight small images and one white small background image(the rounded corner image).
the html：
<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>
<div id="bottom" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>
ps:what's the difference of when using those images as background image instead of in img tag . which is better? why?
Use ul with appropriate width and float its li's to the left for example (in case this is a navigation), divs inside a div or divs directly in the body.
This should make it more understandable:
style.css (CSS in the same directory, otherwise in link href should point the path):
ul { margin: 0; padding: 0; width: 500px; }
li { float: left; /* width: 100px - if your images are different size. */ }
HTML:
<!DOCTYPE ...>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-US" />
<!-- ... -->
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="some js file"></script>
</head>
<body>
<!-- .... -->
<ul>
<li><img alt="Latest News" src="..." /></li>
<li><img alt="Latest News" src="..." /></li>
<!-- .. -->
</ul>
<!-- .... -->
</body>
</html>
Here you go:
http://jsfiddle.net/Wrd7F/
HTML:
<ul>
<li class="link1">Lipsum</li>
<li class="link2">Lipsum</li>
</ul>
CSS:
ul { width: 600px; float: left; }
ul li {
background-image: url("http://i.stack.imgur.com/l2qJt.png");
background-repeat: no-repeat;
width: 137px;
height: 46px;
float: left;
margin: 20px;
}
ul li a {
padding-left: 57px; /* Note: substract this amount from the width */
width: 80px; /* Original width 137px - Substract the amount of padding you want to use on right */
height: 46px;
line-height: 46px; /* Should be same as height if you want text to stay in the middle */
text-align: left;
float: left;
text-decoration: none;
color: #222222;
}
.link1 { background-position: -13px -19px; }
.link2 { background-position: -200px -19px; }
Note that the background positions you do have to put in manually but its not that hard. Firebug helps with this if your image positions in the image document are messy..
You should follow specific style with placing the images in one image document.
Like, all the images horizontally side by side and if you have hover images you put them under those side by side. After youve established vertical or horizontal positioning to the first item for hover and normal states you only have to change one of these values as the other one doesnt change from that point on.
Why to use css backgrounds over <img>:
In a lot of cases its more flexible ( size, padding, style )
Easier to edit ( no need to open photoshop and change the text )
:Hover state ( if you want to define :hover state ( .link1:hover {
background-position: 0px 0px; } ) you dont have to resort to JS. )
Edit: In the CSS i meant to comment: "Substract the amount of padding you want to use on the left"
Edit2: Also note that This may be sort of a bear trap in this case as Limited width and text might get tricky. With rounded borders and all, this would require some trickery to make it more flexible.
first: use these as background image instead of in img tag & it's better if you use sprites for this .
second: use list style for this & give float:left to it
<ul>
<li>wew</li>
<li>er</li>
<li>rer</li>
</ul>
css:
li{
float:left:
margin:5px;
}
Here is an example where the icons also stick out of the white boxes like in your screenshot
http://jsfiddle.net/RYAZp/
CSS
ul li {
border: 1px solid #333;
background: #FFF;
border-radius: 10px;
display: inline-block;
padding: 10px 10px 10px 45px;
overflow: visible;
font-size: 15px;
height: 1em;
position: relative;
margin-bottom: 1em;
}
ul li img {
position: absolute;
top: -0.5em;
left: 5px;
}
HTML
<ul>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
</ul>
I'm building a website for a friend and it's quite image heavy, I've sliced up the image into relevant bits but I've deciding to use divs and not make use of tables. So this is what I've got:
The Html
<body>
<div id="container">
<div id="header">
<img src="images/header1280.jpg" />
</div><!--end header-->
<div id="nav">
<ul>
<li><img src="images/mixes.jpg" /></li>
<li><img src="images/events.jpg" /></li>
<li><img src="images/artists.jpg" /></li>
<li><img src="images/christ.jpg" /></li>
<li><img src="images/links.jpg" /></li>
<li><img src="images/contact.jpg" /></li>
<li><img src="images/hos.jpg" /></li>
<li><img src="images/forum.jpg" /></li>
<li><img src="images/news.jpg" /></li>
<li><img src="images/fun.jpg" /></li>
<li><img src="images/shop.jpg" /></li>
<li><img src="images/join.jpg" /></li>
</ul>
</div><!--end nav-->
</div><!--end container-->
</body>
The CSS
html, body, div, img, ul, li, a {
margin: 0;
padding: 0;
border: 0px none;
vertical-align: baseline;
font-size: 100%;
font: inherit;
}
body {
line-height: 1;
background: #000;
}
#container {
margin: 0 auto;
width: 1280px;
}
#header {
width: 100%;
}
#nav ul li a img {
width: 100%
height: auto;
}
#nav ul {
list-style: none;
width: 100%;
}
#nav ul li {
float: left;
}
Now there are 12 image links in all and they span over 2 lines. So imagine You have this:
HEADER
NAV LINE 1
NAV LINE 2
on Chrome a 2px gap is created between the header & the NavLine1 & between Navline1 & Navline2. This can be eliminated by:
li {margin-top: -2px;}
On firefox 3.6 there is instead a 3px gap between the Header & Navline1 & just a 2px gap between NavLine1 % Navline 2.
On IE8 there is instead a 2px gap between the Header and Navline1 but a 3px gap between Navline1 and Navline2.
I'm a little confused as to whats causing this, is it a float bug? But can anyone shed some light on the issue?
Use:
#header img, #nav img {
vertical-align: top
}
img elements are inline with a default vertical-align of baseline. The problematic gap is the space reserved for descenders in letters like g or p. Changing vertical-align from baseline removes the gap.