OutFront Forums
     Home    Register     Search      Help      Login    

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read
 

image positioning

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> image positioning 		Page: [1]
 
 
vision2000

 

Posts: 541
From: USA
Status: offline

  		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

 

Posts: 2517
Joined: 1/31/2002
From: Australia
Status: offline

  		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;
}

_____________________________

Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**


(in reply to vision2000)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to Kitka)
vision2000

 

Posts: 541
From: USA
Status: offline

  		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.

(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to vision2000)
vision2000

 

Posts: 541
From: USA
Status: offline

  		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

(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to vision2000)
vision2000

 

Posts: 541
From: USA
Status: offline

  		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

(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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!


< Message edited by Tailslide -- 6/30/2005 16:15:30 >

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to vision2000)
vision2000

 

Posts: 541
From: USA
Status: offline

  		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:-(

(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: image positioning - 7/1/2005 3:07:15   
Life would be sooo much easier without clients! :) 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; }




Thumbnail Image
:)

Attachment (1)

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to vision2000)
vision2000

 

Posts: 541
From: USA
Status: offline

  		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:-)

(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.



_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to vision2000)
vision2000

 

Posts: 541
From: USA
Status: offline

  		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.

(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to vision2000)
vision2000

 

Posts: 541
From: USA
Status: offline

  		RE: image positioning - 7/1/2005 12:16:03   
Thanks a lot for your help!

Have a great weekend.

Herman

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> image positioning 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.