Placing & Positioning images using CSS? - html

Question

Edited this question entirely, not sure if it made sense previously.
Ok, I am having difficulty positioning some images on a website. I am using the slidedeck jQuery slideshow, and in the third slide I want a portfolio of work, so just to display 6 images (2 rows of 3).
In the index.html the slides are set up as follows;
<div id="slidedeck_frame" class="skin-voyager">
<dl class="slidedeck">
<dt>ABOUT US</dt>
<dd>About the company here</dd>
<dt>OUR SERVICES</dt>
<dd>Company services here</dd>
<dt>PORTFOLIO</dt>
<dd>Images of completed work here</dd>
<dt>Contact Us</dt>
<dd>Contact form here</dd>
</dl>
</div>
Each of these slides is formatted in the CSS sheet with the following tag;
.slidedeck dd.slide_1
In the third slide, I need to be able to simply show rows of images using the CSS to position them. I have tried a number of things but can't get it right. In the index.html I have tried;
<dt>PORTFOLIO</dt>
<dd><img src="images/myImage1.png" width="130" height="130" />
</dd>
But that obviously just display an image, with no ability to format it.
I have also tried;
<dt>PORTFOLIO</dt>
<dd>
<div>
<img id="image1" src="images/myImage1.png" width="130" height="130">
</div>
</dd>
and then using the following CSS to position;
img#image1 {
position: relative;
top: 20px;
left: 10px;
z-index: 5;
}
But the image just doesn't show up at all.
Any suggestions?

Answer 1

You are styling with dd.slide_1 but none of the <dd> elements have that class applied.
Edit
Given this html:
<dl class="slidedeck">
<dt>PORTFOLIO</dt>
<dd>
<img src="images/myImage1.png" width="130" height="130" />
<img src="images/myImage2.png" width="130" height="130" />
<img src="images/myImage3.png" width="130" height="130" />
<img src="images/myImage4.png" width="130" height="130" />
<img src="images/myImage5.png" width="130" height="130" />
<img src="images/myImage6.png" width="130" height="130" />
</dd>
You should be able to style your images like this
.slidedeck dd img {
/* add whatever styles you want */
}
If that isn't working try adding !important after your style values. If this works investigate what CSS (perhaps from jQuery plugins) is interfering with your styles. Try not to leave !important in if you can help it.
So for 2 rows of 3 images you would need this css
.slidedeck dd {
width: 390px; /* 3x your image width */
overflow: hidden; /* To contain floats */
}
.slidedeck dd img {
float: left;
display: block;
}