Announcement

Collapse
No announcement yet.

pure css menu no table tags experiment

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • pure css menu no table tags experiment

    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
    Thanks,
    -Barrett
    Favorite Host Hostasaurus.com
    Order Processing by Shipworks.com
    Kindly Suggesting to:
    *Dump Explorer and http://GetFireFox.com
    *Post a meaningful subject line.
    *Click the # button before pasting code

  • 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.

    Comment


    • 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.
      Thanks,

      Rick Wilson
      CEO
      Miva, Inc.
      [email protected]
      https://www.miva.com

      Comment


      • 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....

        Originally posted by Pete McNamara View Post
        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.

        Code:
        <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>
        Last edited by Barrett; 05-07-08, 03:40 AM.
        Thanks,
        -Barrett
        Favorite Host Hostasaurus.com
        Order Processing by Shipworks.com
        Kindly Suggesting to:
        *Dump Explorer and http://GetFireFox.com
        *Post a meaningful subject line.
        *Click the # button before pasting code

        Comment


        • 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 ?
          Attached Files
          Thanks,
          -Barrett
          Favorite Host Hostasaurus.com
          Order Processing by Shipworks.com
          Kindly Suggesting to:
          *Dump Explorer and http://GetFireFox.com
          *Post a meaningful subject line.
          *Click the # button before pasting code

          Comment


          • 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.
            Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
            Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
            Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
            Facebook http://www.facebook.com/EmporiumPlus
            Twitter http://twitter.com/emporiumplus

            Comment


            • Re: pure css menu no table tags experiment

              Originally posted by wcw View Post
              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.
              Thanks,
              -Barrett
              Favorite Host Hostasaurus.com
              Order Processing by Shipworks.com
              Kindly Suggesting to:
              *Dump Explorer and http://GetFireFox.com
              *Post a meaningful subject line.
              *Click the # button before pasting code

              Comment


              • 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.
                Last edited by wcw; 05-07-08, 12:05 PM.
                Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                Facebook http://www.facebook.com/EmporiumPlus
                Twitter http://twitter.com/emporiumplus

                Comment


                • Re: pure css menu no table tags experiment

                  Originally posted by Pete McNamara View Post
                  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/
                  Thanks,
                  -Barrett
                  Favorite Host Hostasaurus.com
                  Order Processing by Shipworks.com
                  Kindly Suggesting to:
                  *Dump Explorer and http://GetFireFox.com
                  *Post a meaningful subject line.
                  *Click the # button before pasting code

                  Comment


                  • 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.
                    Steve Strickland
                    972-227-2065

                    Comment


                    • 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

                      Comment


                      • 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.

                        Comment


                        • 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.

                          Comment


                          • 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.
                            Last edited by Biffy; 05-07-08, 03:48 PM.
                            Steve Strickland
                            972-227-2065

                            Comment


                            • Re: pure css menu no table tags experiment

                              I think we are agreed then :)

                              Comment

                              Working...
                              X

                              This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                              This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                              Accept