SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Horizontal Menu

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Menu

    I have a bottom div I might use for a sub horizontal menu.

    I wanted the B image to actually appear over the top border color I have set on the second div.

    How do I position the menutabB.gif to actually appear over the border pixel. The background color of this tab image is the same as the bottom div sections background color.

    Code:
    <div style="position: relative; background: #FFF; width: 100%; height: 40px; text-indent: 200px; margin-bottom: -2px;">
    <img src="images/menutabA.gif"><img style="position: relative; top: 5px;" src="images/menutabB.gif"><img src="images/menutabA.gif"><img src="images/menutabA.gif"><img src="images/menutabA.gif">
    </div>
    
    <div style="border-top: 1px solid #0061AF; border-bottom: 1px solid #0061AF; position: relative; background: #B9F1FE; width: 100%; height: 20px; margin-top: -12px;">
    </div>
    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh.. wow, did you just have that on the top of your head?

    I know it could stir a hornet's nest, but unless you have ALL of your available time to work on tabless css designs, I am starting to think the world is not ready for tableless website design.

    Sad but true..
    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it is possible to use CSS and tableless designs. And without resorting to obscure class and ID names, hacks and conditional comments that deliver styles to one browser while hiding them from the others as all4nerds has done with his example.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was respondign to danjojo, not you.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah.. even if you look at my own reference site in my sig. I too do Tableless css design but it is not *stellar*.

    I always *ALWAYS* try to avoid any hack, as I don't like planting time-bombs in my code.

    I was however very impressed with how fast you got that to work all4nerds.
    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example from scratch of a very common menu type, the second line will be where the sub-menu items get populated.
    It looks and acts the same in IE7, FF 2, Opera 9, and the new Safari for windows.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>SMC Corporation of America - Global Automation Experts</title>
    <link href="SMCLayout.css" rel="stylesheet" type="text/css" />
    <link href="SMCStyles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    margin-top: 20px;
    }
    #fullHorizMenu {
    background: #B9F1FE;
    height: 30px;
    width: 100&#37;;
    }
    #menuTabs {
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 250px;
    }
    </style>
    </head>
    <body>

    <div id="menuTabs">

    </div>

    <div id="fullHorizMenu">

    </div>
    </body>
    </html>
    MY Idea would be that from here, I can place the Tab images into the top div, yet 1 of those images would/should be able to slide down a pixel or two over the 2nd row menu to blend with it's background color, sort-of the selected tab look...
    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another approach. This code behaves the same in all 4 browsers with no hacks. One tab image will be able to be change with DOM scripting to slide into each position as needed.

    The only browser I cannot test this in is IE 6+

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>SMC Corporation of America - Global Automation Experts</title>
    <link href="SMCLayout.css" rel="stylesheet" type="text/css" />
    <link href="SMCStyles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    margin-top: 20px;
    }
    #fullHorizMenu {
    background: #B9F1FE;
    height: 30px;
    width: 100&#37;;
    border-top: 1px solid navy;
    margin-top: 60px;
    }
    #menuTabs {
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 630px;

    }
    .menuImg {
    margin-top: -30px;
    position: absolute;
    }
    </style>
    </head>
    <body>
    <div id="fullHorizMenu">
    <img class="menuImg" style="margin-left:170px;" src="images/menutabA.gif">
    <img class="menuImg" style="margin-left:291px;" src="images/menutabA.gif">
    <img class="menuImg" style="margin-left:412px;" src="images/menutabA.gif">
    <img class="menuImg" style="margin-left:533px;" src="images/menutabA.gif">
    <img class="menuImg" style="margin-left:654px;" src="images/menutabA.gif">

    <img class="menuImg" style="margin-left:533px;" src="images/menutabB.gif">
    </div>
    </body>
    </html>
    I would like to plan to just slide the menu tab text dynamically at a fixed font size over the appropriate tab. This will allow the design to be flexible in the future where tab names can change or be reordered.

    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The down-side's to this design.

    It is based on Image backgrounds which are not flexible enough in that they do not scale to the font-size or length of text.

    The entire set of image tabs do not center on the page, nor re-center on browser resize.

    Anyone have a non-hack solution?

    Also the code can be shortened since we can use dom-scripting to simply rename an img file name as needed.

    Code:
    <style type="text/css">
    #fullHorizMenu {
    	background: #B9F1FE;
    	height: 22px;
    	width: 100%;
    	border-top: 1px solid navy;
    	border-bottom: 1px solid navy;
    	margin-top: 44px;
    }
    .menuImg {
    	margin-top: -30px;
    	position: absolute;
    }
    .menuText {
    	margin-top: -20px;
    	position: absolute;
    }
    </style>
    <div id="fullHorizMenu">
    	<img class="menuImg" style="margin-left:170px;" src="images/menutabA.gif"><div class='menuText' style="margin-left:180px;">About Us</div>
    	<img class="menuImg" style="margin-left:291px;" src="images/menutabB.gif"><div class='menuText' style="margin-left:301px;">Actuators</div>
    	<img class="menuImg" style="margin-left:412px;" src="images/menutabA.gif"><div class='menuText' style="margin-left:422px;">Valves &amp; Manifolds</div>
    	<img class="menuImg" style="margin-left:533px;" src="images/menutabA.gif"><div class='menuText' style="margin-left:543px;">Airline Equipment</div>
    	<img class="menuImg" style="margin-left:654px;" src="images/menutabA.gif"><div class='menuText' style="margin-left:664px;">Fittings &amp; Tubing</div>
    </div>
    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fyi

    Hello again, future readers of this thread.

    Another rounded corners solution out there is completely javascript driven.
    (My intranet site uses javascript, so no big)

    Demo Link:
    http://www.stilbuero.de/jquery/tabs/#fragment-3
    http://www.jojowebdesign.com
    "In the end, more is actually said, than done.."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •