CSS Menu??

[grimmylina]

Hi Everybody,

Could you tell me something? Is this a CSS menu or is it a Flash menu?


http://www.ikies.com/index.html


I looked at the source code and it seems to be but I am not totally sure.

Thanks,

Allie

[dtm32236]

it's a CSS menu, as seen here (http://www.cssplay.co.uk/menus/final_drop.html).

[grimmylina]

Thank you!!!!

[dtm32236]

no problem...

if you need help with it, i'd definitely be more than willing, but basically, this is how it works...

you have the css of the drop down to be display:none;
then, when the person hovers over the item, you change it to display:block; so it will pop into display:

#menu ul .item{display:none;}
#menu ul:hover .item{display:block;}

here's another nice example:
http://pixelspread.com/blog/289/css-drop-down-menu

[grimmylina]

That is a nice example....Thank you for offering!! I will definitely ask you for help. I am going to attempt it this week.

: )

[dtm32236]

nice - good lluck with it! let us know how it goes...

[grimmylina]

Ok, I used the code from the second link.

http://thehotelchelsea.com/allie/



It's really easy to use but 3 questions:

1.) How do you get the menu to hover above an image? Right now, I had to set my photo as the background to the cell because when I tried to put it over the image it would shift everything.

2.) Can I make the menu transparent instead of having a color?

3.) My menu spacing went all berserk when I added more menu items. Can I fix that? Example, "accomodations" and "location" got smooshed up against each other.

This is the CSS code I used:

<style type="text/css">
<!--
body {
background-color: #000000;
}
.style1 {
font-family: "Century Gothic", Verdana, Arial, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.style2 {font-family: "Century Gothic", Verdana, Arial, sans-serif; font-size: 16px; color: #FFFFFF; font-weight: bold; }

#menu{
position:absolute;
margin-top:10px;
left: 76px;
top: 77px;
font-family: "Century Gothic", Verdana, Arial, sans-serif;
font-size: 10px;
width: 515px;
}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#e3a252;padding:1px;margin:1px;}

#menu ul:hover .item a{color:#000000;text-decoration:none;}
#menu ul:hover .item a:hover{color:#000000;}

#menu ul{width:75px;float:left;margin:0px;padding:2px;background:#e3a252;list-style:none;}
.clear{clear:both;height:10px;}
-->
</style>

[grimmylina]

OOh, actually I saw this one.

http://www.cssplay.co.uk/menus/drop_variation.html

Why does mine look funny?

http://www.thehotelchelsea.com/allie/index_b.html


1.) I know one reason is that I need an opaque.png. How would I do this?

2.) Why is there so much space around the photo?

[dtm32236]

it looks good so far - but you definitely need some sort of background on the drop downs...

i'm sorry - i'll be able to help out with this later on or tomorrow... but i don't have time right now.

IE doesn't handle transparent images very well, but if you search this forum for "transparent png ie" (or something of the sort), you'll find a few posts on how to solve the problem.

[grimmylina]

Ok, I worked on it some more:

http://www.thehotelchelsea.com/allie/index_b.html


I think I got it a little better now. Now I am trying to figure out if I can get:

- the "About Us" all the way to the corner so there's no little white space there.



Thank you if you can give me any help. It doesn't matter when. I need a CSS Mr. Miagi :D

[dtm32236]

I'm not sure what you mean by "all the way to the corner"...
you want white space to the left of HOME? (see screenshot)

you gotta test your site with IE6 and 7 - the layout breaks in both.
to install multiple IEs, I use tredosoft (http://tredosoft.com/Multiple_IE) - it's a great application.

[dtm32236]

sorry - no screenshot...

[grimmylina]

Oh no shoot..really? That sucks. Ok, I will install that. And I thought it was smooth sailing.

There's a little white space after "About Us".

[dtm32236]

oh - you want the space on the right gone?

let me look at it and see if i can come up with anything...

[grimmylina]

I'm on a MAC..Do you think looking at it in Safari would be the same as IE?

[grimmylina]

Here's my stylesheet for the menu...Thank you for your help!!


/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_variations.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */

/* Set up the default font and ovrall size to include image */
.menu {
font-family: "Century Gothic", geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:556px;
height:519px;
background:#fff url(../images/main/chelsea.jpg) 0 20px no-repeat;
position:relative;
margin:0em 0px 0 0px;
font-family: "Century Gothic", geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
font-size: 10px;
left: -75;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:71.25px;
height:1.5em;
font-weight:none;
color:#888;
border-bottom:5px solid #feb609;
background:#fff;
padding-left:3.76px;
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */

/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:8px solid #606;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:96px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:transparent url(../images/common/opaque.png);
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:86px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}

/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
opacity:0.8;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}

[dtm32236]

i'm on PC - and I use FF2, IE6/7, and Safari for Win - and now it looks fine in all except IE6.

Actually, the site looks great in all browsers, but the navigation is broken in IE6.

You know what - this isn't your coding fault - the menu that you used doesn't work at all for IE6. That kinda sucks.

I'll take a look around and see if i can find any that work in all browsers. it just kinda sucks that you put all that time into it already.

[dtm32236]

just a couple errors in that CSS:

you have left:-75; (line 22)... this needs a unit - left:-75px;
and on line 42, you have font-weight:none; ....this doesn't exist, it's font-weight:normal;

[grimmylina]

Thank you...I will fix that right now.

[dtm32236]

I don't think that these issues will break your site - but it's a good idea/good practice to fix them.

But, despite your hard work - it's probably a good idea to find a drop-down that will work in IE6 (as a large number of people still use it)...

I'm sorry that the one I gave you didn't work in IE6, I should've checked that out beforehand. I'm gonna search around and find you one that works... I'll get back to you soon.

[dtm32236]

here's two of them that work in all browsers:

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
http://www.projectseven.com/tutorials/navigation/auto_hide/

(i like the second one... hopefully you can figure out how it works...)

[grimmylina]

Thank you!! I will try right now. Oh that's okay. I really like that site. It's got a lot of good stuff and I would have never found it on my own.

[dtm32236]

cool - let me know how it works out.

[grimmylina]

It worked!!!! Thank you!!!! And I think it looks way better than the other one.

http://thehotelchelsea.com/allie/

[dtm32236]

nice... it looks good.

just a head's up - in firefox, the font is a little choppy and hard to read... you may want to experiment with a few different fonts.

and the image of the room is repeating - it looks kinda strange... you can avoid this my adding repeat:no-repeat; to the image CSS.

[grimmylina]

Hmm, I put the image as a background inside a table cell? Can I add the "no repeat" to that? I think it might be because I added some returns because when I don't have the returns in..it looks like this:

http://thehotelchelsea.com/allie/

The menu won't align with the top white border.

I think I'll try something different than Century Gothic then.

[dtm32236]

you can try adding a negative top margin to #p7menubar:

#p7menubar, #p7menubar ul {
padding: 0;
margin:-5px 0 0;
list-style: none;
font-family: "Century Gothic", Verdana, Arial, sans-serif;
font-size: 11px;
}

and to fix the background, you can add it with CSS:

instead of <td width="46%" background="images/main/chelsea.jpg">

you can do:
<td class="bgimage">

CSS:
.bgimage {background:#fff url(images/main/chelsea.jpg) no-repeat;}

[grimmylina]

Ok, I think the background worked:

http://thehotelchelsea.com/allie/

But the magic number to get the menu bar to the tip top would be -95px and but then the menu starts going upwords and not downward anymore? So I tried to put it inside a table and that got it down to -58px but it's still heading northwords? ( I don't know it's that's even a word)

Yikes and I just saw it in Netscape...was not so pretty

[dtm32236]

oh god - what browser(s) are you testing in?

it's a mess still in IE6/IE7, and Safari (on windows)...

i don't really know what to tell you. i don't know why it's not working out. i've never used a CSS-only dropdown menu, but i didn't think it would be this complicated and annoying.

[grimmylina]

Ok, maybe I will give up for a while. I will look around and see if there is something a little more workeable....

[dtm32236]

yeah - i feel bad that it's taking all this work and time...

i don't get it... but if you wanna keep going at it until you get it, here's another one you can try (it's not pure CSS, it uses JavaScript I believe, but it works well cross-browser)
http://tutorials.alsacreations.com/deroulant/

[grimmylina]

Oh no..you don't have to feel bad. At least it gives me more experience with CSS and that's always a good thing. I will try that one too.

I also went to this site and asked if they knew of any good ones...

http://veerle.duoh.com/