21 replies [Last post]
cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

so, for a couple years i've been using a dynamic menu for my website http://kracov.org

but the whole time i thought it was a CSS menu. and apparently i need one in order to have my links (sections within the menu) show up in google results.

i went to the ars technica forums for help with that. one person gave me a CSS/HTML code to replace my dynamic menu code. it didn't work though.

so what i'm looking for is to start new with a CSS menu editor. not one that you paste code into, but something closer to a WYSIWIG editor with an easy interface. if you've seen the menu at my site, i need to use those menu images (Art, Games, Funny, etc) in the CSS menu as well. so i hope someone here knows of a CSS editor like that.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

hoo

Well, this would have to be a kinda two-part menu.

I dunno what you got from ars technica, but the menu I learned on was the Son of Suckerfish dropdown from HTML dog.

http://www.htmldog.com/articles/suckerfish/dropdowns/

It was the only dropdown menu where the CSS was lean and readable.

The other thing you'll need is a different class (or id) on each top-level anchor, because you're also going to do Gilder-Levin Image repacement (my bias may be showing here, but that's the technique I like best for image replacement).

That can get rather complicated together.

I'd suggest starting out with just getting a pure HTML/CSS drodown working in all browser with some of the Suckerfish JS for IE6's issues, and THEN tackle the images... let it be as ugly as need be while you're getting the dropdown stuff working. When it's done, then it's time to tackle the image replacement, which we or others can help you through (it's a bit advanced I think, and needs to be more careful with a dropdown because of overflow: hidden).

If you have questions/problems with the Suckerfish, let us know. It's a fairly popular menu and many are familiar with it.

I'm no expert, but I fake one on teh Internets

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

wow, i had no idea getting

wow, i had no idea getting images to work in CSS was complicated.

you mentioned IE6..... why does that even matter? countries are starting to ban it, including microsoft

but anyway thanks for the reply, i'll try suckerfish first

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

actually, looking at all that

actually, looking at all that code, i forgot to mention that i don't actually know how to work with CSS. do i paste the code from suckerfish into a text file and save as menu.css? then link to it on my index.html file?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Kind of, yes. I would suggest

Kind of, yes. I would suggest reading a few basic CSS tutorials to get your head around it first.

And yes, IE7 and IE8 are out, and IE9 is on it's way, but IE6 still holds the lion's share of the market. Until it goes the way of IE5/mac, ignore it at your peril Wink

Verschwindende wrote:
  • CSS doesn't make pies

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

i found some css menus that

i found some css menus that have images.

http://www.cssmenumaker.com/

most of them seem to have backgrounds though. how would i go about removing the backgrounds? keep in mind that i don't have a lot of time to learn CSS

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: keep in mind that i

Quote:

keep in mind that i don't have a lot of time to learn CSS

If you want anything that works even reasonably, maybe consider hiring someone to do it for you?

I'm no expert, but I fake one on teh Internets

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

i've looked at the index file

i've looked at the index file and css file. i've learned to tweak the colors and add menu items. what i've done is somewhat close to my original menu, except that i need to remove the gray parts, and use images for the main horizontal menu.

http://kracov.org/index2.html

i looked at code for other css menus where it uses images like "background: left.png"

how would i go at inserting that code into the index file?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 10 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

you wouldnt put it in the

you wouldnt put it in the index file, but in the css file.

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

i see. so, no easy way to

i see. so, no easy way to use images in the css file?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 10 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

cosmicmadness wrote: i see.

cosmicmadness wrote:

i see. so, no easy way to use images in the css file?

Using images with the menu is easy, you just need to research and learn how.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Validate

First validate.

</body></html>
<!-- <a href="http://www.000webhost.com" rel="nofollow">www.000webhost.com</a> Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

Nothing may go outside the closing HTML tag. If your hoster is adding it, tell them they're destroying the innernets and should go back to macrame or basket weaving or whatever : )

Second, the menu you have works but it's an awful lot of code (you don't need names on each sub, CSS has this cool thing called the descendant selector).

ul {
the main level menu;
}
ul ul {
the first sub-level menus;
}
ul ul ul {
the game art sub level menu;
}

But assuming you kept this menu, you'd then move on to
adding a unique id or class (sometimes i use a class because I'm lazy and would rather type .h than #h) on each top-level menu item. Ideally you'd name them after what the link is. (#art, #games)

And adding another tag inside:

<li><a id="art" href="realURLhere" title="Art">Art<span></span></a>

That span is going to hold the bg image, and it will sit directly over the anchor and cover up the text. Anyone who doesn't have images, just see the text (yes, you want that).

Right now your li's a re floated and blocks, but your anchors are still inlines (and have way too many styles for lazy sods like me). I'm unsure if setting the anchors to blocks with this current CSS will kill anything, but you'll want them to be blocks or at least inline-blocks, so you can set a height and width on them (equal to the height and width of the images).

The anchors become position: relative, so that they can be a reference to the position: absolute spans, who will be assigned 100% height and width of their anchor parents, and will hold a different part of the background image (meaning you need to assign the background position by using that unique id or class you gave each anchor).

Make a single image (this is called a CSS sprite, type that into google and become enlightened of its wonders) of your entire menu, true-to-size, also with the hover state and whatever other states you want (active? highlighted?). Example of a sprited image

a span {
position: absolute;
left: 0;
top: 0;
width: 100%; (you will have a width on the anchors)
height: 100%; (you will have a height on the anchors)
background: url(theimage.png) 0 0 no-repeat;
}

At first, only the first span will have the correct image position. You override per span:
#games span {
background-position: further-left 0;
}
and the hover/focus:
#games:hover span, #games:focus span {
background-position: further-left -height;
}
where further-left is determined by how many pixels from the left you need to move the image to get that section to show correctly, and -height is usually what I have (if the menu is 50px tall, then my two-state image is 100px tall and I move the image -50px to show the other state).

I've gone pretty in-depth but this is something you're either going to sit down and spend some months getting a handle on, or if you need it fast, you'll get someone to do it for you (there are plenty of people running around offering this stuff for low-cost or free). Just as you're not going to learn French over the weekend, something like this takes some knowledge and some experience (how many times have I lost my image? Now I know what to do if they don't appear).

I'm no expert, but I fake one on teh Internets

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

thanks for your help,

thanks for your help, stomme

i had just followed a tutorial today about using images in the menu. i tried pasting the code to the bottom of the css file, but of course didn't work.

oh and i'm still not entirely clear on the span sizes. there's 2 sets of span things that have different sizes and positions of hovering, etc. can you clarify on how would i go about setting the sizes?

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

the image still doesn't show

the image still doesn't show up after pasting this at the end of the css file
my primary focus for now is the Art menu and the art image

a span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: art.png 0 0 no-repeat;
}

#art span {
background-position: further-left 0;
}
and the hover/focus:
#art:hover span, #art:focus span {
background-position: further-left -height;
}

and i've tried a different code but i'm still confused about the span sizes

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}

#menu .art {
width: 83px;
height: 37px;
background: art.png no-repeat;
left: 96px;
top: 73px;
}
#menu .art span {
width: 83px;
height: 74px;
background: art.png no-repeat;
left: 28px;
top: -20px;
}

#menu .games {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .games span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

#menu .funny {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .funny span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

If you had sent that CSS code

If you had sent that CSS code to the validator it would have told you that there's a big ugly syntax error there.

You may need more than some CSS tutorials. Dude it took me a few months to understand dropdown menus alone, and it was several weeks (AFTER already knowing the basics of positioning etc) of playing with deathshadow's CSS menu sprite examples before I could write them myself. Maybe it was months, I forget. And I didn't do any of it when I was just learning the basics of CSS: I had never heard of Gilder-Levin back then.

I strongly urge you to decide if you want to spend 2-3 years learning CSS (not a bad thing to do, I'm glad I did, but then, I now do this for a living) OR hire someone who will do it for you so you can have the menu you want now instead of in a year. You can also get someone who will explain what they are doing so that you can change and maintain it yourself later on without their help.

I'm no expert, but I fake one on teh Internets

cosmicmadness
cosmicmadness's picture
Offline
Enthusiast
Last seen: 2 years 24 weeks ago
Timezone: GMT-4
Joined: 2008-09-12
Posts: 52
Points: 60

the code you sent me has a

the code you sent me has a syntax error? i just altered the image url to be "art.png".

well anyway. i guess if your code has errors, there's nothing more i can do.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

YOUR code

Look carefully at MY code:
background: url(theimage.png) 0 0 no-repeat;
}
and

a span {
position: absolute;
left: 0;
top: 0;
width: 100%; (you will have a width on the anchors)
height: 100%; (you will have a height on the anchors)
background: url(theimage.png) 0 0 no-repeat;
}

Now look carefully at YOUR code:
background: art.png no-repeat;
and

a span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: art.png 0 0 no-repeat;
}

Do you not see the syntax error YOU introduced?? The CSS specs state very clearly how to reference an image with the background property.

I had missed this earlier question:

Quote:

oh and i'm still not entirely clear on the span sizes. there's 2 sets of span things that have different sizes and positions of hovering, etc. can you clarify on how would i go about setting the sizes?

I set them on the anchors, so the spans can just be 100% of everything. Since each anchor has its own unique ID, you just use that to target each one, and set the specific width for them there.

I'm done with this.

Quote:

well anyway. i guess if your code has errors, there's nothing more i can do.

Even if that were true, that's giving up too fast. We have validators for checking code. They are great. Use them. Do you think the rest of us shrugged and said "my code doesn't work, guess there's nothing more I can do"? If we did, we wouldn't be building websites.

I do wish you well with your menu.

I'm no expert, but I fake one on teh Internets

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You're also introducing stuff

You're also introducing stuff that doesn't work like

#art span {
background-position: further-left 0;
}
 
#art:hover span, #art:focus span {
background-position: further-left -height;
}

What is a "further-left" and a "-height"?
Further left of what and a negative height? Trying to create a black hole on the interwebs?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Read it

Deuce wrote:

What is a "further-left" and a "-height"?

me wrote:

where further-left is determined by how many pixels from the left you need to move the image to get that section to show correctly, and -height is usually what I have (if the menu is 50px tall, then my two-state image is 100px tall and I move the image -50px to show the other state).

I suppose I could move into greater detail. Look, I also used "theimage.png" and that doesn't even exist!!!

I'm no expert, but I fake one on teh Internets

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I wasn't referring to you

I wasn't referring to you Stomme. Your post clearly stated to take those terms to make them into values. Where as the OP was hoping for the answer to be there and just copied and pasted instead of reading the entire post and doing their own research.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Css is pants really, I could

Css is pants really, I could never work out why they couldn't simply do a property

position-towards-left: a-tad-more;

So often I need that slight undefinable bit of movement

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Still...

Deuce wrote:

I wasn't referring to you Stomme. Your post clearly stated to take those terms to make them into values. Where as the OP was hoping for the answer to be there and just copied and pasted instead of reading the entire post and doing their own research.

Still, he can't be blamed for introducing that, only keeping it, since I had it first... and I SHOULD have plainly stated at the beginning that I was writing pseudo-code (since I didn't have the actual images anyway) and therefore a skeletal example and not as straight (copyable) as a tutorial...

...but the missing url( ) stuff, that was introduced by the OP. So, using the validator no matter whose code it was is still the answer.

I'm no expert, but I fake one on teh Internets