PDA

Click to See Complete Forum and Search --> : help center text in marquee

lehula
06-07-2007, 08:38 PM
Can anyone figure out how to center the text above the pictures. I've tried using divs and tables, but it messes up my marquee height, by stacking the pictures on top of each other. Oh, and I can't use javascript. thanks in advance.



<html
<head>
</head>

<body>

<div id="marqueediv" style="position:absolute; left:850; top:250">
<marquee id="marquee" behavior="scroll" height="100" width="300" scrollamount="3" direction="left" style="cursor:move">

<a>Picture 1<img id="pic1" src="http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG"></a>
<a>Picture 2<img id="pic1" src="http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG"></a>
<a>Picture 3<img id="pic1" src="http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG"></a>
<a>Picture 4<img id="pic1" src="http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG"></a>
<a>Picture 5<img id="pic1" src="http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG"></a>

</marquee></div>
</body>
</html>
Centauri
06-07-2007, 11:03 PM
How about <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
#marqueediv {
position: absolute;
left: 850px;
top: 250px;
height: 200px;
width: 300px;
overflow: hidden;
}
#marqueediv div {
width: 1100px;
height: 200px;
}
#marqueediv a {
display: inline;
width: 218px;
height: 200px;
text-align: center;
background-position: center bottom;
background-repeat: no-repeat;
float: left;
}
.marquee1 {
background-image: url(http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG);
}
.marquee2 {
background-image: url(http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG);
}
.marquee3 {
background-image: url(http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG);
}
.marquee4 {
background-image: url(http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG);
}
.marquee5 {
background-image: url(http://www.miniatureartprints.com/images/The_Apple_Orchard-RET-1TMF1.JPG);
}
-->
</style>
</head>

<body>
<div id="marqueediv">
<marquee behavior="scroll" scrollamount="3" direction="left" style="cursor:move">
<div>
<a class="marquee1">Picture 1</a>
<a class="marquee2">Picture 2</a>
<a class="marquee3">Picture 3</a>
<a class="marquee4">Picture 4</a>
<a class="marquee5">Picture 5</a>
</div>
</marquee>
</div>
</body>
</html>


This styles each <a> as a block with the graphics applied as backgrounds, and floats them to sit them side by side. Due to IE6's sillyness, another div was required around the <a>s to stop them wrapping.