moogie Posted November 16, 2006 Posted November 16, 2006 Take a look here. Notice how the text is too close to the photo? Is there a way to fix that? This is the HTML that I used for the picture: <a href=" title="Furry Friends"><img src="http://static.flickr.com/116/295761517_43973e45ee.jpg?v=0" alt="Peep" width="93" height="100" border=3" style="float:left"/></a> Is there a way to space it out so it's not so crowded? I'm obviously missing something. The pictures that a place on the right don't have the same problem. Thanks. Quote
TCH-Don Posted November 16, 2006 Posted November 16, 2006 One way is to vspace and hspace <img src="photo.jpg" width="300" height="225" border="1" align="left" hspace="10px" vspace="10px" alt="photo" /> Or use a style class with padding <style type="text/css"> <!-- .photo { padding: 10px; border: medium solid black; } --> </style> <img src="photo.jpg" class="photo" width="300" height="225" border="1" align="left" alt="photo" /> Quote
moogie Posted November 17, 2006 Author Posted November 17, 2006 Well, I changed it to this: <img src="http://static.flickr.com/116/295761517_43973e45ee.jpg?v=0" width="93" height="100" border="1" align="left" hspace="10px" vspace="10px" alt="Peep"/> But I still have the same problem. I guess I need to try the other way? (gulp) Quote
TCH-Bruce Posted November 17, 2006 Posted November 17, 2006 hspace and vspace are IE tags. CSS is the way to go. Quote
moogie Posted November 17, 2006 Author Posted November 17, 2006 hspace and vspace are IE tags. CSS is the way to go. I'm using Maxthon. I was afraid you were going to say CSS. Ok then, I'll give it a shot tomorrow and see if I can do it. Quote
TCH-Don Posted November 17, 2006 Posted November 17, 2006 Try this <style type="text/css"> <!-- .photo { /* margin is top right bottom left */ margin: 0px 10px 0px 10px; border: 4px solid black; } --> </style> </head> <p> <img src="photo.jpg" class="photo" width="150" height="120" border="1" alt="photo" align="left" /> This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space.This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space.</p> Quote
TCH-Don Posted November 17, 2006 Posted November 17, 2006 Or create a style for left and right <style type="text/css"> <!-- .content{ width: 450px; text-align: left; border: medium solid navy; padding: 10px; } .photo_left { margin-right: 10px; border: 4px solid black; float: left; }.photo_right { margin-left: 10px; border: 4px solid black; float: right; } --> </style> </head> <body> <div class="content"> <p> <img src="photo01.jpg" class="photo_left" width="150" height="120" border="1" alt="photo" /> This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space.</p> <p><img src="photo02.jpg" class="photo_right" width="150" height="120" border="1" alt="photo" /> This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. This is some text just to fill the space. </p> </div> Quote
Deverill Posted November 17, 2006 Posted November 17, 2006 If you do it with CSS remember to take out the vspace/hspace parts so you don't end up with some weird doubling of space or anything. In Firefox, the top pic is fine but the 3rd pic has text crashing into it and the only obvious diff is the vspace/hspace so I wonder if FF is processing those tags now? I have v2.0 by the way. Quote
moogie Posted November 17, 2006 Author Posted November 17, 2006 If you do it with CSS remember to take out the vspace/hspace parts so you don't end up with some weird doubling of space or anything. In Firefox, the top pic is fine but the 3rd pic has text crashing into it and the only obvious diff is the vspace/hspace so I wonder if FF is processing those tags now? I have v2.0 by the way. I only changed the top picture but not the others. I was just testing things out. My main problem is to try to figure out where to put the CSS and in which template. Quote
PeterPeter Posted November 17, 2006 Posted November 17, 2006 moogie The answer is in this post towards the bottom http://www.totalchoicehosting.com/forums/i...?showtopic=5451 Quote
carbonize Posted November 19, 2006 Posted November 19, 2006 (edited) Try changing <a href=" ' target='_blank' rel='noopener'> title="Furry Friends"><img src="http://static.flickr.com/116/295761517_43973e45ee.jpg?v=0"'>http://static.flickr.com/116/295761517_43973e45ee.jpg?v=0" alt="Peep" width="93" height="100" border=3" style="float:left"/></a> to <a href="http://flickr.com/photos/27934894@N00/295761517/" title="Furry Friends"><img src="http://static.flickr.com/116/295761517_43973e45ee.jpg?v=0" alt="Peep" width="93" height="100" border=3" style="float:left; margin:3px;"/></a> As you see I just put the CSS into the tag with your other CSS. BTW thats one fat hamster. Edited November 19, 2006 by carbonize Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.