html - Placing & Positioning images using CSS? -
This question was completely edited, not sure it was already understood.
Well, I'm having trouble positioning some images on a website. I'm using the slidedeck jQuery slideshow, and in the third slide I want a portfolio of work, so that just display 6 images (2 lines of 3). Slide is set in index.html in this manner;
& lt; Div id = "slidedeck_frame" class = "skin-voyager" & gt; & Lt; Dl class = "slidedeck" & gt; & Lt; Dt & gt; About the US & lt; / Dt & gt; & Lt; Dd & gt; About Company & lt; / Dd> & Lt; Dt & gt; Our Services & lt; / Dt & gt; & Lt; Dd & gt; Company services here & lt; / Dd> & Lt; DT & gt; Portfolio & lt; / Dt & gt; & Lt; Dd & gt; Completed work image here & lt; / Dd> & Lt; Dt & gt; Contact us & lt; / Dt & gt; & Lt; Dd & gt; Contact form here & lt; / Dd> & Lt; / DL & gt; & Lt; / Div & gt; Each of these slides is formatted with the following tags in the CSS sheet;
.slidedeck dd.slide_1 In the third slide, to be able to show the lines of images to give me space to use CSS needed. I have tried many things but it can not be found correct. I have tried in index.html;
& lt; Dt & gt; Portfolio & lt; / Dt & gt; & Lt; Dd & gt; & Lt; Img src = "picture / myImage1.png" width = "130" height = "130" /> & Lt; / Dd> But it clearly displays only one picture, in which there is no qualification to format it.
I have also tried;
& lt; DT & gt; Portfolio & lt; / Dt & gt; & Lt; Dd & gt; & Lt; Div & gt; & Lt; Img id = "image1" src = "image / myImage1.png" width = "130" height = "130" & gt; & Lt; / Div & gt; & Lt; / Dd> And then using the following CSS in position;
img # image1 {condition: relative; Top: 20px; Left: 10px; Z-index: 5; }
But the image is not visible at all.
Any suggestions?
You're styling from dd.slide_1 , but gt; None of the elements has been applied to that class. Edit Looking at this HTML:
& lt; Dl class = "slidedeck" & gt; & Lt; DT & gt; Portfolio & lt; / Dt & gt; & Lt; Dd & gt; & Lt; Img src = "picture / myImage1.png" width = "130" height = "130" /> & Lt; Img src = "image / myImage2.png" width = "130" height = "130" /> & Lt; Img src = "image / myImage3.png" width = "130" height = "130" /> & Lt; Img src = "picture / myImage4.png" width = "130" height = "130" /> & Lt; Img src = "picture / myImage5.png" width = "130" height = "130" /> & Lt; Img src = "picture / myImage6.png" width = "130" height = "130" /> & Lt; / Dd> You should be able to style your images like this
.slidedeck dd img {/ * whatever style you want to add to it Give /}> if it follows your style values ! Important If it works, check that CSS (probably from jQuery plugin) is interfering with your style ! Do not try to leave important if you can help it. Therefore, for 2 rows of 3 images you will need this CSS
. Slidedeck DD {width: 390px; / * 3x your image width * / overflow: hidden; / * To include floats * /} .slidedeck dd img {float: left; Display area; }
Comments
Post a Comment