Hi all, Just looking for a few pointers please. My knowledge is coming up short and all my trial and error is becoming very annoying. What I need is to be able to post a description of an image on the right of it, as centered as possible. The description may be a few lines long and narrow. I ideally would like this done through css and html as this is how the site is made. Below is the code I have so far. Where bold below on the html, is where i tried myself unsuccessfully. <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <div id='outer-wrapper'> <div id='header-wrapper'> </div> <div id='left-sidebar-wrapper'> <div align="center"> <a href="index1.html"><img src="images/home.jpg" alt="Home" / border="0"></a> </div> <div class="links"> <!--Begin Shopping Links--> <!--End Shopping Links--> </div> <div align="center"> <a href="aboutme1.html"><img src="images/aboutme.jpg" alt="About Me" / border="0"></a> </div> <div class="links"> <!--Begin Info Links--> <!--End Info Links--> </div> <div align="center"> <a href="haircombs1.html"><img src="images/haircombs.jpg" alt="Haircombs" / border="0"></a> </div> <div class="links"> <!--Begin Cart Link--> <!--End Cart Link--> </div> <div align="center"> <a href="headpieces1.html"><img src="images/headpieces.jpg" alt="Headpieces" / border="0"></a> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> <div align="center"> <a href="hairpinsandclips1.html"><img src="images/hairpinsandclips.jpg" alt="Hair Pins & Clips" / border="0"></a> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> <div align="center"> <a href="tiaras1.html"><img src="images/tiaras.jpg" alt="Tiaras" / border="0"></a> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> <div align="center"> <a href="staceysbrides1.html"><img src="images/staceysbrides.jpg" alt="Staceys Brides" / border="0"></a> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> <div align="center"> <a href="editorials1.html"><img src="images/editorials.jpg" alt="Editorials" / border="0"></a> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> <div align="center"> <img src="images/links.jpg" alt="Links" / border="0"> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> <div align="center"> <a href="contactme1.html"><img src="images/contactme.jpg" alt="Contact Me" / border="0"></a> </div> <div class="links"> <!--Begin Search Form--> <!--End Search Form--> </div> </div> <div class="outerpic"> <p> <img src="webpics/tn_sarahc.jpg"> test data<br/>test data</p> </div> <div id='main-wrapper'> <!--Begin Page Content--> </div> <br class='clear' /> CSS html, body { margin: 0px; padding: 0px; } body { background: url(images/bg.jpg) repeat top center; margin:0 auto; text-align: center; } img { display:block; } #header-wrapper { width:1000px; height:350px; background: url(images/header.jpg); margin:0 auto 0px; text-align:center; } #outer-wrapper { width: 1000px; background: #fcefce; margin:0 auto; padding:0px; text-align:left; } #main-wrapper { width: 750px; margin-right: 50px; float: right; word-wrap: break-word; overflow: hidden; } #left-sidebar-wrapper { width: 220px; float: left; word-wrap: break-word; overflow: hidden; text-align:left; margin:0 auto; } #mainphoto{ float: right; margin-right: 250px; } .outerpic{ float: right; margin-right: 350px; width: 530px; } p.text{ float: right; margin-right: 100px; width: 100x; } .links { padding-left: 10px; } #footer { width:1000px; height:116px; background: url(images/footer.jpg); clear:both; margin:0 auto; text-align:center; } #copy { line-height: 1.6em; letter-spacing:.1em; font-size:10px; margin-top:40px; text-align:center; font-size:xx-small } .clear { clear:both; } a:link {text-decoration:none; }
Hmm... Try this. Have a class set to: .middle {vertical-align: middle; } Code (markup): And setting your text to <img class="middle" alt="" src="" /> TEXT Code (markup):
unfortunatly that is no working. The text seems to be going underneath and left. Can I create a div within the main-wrapper and assign position/float within? It seems anythime i try and put anything within the main wrapper it does not begin until a good bit down the page.
have you tried setting padding/margin within the div?....just guessing here without really going thru the whole code or site
Try something like this (I didn't check you code, this is just something you could implement to do what you want. This is just a generic example): HTML <p><img src="image.png" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam ac orci lacinia porttitor. Quisque pretium imperdiet lacus non porttitor. Fusce accumsan varius nibh, sollicitudin scelerisque odio cursus et. Cras risus ante, elementum ac dictum id, rhoncus a dolor. Mauris at volutpat ipsum. Donec leo massa, dignissim eget sodales fermentum, condimentum ut lacus. Aliquam ut odio sapien. Nullam porta placerat dolor ac ultricies. Praesent ornare pharetra justo at lobortis. Aenean semper vehicula orci, sed molestie tellus luctus id. Proin tincidunt mi ac felis interdum bibendum.</p> Code (markup): And CSS: p img { float: left; padding: 5px; margin-top: -10px; /*you can manually adjust the margin so the image leaves the text vertically aligned to it*/ } Code (markup):