96 replies [Last post]
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok

Ok

Here's my take on that menu, but all stripped down:

html:

CSS only drop-down menu

.menu ul ul ul {margin-left:-1px;}
.menu ul ul ul.left {margin-left:1px;}


  • Item 1.1

  • Item 1.2

  • Item 1.3

  • Item 1.4

  • Item 1.5


    • Item 1.5.1

    • Item 1.5.2

    • Item 1.5.2


      • Item 1.5.2.1

      • Item 1.5.2.2

      • Item 1.5.2.3

      • Item 1.5.2.4




    • Item 1.5.3




  • Item 1.6

  • Item 1.7

  • Item 1.8

  • Item 1.9

  • Item 1.10

  • ITEM 2

    • Item 2.1

    • Item 2.2

    • Item 2.3

    • Item 2.4

    • Item 2.5

    • Item 2.6

    • Item 2.7

  • ITEM 3

    • Item 3.1

    • Item 3.2

    • Item 3.3

    • Item 3.4

    • Item 3.5

    • Item 3.6

    • Item 3.7

    • Item 3.8

    • Item 3.9

  • ITEM 4

    • Item 4.1

    • Item 4.2

    • Item 4.3

  • ITEM 5

    • Item 5.1

    • Item 5.2

    • Item 5.3

    • Item 5.4

    • Item 5.5


      • Item 5.5.1

      • Item 5.5.2

      • Item 5.5.3




    css:

    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } input,select{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */

    /* memu css */
    .menu { font-size: 65%; padding-bottom: 200px; }
    .menu ul { margin: 0pt; padding: 0pt; background: #AAAAAA none repeat; list-style-type: none; height: 3em; }
    .menu ul ul { width: 15em; }
    .menu ul li { float: left; height: 3em; line-height: 3em; }
    .menu ul ul li { display: block; width: 12em; height: auto; position: relative; line-height: 1em; }
    .menu a, .menu a:visited { padding: 0pt 3em 0pt 1em; background: #AAAAAA none repeat; display: block; float: left; height: 100%; font-size: 1em; text-decoration: none; color: #0000CC; }
    .menu ul ul a, .menu ul ul a:visited { padding: 0.5em 1em; background: #BBBBBB none repeat; display: block; color: #0000AA; width: 12em; height: 100%; line-height: 1em; }
    .menu ul table ul a, .menu ul table ul a:visited { width: 12em; }
    .menu table { position: absolute; left: 0pt; top: 0pt; font-size: 1em; z-index: -1; }
    .menu ul ul table { left: -1px; }
    .menu ul ul table ul.left { margin-left: 2px; }
    .menu li:hover { position: relative; }
    * html .menu a:hover { position: relative; }
    .menu ul ul ul a, .menu ul ul ul a:visited { background: #CCCCCC none repeat; }
    .menu ul ul ul ul a, .menu ul ul ul ul a:visited { background: #DDDDDD none repeat; }
    .menu ul *:hover a.sub1 { background: #CCCCCC none repeat; }
    .menu ul ul *:hover a.sub2 { background: #DDDDDD none repeat; }
    .menu a:hover { background: #BBBBBB none repeat; color: #000000; }
    .menu *:hover > a { background: #BBBBBB none repeat; color: #000000; }
    .menu ul ul a:hover { background: #CCCCCC none repeat; color: #000000; }
    .menu ul ul *:hover > a { background: #CCCCCC none repeat; color: #000000; }
    .menu ul ul ul a:hover { background: #DDDDDD none repeat; }
    .menu ul ul ul *:hover > a { background: #DDDDDD none repeat; }
    .menu ul ul ul ul a:hover { background: #EEEEEE none repeat; }
    .menu ul ul { visibility: hidden; position: absolute; height: 0pt; top: 3em; left: 0pt; width: 14em; }
    .menu ul ul ul { left: 14em; top: 0pt; width: 14em; }
    .menu ul ul ul.left { left: -14em; }
    .menu ul li:hover ul, .menu ul a:hover ul { background: transparent url('trans.gif') repeat; visibility: visible; height: auto; padding-bottom: 3em; }
    .menu ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul { visibility: visible; }
    .menu ul *:hover ul *:hover ul *:hover ul { visibility: visible; }

    The overall font size is set here:

    .menu { font-size: 65%; padding-bottom: 200px; }

    The colors you can change.

    The only issue I have with the use at any time of a background image like yours is that if the user re-sizes the fonts, the image would need to get taller, but it can't. That is why I tend to use a side image. See the side menus on my home page:

    siteunderconstruction.net

    As to little arrows etc, easy to do.

    Question is, how many sub-levels do you need? To 1.5, or 1.5.2 or 1.5.2.1 in this example?

    Also notice how IE6 needs some tables to make it work? These won't be seen by a text reader becasue of the conditional comments.

    CT

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Somewhere along the way,

    Hi

    Somewhere along the way, the backgorund color for the center column on my code got moved accidentally to the outer div, wherease it should be on the float-wrap, like this:

    #float-wrap{ width:100%; float:left; display:inline; background:#ADD8E6; /*** Background colour of center column. ***/ }

    Not sure if your copy was right or not! Probably me messing around.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Aaagh, my previous post has

    Aaagh, my previous post has gone! Where? God knows. Certainly I don't Sad

    Anyway, what it said was how do we put the menu on to the page we have made?

    If you simply put it in place, it takes up a huge space. This is to allow the sub-menu's to drop down.

    So, we must positon it absolutely. Not an uncommon thing to do for menu's. But we must do so and at the same time allow the other content to move to make room for it. If the visitor increases the text size, as the menu is 3em high, it will increase. So we can't simply increase the ehader which is fixed at 79px high because we can't add 79px and 3em. So, we put a fake div in above the header-bottom div that is 3em high and has a white background.

    Then, we put the menu div after this.

    The code snippet (ha, some snippet!):

    html:

    Carfaro, Inc Logo

    The Standard in Railing and Fencing

    call toll free 1-800-123-4567


    • Item 1.1

    • Item 1.2

    • Item 1.3

    • Item 1.4

    • Item 1.5


      • Item 1.5.1

      • Item 1.5.2

      • Item 1.5.2


        • Item 1.5.2.1

        • Item 1.5.2.2

        • Item 1.5.2.3

        • Item 1.5.2.4




      • Item 1.5.3




    • Item 1.6

    • Item 1.7

    • Item 1.8

    • Item 1.9

    • Item 1.10


  • ITEM 2

    • Item 2.1

    • Item 2.2

    • Item 2.3

    • Item 2.4

    • Item 2.5

    • Item 2.6

    • Item 2.7


  • ITEM 3

    • Item 3.1

    • Item 3.2

    • Item 3.3

    • Item 3.4

    • Item 3.5

    • Item 3.6

    • Item 3.7

    • Item 3.8

    • Item 3.9


  • ITEM 4

    • Item 4.1

    • Item 4.2

    • Item 4.3


  • ITEM 5

    • Item 5.1

    • Item 5.2

    • Item 5.3

    • Item 5.4

    • Item 5.5


      • Item 5.5.1

      • Item 5.5.2

      • Item 5.5.3








    and the css for the fake div and the change to the menu div:

    #menu-space{ font-size:65%; height:3em; background:#FFFFFF; }

    /* memu css */
    .menu { position:absolute; z-index:1; top:79px; font-size: 65%; padding-bottom: 200px;}

    Note that the fake menu div (menu-space has the same font-size as the menu. This is so 3em is the same height for both. Now, if the visitor increases the text size both the menu and the menu-space increase by the same amount.

    If you want the menu centered. We have to set the width of the main menu buttons. Not hard if we use ems and know what text goes in each, or they can all be the same size (looks best).

    CT

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Just found a way to center

    Just found a way to center the menu block without attaching a width to the containing ul. Still can't see if it works in IE6, but it works in IE7, Opera and FF. Oddly, a text size increase and FF needs a refresh to re-size the width of the ul, but IE7 is Ok. A decrease in size and FF does this OK. Weird.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    http://carfaro.com/new/index.

    http://carfaro.com/new/index.html

    put up the changes. I'm surprised tho - in IE the grey goes all the way across the page, but in FF it stops at the end of the last menu. How come?

    Welcome back ClevaTreva, hope your weekend with the daughter was good:)

    In most cases, I will only one set of submenu's, but the second is good to have in case. How would you suggest I display the fact that there is another submenu? Some people will get it, but some people won't. Want to draw their eye to the ones that offer more menus.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Ok When I get home in a

    Ok

    When I get home in a couple of hours from work I will add the graphics.

    Did you want it centered on the page or on the left?

    It is very hard to center the menu unless the overall ul it is in has a width set, which in itself can cause a few problems, as it doesn't quite center because each browser makes it a slightly different width?

    The grey only goes full screen in IE6, in the other browsers it is just the width of the menu.

    Which begs the question of what button color to use. I'll think on it.

    CT

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I'd like to have the

    I'd like to have the background color stretch the entire width of the page. Can't I use the color as the background of the div, and that should color it in, right?

    We could also just have top and bottom borders for the menu div to separate the menu from the content.

    This has been such a huge learning experience for me, thank you so much.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    I have been tidying the code

    I have been tidying the code up a bit.

    As to the background, this entire css block to replace that already there:

    h2#headerPhone{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-12px 0px 1px 0px; height: 12px; width: 100%; background: url(images/phone.gif) right no-repeat; } #header-bottom{ position:relative; background:#FFFFFF url(images/headerBGBottom-new.gif) repeat-x; height:7px; overflow:hidden; } #footer{ position:relative; background:#77EE33; height:30px; overflow:hidden; } #footer-bottom{ position:relative; background:#FFFFFF url(images/headerBGBottom-new.gif) 0 -4px repeat-x; height:3px; overflow:hidden; } #menu-space{ font-size:65%; height:3em; background:#AAAAAA; }

    /* memu css */
    .menu { position:absolute; z-index:1; top:79px; font-size: 65%; padding-bottom: 200px;}
    .menu ul { margin: 0pt; padding: 0pt; background: #AAAAAA none repeat; list-style-type: none; height: 3em; }
    .menu ul ul { width: 15em; }
    .menu ul li { float: left; height: 3em; line-height: 3em; }
    .menu ul ul li { display: block; width: 12em; height: auto; position: relative; line-height: 1em; }
    .menu a, .menu a:visited { padding: 0pt 3em 0pt 1em; background: #AAAAAA none repeat; display: block; float: left; height: 100%; font-size: 1em; text-decoration: none; color: #0000CC; }
    .menu ul ul a, .menu ul ul a:visited { padding: 0.5em 1em; background: #BBBBBB none repeat; display: block; color: #0000AA; width: 12em; height: 100%; line-height: 1em; }
    .menu ul table ul a, .menu ul table ul a:visited { width: 12em; }
    .menu table { position: absolute; left: 0pt; top: 0pt; font-size: 1em; z-index: -1; }
    .menu ul ul table { left: -1px; }
    .menu ul ul table ul.left { margin-left: 2px; }
    .menu li:hover { position: relative; }
    * html .menu a:hover { position: relative; }
    .menu ul ul ul a, .menu ul ul ul a:visited { background: #CCCCCC none repeat; }
    .menu ul ul ul ul a, .menu ul ul ul ul a:visited { background: #DDDDDD none repeat; }
    .menu ul *:hover a.sub1 { background: #CCCCCC none repeat; }
    .menu ul ul *:hover a.sub2 { background: #DDDDDD none repeat; }
    .menu a:hover { background: #BBBBBB none repeat; color: #000000; }
    .menu *:hover > a { background: #BBBBBB none repeat; color: #000000; }
    .menu ul ul a:hover { background: #CCCCCC none repeat; color: #000000; }
    .menu ul ul *:hover > a { background: #CCCCCC none repeat; color: #000000; }
    .menu ul ul ul a:hover { background: #DDDDDD none repeat; }
    .menu ul ul ul *:hover > a { background: #DDDDDD none repeat; }
    .menu ul ul ul ul a:hover { background: #EEEEEE none repeat; }
    .menu ul ul { visibility: hidden; position: absolute; height: 0pt; top: 3em; left: 0pt; width: 14em; }
    .menu ul ul ul { left: 14em; top: 0pt; width: 14em; }
    .menu ul ul ul.left { left: -14em; }
    .menu ul li:hover ul, .menu ul a:hover ul { background: transparent url('trans.gif') repeat; visibility: visible; height: auto; padding-bottom: 3em; }
    .menu ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul { visibility: visible; }
    .menu ul *:hover ul *:hover ul *:hover ul { visibility: visible; }

    There are a few changes you might not have, so it was easier to post the whole block!

    To add top and bottom border effects, the best thing would be to modify the image for the header-bottom div, and modify the height of this and the css for the footer-bottom. Then you need an extra div between the h2 headerPhone and the menu-space div.

    I'll just knock them up and be back up in a tick.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Ok Some revised

    Ok

    Some revised css:

    #header-bottom{ position:relative; background:#FFFFFF url(images/headerBGBottom-new.gif) repeat-x; height:8px; overflow:hidden; }

    and

    #footer-bottom{
    position:relative;
    background:#FFFFFF url(images/headerBGBottom-new.gif) 0 -5px repeat-x;
    height:3px;
    overflow:hidden;
    }

    and

    .menu { position:absolute; z-index:1; top:80px; font-size: 65%; padding-bottom: 200px;}

    And a new bit of css:

    #menu-top-border { background: #000; height:1px; font-size:0px; line-height:0px; overflow:hidden; }

    And the revised html:

    Carfaro, Inc Logo

    The Standard in Railing and Fencing

    call toll free 1-800-123-4567

    And a revised image (aatached)

    See you later, ask any questions and I'll get back. I'll be working on the images for the menu's to make the drop downs more obvious!

    CT

    AttachmentSize
    headerBGBottom-new.gif 114 bytes
    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I think the thing I want to

    I think the thing I want to go for is what I have up there now - a bordergif along the top of the page and a border gif along the bottom of the page. I'd like to leave out the headerbottom all together.

    I'll make the css changes and html as well and repost in a bit. "Warrior needs food badly!"

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    okay, that looks cool now.

    okay, that looks cool now. I'm not seeing any border around the menu tho.

    attaching the css and the html files

    AttachmentSize
    index.html.txt 6.68 KB
    newstyle.css_.txt 5.27 KB
    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Sorry bout that, the last

    Sorry bout that, the last post had some errors and then my broadband link went down. Just come back up. I'll post the fixed code in its entirety. Note that when I do post, to get the border on the menu, I put another div inside the menu-space div and transferred the css to that, and then put borders on the outer one, still called menu-space. This is to avoid IE5 broken box model problem.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Ok Here's the new html

    Ok

    Here's the new html (note the IE hack. I don't have IE6, so check it is OK in that too, if not let me know):

    Carfaro, Inc.
    @import url("media/newstyle.css");

    .menu { left: 0; }

    Carfaro, Inc Logo

    The Standard in Railing and Fencing

    call toll free 1-800-123-4567


    • Item 1.1

    • Item 1.2

    • Item 1.3

    • Item 1.4

    • Item 1.5


      • Item 1.5.1

      • Item 1.5.2

      • Item 1.5.2


        • Item 1.5.2.1

        • Item 1.5.2.2

        • Item 1.5.2.3

        • Item 1.5.2.4




      • Item 1.5.3




    • Item 1.6

    • Item 1.7

    • Item 1.8

    • Item 1.9

    • Item 1.10


  • ITEM 2

    • Item 2.1

    • Item 2.2

    • Item 2.3

    • Item 2.4

    • Item 2.5

    • Item 2.6

    • Item 2.7


  • ITEM 3

    • Item 3.1

    • Item 3.2

    • Item 3.3

    • Item 3.4

    • Item 3.5

    • Item 3.6

    • Item 3.7

    • Item 3.8

    • Item 3.9


  • ITEM 4

    • Item 4.1

    • Item 4.2

    • Item 4.3


  • ITEM 5

    • Item 5.1

    • Item 5.2

    • Item 5.3

    • Item 5.4

    • Item 5.5


      • Item 5.5.1

      • Item 5.5.2

      • Item 5.5.3












    For more than a decade, Carfaro has specialized in
    custom-fabricating aluminum railings, fencing and gates
    for multi-family, residential, hotel and commercial projects.



    From layout and design, to manufacturing and installation,
    our professionals are dedicated to delivering quality aluminum
    products ideal for balconies, porches, decks, stairs and ramps ,
    recreation and community buildings, and pool areas.



    Our products are maintenance-free – they will not rust
    and are UV and saltwater resistant – easy to install,
    and more durable and stylish than wood or vinyl. Custom-fabricated,
    welded systems allow for evenly spaced posts and pickets that
    enhance visual appearance and eliminate field modification
    during installation. Cast sleeves provide built-in adjustability
    and match one of six top rail profiles. Polyester resin finishes
    are superior to painting and anodizing and available in 8
    standard colors or custom color matches.



    Alternating picket heights and accessories – various
    final and end-cap options, and special designs offer the opportunity
    to create a unique visual appearance and more custom look.



    Coming soon – Carfaro’s new modular
    system, a competitively priced option for residential developers
    and architects.



    Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ


    Colonial Style Railing, professional building - Pennington, NJ
    Three-Line Picket waterfront fence, mid-rise apartments - Weehawken, NJ






    This is the Left Sidebar









    css:

    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } input,select,textarea{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; min-width:770px; /*** Minimum Content Width ***/ padding:0px 20px; } strong,b{ font-weight:bold; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #page-container{ font-size:90%; line-height:1.1em; position:relative; width:100%; /*** Content Width ***/ display:table; background:#FFCCCC; /*** Background colour of left AND right columns ***/ } #outer{ position:relative; margin-left:150px; /*** Left Column Width ***/ margin-right:200px; /*** Right Column Width ***/ } #float-wrap{ width:100%; float:left; display:inline; background:#ADD8E6; /*** Background colour of center column. ***/ } #left{ float:left; display:inline; width:150px; /*** Left Column Width ***/ margin-left:-150px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:200px; /*** Right Column Width ***/ margin-right:-200px; /*** NEGATIVE Right Column Width ***/ position:relative; } #center{ position:relative; /* fix for IE */ width:100%; float:right; } #header-top{ position:relative; background:#FFFFFF url(images/headerBGTop-new.gif) repeat-x; height:79px; overflow:hidden; } h1{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-43px 0px 0px 10px; height: 43px; width: 200px; background: url(images/flatLogoSM.jpg) no-repeat; } h2#headerLogoTagLine{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-13px 0px 0px 242px; height: 12px; width: 201px; background: url(images/standard.gif) no-repeat; } h2#headerPhone{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-12px 0px 1px 0px; height: 12px; width: 100%; background: url(images/phone.gif) right no-repeat; } #footer{ position:relative; background:#77EE33; height:30px; overflow:hidden; } #footer-bottom{ position:relative; background:#FFFFFF url(images/headerBGBottom-new.gif) repeat-x; height:3px; overflow:hidden; } #menu-space{ border:1px solid #000; border-width:1px 0px; position:relative; } #menu-space div{ position:relative; font-size:65%; height:3em; background:#AAAAAA; }

    /* memu css */
    .menu { position:absolute; z-index:1; top:80px; font-size: 65%; padding-bottom: 200px;}
    .menu ul { background: #AAAAAA; list-style-type: none; height: 3em; }
    .menu ul ul { width: 15em; }
    .menu ul li { float: left; height: 3em; line-height: 3em; }
    .menu ul ul li { display: block; width: 12em; height: auto; position: relative; line-height: 1em; }
    .menu a, .menu a:visited { padding: 0pt 3em 0pt 1em; background: #AAAAAA; display: block; float: left; height: 100%; font-size: 1em; text-decoration: none; color: #0000CC; }
    .menu ul ul a, .menu ul ul a:visited { padding: 0.5em 1em; background: #BBBBBB; display: block; color: #0000AA; width: 12em; height: 100%; line-height: 1em; }
    .menu ul table ul a, .menu ul table ul a:visited { width: 12em; }
    .menu table { position: absolute; left: 0pt; top: 0pt; font-size: 1em; z-index: -1; }
    .menu ul ul table { left: -1px; }
    .menu ul ul table ul.left { margin-left: 2px; }
    .menu li:hover { position: relative; }
    * html .menu a:hover { position: relative; }
    .menu ul ul ul a, .menu ul ul ul a:visited { background: #CCCCCC; }
    .menu ul ul ul ul a, .menu ul ul ul ul a:visited { background: #DDDDDD; }
    .menu ul *:hover a.sub1 { background: #CCCCCC url(images/right-arrow-sub1.gif) right center no-repeat; }
    .menu ul ul *:hover a.sub2 { background: #DDDDDD url(images/right-arrow-sub2.gif) right center no-repeat; }
    .menu a:hover { background: #BBBBBB; color: #000000; }
    .menu *:hover > a { background: #BBBBBB; color: #000000; }
    .menu ul ul a:hover { background: #CCCCCC; color: #000000; }
    .menu ul ul *:hover > a { background: #CCCCCC; color: #000000; }
    .menu ul ul ul a:hover { background: #DDDDDD; }
    .menu ul ul ul *:hover > a { background: #DDDDDD; }
    .menu ul ul ul ul a:hover { background: #EEEEEE; }
    .menu ul ul { visibility: hidden; position: absolute; height: 0pt; top: 3em; left: 0pt; width: 14em; }
    .menu ul ul ul { left: 14em; top: 0pt; width: 14em; }
    .menu ul ul ul.left { left: -14em; }
    .menu ul li:hover ul, .menu ul a:hover ul { background: transparent url(trans.gif) repeat; visibility: visible; height: auto; padding-bottom: 3em; }
    .menu ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul { visibility: visible; }
    .menu ul *:hover ul *:hover ul *:hover ul { visibility: visible; }

    The arrow image was transparent, but Opera repeated it and the one udner showed through making a double arrow! So, I had to make two images (attached).

    CT

    AttachmentSize
    right-arrow-sub1.gif 45 bytes
    right-arrow-sub2.gif 45 bytes
    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    http://carfaro.com/new/index.

    http://carfaro.com/new/index.html

    Good stuff. I think that I might do away with the whole footer section and put the copyright in the footer bottom section.

    The only think I have questions about are:

  • can I put links in the left div - sub links within the section you are in. I have major sections that will have dropdowns, but I'd like to be able to make it easier for them to navigate than always having to go back to the menus and drill down a level or two.

  • can I put a footer of sorts in the central column? just in case they want a set of links on the bottom of every page.

  • can we take the text in the center and put it on the left side of the middle column, and have the long pick next to it, and the two smaller pics to the right of that?
  • ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    ravensensei wrote:can I put

    ravensensei wrote:
    can I put links in the left div - sub links within the section you are in. I have major sections that will have dropdowns, but I'd like to be able to make it easier for them to navigate than always having to go back to the menus and drill down a level or two.

    Yes, of course you can. Just take a look at my website links for an example.

    Quote:
    can I put a footer of sorts in the central column? just in case they want a set of links on the bottom of every page.

    Yes. If you kept the green footer and put left and right margins to match the left and right column widths, it will sit in the center. However, the center column (#center) would need a negative bottom margin the same as the height of that gree footer with links (I think, anyway, some margin jiggery pokery will be needed).

    Quote:
    can we take the text in the center and put it on the left side of the middle column, and have the long pick next to it, and the two smaller pics to the right of that?

    Do you want three columns in the middle? Text to the left, big pic middle, two small piccies to the right? If so, what happens to the text if it goes below the pictures? What do you want to happen if the window size gets smaller? Text at the bottom, top or what? It can be done with floats, but the widths of each bit has to be fixed.

    CT

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Just played with the footer

    Just played with the footer links thing. Assuming you still use the footer div, do this:

    give it a negative margin-top the same as its height.

    give the container-center a margin-bottom the same as the footer div height

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    what is your website? I'll

    what is your website?

    I'll try out your footer suggestions.

    The content in the center is going to change with every page. What I'd like to do is use PHP variable passing in the url to dictate what gets painted in the content pane. What that looks like will be different.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    ravensensei wrote:what is

    ravensensei wrote:
    what is your website?

    www.siteunderconstruction.net

    Quote:
    What I'd like to do is use PHP variable passing in the url to dictate what gets painted in the content pane. What that looks like will be different.

    Well, I do the same Smile

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    ignoring the lack of

    ignoring the lack of formatting on the home page, how does it look now?

    http://www.carfaro.com/new/index.php

    thx.
    [email protected]

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Matt Wherever you have

    Hi Matt

    Wherever you have used & (in the links I think) use & instead.

    I think the black line abobe and below the menu needs to be a more subtle color.

    As to formatting, obviously you need to set a line-height on the content and a top and bottom margin on the same text (apply both to the p tag when inside the center bit, like:

    #container-center p{ margin:.5em 0; line-height:1.35em }

    CT

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I was thnking the same

    I was thnking the same thing, like a lighter gray.

    I'm also wanting to change the size of the link text to be bigger and bolder. Any recommendations? I tried messing around some and the menu started looking strange. Like the cell backgrounds were bigger than the div.

    [email protected]

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    How are you trying to change

    How are you trying to change the font-size?

    I just changed the .menu class css to this:

    .menu { position:absolute; z-index:1; top:80px; font-size: 75%; padding-bottom: 200px; font-weight:bold}

    where the font-weight has been added and the font-size increased from 65% to 75% and everything looked OK.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I tried it, and it looks

    I tried it, and it looks like it covers the bottom border. At least in firefox.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Whoops my bad. If you

    Whoops my bad.

    If you chnage the font-size like I said, you have to set the font-size for the menu-space div the same:

    #menu-space div{ position:relative; font-size:75%; height:3em; background:#AAAAAA; }

    That's because this empty div is holding the space on the page for the menu to sit over. The menu is 3em high, 75% font-size, so the div has to be the same. Doh!

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    excellent, that makes

    excellent, that makes sense.

    Now, within the center column, I'd like to lay out divs - like in the main page, I'd like to have the two small pics stack one on top of the other and shift to the right of the big pic.

    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text pic one pic three

    I guess I'm still unclear how you laid out the three columns. Would I set up another section like that?

    Is Outer the whole page, and left and right sit on it, in the margins I've carved out with
    margin-left:150px; /*** Left Column Width ***/
    margin-right:200px; /*** Right Column Width ***/

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Ok, before coding it,

    Hi

    Ok, before coding it, there is a decision to be made. Assume the piccies are where you want them and the text starts off on the left as you want.

    What happens if the text is longer than the piccies?

    Do you want it constrained to a column like effect (not to be recomended, as, at narrower screen res this might mena a narrow but very long column of text), like this:

    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text
    Text text text
    Text text text
    Text text text
    Text text text
    Text text text
    Text text text

    OR

    Do you want the text to wrap under the images (recommended)? Like this:

    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic two
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text pic one pic three
    Text text text Text text text
    Text text text Text text text
    Text text text Text text text
    Text text text Text text text

    CT

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi I shall be away for a

    Hi

    I shall be away for a few days, so I will leave you with some code to play with. I would note that your images are quite big and wide (I wouldn't have them so big myself) and at narrower screen resolutions this solution looks odd (just resize your browser to about 1000px wide):

    html:

    Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ
    Colonial Style Railing, professional building - Pennington, NJ Three-Line Picket waterfront fence, mid-rise apartments - Weehawken, NJ

    For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

    From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

    Our products are maintenance-free – they will not rust and are UV and saltwater resistant – easy to install, and more durable and stylish than wood or vinyl. Custom-fabricated, welded systems allow for evenly spaced posts and pickets that enhance visual appearance and eliminate field modification during installation. Cast sleeves provide built-in adjustability and match one of six top rail profiles. Polyester resin finishes are superior to painting and anodizing and available in 8 standard colors or custom color matches.

    Alternating picket heights and accessories – various final and end-cap options, and special designs offer the opportunity to create a unique visual appearance and more custom look.

    Coming soon – Carfaro’s new modular system, a competitively priced option for residential developers and architects.

    css:

    .big-pic { float:right; display:inline; margin-right:5px; width:275px; } .little-pic { float:left; display:inline; clear:left; width:250px; } #little-pic-box{ float:right; display:inline; margin-right:5px; } * html .big-pic, * html #little-pic-box { margin-right: 2px; } /* IE margin-right float bug fix */

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    definitely like this.

    definitely with the text wrapping around the pictures.

    I don't know what I did, but all of a sudden, things look totally screwy in IE

    can you take a look?
    http://www.carfaro.com/new/index.php

    nevermind, I figured that part out.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I think I have a handle on

    I think I have a handle on the menu problem so that's cool.

    I'm curious what I would have to do to switch the pics so that the longer one is on the left and the two small ones are on the right.

    I'm also curious about something. If you go here:
    http://carfaro.com/new/index.php?section=5

    in Firefox, the links aren't clickable, but in IE they are. I'm doing a simple include based on the section variable.
    I tried using a php file instead of html but neither seemed to care about it.

    • Two Line
    • Three Line
    • Four Line
    • Drive Gate
    • Fixed Top Gate
    • Walk Gate
    • Walk Hardware

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi The side menu problem

    Hi

    The side menu problem first.

    It is because the drop down menu is actually taller than it appears and is lying over the menu you have made in the left sidebar. Sort of like a cellophane cover over your links. Why IE allows you to click the links, I cannot be sure, but I have seen this before and found no effective solution. In your case, you can only move the menu (the .menu class) over (give it a left-margin of) 150px.

    As to swapping the images, cut the big-pic image tag in the code I gave you and paste it after the little-pic-box div.

    CT

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    rather not move the menu

    I'm growing to like the menu all the way across, I'd rather keep it there.

    Should I just move the links down the left column a little with a bunch of paragraph and   tags?

    I tried putting some code in on the right and the menu's jump all over the place. I have to go back through the posts and see what you said, because I think this happened when I tried an include on the left the first time. The whole top section moves, it's weird.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi I'll have a poke around

    Hi

    I'll have a poke around to see if there is a solution to the overlap problem. I suspect some javascript may be needed.

    As to the other problem, I would have to see it in action.

    CT

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    ClevaTreva wrote:I'll have a

    ClevaTreva wrote:
    I'll have a poke around to see if there is a solution to the overlap problem. I suspect some javascript may be needed.

    Hi

    I have found a solution to the menu overlap thing (non-clickable link below) that doesn't have this problem, but I shall have to play with it to make sure it is OK.

    CT

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi The original code for

    Hi

    The original code for that menu was made by Stu Nicols at cssplay.

    I have gotten a couple of menus from him that work with the link in the left bar, so I'm gonna strip them down and let you choose from which one you want. I doubt that it will involve much new coding on your part.

    I'll be back.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    After all that, I spotted

    After all that, I spotted the problem!

    Doh!

    In the menu class css, take out the red bit below:

    .menu { position:absolute; z-index:1; top:80px; font-size: 75%; padding-bottom: 200px; font-weight:bold; }

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I'll check that out

    I don't know what I did, but in Firefox and IE7 it looks fine.

    IE6, it's a mess!!! All I did was add some pages, I didn't change any of the index.php code.
    grrrrr

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    And the question is ... I

    And the question is ...

    I assume you were happy with the progress up till then?

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    yes!

    It was really looking like I wanted it to. I can't tell what I did that is throwing the menu around like that.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Well, I don't have IE6 here,

    Well, I don't have IE6 here, but why not post to a new thread (after all, this one is well too long)? I may be able to look at it (with a url to look at of course).

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Floating Footer

    Things are shaping up nicely - http://www.carfaro.com/new/

    The problem is, if you go here:
    http://www.carfaro.com/new/index.php?section=20

    the footer is jumping around all over the place. Is there anyway to stick it to the bottom of the browser? I don't really want to put in a max height for the div because people's browsers are always going to be different.

    any ideas?
    thanks,
    [email protected] :shrug:

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    I'll take a look later matt

    I'll take a look later matt

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Matt Right at the start,

    Hi Matt

    Right at the start, I asked whether you needed 100% height (which is the way to get the footer stuck at the bottom). You said no. It would take some chopping around to do it.

    Essentially, the content order for this goes:

    Main Content
    Left
    Right
    Footer
    Header

    But, in essence, it can be done.

    It will be a pain, though.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Shoot me

    :jawdrop: :scared: :curse:

    Sorry, that's totally my own fault. I didn't understand what you meant and I had mostly full pages so it never became apparent to me.

    *pulls up sleeves*
    Okay, what do you want me to do first?

    [email protected] - grovelling at the very feet of Godlike ClevaTreva!

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    OK Matt Give me a page url

    OK Matt

    Give me a page url that's likely to typify your site design, and we'll go through it.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 10 years 35 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    likely page

    I think if we can get the index page working, I'll be really happy:)

    http://www.carfaro.com/new/index.php?section=1

    There's space that will show at the bottom of some browsers and not on others depending on their sizing.

    [email protected]
    Thanks man.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 5 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    This threaqd has been pruned

    This threaqd has been pruned and restarts here:

    http://csscreator.com/node/22785