|
| |
|
|
vision2000
Posts: 532
From: USA
Status: offline
 |
Float help - 7/28/2005 11:32:21
Since you folks are so helpful....
Regarding:
http://www.ihost-websites.com/horse/
1. How do I float another box under the current menu box without pushing the images in the content down?
2. I managed to position the horse image next to the search box
however when previewed in DWMX the page is hard to view (page elements are all over my screen).
The page renders fine in FF and IE
Did I write the css correctly to position this image or is their a better way to do it?
Thanks a bunch.
|
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Float help - 7/28/2005 11:45:37
Floats have a habit of going screwy if you're not really careful.
There are different approaches - here's one:
HTML:
<div id="box1">
<ul id="navlist">
<li id="active"><a href="index.shtml" id="current">Home</a></li>
<li><a href="index.shtml">Grooming Tools</a></li>
<li><a href="saddles.shtml">Saddles, Bridles and Tack</a></li>
<li><a href="index.shtml">Gloves and Chaps </a></li>
<li><a href="#">Halters and Leads</a></li>
<li><a href="index.shtml">Leather Care </a></li>
<li><a href="index.shtml">Blankets and Pads </a></li>
<li><a href="index.shtml">Bandages and Wraps </a></li>
<li><a href="index.shtml">Stall and Stable </a></li>
<li><a href="index.shtml">Hoof Care and Polish</a></li>
<li><a href="index.shtml">Accessories</a></li>
<li><a href="index.shtml">Boots</a></li>
<li><a href="index.shtml">Site Map </a></li>
<li><a href="index.shtml">Contact Us <br />
</a></li>
</ul>
<img src="images/FTH_logo-comp27jsmall.jpg" alt="logo" width="60" height="54" />
<br />
</div>
<div id="box3">
<ul id="navlist">
<li id="active"><a href="index.shtml" id="current">Home</a></li>
<li><a href="index.shtml">Grooming Tools</a></li>
<li><a href="saddles.shtml">Saddles, Bridles and Tack</a></li>
<li><a href="index.shtml">Gloves and Chaps </a></li>
<li><a href="#">Halters and Leads</a></li>
<li><a href="index.shtml">Leather Care </a></li>
<li><a href="index.shtml">Blankets and Pads </a></li>
<li><a href="index.shtml">Bandages and Wraps </a></li>
<li><a href="index.shtml">Stall and Stable </a></li>
<li><a href="index.shtml">Hoof Care and Polish</a></li>
<li><a href="index.shtml">Accessories</a></li>
<li><a href="index.shtml">Boots</a></li>
<li><a href="index.shtml">Site Map </a></li>
<li><a href="index.shtml">Contact Us <br />
</a></li>
</ul>
<img src="images/FTH_logo-comp27jsmall.jpg" alt="logo" width="60" height="54" />
<br />
</div>
You'll notice I've just copied box 1's content for an example.
CSS:
#box3 {
clear:left;
float: left;
width: 170px;
border: solid 1px #9B6245;
background-color: #fff;
margin:5px 10px 10px 5px;
padding:5px;
}
The important bit there is the clear:left - otherwise the boxes will line up next to each other rather than above one another.
The other way would be to put a div around both left hand boxes and float that left - you then take floats and clears off the two contained boxes as they just sit one on top of the other in the "normal" flow of the page.
Both work - I tend to float bigger containers containing smaller boxes but see which works best for you.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Float help - 7/28/2005 12:23:46
There may be an easier way than this but I'm just going off for dinner so it'll have to do!!
If you stick the left hand boxes into a div called leftbox and float that left (take off the floats from the internal boxes). Then stick the right content into a box and float that right. Make sure you put a width on the floats (about 540px seems to work on the main content section). Put a clear:both on the bottomnav to push it past the two floats.
It means a bit of extra mark-up - however you could then get rid of the divs around the navigation list - just apply borders etc to the #leftbox #navlist {whatever;} to cut down on markup.
Maybe someone else will come up with an easier way - sorry!
_____________________________
"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
|
removed - 7/29/2005 16:20:58
removed
< Message edited by vision2000 -- 7/29/2005 18:03:27 >
| |
|
 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 
