image positioning (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

vision2000 -> image positioning (6/29/2005 16:28:02)

How can I position the image to the right on this page so the text flows around it?

discount-real-estate-listings-md.com/contract-review.shtml

Here's the css I tried but did not work:

.rightimage{
float: right;
margin: 5px;
}

Thank you
Herman



Kitka -> RE: image positioning (6/29/2005 17:03:50)

quote:

Here's the css I tried but did not work:

.rightimage{
float: right;
margin: 5px;
}


Hi Herman,

It might be because you have the bracket too close to the selector. Try this:

.rightimage {
float: right;
margin: 5px;
}



Tailslide -> RE: image positioning (6/29/2005 17:25:33)

Hi

Just had a look - you'll need to get rid of the <p align="center"> first. Then apply the .rightimage class to the image and finally, you'll need to move the image up the page otherwise it'll be too low down. Move it up just below the "WHEN DOES THE AGENT PRESENT CONTRACTS?
" bit in the code and it'll float over to the right nicely.



vision2000 -> RE: image positioning (6/29/2005 19:47:00)

Thank you Kitka and Tailslide - it's corrected.

I now realize I need to use <p></p> for blocks of text in xhtml.

Does this mean I should not use <p align> or <div align> for xhtml?

Is it best to use <br /> <br />for separating paragraphs.



Tailslide -> RE: image positioning (6/30/2005 3:12:06)

In XHTML you want <p> and </p> for separating paragraphs and <br /> for single line breaks.

You can add CSS to individual items on the page but it's easier (in my view) to separate off all styling to the Stylesheet, that way you don't have to hunt through your HTML to find styles to change - everything's in the external stylesheet.



vision2000 -> RE: image positioning (6/30/2005 8:02:00)

Thanks for the great tips...a couple of other questions on text styling:

What styling do I use to reduce the space between paragraphs (instead of using <br /><br /> each time)?

How do I style bolded text (word or phrase)?
Currently I use:

.textbold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
}

or is it better to just use <strong>

Truely appreciate your valuable feedback.

Herman



Tailslide -> RE: image positioning (6/30/2005 8:45:51)

<p> and </p> is the standard paragraph tag (creates a double line break) as opposed to <br /> which is a single line break.

If <p> </p> is leaving too big a gap between paragraphs then there's nothing stopping you changing it. Just fiddle with the margins until you get what you want:

#divname p {margin: 5px 0 0 0;} will give you a 5px top margin and zero margins on all 3 other sides - in case you didn't know the order in this shorthand CSS is top, right, bottom, left (clockwise in other words). Just add or subtract until you get what you want.

For bold I usually use <strong> rather than <b> or applying a class to it that bolds the text. My understanding is that <strong> is emphasised differently in some screen readers from the text around it whereas <b> is purely a visual effect that isn't "translated" by screen readers etc.



vision2000 -> RE: image positioning (6/30/2005 15:36:24)

Thanks very much!

I have a header image positioning problem:

Is it possible to bring the 2 header images close together as in http://discount-real-estate-listings-md.com/index2.shtml (used fixed width of 760px)

with this fluid layout:
http://discount-real-estate-listings-md.com/index3.shtml

If I add a large no of pixels to the left and right margins of the images I have to scroll to view the page at 800x600.

If I view it at a very large resolution the I get a big gap between the images again.

Should I stick to the fixed width then (even though the customer prefers fluid?

Herman



Tailslide -> RE: image positioning (6/30/2005 15:56:12)

Hi again Herman - we must stop meeting like this!

We can position the images wherever you want - keep them at opposite sides of the page so they go towards each other as the page is reduced or put them closer together - whichever you want. We'd need to play with it a bit because at 800x600 in FF the images overlap the heading.

Can I be frank though Herman - and you'll have to forgive me as this is just my opinion - but I'm really not keen on those two graphics - I don't think they look very slick. If I were you I'd look at some stock photos from somewhere like istockphoto.com (not free but very cheap) - they've got thousands and thousands of pictures - I'm sure you'll be able to find something that might be suitable. You know, beaming family outside the white picket fenced house etc etc. You could then put a logo across the photos maybe (just text would do) as it really needs a bit of punch at the top of the page. Sorry - hope that's constructive... I know you didn't actually ask for criticism yet...

Anyway, if you decide against changing it we could float one image left and float the other right within a span - similar to the way we did the footer images. Not a problem.

Edit: it's istockphoto.com not istockphotos.com - oops!



vision2000 -> RE: image positioning (6/30/2005 18:31:20)

Thanks again for your swift response...you have been very helpful.

I decided to make the two images into one image, so I can keep the fluid design..seems to work fine:

http://discount-real-estate-listings-md.com/index1A.htm

Now, what do I add to my style sheet to make the header text (currently H2 tags) as H1 tags but same size as the H2s?

I would change the images as you suggested but it's what the customer wants:-(



Tailslide -> RE: image positioning (7/1/2005 3:07:15)

Life would be sooo much easier without clients! [:D] You know you're in trouble when they get that "look" in their eyes - you know ever so slightly crazy!

You can change the <h2>s to <h1>s and then play with the size of them in the stylesheets like this: 

h1 {font-size: 120%;}


Or whatever size you want (100% being the same size as the normal site text)

Can I suggest (oh no, not again) that you download Firefox as the main header and the sell a home buy a home bits are currently behind the navigation bar.

Possibly an answer to this would be to make the image in the header a background-image, then the text will just sit on top of it like this 

#header {background-image: url(images/header.jpg);background-repeat: no-repeat;background-position: top center; }



[image]local://upfiles/15313/2F6AFE169D8B4C0A811B87A439A7A2E0.gif[/image]



vision2000 -> RE: image positioning (7/1/2005 9:44:57)

Thank you - Can you take a look at my code to see why the header background image is now not showing...I must be missing something.

http://discount-real-estate-listings-md.com/index1A.shtml

Yes, the customer is sometimes picky but also bull headed as to what they want...of course they
know what is best for design:-)



Tailslide -> RE: image positioning (7/1/2005 10:40:32)

You just need to specify a height in the div so since the image is 191px high add height:191px; to the CSS to fill the header with the graphic.




vision2000 -> RE: image positioning (7/1/2005 11:30:33)

Thanks, that did it!

I had to make the height 300px to fit the text.

What can I place in the CSS to eliminate all the <br/> tags I had to use to move the header text under the image?

Where do I add the H1 tag in the CSS for the header text?

Sorry for all the questions - but trying to learn the correct way from the start...I save hours of time also trying to figure it out myself.



Tailslide -> RE: image positioning (7/1/2005 11:38:03)

Ok - so you'd do this: 

#header h1 {padding-top: 200px;}


Or whatever padding puts the heading exactly where you want it.

If all the pages have the same header graphic and roughly the same heading text and as you only use one <h1> per page you could probably just do: 
h1 {padding-top: 200px;}


Whatever you prefer.



vision2000 -> RE: image positioning (7/1/2005 12:16:03)

Thanks a lot for your help!

Have a great weekend.

Herman



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125