Solved

adding an image to a css template (in dreamweaver)

Posted on 2008-10-12
3
260 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 250 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 250 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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

728 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