Float problems? Need help on design ... Thank You

Hello,

I am working on a design and I am having a few problems.

1. I am not able to align the menu to the right;
2. When hovering the products menu a child menu should appear.
I think the problem has to do with my floats that are affecting
it.
3. The foot is out of placed ... to the right ...

The page is in:
http://www.flyondreams.com/Beta/Site/Index.html

(Both Html and Css are validated)

Could someone, please, help me out with these problems?
Any other suggestions to improve my code are welcome.

Thanks,
Miguel

In article
<2ab8f242-3c4f-4499-a09e-452086389d9e (AT) o11g2000yql (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

Hello,

I am working on a design and I am having a few problems.

Did you make this CSS or did you get both sheets from somewhere and

alter them here and there?

1. I am not able to align the menu to the right;
2. When hovering the products menu a child menu should appear.
I think the problem has to do with my floats that are affecting
it.
3. The foot is out of placed ... to the right ...

The page is in:
http://www.flyondreams.com/Beta/Site/Index.html

(Both Html and Css are validated)

Could someone, please, help me out with these problems?
Any other suggestions to improve my code are welcome.

--
dorayme

shapper wrote:

I am working on a design and I am having a few problems.

1. I am not able to align the menu to the right;

Try float:right; rather than float:left; on .Navigation . ;-)

2. When hovering the products menu a child menu should appear.
I think the problem has to do with my floats that are affecting
it.

You've got a lot of selectors that will never match your current markup.
I can't help you otherwise. (Examined using FF with JS off.)
Oh, wait: I removed the overflow:hidden from .Center, and the submenus
appeared on hover (your layout broke, though).

3. The foot is out of placed ... to the right ...

Try adding clear:left; to div.Foot so as to counteract the properties of
the float you've asked for on .sidebar

The page is in:
http://www.flyondreams.com/Beta/Site/Index.html

(Both Html and Css are validated)

Did you read the warnings when you validated your CSS?
1 error, 14 warnings

Could someone, please, help me out with these problems?
Any other suggestions to improve my code are welcome.

HTML 4.01 strict, as we (TINW) usually say.
You seem to have a few extra DIVs; do you need them all?
I think (but am not sure) that some browsers choke on multiple class
names like class="Menu _Menu". But you don't seem to have any rules for
_Menu, so why don't you discard that?
There are plenty of two-column layouts in the world; why not use
something you know already works?

--
John
Pondering the value of the UIP: http://improve-usenet.org/
I always know I'm going to regret answering.

"John Hosking" <John (AT) DELETE (DOT) Hosking.name.INVALID> wrote

shapper wrote:
I think (but am not sure) that some browsers choke on multiple class names
like class="Menu _Menu".

NN4 et al, wouldn't worry about it, multiple classes work fine apart from
some cases in IE6:

..Menu {
/* this works */
}

.._Menu {
/* this works */
}

..Menu._Menu {
/* works in all modern browsers except IE6 */
}

On Apr 7, 3:20*am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
2ab8f242-3c4f-4499-a09e-452086389... (AT) o11g2000yql (DOT) googlegroups.com>,

*shapper <mdmo... (AT) gmail (DOT) com> wrote:
Hello,

I am working on a design and I am having a few problems.

Did you make this CSS or did you get both sheets from somewhere and
alter them here and there?

1. I am not able to align the menu to the right;
2. When hovering the products menu a child menu should appear.
* * I think the problem has to do with my floats that are affecting
it.
3. The foot is out of placed ... to the right ...

The page is in:
http://www.flyondreams.com/Beta/Site/Index.html

(Both Html and Css are validated)

Could someone, please, help me out with these problems?
Any other suggestions to improve my code are welcome.

--
dorayme

Hi dorayme,

I didn't take anything from anywhere.

I am using this markup (Head, Body and Foot classes) because on this
areas I will have different background images.
This is why I used the three div's. Then I have a center div inside
Head, Body and Foot to center the content.

Center might also have a background color.

Of course the markup could be simpler but this way I am able to sue
different background images (not applied yet) to my code.

The only thing I did not create is the Menu CSS but this is based on
JQuery SuperFish menu based on SuckerFish CSS menu but adding JQuery.

If you see the CSS I divide it into sections ... to better organize
it: Layout, Typography ...
After some thinking and experience with a previous web site I ended up
with this organization ... but I am sure it could be done differently.

Ah yes the RESET.css was taken from one that is available on internet
(I don't remember where ... I lost the url when my computer broke 2
weeks ago).
But this RESET.css has few changes I made into it and additions ...

On Apr 7, 6:30*am, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:

shapper wrote:

I am working on a design and I am having a few problems.

1. I am not able to align the menu to the right;

Try float:right; rather than float:left; on .Navigation . ;-)

2. When hovering the products menu a child menu should appear.
* * I think the problem has to do with my floats that are affecting
it.

You've got a lot of selectors that will never match your current markup.
I can't help you otherwise. (Examined using FF with JS off.)
Oh, wait: I removed the overflow:hidden from .Center, and the submenus
appeared on hover (your layout broke, though).

3. The foot is out of placed ... to the right ...

Try adding clear:left; to div.Foot so as to counteract the properties of
the float you've asked for on .sidebar



The page is in:
http://www.flyondreams.com/Beta/Site/Index.html

(Both Html and Css are validated)

Did you read the warnings when you validated your CSS?
1 error, 14 warnings



Could someone, please, help me out with these problems?
Any other suggestions to improve my code are welcome.

HTML 4.01 strict, as we (TINW) usually say.
You seem to have a few extra DIVs; do you need them all?
I think (but am not sure) that some browsers choke on multiple class
names like class="Menu _Menu". But you don't seem to have any rules for
_Menu, so why don't you discard that?
There are plenty of two-column layouts in the world; why not use
something you know already works?

--
John
Pondering the value of the UIP:http://improve-usenet.org/
I always know I'm going to regret answering.

Hi John,

Could you recommend a 2 columns layout where the header extends 100%
and its content centered?

Thanks,
Miguel

On Apr 7, 7:19*am, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

"John Hosking" <J... (AT) DELETE (DOT) Hosking.name.INVALID> wrote in message

news:49dae63d$1_5 (AT) news (DOT) bluewin.ch...

shapper wrote:
I think (but am not sure) that some browsers choke on multiple class names
like class="Menu _Menu".

NN4 et al, wouldn't worry about it, multiple classes work fine apart from
some cases in IE6:

.Menu {
* /* this works */

}

._Menu {
* /* this works */

}

.Menu._Menu {
* /* works in all modern browsers except IE6 */

}

The _Menu class is just to be used by JQuery as a selector.
By using this approach I can have two menus or elements with the same
functionality added by JQuery but with different styling.

Menu > Class for Styling
_Menu > Class for be used as selector by JQuery.

When I say menu I can say anything else where I style with CSS and add
functionality with JQuery.

Is this a bad approach? It was the only one I could find.

Thanks,
Miguel

On Apr 7, 7:19*am, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

"John Hosking" <J... (AT) DELETE (DOT) Hosking.name.INVALID> wrote in message

news:49dae63d$1_5 (AT) news (DOT) bluewin.ch...

shapper wrote:
I think (but am not sure) that some browsers choke on multiple class names
like class="Menu _Menu".

NN4 et al, wouldn't worry about it, multiple classes work fine apart from
some cases in IE6:

.Menu {
* /* this works */

}

._Menu {
* /* this works */

}

.Menu._Menu {
* /* works in all modern browsers except IE6 */

}

I just posted a new example:
http://www.flyondreams.com/Beta/Site/Index.html

The layout seems ok ... or not?

I keep having the same problem with the menu DropDown on products.
Everything I try breaks my design.

Does anyone has any idea how to fix this?

Thank You,
Miguel

shapper wrote:

On Apr 7, 6:30 am, John Hosking wrote:

There are plenty of two-column layouts in the world; why not use
something you know already works?

--
John

Please trim posts when you reply, especially the .sigs.

Could you recommend a 2 columns layout where the header extends 100%
and its content centered?

See what you think of
<http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm>

There was another scheme getting discussed (with considerable praise) in
these groups about two or three months ago, but I don't remember what it
was called. I failed to bookmark it. But you could scan the archives or,
heh, Google for "two-column layout".

Centering the content within a column (if that's what you really want)
shouldn't be hard. I'll even leave that as an exercise for you.

GL

--
John
The UIP: http://improve-usenet.org/
I was right.

On Apr 7, 6:30 am, John Hosking wrote:
There are plenty of two-column layouts in the world; why not use
something you know already works?

See what you think of
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm

I've always used floats to accomplish it but this seems interesting.
Overall what is most commonly used?

There was another scheme getting discussed (with considerable praise) in
these groups about two or three months ago, but I don't remember what it
was called. I failed to bookmark it. But you could scan the archives or,
heh, Google for "two-column layout".

Didn't find the one in archives yet ...
I get many hits. But I will give another try later today.

Centering the content within a column (if that's what you really want)
shouldn't be hard. I'll even leave that as an exercise for you.

If you mean using text-align center on the wrapper and margin auto on
the contained element than I know how to do it.
Is this what you mean?