...

View Full Version : Having Trouble Moving Text With DIV Class



Technique
10-24-2006, 12:58 AM
Basically, here's the coding I'm working with. I'm trying to move the "Halo 2 Tournament Underway" heading up so that it is parallel with the top of the image. I tried using margins to move the text up, but nothing works.



<html>
<head>
<style type="text/css">
#tournament_spotlight img {border: 1px solid #828282;}
.spotlight_content {
/* What do I need to add here? */
}
a.spotlight_link:link, a.spotlight_link:visited {
color: #698943;
font: 8pt verdana;
font-weight: bold;
text-decoration: none
}
a.spotlight_link:hover, a.spotlight_link:active {
color: #B96521;
font: 8pt verdana;
font-weight: bold;
text-decoration: none
}
</style>
</head>

<body>

<div id="tournament_spotlight">
<div class="spotlight_content"><a href="http://www.google.com" title="Halo 2"><img src="http://img244.imageshack.us/img244/3176/spotlightvv1.jpg "width="109" height="92" hspace="10" vspace="10"/></a>
<a class="spotlight_link" href="http://www.google.com" title="Halo 2 Tournament Underway">Halo 2 Tournament Underway</a>
</div>
</div>

</body>

</html>

harbingerOTV
10-24-2006, 01:08 AM
<html>
<head>
<style type="text/css">
#tournament_spotlight img {border: 1px solid #828282;}
.spotlight_content {
border: 1px solid #000;
}
.spotlight_content a {
/* What do I need to add here? */
float: left;
padding: 10px;
}
a.spotlight_link:link, a.spotlight_link:visited {
color: #698943;
font: 8pt verdana;
font-weight: bold;
text-decoration: none
}
a.spotlight_link:hover, a.spotlight_link:active {
color: #B96521;
font: 8pt verdana;
font-weight: bold;
text-decoration: none
}
</style>
</head>

<body>

<div id="tournament_spotlight">
<div class="spotlight_content"><a href="http://www.google.com" title="Halo 2"><img

src="http://img244.imageshack.us/img244/3176/spotlightvv1.jpg "width="109" height="92" /></a>
<a class="spotlight_link" href="http://www.google.com" title="Halo 2 Tournament Underway">Halo 2

Tournament Underway</a>
<div style="clear:left;"></div>
</div>
</div>

</body>

</html>


try that out. A little sloppy but you can clean it up easy enough.

basically you need to float your links. Since your floating you need something to clear the floats to make sure your containing div expands to hold them. I took off your hspace and vspace and replaced it with padding of 10px so that th elink without and image and the link with and image are what your essentially giving the h&vspace thus allowing them to sit flush at the top.

Shoot2Kill
10-24-2006, 01:10 AM
You could try putting it in a table...



<body>

<div id="tournament_spotlight">
<div class="spotlight_content">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.google.com" title="Halo 2">
<img src="http://img244.imageshack.us/img244/3176/spotlightvv1.jpg" valign="top" "width="109" height="92" hspace="10">
</a>
</td>
<td valign="top">
<a class="spotlight_link" href="http://www.google.com" title="Halo 2 Tournament Underway">Halo 2 Tournament Underway</a>
</td>
</tr>
</table>

</div>
</div>

</body>

Technique
10-24-2006, 01:23 AM
Are tables the best solution here? I've heard they have their uses still, but I don't know what they are.

Shoot2Kill
10-24-2006, 01:25 AM
well, it worked....

Technique
10-24-2006, 03:13 AM
HarbingerOTV, is there a way of doing that without the padding, because it is preventing me from adding text directly under the heading. Also the links are activated 10px around the image and heading without me being directly over them.

Basically what I'm asking is if there is a way to apply the link to only the image and heading and not the padding around it while still keeping them in place where they are now.

harbingerOTV
10-24-2006, 12:56 PM
.spotlight_content a {
float: left;
margin: 10px;
display: inline;
}


try that. same spacing but using margin. Sorry didnt even think about the clickable area enlarging. display inline added to keep IE from doubling the margin on floats.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum