I have a nice challenge for you. Here you have the next code (live example: http://inturnets.com/test/test.html):
<!DOCTYPE html><html><head><title></title>
<style type="text/css">* {
margin: 0;
padding: 0;}a, a:hover {
text-decoration: none;
}
.grid {
width: 984px;
margin: 0 auto;
list-style: none;
height: 666px;
}
.grid li {
float: left;
position: relative;
}
.small + .small {
position: relative;
clear: left;
}
.large, .large a {
width: 393px;
height: 222px;
}
.small, .small a {
width: 198px;
height: 111px;
}
.small a, .large a {
display: block;
cursor: pointer;
color: #fff;
}
.overlay {
background: #000;
width: 100%;
height: 22px;
color: #fff;
opacity: 0;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<ul class="grid">
<li class="item small"><div class="overlay">Title 1</div><img src="img/squares.png" border="0" width="198" height="111" /></li>
<li class="item small"><div class="overlay">Title 2</div><img src="img/space.png" border="0" width="198" height="111" /></li>
<li class="item large"><div class="overlay">Title 3</div><img src="img/arch.png" border="0" width="393" height="222" /></li>
<li class="item large"><div class="overlay">Title 4</div><img src="img/tree.png" border="0" width="393" height="222" /></li>
<li class="item large"><div class="overlay">Title 5</div><img src="img/arch.png" border="0" width="393" height="222" /></li>
<li class="item large"><div class="overlay">Title 6</div><img src="img/tree.png" border="0" width="393" height="222" /></li>
<li class="item small"><div class="overlay">Title 7</div><img src="img/squares.png" border="0" width="198" height="111" /></li>
<li class="item small"><div class="overlay">Title 8</div><img src="img/space.png" border="0" width="198" height="111" /></li>
<li class="item large"><div class="overlay">Title 9</div><img src="img/tree.png" border="0" width="393" height="222" /></li>
<li class="item small"><div class="overlay">Title 10</div><img src="img/squares.png" border="0" width="198" height="111" /></li>
<li class="item small"><div class="overlay">Title 11</div><img src="img/space.png" border="0" width="198" height="111" /></li>
<li class="item large"><div class="overlay">Title 12</div><img src="img/arch.png" border="0" width="393" height="222" /></li>
</ul>
</body>
</html>
Tasks:
one single list (ok)
simple float:left for the LI's (ok)
align the cells like on the next picture (not yet done)
Tips:
as you see the second .small class has position relative
you don't need anything special on the second small one
you need to do some other things
so you then need to push the item back into it's correct position
and then you need to fix the empty space it leaves
#hun i Try from my side may be that's help you:
.small + .small {
position: relative;
margin-left:-198px;
margin-top:111px
}
I'm not sure how to do it using floats.
Here's a solution using display: inline-block instead.
The only difference I can see between the display of my code and your goal picture is that the order of the two small images on the right is inverted.
However, I'm not going to try to fix it, because the order of images in your goal picture is wrong (or so I think):
Your source code has:
Image 6 - img/tree.png
Image 7 - img/squares.png
Image 8 - img/space.png
But in your goal picture, space is on top of squares, which is inconsistent with the other instances of the "two small images".
Without further ado:
The changes:
I removed the whitespace between the <li> tags. You could workaround having to do this.
New CSS:
.grid li {
position: relative;
display: inline-block;
vertical-align: top;
*display: inline;
zoom: 1
}
.small + .small {
position: relative;
clear: left;
top: 111px;
margin-left: -198px
}
I included the hacks required to make display: inline-block work in IE7.
Tested in IE7/8, and recent versions of: Chrome, Firefox, Safari, Opera.
I have created a working demo.
I stripped your appearing title divs, a bit shortened the HTML, and kept everything to a minimum, so the final CSS looks like this:
ul,li { margin: 0; padding: 0; }
a, a:hover { text-decoration: none; }
.grid { width: 984px; margin: 0 auto; list-style: none; height: 666px; }
.grid li { float: left; position: relative; }
.small + .small { margin: 111px 0 0 -198px; }
.large, .large a, .large img { width: 393px; height: 222px; }
.small, .small a, .small img { width: 198px; height: 111px; }
.item a { display: block; cursor: pointer; color: #fff; }
From this base, it seems to be safe to add those title divs and stuff.
Tested only on Firefox, but I don't really see a reason why it would not work on other browsers (tell me if I'm wrong). Well, except the + selector, but it was in your original CSS either.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to add a description after every picture that is displayed and I only want it to appear when the image is selected. Adding a paragraph doesn't seem to work, nothing appears.
Here is my html and css - I am not allowed to use any javascript
#gallery {
width: 1000px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
}
#bar {
list-style: none;
padding: 0;
margin: 0;
float: left;
display: inline;
}
#bar li {
padding: 0;
margin: 0;
float: left;
clear: both;
}
#bar li a img {
display: block;
border: none;
}
#bar li a {
display: block;
}
#big {
width: 800px;
height: 600px;
overflow: hidden;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="gallery">
<ul id="bar">
<li><img alt="" src="rsz_autumn.jpg" /> </li>
<li><img alt="" src="rsz_lake.jpg" /></li>
<li><img alt="" src="rsz_mountain.jpg" /></li>
<li><img alt="" src="rsz_mountainlake.jpg" /></li>
<li><img alt="" src="rsz_path.jpg" /></li>
<li><img alt="" src="rsz_sea.jpg" /></li>
<li><img alt="" src="rsz_sky.jpg" /></li>
<li><img alt="" src="rsz_sun.jpg" /></li>
<li><img alt="" src="rsz_trail.jpg" /></li>
</ul>
<div id="big">
<div><a name="pic1"></a> <img alt="" src="autumn.jpg" /><p>A picture about autumn.</p></div>
<div><a name="pic2"></a><img alt="" src="lake.jpg" /></div>
<div><a name="pic3"></a><img alt="" src="mountain.jpg" /></div>
<div><a name="pic4"></a><img alt="" src="mountainlake.jpg" /></div>
<div><a name="pic5"></a><img alt="" src="path.jpg" /></div>
<div><a name="pic6"></a><img alt="" src="sea.jpg" /></div>
<div><a name="pic7"></a><img alt="" src="sky.jpeg" /></div>
<div><a name="pic8"></a><img alt="" src="sun.jpg" /></div>
<div><a name="pic9"></a><img alt="" src="trail.jpg" /></div>
</div>
</div>
</body>
</html>
Using a css hack with limitation, see breakdown
Add an input checkbox for each image element
Add a label for each input box
Hide the input box
When the user clicks the label, the input box is check
As a result of the box being checked, we can use the :checked pseudo to apply a style to our sibling elemnent. In this case it may be a caption
See snippet below
#gallery {
width: 1000px;
overflow: hidden;
position: relative;
z-index: 1;
}
a {
pointer-events: none
}
#bar {
list-style: none;
padding: 0;
margin: 0;
float: left;
display: inline;
}
input {
display: none;
}
input:checked~.text {
opacity:1;
}
.text {
opacity:0;
}
#bar li {
padding: 0;
margin: 0;
float: left;
clear: both;
}
#bar li a img {
display: block;
border: none;
}
#bar li a {
display: block;
}
#big {
width: 800px;
height: 600px;
overflow: hidden;
float: left;
}
<div id="gallery">
<ul id="bar">
<li>
<input type="checkbox" id="rad1">
<label for="rad1">
<img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzvF_fKLwUk_0nbMnHMJYw4sIiU78lMhMOLTlqvhJ8XrGkqhL_jw" /> </label>
<div class="text">
<h1>This is a caption</h1>
</div>
</li>
<br>
<br><br><br><br><br><br><br><br><br><br><br>
<div id="pic1"></div>
</ul>
</div>
You have to control your code. However, I think you can use :hover selector. Please see this example adding this css: .gallery .desc {visibility:hidden;} .gallery:hover .desc {visibility:visible;}. You can add also a transition effect. I hope I was of any help.
Here is my code: http://pastebin.com/pDkM4FQi
#img1,
#img2,
#img3,
#img4 {
display: inline-block;
height: 100%;
}
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
#navSplitter {
background-color: gray;
display: inline-block;
height: 80px;
margin-left: 20px;
margin-right: 20px;
width: 3px;
}
<div id="navBar">
<div id="navSplitter" style="background-color: black;" />
<img id="img1" src="img1.png" />
<div id="navSplitter" />
<img id="img2" src="img2.png" />
<div id="navSplitter" />
<img id="img3" src="img3.png" />
<div id="navSplitter" />
<img id="img4" src="img4.png" />
</div>
I can't get the images to line up in the navBar div. I tried everything I know about code, and even looked up some stuff but never found what I need to get these images to go on there with the splitters in between each picture.
How about putting all of the images in just one <div> and then add a left-padding and right-padding to the images? This way you don't have to deal with the alignment of the images that much.
Please note that id tags are unique. You don't use them everywhere in the html file. Use class if you need
The issue is in your HTML. There is no concept of self closing div tags in HTML 4.x.
change this <div id="navSplitter"/> to <div id="navSplitter"></div>.
or my suggestion is to use <span></span> tag to add splite because span is by-default inline-block element.
Hope this would help your issue.
Try this:- remove margin-left: 20px from #naviSplitter
<head>
<style>
#img1, #img2, #img3, #img4 {
display: inline-block;
height: 100%;
}
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
#navSplitter {
background-color: gray;
display: inline-block;
height: 80px;
/*margin-left: 20px;*/
margin-right: 20px;
width: 3px;
}
</style>
</head>
<body>
<div id="navBar">
<div id="navSplitter" style="background-color: black;"/>
<img id="img1" src="img1.png"/>
<div id="navSplitter"/>
<img id="img2" src="img2.png"/>
<div id="navSplitter"/>
<img id="img3" src="img3.png"/>
<div id="navSplitter"/>
<img id="img4" src="img4.png"/>
</div>
</body>
divs aren't a self closing tag, which you are doing, therefore invalid HTML and by consequence the images are not working as expected.
So, I advise you to forget using div for splitting the images and just use a HTML list and then using a pseudo element ::before instead.
And to align, you need vertical-align:top because inline-block is baseline by default
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
ul {
font-size: 0
}
li {
display: inline-block;
vertical-align: top;
height: 100%;
margin: 0 5px
}
li::before {
background-color: gray;
display: inline-block;
vertical-align: top;
height: 100px;
left: -5px;
width: 3px;
content: "";
position: relative
}
<div id="navBar">
<ul>
<li>
<img id="img1" src="//dummyimage.com/100x100" />
</li>
<li>
<img id="img2" src="//dummyimage.com/100x100" />
</li>
<li>
<img id="img3" src="//dummyimage.com/100x100" />
</li>
<li>
<img id="img4" src="//dummyimage.com/100x100" />
</li>
</ul>
</div>
Maybe you would rather something like this.
<div id="nav-bar">
<img src="http://dummyimage.com/80&text=1" alt="">
<img src="http://dummyimage.com/80&text=2" alt="">
<img src="http://dummyimage.com/80&text=3" alt="">
<img src="http://dummyimage.com/80&text=4" alt="">
</div>
Don't worry about closing tags for img elements anymore. But do make sure you write something descriptive in the alt attribute about what the image content is for people with disabilities.
html {
font-size: 16px;
}
I'm using rems to do most measurements. rems are based off of a base font-size. So we tend to set it in the html element. I think 16px is a good standard these days. 1rem therefore is 16px.
Using measurements like this allows you to arrange things relatively. You could also interchange with ems if you wanted to. They are based off of the parent element font-size.
#nav-bar {
max-width: 1200px;
width: 100%;
margin: 2rem auto;
text-align: center;
background-color: white;
border-radius: 1rem;
display: inline-block;
padding: .5rem;
}
#nav-bar img {
display: inline-block;
}
#nav-bar img:not(:last-child) {
margin-right: 1rem;
padding-right: 1rem;
border-right: 3px solid gray;
}
Instead of using an HTML element for aesthetics, we can push that into the CSS completely.
I use a right border on those navigation images and make use of the not pseudo-class combined with last-child as :not(:last-child) which selects all the images except the last one. So you don't see the right border at the end.
Your HTML is not valid. div tags cannot be closed this way.
<div />.
div tags are properly used this way.
<div></div>
Due to the lack of closing tags, your images and splitters are nested. This happens because your browser does not know how to display your page since the opened/closed tags don't match up. It is then trying to fix your code by adding a bunch of closing tags at the bottom of the code, one closing tag for each opened one that was not closed.
By simply closing your div tags, your images will align properly. Your CSS is valid.
No one talks about FLEXBOX. Still care about old IE?
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
width: 1200px;
display: flex;
justify-content: center;
align-items: center;
}
img { width: 100px; height: 100px; background: red; }
hr {
border: none;
background-color: gray;
height: 80px;
margin-left: 20px;
margin-right: 20px;
width: 3px;
}
<div id="navBar">
<img id="img1" src="img1.png" />
<hr>
<img id="img2" src="img2.png" />
<hr>
<img id="img3" src="img3.png" />
<hr>
<img id="img4" src="img4.png" />
</div>
I would recommend removing the navSplitter elements completely, as they add an extra set of items (unnecessarily) that will need to be styled to ensure the images line up. Instead, you can just add padding / borders to the images individually, which will separate them as desired. Consider the following:
.image {
display: inline-block;
height: 100%;
padding: 20px;
border-right: 3px solid gray;
}
.image:last-of-type {
border-right: none;
}
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
<div id="navBar">
<img class="image" src="http://placehold.it/150x150" />
<img class="image" src="http://placehold.it/150x150" />
<img class="image" src="http://placehold.it/150x150" />
<img class="image" src="http://placehold.it/150x150" />
</div>
I am using a CSS slider on my ebay page (as ebay won't let you upload scripts, etc) but I found that it won't work in IE. Coyldn't figure out how to fix it. Is there a way around it? Or is there a slider with no scripts and that works in IE8+?
Here is the css:
img {
border: none;
}
a {
outline: none;
}
/* Fades in the slideshow. Hides the initial animation on the li tag.*/
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
ul#slider {
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 70px;
height: 50px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
ul#thumb a:hover {
opacity: 1;
}
ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}
ul#slider li p {
position: absolute;
bottom: -1px;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
ul#slider li p span {
line-height: 0.5em;
padding: 10px;
display: block;
}
/* Animation for the :target image. Slides the image in. */
#-webkit-keyframes moveTarget {
0% {
left:-700px;
}
100% {
left:0px;
}
}
ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/
#-webkit-keyframes moveIt {
0% {
left:0px;
}
50% {
left:700px;
}
100% {
left:-700px;
z-index: 5;
}
}
ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}
And HTML:
<ul id="slider"> <li id="1"> <img src="(image link)" alt="" width="700" height="438" />
</li><li id="2"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="3"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="4"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="5"> <img src="(image link)" alt="" width="700" height="438" />
</li>
</ul>
<ul id="thumb">
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
<li><img src="(image link)" alt="" width="70" height="50" /></li>
</ul>
</div>
Maybe you should check out canIuse.com to see browser compatibilities. It could be helpful!
Unfortunately a cross browser, pure CSS image slider is not currently a realistic option. Using this slider is going to cause issues in earlier versions of Internet Explorer no matter what you do. If you need reasonable browser support then you will have to look at a slider that uses Javascript.
All of those -webkit prefixes indicate that whatever CSS you copied and pasted is intended to work only with webkit browsers (Google Chrome, Safari, etc...)
Unfortunately, without webkit, I can't think of many CSS-only gallery solutions.
So I am trying to make a footer for a webpage.
Here is what I have:
What I want is (I did my best to demonstrate it):
(The images seem to be too small because it is too long. If you don't mind, zoom in your browser.)
Then here comes my HTML structure:
<div id="footer">
<table id="info">
<tr>
<td colspan="3">You're here:
<div id="where"></div></td>
</tr>
<tr>
<th>
<div id="additional-links">
<ul class="nobullet">
<li>Intro</li>
<li>Hiring</li>
<li>Collab</li>
<li>Credits</li>
<div id="shared">
<span style="color: #fff;">|</span>
<img src="fl.jpg" alt="facebook">
<img src="tl.jpg" alt="twitter">
<img src="tml.png" alt="tumblr">
<span style="color: #fff;">|</span>
</div>
</ul>
</div>
</th>
</tr>
<tr>
<td colspan="3">©2013
</td>
</tr>
</table>
</div>
Then the corresponding CSS:
div {
padding: 0;
margin: 0;
text-align: center;
}
#footer {
width: 100%;
height: 15%;
background-color: #dcd9ca;
}
#info {
text-align: center;
width: 100%;
min-height: 100%;
}
.nobullet li {
display: inline;
}
.nobullet li a {
text-decoration: none;
color: brown;
}
#shared {
float: right;
position: relative;
}
#shared img{
width: 24px;
height: 24px;
vertical-align: middle;
}
So my question is: how do I make the changes?
I hope I have made myself clear.
I agree with the comment made by #vishalkin that you should not use the table structure.
Even if you did, you have an issue that make yours HTML invalid. The #shared div cannot be a parent of an ul. You need to wrap this in a li.
Here is my solution on jsfiddle.net.
Here is the HTML:
<div id="footer">
<p>You're here:</p>
<div id="footerLinks">
<ul id="links">
<li>Intro</li>
<li>Hiring</li>
<li>Collab</li>
<li>Credits</li>
</ul>
<ul id="shared">
<li>| <img src="" alt="facebook"/></li>
<li><img src="" alt="twitter"/></li>
<li><img src="" alt="tumblr"/> |</li>
</ul>
</div>
<p>©2013</p>
</div>
Here is the CSS:
body { background: #060; width: 1024px; }
div { padding: 0; margin: 0; text-align: center; }
#footer { width: 100%; text-align: center; background-color: #dcd9ca; position: relative; }
#footer ul,
#footer li { margin: 0px; padding: 0px; }
#footerLinks { position: relative; }
#links { list-style: none; display: inline; width: auto; }
#links li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }
#links li > a { display: block; width: 150px; text-decoration: none; color: brown; text-align: center; font-weight: bold; }
#shared { position: absolute; top: 0px; right: 75px; /* your margin from the right */ list-style: none; color: #fff;}
#shared li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }
#shared img { border: 0px; width: 24px; height: 24px; vertical-align: middle; }
I threw in some extras for you:
Border 0 on your social media images. Some browsers will show a giant blue border when images are inside links
Made your footer links block, so that they are more accessible, rather than only taking up the text area
In my jsfiddle, I put a width on the body, and a color, only to demonstrate the padding on the right of your social media links.
To solve both issues, you can make the shared div absolutely positioned.
<div id="additional-links">
<div id="shared">
<span style="color: #fff;">|</span>
<img src="fl.jpg" alt="facebook">
<img src="tl.jpg" alt="twitter">
<img src="tml.png" alt="tumblr">
<span style="color: #fff;">|</span>
</div>
<ul class="nobullet">
<li>Intro</li>
<li>Hiring</li>
<li>Collab</li>
<li>Credits</li>
</ul>
</div>
You can adjust how far from the right the shared links are by changing the 150px setting below.
#additional-links {
position: relative;
}
#shared {
position: absolute;
right: 150px;
}
Hope that helps.
I have thumbnails of images on my site. This is how it looks:
Let's consider the second row. There are two images( always two images in row) and I want to make that the second picture was aligned to the right.
How can I do this?
This is example what I want:
This is the html code:
<div class="navigation_container">
<div id="dpthumbs0" class="navigation">
<ul style="opacity: 1;" class="thumbs">
<li class="selected" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#1">
<img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=571437e8-ecfc-46f4-a14f-a645428fae46-pic_172.jpg">
</a></li>
<li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#2">
<img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=5ef5e802-916a-4ede-af11-c90274c63218-pic_176.jpg">
</a></li>
<li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#3">
<img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=fa6f5671-b9f6-48e6-a822-cea83424643c-pic_178.jpg">
</a></li>
<li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#4">
<img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=10b628ed-387e-43b5-908b-80b92efb7d2b-pic_180.jpg">
</a></li>
</ul>
<!-- .thumbs-->
</div>
<!-- .navigation-->
</div>
This is all css:
.navigation_container {
float: right;
margin: 15px 0;
padding: 30px 0;
position: relative;
}
.navigation {
height: 275px;
overflow: hidden;
width: 175px;
}
.slider .thumbs {
width: 175px;
}
.thumbs li {
float: left;
padding: 4px 0 4px 8px;
}
.thumbs li img {
border: 1px solid #424D55;
height: 58px;
max-width: 79px;
}
Thanks.
You have to create two classes & define like that:
CSS
.left{
float:left;
clear:left;
}
.right{
float:right;
clear:right;
}
HTML
<li class="left"></li>
<li class="right"></li>
<li class="left"></li>
<li class="right"></li>
Add this to your CSS code
.thumbs li.alt {
float: right;
padding: 4px 8px 4px 0px;
}
Add class .alt to every 2nd li, use your template engine's for loop or something similar :). This way in the future if you decide to turn off the right alignment, you just have to modify 1 css class.
<li class="">...</li>
<li class="alt">...</li>
neither of these css rules change the html embedded picture alignment to fall to right side inside
<ul>
tags...