PDA

View Full Version : Having trouble aligning images with text


peps1
07-22-2012, 02:27 AM
Hey guys and girls.

Really new to DW and web design, so please be patient with me, and talk to me as if im a small child!

So.....I spliced up my layout in photoshop and have made a basic temple with a Div tage for content on each page.

http://i55.photobucket.com/albums/g146/icecreamterror/Screenshot2012-07-22at015743.png

into this space I inset a image...(inside the div)

http://i55.photobucket.com/albums/g146/icecreamterror/Screenshot2012-07-22at015812.png

And ad some text....

http://i55.photobucket.com/albums/g146/icecreamterror/Screenshot2012-07-22at015912.png

Now at this point all the tutorials iv come across for alining photos with text say to use the "Align" button on my properties bar......but its not there????????????


this is basically what I would like to be able to do, but till I can get the pesky image to stop being at the top left im screwed
http://i55.photobucket.com/albums/g146/icecreamterror/moc.png

Also, whats the most sensible way to divide up this editable space so I can have images text and paypal button in one one box that I can then duplicate every time I need to add a new item?

Corrosive
07-22-2012, 10:45 AM
You can use the CSS 'float' property for this. You can apply it to an image;

CSS Example

img.float {float: left; margin: 0 15px 0 0;}


To break that down it means that any image with the class of 'float' will be floated to the left and have a right hand margin of 15px (margins and padding go clockwise round the box, so top, right, bottom and left). Because your image is floated, text will 'wrap' around it.

Next you need a division for each of your product items to contain the image, text and Paypal button. This will also need a CSS class applied to it;

CSS Example

.item {overflow: hidden;}


So your final HTML might look like;


<div class="item">
<img src="pathtoimage/image.jpg" class="float" />
<p>Text for your image description</p>
Then put your paypal button code here
</div>


That's pretty basic and you'll need to change it to suit but hope it explains the principal.

By the way, exporting your design from Photoshop is a terrible idea ;)