/    Sign up×
Community /Pin to ProfileBookmark

help center text in marquee

Copy linkTweet thisAlerts:
Jun 08.2007

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>

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 08.2007 — How about [CODE]<!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>
[/CODE]

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.
×

Success!

Help @lehula spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...