|
CSS - Css Text Based Menu
Hey everyone.
I am new to CSS and the forum, thus slightly overwhelmed with a project I am undertaking to produce a CSS menu. The menu is text based, vertically stacked and has two main criteria: 1. On mouse over one of the text buttons (Work for example) to the right or underneath a hidden DIV appears with a selection of sub options. 2. When the above occurs, the text of the Work menu changes to a specific colour. Eg: Work - HIMALAYAS | LIONS EDITORIAL About Links Blog At the moment I am using the following code to show and hide: <a href="#"onmouseover="showhide('script'); return(false); ">WORK</a> <div style="display: none;" id="script"> <a href="ps">HIMALAYAS</a> <a href="l">LIONS EDITORIAL</a> </div> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> Can anyone help me out? Ray. Similar TutorialsHi All, I'm in the process of building my very first CSS-based site, and I'm having some challenges with getting the nav menu to render and function properly. I'm using the Pixy rollover technique, and I've modeled my code after several sources, since none of the sources exactly match what I need to do for this site. I'm sure my code is probably pretty messed up, but I don't have enough experience yet to determine how and where. I'm using Dreamweaver CS3 to create the code/pages. There are three main issues: 1. The nav menu is not placed correctly on the page (it's too high in Firefox, and too low in IE) 2. The links for the nav buttons are not rendering 3. The rollover states for the nav buttons are not rendering Here's the relevant code as it's presently constituted: Code: CSS .twoColLiqLtHdr #mainContent {
margin: 5px 20px 0 291px;
background-image: url(../assets/structure/main_background.png);
width: 638px;
height: 622px;
background-repeat: no-repeat;
position: relative;
}
#mainContent #navMenu {
width: 636px;
height: 60px;
background-image: url(../assets/navigation/navigation_buttons.png);
background-repeat: no-repeat;
}
#mainContent #navMenu ul {
margin: 0;
padding: 0;
float: left;
}
#mainContent #navMenu li {
float: left;
}
#mainContent #navMenu li a {
display: block;
}
/*nav menu up*/
#mainContent #navMenu li#services a:link {
background-position: 0 0;
}
#mainContent #navMenu li#faq a:link {
background-position: -167px 0;
}
#mainContent #navMenu li#about a:link {
background-position: -272px 0;
}
#mainContent #navMenu li#contact a:link {
background-position: -422px 0;
}
/*nav menu over*/
#mainContent #navMenu li#services a:hover {
background-position: 0 -60px;
}
#mainContent #navMenu li#faq a:hover {
background-position: -167px -60px;
}
#mainContent #navMenu li#about a:hover {
background-position: -272px -60px;
}
#mainContent #navMenu li#contact a:hover {
background-position: -422px -60px;
}
/*nav menu down*/
#mainContent #navMenu li#services a:active {
background-position: 0 -120px;
}
#mainContent #navMenu li#faq a:active {
background-position: -167px -120px;
}
#mainContent #navMenu li#about a:active {
background-position: -272px -120px;
}
#mainContent #navMenu li#contact a:active {
background-position: -422px -120px;
}
Code: XHTML <div id="mainContent">
<div id="navMenu">
<ul>
<li id="services"><a href="services.html"></a></li>
<li id="faq"><a href="faq.html"></a></li>
<li id="about"><a href="about_us.html"></a></li>
<li id="contact"><a href="contact_us.html"></a></li>
</ul>
</div>
</div>
I'd be happy to post links to my nav menu image and uploaded code, but I can't yet since I'm a new user. If anyone who thinks they can help wants to see them, please let me know and I'll send the links in a PM (provided I can do that). Thanks in advance for any help provided. I've been working on this issue for almost 8 hours, and I'm ready to move on to the next one. Sam Hello! I am putting the finishing touches on a website for a client of mine, and even though the main menu works perfectly in Firefox 3.0.10, IE 7 and IE 8 both appear to add a CR/LF to the end of each menu button. The menu is CSS based, and uses ul and li tags. Here is the CSS Code: Code: @charset "ISO-8859-1";
#nav {
list-style: none;
margin: 0;
padding: 0;
}
/* This keeps the menu from interfering with the main content. */
#nav + *{
clear: left;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
z-index:99;
position:relative;
overflow:visible;
display:inline;
}
#nav > li ul {
text-align: center;
display:inline;
list-style-type:none;
}
#nav li { /* Appearance settings (eye candy) */
position: relative;
background: #E7E7E7;
/* background: url(trans/white80.png);*/
color: #00F;
border: solid 1px #AAA;
height: auto;
width: 6.5em;
max-width: 6.5em;
overflow: hidden;
font-weight: normal;
}
#nav ul ul {
width: 8em;
}
#nav > li {
margin: 0;
float: left;
text-align: center;
height: 3em;
overflow:hidden;
}
#nav a {
text-decoration: none;
padding: 0 0.5em;
line-height: 1.2em;
background: transparent;
color: inherit;
overflow: hidden;
}
#nav li li a {
line-height: normal;
/* TEST: Is This Better?
/* padding: 0.25em 0.5em; */
}
/* #nav ul, #nav li, #nav a{
* display: block;
}
#nav ul{
visibility: hidden;
}
/* (sub-)submenus */
#nav ul ul, #nav ul ul ul{
position:absolute;
top: 0;
left: 95%;
visibility: hidden;
}
/* Shadow! */
#nav li:hover {
/* border-style: outset;*/
/* background: #D7D7D7;*/
background: #1AD;
color: white;
}
#nav > li ul {
/* background: #666;*/
background: transparent url("trans/black40.png");
}
#nav > li > ul {
margin: -1px; /* This is to make the width equal to parent li width. */
position: relative;
top: 4px;
left: 4px;
}
#nav > li ul li {
position: relative;
top: -4px;
left: -4px;
}
/* end shadow */
/* Enlarger */
/* #nav > li {width: 8em;} */ /* popping disappears if we use a fixed-width */
#nav > li:hover {
margin: -0.2em;
padding: 0.2em;
z-index: 2; /* Opera does not seem to respect this. */
}
#nav > li:hover > a {
margin: -0.2em;
padding: 0.2em 0.7em;
}
/* end enlarger */
/* Interactive lines: show/hide menus */
#nav li:hover ul ul, #nav li:hover ul ul ul{
visibility: hidden;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
visibility: visible;
}
.skipnav {
display: none;
}
#nonav {
display: block;
background: transparent;
height: 1px;
border: 0;
margin: 0 0 -1px 0;
padding: 0;
}
Here is the other file: Code: <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="/style/MainMenu.css"> <title>Main Menu</title> </head> <ul id="nav"> <li><a href="index.php">Nova Health Center Home</a></li> <li><a href="drtoufigh.php">About Our Doctor</a></li> <li><a href="approach.php">About Our Approach</a></li> <li><a href="clients.php">Client Testimonials</a></li> <li><a href="nutrition.php">Nutrition Information</a></li> <li><a href="faq.php">Questions And Answers</a></li> <li><a href="directions.php">Directions & Office Hours</a></li> </ul> </html> Can anybody tell me what I need to change to make the menu render correctly in IE 7/8? I have made both files pass W3C Validation, consulted Google, researched IE CSS bugs and after many hours of failed attempts, I figured it would be quicker to ask here. I know that the rest of the site is not W3C compliant (yet); however, all I need for now is to fix this one bug so I can show it to my client in IE as well as FF. Thanks in advance for any assistance you can provide! Regards, Riley F. Marquis III Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution. We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo Im trying to make a link that is based on 2 images, one for the un-hovered or normal state, and the other for the hover state. I just did 2 of these at 3dotmedia.com/redesign and now I'm trying to do the same thing at greedydogkennel.com/redesign but it WILL NOT WORK. I am totally stumped, it has to be something to do with the positioning inside my css I assume... on the page, I want the pictures of the dogs to be normal, but when hovered I have a frosty shaded grey image (as in some kind of lighting) to serve as the hover state..I am masking the a href with a class with a transparent .gif (since SOMETHING has to serve as the object of the anchor yes?) but here is my css: .rock-link {background-image: url(looks/Rock_small_w_frame.jpg); } .rock-link:hover {background-image: url(looks/Rock_small_w_frame-up.jpg); } .suade-link {background-image: url(looks/Suadey_Ladysmall_w_frame.jpg); } .suade-link:hover {background-image: url(looks/Suadey_Ladysmall_w_frame-up.jpg); } and the HTML is as follows: <a href="suade.html" class="suade-link"><img src="looks/seethru2.gif" border="0"/></a> <img src="looks/spacer2.gif" border="0" /> <a href="rock.html" class="rock"><img src="looks/seethru.gif" border="0" /></a></div> but there is nothing that displays, only the transparent .gif on the index page you will not see any images under the heading "The Dogs" because this is where the problem is, but if you click on any of the links you will see the pages where I have not applied the class for the a href to take on the hover states, just so you can see how the images look and where they appear. I have done this so many times, and my code is IDENTICAL at 3dotmedia.com/redesign and it works fine...any help would be GREATLY appreciated...it has to be something Im missing, but WHAT?!?!? thanks. Hi, I am trying to achieve a layout which uses unordered lists. Within the LI, there is an image and some text. The images are all different heights though. The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind. I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!! Here is what I'm trying to achieve: http://www.joshsphotos.com/user_interface/final_look.gif Here is the HTML at present: http://www.joshsphotos.com/user_interface/ And the CSS: http://www.joshsphotos.com/user_interface/css/style.css Thanks! I'm having a problem getting the text of an <a> tag to be what I want where I want. No one in the javascript forum wants to tackle this. maybe it is a css thing. I made this interlocking tabbed menu which I do by javascript updating the position of the background graphic and its neighbor. I have done buttons before with a background and text overlayed. but they were always <input>'s and whatever I put in the value field just kinda showed up on top of the background graphic. These are actually <a>'s I assumed the text I put in between the <a> and the </a> tag would just show up but it doesn't. I tried making special divs for them but then I run in to position problems. If I make it absolute the first one is fine, then they all pile on top of it. If I make it relative, NONE of them show. Here is a test http://colleenweb.com/tests/bartest.php There is nothing like css for turning my brain into industrial waste. This has to be doable. Someone who understands this stuff please advise? Hi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he http://www.abhiram.astahost.com/trialcss/index.html and the CSS file is: http://www.abhiram.astahost.com/trialcss/mystyle.css Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button. Thanks a lot. Hey folks, strange issue here. despite the fact that i've set the z-index to 400 for the vertical drop down part of the menu, it's still being displayed underneath some of the text in the content part of the page. here's the menu style: Code:
#leftmenu {
width:150px;
min-height:500px;
position:relative;
left:0;
top:1px;
background:#e5e5e5 url(images/menu_bg_left.gif) repeat-y;
float:left;
text-align:left;
font-size:8pt;
}
* html #leftmenu {
height:1px;
}
.lefttop {
width:150px;
height:40px;
background:url(images/menu_top_left.gif) no-repeat;
}
.leftbottom {
width:150px;
height:40px;
background:url(images/menu_bottom_left.gif) no-repeat;
}
ul#nav, ul#nav ul {
list-style: none;
width: 130px;
}
ul#nav li {
position: relative;
}
li ul.secondary {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: #EFEFEF;
z-index:400;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:white;
background-color:#C4E500;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #C4E500;
padding: 4px;
color:#333;
border-bottom:1px solid #d1d1d1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
you can see what i'm talking about here. thanks Any ideas why the text isn't showing up in the main site menu (top left hand side of screen): http://www.thepartyparty.ca Take a look in Firefox and then IE. Firefox works wonderfully (surprise), IE shows no text. Any suggestions? Ryan Hello, I have a vertical menu on the left hand side of my page that I'm working on. I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment. Here's the code I'm using for the menu: Code:
#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}
#menu li {
margin-bottom: 4px; /* space between each menu item */
}
#menu li a { /* text */
font-weight: bold;
height: 25px; /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
If anyone could help me out that'd be great. Thanks! Hey, i've had this issue for some time now with no resolve... see here I have tried adding a background image to the menu, but to no avail. Here's the menu CSS; Code:
#leftmenu {
width:150px;
min-height:500px;
position:relative;
left:0;
top:1px;
background:#e5e5e5 url(images/menu_bg_left.gif) repeat-y;
float:left;
text-align:left;
font-size:8pt;
}
* html #leftmenu {
height:1px;
}
.lefttop {
width:150px;
height:40px;
background:url(images/menu_top_left.gif) no-repeat;
}
.leftbottom {
width:150px;
height:40px;
background:url(images/menu_bottom_left.gif) no-repeat;
}
ul#nav, ul#nav ul {
list-style: none;
width: 130px;
}
ul#nav li {
position: relative;
}
li ul.secondary {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: #EFEFEF;
z-index:400;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:white;
background-color:#C4E500;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #C4E500;
padding: 4px;
color:#333;
border-bottom:1px solid #d1d1d1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
thanks! I am learning to do drop down menus and so far, so good. What I cannot figure out is that in the drop downs the text seems to be indented. For example, if the text said "New information", the "New" part starts what appears to be a few spaces to the right. I did, most recently, set the text to be centered but it still does this. The effect is that if the text wraps to a second line, then the second line is further to the left. Looks odd to me but I can't figure out how to fix it. Thanks for any help. Richard Hello, I've always made my menu buttons with the text built into the image but is there a better way to do it? Thanks for the help. Hey guys, I searched for this but didn't find an exact answer. I'm working on a really weird navigation header and have run into what should be a really basic problem. I have everything working except for the submenus. I want them to have a red background when rolled over, but white text. No matter what combination I've tried in the code, I cannot achieve this. What gives? You can see what I mean by going he johngibby[dot]com/blbr/ (sorry admins, but it's too complicated to explain without showing it) the CSS is Code: #navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 0;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color:#FFF;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
color: #000; }
#navbar li li a:hover {
background-color: #eb1b24;}
/*dropdown list item positioning*/
#navbar li.facility {
top:-28px;
left:73px;
position:relative;
}
#navbar li.membership {
top:-90px;
left:78px;
position:relative;
}
#navbar li.contact {
top:-126px;
left:80px;
position:relative;
}
#navbar li.teams {
top:-122px;
left:360px;
position:relative;
}
#navbar li.camps {
top:-85px;
left:360px;
position:relative;
}
#navbar li.links {
top:-38px;
left:360px;
position:relative;
}
#navbar ul.facilitydropdown {
position:relative;
top:50px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
#navbar ul.membershipdropdown {
position:relative;
top:60px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
#navbar ul.teamsdropdown {
position:relative;
top:60px; left:-20px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
#navbar ul.campdropdown {
position:relative;
top:60px; left:-20px;
font-family:Verdana, Geneva, sans-serif;
font-size:.7em; }
Thanks! I have googled; I have read; I have read some more.... </popeye>That's all I can reads and I can't reads no more!</popeye> a {text-decoration:none} YEA! ....now; what if I only want to remove the underline on links in my menu and NOT the whole freakin' document???? lol..sorry I just spent the last three hours trying to fix this and no luck so far. the DOCTYPE is XHTML STRICT. Hi, I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter. The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space. The code for this element: Code:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*change for IE6*/
/*width: 7em;*/
/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/
/*
width: auto;
min-width: 40px;
*/
float: left;
}
Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically. After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible? Thanks. i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; hey guys, im not the greatest with css and html but i do it for fun to try and teach myself. Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down. The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc) and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating. What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big. Here is my CSS for the drop. Code: #nav li ul {
background: #FCDFFF;
background-image: url('images/background.png');
border-style: ridge;
border-width: 5px;
border-color: #000000;
margin-top: 0px;
position: absolute;
font-size: 95%;
width: 11em;
left: -999em;
line-height: 2;
z-index: 999;
}
anybody know how I can do what Im looking for? Thanks in advance! |
|||||||