...

View Full Version : CSS text below images



dymockpoet
11-25-2012, 11:02 AM
Hi

I am trying to do something that I think is simple, but I don't know quite enough CSS to do it.

Here's my stylesheet.



body {
background-image: url(totback0.jpg);
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
//text-align: center;
}

.wrap {
//text-align: left;
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;

}


h1 {
margin:0px;
text-align: center;
font-size: 37px;
color: white;
background-color: red;
border-radius: 10px;
}


h2 {
text-align: center;
font-size: 30px;
color: red;
margin: 15 0 0 0;

}

.top {
font-weight: bolder;
color: black;
}


span {
font-weight: bolder;
color: red;
}

.guarantee {
text-align: center;
font-weight: bolder;
font-size: 18px;
color: red;
}

.guarantee p {
text-align: center;
}


.button img {
text-align: center;
display: block;
margin: auto;
margin-top: 25px;
margin-bottom: 25px;



}

.copy {
width: 870px;
float: right;
padding-right: 20px;

}


.imgleft {
float: left;
width: 120px;
}

.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;

}


.disc {
color: red;
}



And my page:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>


<meta charset="utf-8">
<link rel="stylesheet" href="style000.css">

<title>Tonight</title>

</head>
<body>

<div class="wrap">

<div style="width:175px;""position:relative;float:left;top:5px;">
<a href="http://hj523uio.com/?a=7337&c=6380&s1="><img src="30000000_1.jpg" style="position:absolute"
width="175"></a></div>




<div class="copy">
<h1>Meet a New Buddy this Week!</h1>
<center>
<p><font size="+2" face="arial"><b>There Are Currently
<font color="red"> 493
</font> Folks From
<script type="text/javascript" language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_city());</script>

<br/>
Looking For Friends To Go Out Tonight!</b></font></p>
</center>
<div class="disclaimer">
<b>Disclaimer:</b> Please be careful when meeting people you don't know.
</div>
<p><span class="top">We have over 500,000 people on our database who are looking for fellow movie goers.</span></p>
<div class="disclaimer">
</div>
<h2>Rules:</h2>
<p><span>1. See someone you know?</span> Great!</p>
<p><span>2. Respect people's privacy</span></p>

<p><span>3. Have fun!</span></p>
<p><span class="top">Registration is currently OPEN and <strike>$28 per month</strike> **FREE** for a limited time only!
So we advise you to register now, while you still can. Don't miss out!</span></p>

<p><center><span>If you agree to the above rules, click the "I Agree" button below and register for FREE.</span></center></p>
<div class="button">
<a href="http://hj523uio.com/?a=7337&c=6380&s1="><img src="iagree00.png" alt="" border="0"></a>
</div>


<span class="guarantee">
<p>"You WILL Meet have Fun. Guaranteed!"</p>

<span><br><center><iframe src="http://www.facebook.com/plugins/like.php?href=http://facebook.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:40px"></iframe></center></span>

</div>

<br><br>
<br> <br>


<br><br><br><br><br><br><br></br>







<span style="font-weight: bolder;font-size: 12px;"></br><br><br>
<font color="green"> 123duck </font> <a href="http://hj523uio.com/?a=7337&c=6380&s1="><img src="online01.gif" alt="" border="0" style="float:center"></a><br>


Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name()); </script></span>
</script>







<br><br>

<div class="imgleft">
<a href="http://hj523uio.com/?a=7337&c=6380&s1="><img src="image2.jpg" alt="" border="0"></a></div>





<br><br><br><br><br><br><br><br><br><br><br>

<span style="font-weight: bolder;font-size: 12px;"></br><br><br> </br>
<font color="green"> LetsGo69 </font> <a href="http://hj523uio.com/? a=7337&c=6380&s1="><img src="online01.gif" alt="" border="0" style="float:center"></a><br>

Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name()); </script></span>
</script></br>


<br><br>


<div class="imgleft">
<a href="http://hj523uio.com/?a=7337&c=6380&s1="><img src="image3.jpg" alt="" border="0"></a></div>



<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> vperson2012 </font> <a href="http://hj523uio.com/?a=7337&c=6380&s1="><img src="online01.gif" alt="" border="0" style="float:center"></a><br>

Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name()); </script></span>
</script></br>


As you can see, I currently use <br> tags to control the location of the stuff under the images, but that's clumsy. There must be a better way of doing it. Can anyone help?

Excavator
11-25-2012, 03:52 PM
Hello dymockpoet,
Instead of creating space with br, use a margin on one or both of the elements you want the space between.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum