|
| |
|
|
vision2000
Posts: 532
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: 2513
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.**
| |
|
|
|
Tailslide
Posts: 5999
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 532
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.
| |
|
|
|
Tailslide
Posts: 5999
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 532
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
| |
|
|
|
Tailslide
Posts: 5999
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 532
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
| |
|
|
|
Tailslide
Posts: 5999
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 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 532
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:-(
| |
|
|
|
vision2000
Posts: 532
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:-)
| |
|
|
|
Tailslide
Posts: 5999
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 532
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.
| |
|
|
|
Tailslide
Posts: 5999
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 532
From: USA
Status: offline
|
RE: image positioning - 7/1/2005 12:16:03
Thanks a lot for your help!
Have a great weekend.
Herman
| |
|
 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
|
|
|
Printable Version 
You know you're in trouble when they get that "look" in their eyes - you know ever so slightly crazy! 
