PDA

View Full Version : Need some simple help with HTML/CSS.




definitive
Sep 7, 2010, 12:44 PM
I'm trying to install JQuery Cycle plugin ( http://jquery.malsup.com/cycle/ ), and add text to the left of each photo. Here's the code I have so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div class="box">
<div class="slideshow">
<img src="images/photo_01.jpg" width="500" height="300" />
<img src="images/photo_02.jpg" width="500" height="300" />
<img src="images/photo_03.jpg" width="500" height="300" />
<img src="images/photo_04.jpg" width="500" height="300" />
</div>
</div>
</body>
</html>


and for css"


body {
background-color: #000;
}

img {
border-style: none;
}

.box {
width: 940px;
height:100%;
overflow:hidden;
position: relative;
margin: 0 auto;
}

.slideshow {
height: 300px;
width: 500px;
margin: auto;
float: right;
}

.slideshow img {
padding: 0px;
border: 1px solid #ccc;
}


I've left some of the code out, but basically this should give you an idea of what I have right now for the slideshow. At this point I'm stuck. I'm trying to get a <h1> to go on the left of the image, and <p> right under it. The <h1> would have a link, while the paragraph under it wouldn't. Each time the page fades, the text in <h1> and <p> would change accordingly to photo's content, and would also have a link in the heading. I've tried inserting the code around img tag, but it ends up coming up on top instead of left. Anyone have any suggestions?



manueld
Sep 7, 2010, 05:58 PM
If you're trying to place content inside the slideshow div (the h1 and p) your width needs to be wider than 500px as your image is already 500px hence why you're getting overlap. Increasing the size of your slideshow div should do the trick.