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
Related
I wish too have text directly below my images so I tried the following but it did not work. I want the text direclty below and to the centre of the picture
<div class="our_partners">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<ul>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image1, 'full' )); ?>" alt="">
<span>High Speed Wifi</span> </li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image2, 'full' )); ?>" alt="">
<span> Latest Av Technology</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image3, 'full' )); ?>" alt="">
<span> Online Booking</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image4, 'full' )); ?>" alt="">
<span> Concierge Service</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image5, 'full' )); ?>" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
You can see the result here
and you can see it live here if you scroll down to services
http://ubtanz.solitudesoftware.co.uk/
Give img
.our_partners ul li a img {
padding: 29px 0;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Remove margin-right: 15px; to margin-right: 0;
.our_partners ul li a {
margin-right: 0;
}
to li
.our_partners ul li {
display: inline-block;
margin: 0px 5px;
}
and
span {
display: block;
text-align: center;
}
.our_partners ul li a {
margin: auto;
}
.our_partners ul li a img {
padding: 10px 0;
max-width: 100%;
max-height: 100%;
}
.our_partners ul li a {
width:230px;
text-align:center;
}
Throw this in your custom.css - makes it centered.
I'd recommend using the margin-right: 15px property on the list element, and not the anchor element because it makes more sense. You are separating between the list elements and not the anchors.
With that change in mind, all you need to do now is set the span element to take 100% of the available width, and center align its content.
.our_partners li {
margin-right: 15px;
}
.our_partners a li span {
text-align: center;
display: inline-block;
width: 100%;
}
and remove your current margin set from the anchor element:
.our_partners ul li a {
margin-right: 15px; // <- remove this line
}
Easy way, use <br/>:
<ul>
<li>
<img src="..." alt=""><br/>
<span>High Speed Wifi</span>
</li>
(...)
A better way, threat one of the part as a block, by default, a img and span tags are inline:
<ul>
<li>
<img src="..." alt="">
<span>High Speed Wifi</span>
</li>
(...)
Externalize the css style in a class. You could even wrap the linked image into a block span:
# foo.css:
span.span-block { display: block; }
...
# 42.html
<span class="span-block"><a ...><img .../></a></span>
...
Put the text inside the <a></a> tag, like so:
<li>
<a href="#"><img src="...s2-3.png" alt="">
<span style="display:block;">High Speed Wifi</span>
</a>
</li>
EDIT To ensure that all images are aligned, you can set the last image up as:
<li>
<a href="#"><img src="...cons-2.png" alt="">
<span style="display:block;"> </span>
</a>
</li>
Further, you can obviously set a style on the <span> element in your css file, to cut down on repetition.
The layout I want to achieve is the following, one large image with a gallery of four thumbnails below it:
I'm using a Javascript gallery to actually display a full screen gallery, activated when clicking on this element.
The problem is that the gallery script expects the images as direct children in an unordered list, all of them including the one that is the big image in my layout:
<ul>
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
The first <li> is the big image, all the others are small thumbnails.
Is there a way to achive my desired layout while still having all the images in the unordered list? If I could break up the list this would be easy, but that wouldn't be recognized by the gallery script anymore.
Is it possible to achive this layout without changing the underlying structure of the list?
I suggest using float: left and display: block on li, and float: none on li:first-child:
ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
li
{
margin: 2px 5px;
display: block;
float: left;
}
li:first-child
{
float: none;
}
<ul>
<li>
<img src="http://lorempixel.com/g/430/430/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
</ul>
Simple and clean, no JS involved.
This is my attempt based on flexbox. The skewed images are a side effect of taking random cat images from the web, and constraining them to a certain width and height (fiddle).
The CSS:
ul {
padding: 0;
margin: 0;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li {
/** add box-sizing: border-box; if you include padding or borders **/
}
li:first-child {
width: 100%;
height: 500px;
}
li:not(:first-child) {
/** add box-sizing: border-box; if you include padding or borders **/
width: 25%; /** use calc if you include margins **/
height: 100px; /** whatever height you want **/
}
li > img { /** demo only - because of image sizes **/
width: 100%;
height: 100%;
}
The HTML:
<ul>
<li data-src="whatever">
<img src="http://www.gordonrigg.com/the-hub/wp-content/uploads/2015/06/little_cute_cat_1920x1080.jpg" />
</li>
<li data-src="whatever">
<img src="http://rufflifechicago.com/wp-content/uploads/cat-treats.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</li>
<li data-src="whatever">
<img src="http://animalia-life.com/data_images/cat/cat8.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.catprotection.com.au/wp-content/uploads/2014/11/5507692-cat-m.jpg" />
</li>
</ul>
You are looking for some simple CSS, there are multiple ways to approach this, the easiest is likely:
<style type="text/css">
ul.thumbs li{
float:right;
}
</style>
<ul class="thumbs">
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
you could also set the ul to display:table-row and the lis to display:table-cell which would allow them to evenly spread and fill the space allowed in the ul
Based on your edit you will need something a little more complicated, without knowing which plugin you are using, or how it works, you can try this approach (uses a little jQuery):
$(document).ready(function(){
$('li').click(function(){
$(this).parent().find('.selected').removeClass('selected');
$(this).addClass('selected');
});
});
ul{
padding-top:405px;
position:relative;
}
li{
height:100px;
width:100px;
float:left;
background:blue;
}
li.selected{
background: red;
position: absolute;
top: 0;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
<li class="selected">test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
ive been stuck trying to float these pictures into two columns for days. They just stay centered no matter how small i make them. They will be very small and still not float, one time they did float but i cant get back to that and even when they did they were all messy and not making columns, i just want to make columns. i used the .group1 and .group2 classes to target the things to float
<ul class="secondary-content group">
<div class="group1">
<li>
<img src= "MB6.jpg" alt="Wonderful evening">
<p>I've had a perfectly wonderful evening. But this wasn't it.</p>
<p>-Groucho Marx</p>
</li>
<li>
<img src="love3.jpg" alt="Marilyn Monroe">
<p>"A man's only as old as the woman he feels."</p>
<p>-Groucho Marx</p>
</li>
<li>
<img src="MB5.png">
<p>"I intend to live forever, or die trying."</p>
<p>-Groucho Marx</p>
</li>
</div>
<div class="group2">
<li>
<img src="MB2.jpg">
<p>Groucho: "Get outta here before I get arrested."</p>
<p>Chico: "Nah I'd like to stay and see that."</p>
<p>-Groucho Marx</p>
</li>
<li>
<img src="MB4.jpeg">
<p>"honk honk"</p>
<p>Harpo Marx</p>
</li>
<li>
<img src="MB9.jpg">
<p>Groucho: "Do you follow me?"</p>
<p>Margaret Dumont: "Yes!"</p>
<p>Groucho: "Well, you better stop following me, or I'll have you arrested."</p>
</li>
</div>
</ul>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
a h1 {
text-align: center;
}
.main-header{
padding-top: 50px;
height: 1000px;
background: linear-gradient(#fff, transparent 60%),
linear-gradient(0deg, #fff, transparent 50%),
url('../MarxBros.jpg') no-repeat center;
}
.intro{
text-align: center;
}
.secondary-content{
width: 40%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
max-width:300px;
text-align: center;
;
}
.secondary-content img{
max-width:300px;
}
.group1 li {
float: left;
}
.group2 li {
float:right
}
.group:after {
content: "";
display: table;
clear: both;
}
You need to fix your HTML structure. Only <li> elements can be direct children of <ul> elements. In this new structure I created two <ul> elements and changed the float to the <ul>'s rather than the <li>'s: jsfiddle
<ul class="secondary-content group group1">
<li>
<img src= "MB6.jpg" alt="Wonderful evening">
<p>I've had a perfectly wonderful evening. But this wasn't it.</p>
<p>-Groucho Marx</p>
</li>
...
</ul>
<ul class="secondary-content group group2">
<li>
<img src="MB2.jpg">
<p>Groucho: "Get outta here before I get arrested."</p>
<p>Chico: "Nah I'd like to stay and see that."</p>
<p>-Groucho Marx</p>
</li>
...
</ul>
.group1 {
float: left;
}
.group2 {
float:right
}
.group:after {
content: "";
display: table;
clear: both;
}
I have these images that reside in every list element in my unordered list:
<ul class="bot">
<li>
<img src="images/crime.png" class="pil-img">
Fire
</li>
</ul>
I wish to align the text in the list item as shown in the image
Now, I've given the following style to the <img /> element in my list item:
.pil-img {
padding-right: 10px;
margin: 4px 0px 0px 15px;
}
and to the <a /> tag
.bot li a { margin-top: -5px; }
but this doesn't seem to work. Any ideas?
Cheers
Html:
<ul>
<li>Some text</li>
<li>Some text</li>
</ul>
CSS:
ul li {
background: url(image.png) no-repeat 100% 0;
line-height: HEIGHT OF IMAGE (i.e. 100px);
padding: 0 30px 0 0;
}
There's a start. I would need to know the dimensions of your image to help you more.
If you need to have 2 images (star + cross/check) then you should add 1 bg to the <li> and another to <a>. That should start you off on the right track.
See if this works for you in your overall context.
HTML
<ul class="bot">
<li>
<div class="div_class"><img src="images/crime.png" class="pil-img"></div>
<div class="div_class">Fire</div>
</li>
</ul>
CSS
.div_class {
vertical-align: middle;
display: inline-block;
}
You can tweak the pil-img class as desired.
Here's a fiddle.
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>