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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Arad Israel
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning text using CSS

    I'm new to CSS, which will quickly become apparent ;-)

    This is the code I have right now, but the text, "click on the image .. ", should be under the image, and I'll also need a little space under that text.

    So how to do it?

    Thanks,

    Michael

    <!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">
    <link href="http://misconceptions.us/css/styles.css" rel="stylesheet" type="text/css">
    <title>Thomas Crapper</title></head>
    <body>
    <a href="http://misconceptions.us/images/crapper.jpg" target="_blank"><img src="http://misconceptions.us/images/small-crapper.jpg" alt="Did Thomas Crapper invent the flush toilet?" width="230" height="300" align="right" class=" " style="margin: 8px;" title="Thomas Crapper Toilet"></a>
    <p>&nbsp;</p><p class="textonrightbold">Click on image to see larger version</p><p class="medsizetext">It's said that Thomas Crapper invented the flush toilet, but I imagine it has to be an urban legend as the whole idea just sounds to pat. </p>
    <p class="medsizetext"> So did Crapper invent flush toilets and if he didn't then who did? </p>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <div id="mydiv">
    <img src="" width="100px">
    <BR>
    my text
    </div>
    CSS: #mydiv{text-allign: center;}

    or:
    Code:
    <center><img><BR>my text</center>

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,638
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    No, not “or”. The <center> element is not valid HTML.

    redbourn, you need to do:
    Code:
    .textonrightbold {
      text-align: center;
      margin-bottom: ??px;
    }

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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">
    <link href="http://misconceptions.us/css/styles.css" rel="stylesheet" type="text/css">
    <title>Thomas Crapper</title>
    <style type="text/css">
    #image {
    	float: right;
    	width: 35%;
    }
    #caption {
    	text-align:right;
    	clear: both;
    }
    #mainText {
    	float: left;
    	width: 60%;
    }
    </style>
    </head>
    <body>
    <div id="mainText">
    	<p class="medsizetext">It's said that Thomas Crapper invented the flush toilet, but I imagine it has to be an urban legend as the whole idea just sounds to pat. </p>
    	<p class="medsizetext"> So did Crapper invent flush toilets and if he didn't then who did? </p>
    </div>
    <div id="image">
    	<a href="http://misconceptions.us/images/crapper.jpg" target="_blank">
    	<img src="http://misconceptions.us/images/small-crapper.jpg" 
    	alt="Did Thomas Crapper invent the flush toilet?" width="230" height="300" 
    	align="right" class=" " style="margin: 8px;" title="Thomas Crapper Toilet"></a>
    </div>
    <div id="caption">
    	<p>Click on image to see larger version</p>
    </div>
    </body>
    </html>
    This will do what you want.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    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
    •