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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Unhappy Position text under image

    Now I am sure this is really simple and I have googled it and looked on here but still can't find the answer.

    Simply I have some thumbnail images and I want the corresponding text to sit underneath.

    Found some solutions but people seem to mostly suggest tables, which I obviously don't want to do. Other solution is below.

    HTML
    Code:
      <div id="main">
          <div id="top" class="top"><p>Here are some of the projects we have completed at Noiz Electronics.<br/>
          To view project descriptions and images click on the links below.</p>
          </div>
          
          <div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg"  height="150" width="150" alt="Stockley Acedemy"  class="imgfloatleft"/></a></div>
          <div class="imgtext">Stockley Academy</div>
          </div>
    CSS
    Code:
    #top {
    	position:relative;
    	width:900px;
    	height:auto;
    	padding:5px;
    	float:left;
    	margin:10px 40px auto 40px;
    	text-align:center;
    }
    
    #main {
    	position:relative;
    	width:900px;
    	height:auto;
    	padding:5px;
    	float:left;
    	margin:10px 40px auto 40px;
    }
    
    .top {
    	font-size:18px;
    }
    
    .thumb {
    	height:150px;
    	width:150px;
    	float:left;
    }
    
    .imgtext { 
      float:left;
      position:relative;
    }
    But the text sits to the right of the image.

    GAHHHH!!!

    Thanks in advance for help.

    C
    Last edited by claire_t; 06-06-2012 at 06:14 PM.
    Hmmmm......scratchy head time......

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    1. move your text (div id top) below the images html
    2. take out the position relatives.
    3. put a clear:left on the div id top, which works with the float.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>PI Map</title>
    
    <style>
    #main {
    	width:900px;
    	height:auto;
    	padding:5px;
    	float:left;
    	margin:10px 40px auto 40px;
    }
    #top {
    	float:left;
    	width:900px;
    	height:auto;
    	padding:5px;
    	clear:left;
    	font-size:18px;
    }
    .thumb {
    	height:150px;
    	width:150px;
    	float:left;
    }
    
    .imgtext { 
      float:left;
    }
    
    </style>
    </head>
    <body>
    <div id="main">
          
          <div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg"  height="150" width="150" alt="Stockley Acedemy"  class="imgfloatleft"/></a></div>
          <div class="imgtext">Stockley Academy</div>
    	  
    	  <div id="top"><p>Here are some of the projects we have completed at Noiz Electronics.<br/>
          To view project descriptions and images click on the links below.</p>
          </div>
          
    </div>
    	  
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    Hi SeattleMicah

    Thanks for your reply.

    Its actually the text "Stockley Academy" that I need under the image. I am planning to have a row of thumbnail images all with the titles underneath.

    Your example worked in moving the main bulk of font underneath but thats ok where it is.

    Any ideas?

    Thanks again for help so far.

    C
    Hmmmm......scratchy head time......

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Ah ok sorry...well same thing

    Code:
    .imgtext { 
      float:left;
      clear:left;
    
    }
    Remove that position relative, and use the clear

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    I have actually solved it by putting the imgtext div within the thumb div.

    But will try your way to SeattleMicah.

    Thanks again.....see I knew it would be simple ha!

    C

    edit: Yep that works too....ta muchly!
    Hmmmm......scratchy head time......

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    good call!

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>PI Map</title>
    
    <style>
    #top {
    	width:900px;
    	height:auto;
    	padding:5px;
    	float:left;
    	margin:10px 40px auto 40px;
    	text-align:center;
    }
    
    #main {
    	width:900px;
    	height:auto;
    	padding:5px;
    	float:left;
    	margin:10px 40px auto 40px;
    }
    
    .top {
    	font-size:18px;
    }
    
    .thumb {
    	height:150px;
    	width:150px;
    	float:left;
    
    }
    
    .imgtext { 
      float:left;
      clear:left;
    }
    </style>
    </head>
    <body>
      <div id="main">
          <div id="top" class="top"><p>Here are some of the projects we have completed at Noiz Electronics.<br/>
          To view project descriptions and images click on the links below.</p>
          </div>
          
         <div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg"  height="150" width="150" alt="Stockley Acedemy"  class="imgfloatleft"/></a><div class="imgtext">Stockley Academy</div></div>
          
         <div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg"  height="150" width="150" alt="Stockley Acedemy"  class="imgfloatleft"/></a><div class="imgtext">Stockley Academy</div></div>
    
         <div class="thumb"><a href="stockley.html"><img src="images/completed/stockley.jpg"  height="150" width="150" alt="Stockley Acedemy"  class="imgfloatleft"/></a><div class="imgtext">Stockley Academy</div></div>
    
    
          
    </div>
    	  
    </body>


  •  

    Posting Permissions

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