Image next to li row images - html

Question

So, this might sound basic for some of you guys. But i just haven't been able to figure it out.
So i have this CSS and this HTML Code:
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
position: absolute;
left:0;
right:0;
}
.ppt img {
margin-left: 5px;
}
</style>
<center>
<ul class="ppt">
<li>
<img src="#">
<img src="#">
</li>
</ul>
With this code i will have 2 pictures next to each other in the center.
Now i would like to add 2 more pictures, those 2 just can't be in "lo" nor "li". But the pictures will have to be on the same row, one of them will be at the start and the other one will be at the end, how can i do this?
(Click here for a picture explanation)
Thanks in advance.

Answer 1

Check http://jsfiddle.net/AvqEB/1/
ul.ppt {
position: relative;
list-style:none;
display:inline-block;
padding:0;
margin:0
}
.outerimg { display:inline-block; margin-left: 5px;}
.ppt li {
display:inline-block;
}
.ppt img {
margin-left: 5px;
}
and html
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
<ul class="ppt">
<li>
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
</li>
</ul>
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />

Answer 2

You can do this by floating things to the left. Here is a jsfiddle demo: http://jsfiddle.net/6L7x9/1/
On an aside, I find using DIV with a centered class far preferable to using the CENTER tag.
<style type="text/css">
ul.ppt {
position: relative;
padding:0px;
margin:0px;
}
.ppt li {
padding:0px;
margin:0px 5px;
list-style-type: none;
float: left;
}
.leftfloat { float: left; }
.inlineimage {
margin:0px 0px 0px 5px;
border:0px;
}
</style>
<center>
<img src="#" class="leftfloat inlineimage" />
<ul class="ppt leftfloat">
<li>
<img src="#" class="inlineimage">
<img src="#" class="inlineimage">
</li>
</ul>
<img src="#" class="leftfloat inlineimage" />
One does wonder why the bounding images must be outside the UL...
UPDATE POST OP COMMENT
Ok, I've taken your sample, dropped it into JSFiddle, and modified it so that back & forward are on either side of the "slideshow" image (http://jsfiddle.net/SFvGk/). One immediate issue is the varying width of the slideshow frame, which causes the "next" button to jump around. You could mitigate that by setting a fixed with for the UL, and then accepting empty space when narrower images are displayed.
Modifications:
Add class "payitforward" to the next/prev buttons.
Add style "display:inline-block" to UL and set margin/padding to 0 for UL and LI.
Add to top of script:
var $slideContainer = $("ul.ppt");
$slideContainer.width(cur.width())
Add to end of "forward" function:
$slideContainer.width(cur.width())
Comments:
You might look into events on the fadeIn/fadeOut functions to possibly smooth out movement of the "Next" button on the right, or just fix the width of the slideshow container so the "Next" button never moves.
Definitely look into requestAnimationFrame to replace "setInterval". Here is one resource: http://creativejs.com/resources/requestanimationframe/.

Answer 3

Use :after and :before.
li{height:20px; width:20px; margin:10px; background:red; display:inline-block; position:relative;}
li:before, li:after{content:" "; position:absolute; height:20px; width:20px;}
li:last-child:after{background:blue; right:-25px;}
li:first-child:before{left:-25px; background:green;}
Fiddle here.