?
Solved

adding an image to a css template (in dreamweaver)

Posted on 2008-10-12
3
Medium Priority
?
264 Views
Last Modified: 2012-05-05
Hi I am creating a webpage on dreamweaver- just learning some css (opposed to tables) and I am doing my first site and I am having a problem with image positioning.

I downloaded a template and thats how I got the basic page design set up (didnt create it all myself)

I would like to have text on the left hand side, and an image on the right hand side.

Would I do this by setting a position on the image? Or would I do that another way?

Here is an image of what I have now-  http://cellprophones.com/contact
I want to have the text on the left, and the image on the direct opposite side  (basically the opposite of what I have now). Any info is appreciated.
0
Comment
Question by:kate_nelson2001
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 6

Accepted Solution

by:
gxp071 earned 1000 total points
ID: 22701099
you need to add  the following css to your image either directly or in a style sheet using a class or id.

e.g.

style="float:right"

<img width="132" height="150" align="right" src="happy_phone.jpg"  style="float:right" />

you may also want to checkout http://www.w3schools.com/ great tutorials on CSS, HTML and everything related for beginners.
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 1000 total points
ID: 22709388
Another way is to put the text in a DIV and set the image as the background, but move the text to the right.  This is the way that the W3C are asking web designers to move to because it separates page content from decoration, which also seems to please Google et al...

<div style="border:1px solid red; width:400px; min-height:150px; background:url(happy_phone.jpg) no-repeat top left; padding-left:150px;">
   Cellpro Phones<br/>
   30 Auburn st<br/>
   Auburn, MA 01501<br/>
   (774) 249-0235<br/>
   C[removed]@gmail.com
</div>
0
 

Author Closing Comment

by:kate_nelson2001
ID: 31505549
Thanks!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question