Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS text below images

    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.

    Code:
    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:

    Code:
     <!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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello dymockpoet,
    Instead of creating space with br, use a margin on one or both of the elements you want the space between.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •