Imitating ComplexSpiral with a float.

When I stumbled across Complex Spiral ( http://meyerweb.com/eric/css/edge/complexspiral/demo.html ) I thought, wow that's cool, no PNGs? Let's stick it in a template I'm kinda working on to see if I can get a cool menu.

So far it hasn't worked. But there are two things I've got different:

He's only got a bunch of anchors, and has set them to blocks with display:block. I (originally) had my menu in a ul. This changes things as usually my li is the block and the a stays inline. But they need a fixed width I believe for the image to show properly.

His menu is the first thing in the html, and is at 0, 0 on the screen. So are two other copies of the image. In my page, I have the menu floated right in a fluid-width page. By attatching the menu to the right side with a float, I can ensure it stays in place regardless of window size.

I'm not trying for the position:fixed as IE fixes are goofy and extra bs. I'm only going for actually two images, a "normal" background, and an overexposed version showing up on hover. I'm also not having more copies of the image outside the menu as Eric has-- only two images, only on the menu (within the floating div).

Questions:
Must position:absolute be used to get this general idea to work?

Is having it inside a float a problem?

Is there a way to have the more semantic ul for the menu or does this technique only work because he can assign the images to the div holding only anchors? (I've tried changing my menu to only a floating div with anchors too-- no go).

If anyone's run into websites or examples that mimic Eric's without Js, transparent png's, css opacity, image sliced in strips, etc I'd be interested.

 

Got a link?

 

No, it's sitting on my machine, and currently using images for which I haven't yet asked permission (only one requires it, maybe I can take it out).

Otherwise tomorrow I can set a few screenshots and the html (css is internal too since it's just starting).

Yeah, I'll post something tomorrow (machine's at work).

 

No, but you must specify coordinates in your position fixed declaration.
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

It overrides the float as far as I know.

Don't understand this one.

 

I'm actually not using position: fixed. In fact, the image vanishes if I do (I need to figure that one out) but I've been setting coords for the images within the #sidebar div. I'll post some pics and the code tomorrow after I remove the one image.

The ul question is, a menu is a list of links, so I generally set my links in a list (ul). Eric set his menu as just a set of anchors (see his site). So far, the only way I get any image at all is by switching my menu to anchors and block-displaying them. I was wondering if I could get the idea to work with li blocks instead of the anchors.

Unfortunately, the 0, 0 coords are being used for each individual anchor, which is why I'm starting to think that position: fixed is a necessary step (and not just something pretty he did for the rest of the page).

I'll show you tomorrow. Eric's site just looks so damn cool, while still simple (except in IE6 and under, then it looks like sh*t).

 

Without images except the two for the menu:

http://stommepoes.jobva.nl/Tests/koffie.html

Css is inside. The menu has been changed to only anchors, and I get an image, but it always restarts at 0, 0 of each anchor. Maybe position:fixed is necessary then, but I lose my images with it, so I'm using it wrong. Also that then means I must hack around IE6 : (

But I think my questions can be answered in a general. Yeah Arnold, I hope the float doesn't matter since it can have its own internal coords.

 

Looks like you need the position:fixed. And if not, set the background position on each seperate anchor.. if I had more time I could do some more testing but..

http://205.209.146.77/meyerweb.html

By the way, why are you setting a width of 100% on header? I'm too lazy to look if you have an IE stylesheet but horizontal margins and floats are double margins in IE as you're probably aware.. maybe you haven't even looked at the page in IE (nor have I)... And why the hell are you wrapping each letter in an h1 element? Look at the page with no styles... I would use <span>s or <em>s around each letter and then style the span/em... NOT seperate h1s. Oh yeah.. make sure the page validates.

 

I'm missing something. I don't get why you are absolutely positioning an element and floating it at the same time. Also, remember that position fixed only works for the browser window itself and doesn't work on sub element like divs.....

 

Huh? He's not absolutely positioning ANYTHING.

 

Stomme poes;4916550
Questions:
Must position:absolute be used to get this general idea to work?

Is having it inside a float a problem?

 

Arnold: I'm not using abs positioning but Eric Meyer is. So since mine didn't work, I wondered if that was needed. It seems that it is. Since my width is fluid, it seems I cannot use this technique on the right side of my page.

The reason was for design reasons. I didn't want to use an image because then no-one else could use it (they'd have to make their own image). I used h1 because, had I just had the whole thing in one sentence, I would've used an h1 as it's the title. Also I know for sure that JAWS will say each letter. I didn't think of ems but I didn't want loose spans for some reason.

Maybe what I'll do is remove the #title div, and have ems wrapped in an h1. That oughta get me my CSS-based design and I'm pretty sure JAWS will still say the letters (but say them strangly, because they're emphasised).

Since I still think I want to keep my menu on the right side for visual balance, I'll have to play with Eric's method elsewhere. Or...

Hmm, I could maybe do this, if the coords are in relation to the #sidebar float... offset each anchor's copy of the image by x-pixels. That could work, since my anchors will not widen. They'll still have to be block, though if I can pull it off with li's that's even better.

The 100% width was not needed. I initially had it on everything but I realised that's a div's default so why make more code? So it was taken off everything except I must've forgot the header.

Thanks for catching my <style> tag not stating type. I also had an unclosed <p> in the footer, but that didn't bother me as the footer was quickly added so there was a full page to present. This wasn't a completed-except-for-menu page. The whole thing is still being worked on, and I still need permission for some images.

*edit the em's seem to work, updated page (though not the menu).

http://i34.photobucket.com/albums/d136/schroedingerscat/koffiescreenshot.png

 

Holy crapola, it works! Rep to you soulscratch!

I tried your suggestion of re-setting the coords for each a. Now I'm sure there's a way to do this without classes (prolly with the pointy-indicators > +a+a adjascent selectors or something but since IE doesn't obey anyway... but that would've been even sweeter), but it works! Everything's down by 2em, the height of my a's, which means increased text size still works. Had to increase the height of the hover image to 800px to prevent cutoff, but still...

And I can have it in a proper list. W00t!

http://stommepoes.jobva.nl/Tests/koffie.html
weeeeeeeee I happy, cause now I can use this for anything else I build! This forum rocks.

PS arnold:

Thx, I didn't know that. I thought anything that could receive a scrollbar could have fixed.

*Edit: damn, IE doesn't keep the picture right in line. There's a small error with compounds until the two images don't match at all --IE6 AND 7. F*ck. Oh well.

 

You could just do something like..

ul#id a:hover, ul#id a:active {
background-image:url(coffeechocolate2.jpg)
background-repeat:no-repeat;
}

ul#id a.home:hover, ul#id a.home:active {
background-position:0 0;
}

and alter only the position for each specific anchor.. not even sure why you have :focus.

 

Hmm, I'll try that.

With focus, I can click on say Home, go nowhere, click the Back button, and hover over another area while Home stays highlighted. I'm trying to figure out why all the IE's are taking 2em + 2em and getting 4.1em.
Otherwise I usually have focus on in-text links for keyboard. Not sure how useful it really is for menus.