Help with CSS menu?

User 2168940 Photo


Registered User
49 posts

Hi everybody,

I have a notion for a CSS tab menu, and have copied the CSS & HTML code below. The thing is, I want to have the tabs hanging below the line, as in the attached image.

Can someone help me modify the CSS code?

HTML
<div id='logstyle'>
<ul>
<li class='active'><a href='register.php'><span>Register</span></a></li>
<li><a href='LogIn.php'><span>Log In</span></a></li>
<li class='last'><a href='Guest.php'><span>Guest</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;
</div>


CSS

#logstyle {
float: left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}

#logstyle ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#logstyle li {
display:inline;
margin:0;
padding:0;
}
#logstyle a {
float:left;
background:url('../images/tableftf.gif') no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#logstyle a span {
float:left;
display:block;
background:url('../images/tabrightf.gif') no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#logstyle a span {float:none;}
/* End IE5-Mac hack */

#logstyle .active a span,
#logstyle a:hover span {color:#FFFFFF;}

#logstyle .active a,
#logstyle a:hover {background-position: 0 -42px;}

#logstyle .active a span,
#logstyle a:hover span {background-position: 100% -42px;}
Attachments:
User 2147626 Photo


Ambassador
2,958 posts

I'm not really a 'coder', but this might help ya ...

http://themes.typepad.com/guide/2012/01/hanging-navbar.html
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 122279 Photo


Senior Advisor
14,454 posts
Online Now

You have this line in your css:

border-bottom:1px solid #666;

Try changing that to border-top.

I don't know what your background images for the tabs look like, but you may have to play with the corners if you want them rounded at the bottom left and right. You will get the idea from the link Gunsmoke posted.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2287485 Photo


Registered User
90 posts

To add to this thread in getting help with CSS Menu Builder without starting a new topic, I have a quick question with the menu I'm trying to create for VSD.

I think I understand how to use the menu builder to get started, however each time I create a vertical menu, the sub menus only pop out vertically (overlapping everything below it) when hovering over it. Is there a way for the sub menus to show horizontally to the right side of a vertical menu when the mouse is hovering over it?

Thanks!
User 122279 Photo


Senior Advisor
14,454 posts
Online Now

David, You are obviously talking about the older, flash based, menu builder. The above thread relates to the new one, built into the html Editor.

But with your old menu builder you have no other option. If vertical, then the whole menu sinks downwards when a sub menu is opened, and if horizontal, the submenus come out horizontally below the main menu. Should have been the other way around, shouldn't it? ;)

There is a new menu builder being beta tested right now, and with that it will be possible to have submenues behave as you probably expect.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2287485 Photo


Registered User
90 posts

Thanks for the response Inger. No, it is with the menu builder in the html Editor. I downloaded a free trial of the html Editor to try out the css menu builder that comes with it after reading up a little about it on the CC forums, and how many are moving away from flash.

So again, the vertical menu I created is popping out the sub menus vertically, and not horizontally. When I create a horizontal menu, the sub menus drop down vertically as you might expect.

I am not sure if there is a specific setting or function in the css menu builder that I need to adjust for the direction of the sub menus.

Attached a pic of what it is doing. This is a two subject vertical menu, with the sub menu dropping down instead of popping out to the right.

Thanks again!
Attachments:
User 122279 Photo


Senior Advisor
14,454 posts
Online Now

Here is one I made, see attached. I haven't changed any settings.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2287485 Photo


Registered User
90 posts

Yes, exactly! How did you get it to pop out to the right?? My vertical menus all drop the sub menus. I'm not changing any settings either, just choosing vertical instead of horizontal in the options.
User 2287485 Photo


Registered User
90 posts

I got it! Just went back, deleted all the files and rebuilt from scratch. I think I did accidentally change one setting before however. I unchecked "use fixed width for menu items" under options and this caused my vertical menu to drop down sub menus instead of popping out and displaying them to the right.

Thanks again for your replies!!
User 122279 Photo


Senior Advisor
14,454 posts
Online Now

Good that you were able to solve it. I had the suspicion that you might have changed something in the settings.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.