need advise

R

romand

New Member
Hello,
I am new to web design, and currently working on my own website. But I can not properly insert image to my web page. Here are details:
My text is on the left side of the page and a pretty big image on the right side of the same web page. When I insert image the text slides. As I understand I have to apply CSS. But I dont know how.
Can any body give advise?

Thank you
 
J

JMeZigns

New Member
Just a wild shot in the dark without seeing the code ...

try adding "style="float: right;" directly after the src="somefile.jpg" of the img tag

This is an in-line style.

Until you learn some more CSS stick with that.

Also, Do a search for "W3C" in google and read up on CSS. There are a ton of tutorials out there for CSS if you know where to look.

I hope that helps a little. :cool:
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
romand,

JM is absolutely right...learn css and W3 Schools is a great place to start. The example he gave is a decent one, but like he stated only use inline styles to get you foot in the door, once you have a grasp of css it is best practice to link in an external stylesheet (.css file). Floating images is a easy way to get text to wrap around and image, in fact that is exactly why float were originally created--although these days they are used for a lot more than that.

Quick Example

HTML
HTML: 
<div class="imgtext">
   <img class="rfloat" src="http://www.webdesignforum.com/images/yourimg.gif" alt="" />
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum  vestibulum justo non semper.
</div>

CSS
HTML: 
div.imgtext {
padding:10px;    /* This will add padding to everything inside the div */
font:normal 10pt Arial, san-serif;     /* font weight, size, and family */
color:#fff;    /* font color */
text-align: justify;   /* set the justification of the text */
}

img.rfloat {
float:right;    /* floats the image to the right  */
margin:20px;    /* adds a gutter (margin) around the outside of the image */
border:1px #fff solid;     /* adds a 1 pixel white border around image */
}
 
Last edited:
You must log in or register to reply here.
Top