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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Aligning text with image problem

    I am having a problem trying to display thumbnails with descriptions to the righthand side. I want both image and description to be a link and I want a bit of space between the image and text.

    This is my relevant code within box:-
    this part ok working ok
    <div class="rboxscr"><br/>
    <h1 align="center">Energy Saving Products</h1><br/>
    <p class="linkbarsml">
    <a href="energyproducts.html"><span class="links"> Products </span></a><img src="i/redline-sep.bmp" width="2" height="15">
    <a href="energytips.html"><span class="links"> Tips </span></a><img src="i/redline-sep.bmp" width="2" height="15">
    <a href="energyfaqs.html"><span class="links"> FAQs </a></span>
    </p><br/>
    This is the problem bit
    <a href="e2.html"><img src="i/tb/energy/e2tb.jpg" alt="E2 wireless electricity monitor" title="E2 wireless electricity monitor" align="absmiddle" width="100" height="100" hspace="10" border="0"/><span class="inverse-text">E2 Wireless Electricity Monitor with USB connection</span></a><br clear="all"/><br/>
    Same code for next thumbnail, etc.
    relevant css:-
    .rboxscr
    {
    background-image: url(i/bg/box2ab.jpg);
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
    border-width: 0px;
    border-style: solid;
    border-color: yellow;
    left: 65%;
    width: 270px;
    position:absolute;
    display:block;
    top:170px;
    bottom:0;
    height:auto;
    overflow-x: hidden;
    overflow-y: scroll;
    }
    .inverse-text
    {
    font-size: 13px;
    font-family: EurostileLTStd;
    font-weight: normal;
    text-decoration:none;
    color:#ffe4af;
    }


    What is happening is that the image appears correctly. The text aligns ok in the middle until it needs to wrap because of box size limit. It doesn't go to next line, it jumps down under the image aligned with the lefthand side of image. Also the hspace is having no effect.

    If I use "align="left" all text is correctly wrapped to the right of the image but is at the top, but if I try align="top, middle or bottom" it doesn't work. They all position correctly (i.e. top middle or bottom) but only first line, the rest drops below the image in every case. I have tried moving the span to just around text and also around text and image. I have tried not including the text as link. All to no avail

    I have tried all combinations of <br clear> and no br clear.

    Also the hspace is having no effect in any combination with any of the above.

    Any help appreciated
    Last edited by carbilldyer; 05-05-2010 at 11:38 AM. Reason: refine problem -

  • #2
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    Can't you put the thumbnail and links inside a table and relevant cells?

    Code:
    <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="table1">
    <tr>
    <td><a href="e2.html"><img src="i/tb/energy/e2tb.jpg" alt="E2 wireless electricity monitor" title="E2 wireless electricity monitor" align="absmiddle" width="100" height="100" hspace="10" border="0"/></a></td>
    <td>&nbsp;</td>
    <td><a href="e2.html"><span class="inverse-text">E2 Wireless Electricity Monitor with USB connection</span></a></td>
    </tr>
    </table>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi yes I can do that - in fact I had it like that, but having read from somebody else that purists now frown upon tables, I removed it. Having learned how to do it without tables, I find it galling that I can't get it to work. As a last resort I will re-implement the table, but it doesn't answer my question about why my code is not working as it should.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello carbilldyer,
    Good for you for avoiding tables!
    Tables have there uses but page layout is NOT one of them. See the link in my sig about tables if you're interested.

    Here's a quick sample of doing it with divs -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	background: #FC6;
    }
    #container {
    	width: 760px;
    	margin: 30px auto;
    	padding: 20px;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    .thumb {
    	width: 430px;
    	margin: 10px 0;
    	padding: 10px;
    	background: #666666;
    	overflow: auto;
    }
    	.thumb img {border: 0;}
    		.one {
    			float: left;
    			margin: 0 10px 0 0;
    		}
    		.two {
    			float: right;
    			margin: 0 0 0 10px;
    		}
    </style>
    </head>
    <body>
        <div id="container">
            <div class="thumb">
            	<a href="#">
                    <img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" class="one" />
                    Some text to go alongside the image
                </a>
        	<!--end .thumb--></div>
            <div class="thumb">
            	<a href="#">
                    <img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" class="two" />
                    Some text to go alongside the image
                </a>
        	<!--end .thumb--></div>
        <!--end container--></div>
    </body>
    </html>
    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

  • #5
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've had a look at your code and am happy with most of it. The one last bit I need to know is how to align the text to the middle of the image. If you wouldn't mind adding this to your example, I'd be grateful.
    Thanks

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by carbilldyer View Post
    I've had a look at your code and am happy with most of it. The one last bit I need to know is how to align the text to the middle of the image. If you wouldn't mind adding this to your example, I'd be grateful.
    Thanks
    Add .thumb a {line-height: 136px;} to that CSS. Will work for images 136px high.
    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

  • #7
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the help Excavator


  •  

    Posting Permissions

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