css float to change position of content

Hello, I need some help with the positioning of some elements of my site:

www.hotonlinecasinos[dot]com/indexbu.php

The 3 lists at the top of the site basically put loads and loads of text on the page before the main content starts and I don't think google likes it.

I was wondering if it is possible to use floats to put the lists lower down the page in the html, but in the same position on the page?

Or if anyone else has any other ideas, that would be great!

thanks

 

You can't keep them at the same position with floats, but you can do it with absolute positioning.

 

Are you talking about the drop down menus?

 

Yep, the drop down menus/lists.

 

This can be done using Floats.

 

Can anyone advise how to do it because the answers so far are conflicting.

 

Hmmm, I haven't looked at the site in question, cause it doesn't really matter, but what you seem to be asking is if you can change your HTML to a "source-first" order for teh googles, and then use CSS to keep the site's current design.

The answer in this case is, you can do this with absolute positioning. The only way I can think of to do it with floats is the complicated negative-margin-float-wrapping thing, and is probably harder to do because these dropdowns aren't a sidebar but just at the top of the page. So I'd do absolute positioning.

First, you take the code for the dropdowns and set them somewhere else on the page that's appropriate (after the other content). I'd have to look at the site to see who an appropriate parent would be, but you'll need to make a parent of the dropdowns (well, the box that will contain all the dropdowns) set to position: relative. You'll probably do this with the body, but if there's a #container div that holds the whole page, then that's better. Whoever has position: relative is where the dropdowns will think the top left corner (0, 0) begins. You may not want this on the body if the actual page part is fixed width and centered.

The dropdowns would need to be set to position: absolute. Your top: coordinates need to be from the top of the parent element, and left: from the left side of the parent element. If everything above where the dropsdowns are to visually go is not a set height (if the height is different per page, or the header is generated and you can't guarentee the height), then you are pretty much screwed, because absolute positioning is a brittle method that can only count numbers, and cannot see anything else on the page but its parent. You may want to set the top number in em's instead of pixels, so that if someone does text-enlarge, the dropdowns can move down the page with the growing header (or whatever's above the dropdowns).

This is something that can be a bit tricky. You'll need to check religiously in all browsers, and maybe consider having some sort of google-link as a skip-link instead, or a sitemap link that comes in the header part of the page.