pure css menu no table tags experiment

[Barrett]

here's the link to my frankenstein
http://tinyurl.com/5me4zh

Pure css seems to be all the rage.
javascript rollovers and table tags sure worked awfully good except the stuff I had made it seemingly impossible or impractical to plug in the required miva script conditionals and got me started on this...

Please have a look at this I hacked together with OpenCube, BBedit, and Adobe Golive.

I'm not really thrilled with the whole absolute positioning structure.

What are your thoughts people ? to CSS or Table tags +javascript a global nav ???

Thanks,
Barrett

[Pete McNamara]

Re: pure css menu no table tags experiment

Barrett - I'm confused. Yyou have not used pure CSS positioning e.g. your page content is inside a table.

The rest of your code is very difficult to read - I recommend you have all your CSS and javascript in external files - this not only reduces page size, it make it vastly easier to examine your code - html, css and javascript code.

[Rick Wilson]

Re: pure css menu no table tags experiment

Also if you still have the CSS Framework from the beta (or wait til we stream the CSS Framework) you can use it as a structure for building this.

[Barrett]

Re: pure css menu no table tags experiment

Ya Rick I'm just doing some hacking around with reckless abandon till the Dino's wipe it on friday with a fresh install so I don't have to worry about any streaming issues, overwrites or general voodoo....

Barrett - I'm confused. Yyou have not used pure CSS positioning e.g. your page content is inside a table.

The rest of your code is very difficult to read - I recommend you have all your CSS and javascript in external files - this not only reduces page size, it make it vastly easier to examine your code - html, css and javascript code.

I'll see if I can do the external thing later today. I was cross eyed by the time posted that. What I really meant was the navigation chunk was supposedly css including the top mast graphic.

<div style="position:relative;width:100%;height:70px;-adbe-g:m;">
<div style="position:absolute;top:0px;left:0px;width:780px;height:47px;">
<img src="graphics/nav/mast.gif" alt="Creative Papers Online Handmade Paper" name="mast" height="47" width="780" border="0"></div>
<div style="position:absolute;top:51px;left:0px;width:380px;height:18px;">
<img src="graphics/nav/finest.gif" name="finest" height="18" width="380" border="0"></div>
<div style="position:absolute;top:47px;left:0px;width:780px;height:4px;">
<img src="graphics/nav/orngshim.gif" height="4" width="780"></div>
<div cslocked style="position:absolute;top:51px;left:380px;width:400px;height:18px;background-color:#fdb;text-align:left;-adbe-c:c">
<ul id="qm0" class="qmmc">
<li><a href="merchant.mvc"><img class="qm-is qm-ia qm-ih" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/home.gif" width="43" height="18"></a>
<li><a href="http://beta.handmade-paper.us/Merchant2/merchant.mvc?Screen=LOGN&Order=0&Store_Code=CPO"><img class="qm-is qm-ih qm-ia" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/account.gif" width="57" height="18"></a>
<li><a href="http://beta.handmade-paper.us/Merchant2/merchant.mvc?Screen=SRCH&Store_Code=CPO"><img class="qm-is qm-ih qm-ia" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/search.gif" width="48" height="18"></a>
<li><a href="http://beta.handmade-paper.us/Merchant2/merchant.mvc?Screen=BASK&Store_Code=CPO"><img class="qm-is qm-ih qm-ia" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/basket.gif" width="47" height="18"></a>
<li><a href="http://beta.handmade-paper.us/Merchant2/merchant.mvc?Screen=OINF&Store_Code=CPO"><img class="qm-is qm-ih qm-ia" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/checkout.gif" width="64" height="18"></a>
<li><a href="javascript:void(0);"><img class="qm-is qm-ih qm-ia" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/contact.gif" width="54" height="18"></a>
<li><a href="javascript:void(0);"><img class="qm-is qm-ih qm-ia" src="http://beta.handmade-paper.us/Merchant2/graphics/nav/help.gif" width="35" height="18"></a>
<li class="qmclear"> </ul>
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all', 'main' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script>
</div>
</div>

[Barrett]

Re: pure css menu no table tags experiment

I've been playing around with this and tried going to a pure css imageless design for the menu only with Verdana. Likely I'm doing something wrong in it somewhere but so far it breaks at random on windows in FF and the fonts on our windows box look like crap. See how nice they look on mac in this screen shot.
What's the hype about css again ?

[wcw]

Re: pure css menu no table tags experiment

Wait til the fun you will have if you apply the css framework in 5.5 when it comes out.

[Barrett]

Re: pure css menu no table tags experiment

Wait til the fun you will have if you apply the css framework in 5.5 when it comes out.

That I dangerously assume means everything in theory will be blanketed in css and no tables ???

My fun factor has about fully expired just entertaining myself with just trying to build a pure css menu chunk not knowing why it is supposed to be such a great thing although it would run if user has javascript disabled is kinda cool.

[wcw]

Re: pure css menu no table tags experiment

css does not mean tableless. You're just likely to see less tables. If you are not well versed in css, it would be best to avoid the css framework.

[Barrett]

Re: pure css menu no table tags experiment

Barrett - I'm confused. Yyou have not used pure CSS positioning e.g. your page content is inside a table.

The rest of your code is very difficult to read - I recommend you have all your CSS and javascript in external files - this not only reduces page size, it make it vastly easier to examine your code - html, css and javascript code.

Ok Pete take a look.
In theory the menu is pure css with calls to external files.
The rest of page is traditional table tags.

I placed the external files at /Merchant2/ figuring that would be the right thing to not have secure/nonsecure alerts since the Base tag is http://domain/Merchant2/

[Biffy]

Re: pure css menu no table tags experiment

You're doing this in a Miva 4 store?

A pure HTML/CSS menu is just an unordered list. All the magic is in the stylesheets. Watch out for IE 6 - it requires some serious hacks to get these to work.

[Pete McNamara]

Re: pure css menu no table tags experiment

OK, I see your problem, if you are referring to the top nav.

My first comment is that your css and html is way too complicated for what is required. e.g. Look at the topnav for this store:Abbey Archery. That is 100% CSS and does not need to have the links inside unordered lists (you'll find the html code at the foot of the page code. Why is another subject and is something that "should not be tried at home" - it causes significant cross browser compatability issues).

Not to put to put the boot in too much :) , but I would scrap your code and start again. It seems horrendously overcomplicated. Try following the Abbey Archery way but removing:

position:absolute;
z-index:25;

from #top

[Pete McNamara]

Re: pure css menu no table tags experiment

People used to table based layouts, tend to use a separate cell as a container for each link. I am thinking this is probably why you have placed each link inside a separate line in an unordered list? If so, this sort of thinking must be discarded to be successful with CSS layouts. FWIW.

[Pete McNamara]

Re: pure css menu no table tags experiment

A pure HTML/CSS menu is just an unordered list

A dropdown/flyout is/needs to be CSS coded as an unordered list. A "list" of links such as the Miva topnav or the category tree can be controlled without having to enclose each link in a separate list item. IMO, this is preferable as it significantly reduces the amount of html and CSS.

[Biffy]

Re: pure css menu no table tags experiment

For a normal, non-dropdown navbar, there's a vastly simpler way to do it using a single CSS div. However, you must have your entire layout coded correctly to achieve this level of efficiency.

It's the dropdowns that are a bear to code and use the unordered list containers with big-time code bloat and browser hacks.

[Pete McNamara]

Re: pure css menu no table tags experiment

I think we are agreed then :)