Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-03-2012, 02:46 PM   PM User | #1
The Noob Coder
New Coder

 
Join Date: Jul 2012
Posts: 72
Thanks: 1
Thanked 0 Times in 0 Posts
The Noob Coder is an unknown quantity at this point
Question How can I arrange two images around two different blocks of text?

I'm working on this site and the last guy to work on it decided to make everything an image on the site, including the text. My primary goal right now is to make as many of the text/images into actual text as I possibly can.

Here is an example that I am working on right now:


I want to take the paragraph and the sentences below the picture of the truck and make them text, but I want to keep separate images of the truck and the logo on the right in the same positions as they are in this picture. You can assume the truck is truck.png and the logo is logo.png.

I know this involves floating images around and changing the positions (relative, absolute, etc.), but I don't really know much about manipulating image positions other than putting images next to each other and below each other. Any help would be appreciated. Thanks!
The Noob Coder is offline   Reply With Quote
Old 07-03-2012, 03:10 PM   PM User | #2
Will Bontrager
Regular Coder

 
Join Date: Jun 2012
Location: Near Chicago, USA
Posts: 123
Thanks: 7
Thanked 19 Times in 19 Posts
Will Bontrager is an unknown quantity at this point
Quote:
Originally Posted by The Noob Coder View Post
I'm working on this site and the last guy to work on it decided to make everything an image on the site, including the text. My primary goal right now is to make as many of the text/images into actual text as I possibly can.

Here is an example that I am working on right now:


I want to take the paragraph and the sentences below the picture of the truck and make them text, but I want to keep separate images of the truck and the logo on the right in the same positions as they are in this picture. You can assume the truck is truck.png and the logo is logo.png.

I know this involves floating images around and changing the positions (relative, absolute, etc.), but I don't really know much about manipulating image positions other than putting images next to each other and below each other. Any help would be appreciated. Thanks!
Here is some pseudo-code to get you started.

Code:
<img src="truck.png" style="float:left;">
<p>
text on right of image.
</p>
<img src="logo.png">
<div style="clear:both;"></div>
<p>
text below image
</p>
Will
__________________
Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

Last edited by Will Bontrager; 07-04-2012 at 01:58 PM.. Reason: misplace semi-colon in code
Will Bontrager is offline   Reply With Quote
Old 07-04-2012, 01:18 AM   PM User | #3
The Noob Coder
New Coder

 
Join Date: Jul 2012
Posts: 72
Thanks: 1
Thanked 0 Times in 0 Posts
The Noob Coder is an unknown quantity at this point
Wow! This worked out really nicely. Thanks!

Last edited by The Noob Coder; 07-04-2012 at 01:51 AM..
The Noob Coder is offline   Reply With Quote
Old 07-04-2012, 07:28 AM   PM User | #4
Major Payne
Regular Coder

 
Join Date: Aug 2005
Location: MS
Posts: 745
Thanks: 7
Thanked 65 Times in 63 Posts
Major Payne is an unknown quantity at this point
Examples:

Example 1

Example 2

Example 3
__________________
☠ ☠RON☠ ☠
Major Payne is offline   Reply With Quote
Reply

Bookmarks

Tags
convert image to text, floating images, image arrangement, images

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:44 PM.


Advertisement
Log in to turn off these ads.