|
CSS - Menu With Lists And Css
Hi,
I'm trying to build a simple menu for a layout in XHTML/CSS. I was thinking about having a list and then giving it a style, such as: Code: <ul class="menu"> <li id="menu_home">Home</li> <li id="menu_about">About Us</li> <li id="menu_contact">Contact Us</li> </ul> But then I would like the CSS to display the "li" items horizontally rather than vertically, and without bullets. Also, having the "Home", "About Us", etc, text replaced with images (CSS). Can this be done? I would really appreciate any guidance with this or any other ideas. Thanks, Ralph Similar TutorialsHello all, I have a site up with a menu that I need to replace. Before I do this, i need a bit more control over the different lists that make up the drop down menus. My goal is to have a unique ID for each list, that allows me to change the width and the position relative to its parent, or trigger. I am not sure what the CSS rules would be to call out each particular list after it has been given a unique identifier. Please see the code below which provides 2 menu lists and what i feel is the related CSS Code. If this code is not all that is needed, please let me know and I can post more of it. Thanks in advance, i know its a simple thing, but after experimenting, i have not been able to get the results I need. Menu Code Code: <ul id="p7menubar">
<li id="about"><a class="trigger" href="../about/index.html">About Us</a>
<ul>
<li><a href="../about/distinctions.html">Distinctions</a></li>
<li><a href="../about/whytmg.html">Why Choose The Monitor Group</a></li>
<li><a href="../about/corevalues.html">Mission + Core Values</a></li>
<li><a href="../about/qualifications.html">Unique Qualifications</a></li>
<li><a href="../about/ourclients.html">Our Clients</a></li>
<li><a href="../about/professionals.html">Our Professionals</a></li>
<li><a href="../about/faq.html">FAQ's</a></li>
<li><a href="../about/careers.html">Careers</a></li>
<li><a href="../about/contact.html">Contact</a></li></ul></li>
<li id="services"><a class="trigger" href="../clientservices/index.html">Client Services</a>
<ul>
<li><a href="../clientservices/IWMP.html">Integrative Wealth Management</a></li>
<li><a href="../clientservices/invplanning.html">Investment Management</a></li>
<li><a href="../clientservices/blueprint.html" >Personal Financial Blueprint</a></li>
<li><a href="../clientservices/estateplanning.html">Wealth Transfer + Estate Planning</a></li>
<li><a href="../clientservices/taxplanning.html">Wealth Enhancement, Tax Planning and Reporting</a></li>
<li><a href="../clientservices/protection.html">Wealth Protection</a></li>
<li><a href="../clientservices/philanthropy.html">Philanthropic Giving</a></li>
<li><a href="../clientservices/fees.html">Fee Schedule</a></li></ul></li>
CSS Code: Code: /*Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward pointing arrow.*/
#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(../p7_cssexpress/p7exp/images/p7PM_dark_south.gif); background-repeat: no-repeat;
background-position: right center;
}
/*The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional.As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text.*/
#p7menubar li { float: left;
width: 8em;
}
/*Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers.
*/
#p7menubar li ul, #p7menubar ul li {
width: 16em;
text-align: left;}
/*
The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links.*/
#p7menubar ul li a {
color: #006600;
border-left: 1px solid #333;
padding: 3px 12px 3px 15px;
border-right: 0px;
border-bottom: 1px solid #333333;
}
/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over.Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned.*/
#p7menubar li ul {
position:
absolute;
display: none;
background-color: #ffffff;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
color: #006600;
}
Here is a menu I am trying to build. I used different background colors to see what sections are doing what. Essentially what I am trying to achieve is that the menu items defined by the <li> (green) tag have text vertically centered in them and be the same height as the ul section (yellow). Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
body { background: black; }
#level0 {
background: red;
clear: both; } /* end #level0 */
#level1 {
background: orange;
width: 957px;
margin: auto; } /* end #level1 */
#level1 ul {
background: yellow;
clear: both;
text-align: right;
border-right: thin solid #cfcfcf;
margin: 0;
padding: 0;
height: 40px; } /* end #level1 ul */
#level1 ul li {
background: green;
line-height: 40px;
font-size: 12px;
padding-top: 13px;
padding-bottom: 13px;
vertical-align: middle;
border-left: thin solid #cfcfcf;
text-align: right;
margin: 0;
color: #9f9f9f;
padding-left: 1em;
padding-right: 1em;
display: inline; } /* end #level1 ul li */
#level1 ul li.active { background: blue; } /* end #level1 ul li.active */
#level1 ul li a {
background: purple;
color: #9f9f9f; } /* end #level1 ul li a */
#level1 ul li a:hover {
background: inherit;
text-decoration: none; } /* end #level1 ul li a:hover */
#level1 ul li.active a:hover {
text-decoration: none;
background: none; } /* end #level1 ul li.active a:hover */
</style>
</head>
<body>
<div id="level0">
<div id="level1">
<ul>
<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li class="active"><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li><li><a href="#">Careers</a></li><li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</body>
</html>
What happens is that this version renders as I want it in Safari, one pixel too high in Opera and Firefox, and several pixels too short in IE. What are some things I can try to fix this behavior so that it is consistent (-ly correct ) across browsers? Again for those that have helped me on other threads I greatly appreciate it. I have used CSS before but this is my first time using it for layout and am struggling with it a bit. Does anyone know how I can fix the gaps on this block level lists? It looks fine on firefox and other browsers but ie6 and ie7 add gaps in between the lists. http://section31.us/study/html/temp...lists_on_ie.php I want to have a list that each listed item has a different image, how can i do this. Thanks Hi... How do I break a single list into multiple columns? The page I'm talking about is http://jordanmeeter.com/?page=links. I'd like to bring the "Other" category up over to the right, next to the rest of the categories. I tried Code: float: left;
width: 200px;
And that kind of did what I want... Not really, though. http://jordanmeeter.com/?page=resources Okay... WTF is that about? I added another article to the "Articles" list... And it moved the section below it down. My CSS for #noindent : Code: .noindent {
float: left;
width: 200px;
margin-left: 0px;
margin-top: 5px;
padding-left: 0px;
list-style-type: none;
}
On the site I am starting, I am following the suckerfish style of using a ul/li menu. That works fine. A little position difference I have to figure out between IE and the real browsers but it does work. Problem I run into is when one of my pages includes a ul in the content. Using the css as is, that ul in content is displaying incorrectly. It should just go down the page but instead goes across the page. In the stylesheet, I tried making two li's, li.menu and li.info. That broke the menu but the content list worked. I tried adding .menu to various other components in the css but couldn't get both to work. I use php to include the code for the menu so I don't have to go to each page if I want to make a change. Could someone give me a hand on making two the two li's work from a style sheet so that both the menu and the content work on that page. Here are the pages. The web page: http://www.cacct.com/new/faq.php The stylesheet: http://www.cacct.com/new/css/sitestyle.css The menu code: http://www.cacct.com/new/php/menu.html This is the first page I built using other methods before changing to stylesheets: You can see what the content should look like. http://www.cacct.com/new/faq.html Thanks tk Hey guys I just coded this list which has sub entries in it as well. It looks fine and works great in FireFox. However, when viewed in IE7 something is different. I am not sure if it isn't the normality, I just know it isn't what I want. I've attached and image of what the problem is, left side is IE and right side is FF. The code I'm using is simply Code: <ul>
<li>Main</li>
<ul>
<li>Sub</li>
</ul>
</ul>
Thanks On my website, the left nav. bar is made using a list. The list has a border round top, bottom, right & left, and has a blue hover colour. The list however, does not display tight up against each other, and takes a line between each list item. I'd like it to be right above and below one another rather than a gap in between. You can view the list on the site, HERE. The CSS for the nav. bar is: Code: /*-----LEFT MENU-----*/
#leftcontent {
width: 120px;
}
#leftcontent ul {
margin-left: 8px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#leftcontent a {
padding: 0px;
padding-left: 2px;
padding-top: 1px;
padding-bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
display:block;
}
#leftcontent img {
display:inline;
padding:0;
border:0;
margin:0;
}
#leftcontent a:link, #navlist {
color: #000;
text-decoration: none;
}
#leftcontent a:visited {
color: #000;
}
#leftcontent a {
color: #000000;
}
#leftcontent a:hover {
background-color: #369;
display:block;
color: #fff;
}
#leftcontent img a:hover{
display:inline;
padding:0;
border:0;
margin:0;
}
/*----END LEFT MENU----*/
Note: The img hover, bg colour etc. is so it does not use the same properties as when I open the page up in my content management system it uses small icons, which would use the list properties if I did not define it as an image. Please just ignore it. Cheers. Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format: Code: <ul>
<li>shirts</li>
<li>jackets
<ul>
<li>casual jackets</li>
<li>formal jackets</li>
</ul>
</li>
<li>suits</li>
</ul>
And I would like to render it something like: Code: shirts jackets > casual jackets formal jackets suits All the text needs to be floated left so it will wrap to the next line. I'm able to float the top level list items correctly i.e. "shirts jackets suits" using: Code: <ul id="menu">
<li>shirts</li>
<li>jackets</li>
<li>suits</li>
</ul>
#menu, #menu ul {
list-style:none;
}
#menu li {
float: left;
width:5em;
}
the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like: Code: shirts jackets suits
casual jackets
formal jackets
Maybe this just isn't possible but if anyone could help me I'd sure appreciate it! Thanks! Toby To make this easier on everyone, I've turned my idea into an image, so please see the image I attached. I'm absolutely horrible with CSS, so I just need some help with converting that image into CSS/HTML. I'm hoping to have each box an unordered list, so they are still organized nicely even if someone has CSS disabled. Thanks. Question? Okay I know IE for some reason defaults with a left-padding or something for an unordered list. so when I set padding:0 for my unordered list everything is great in firefox. But when I look at it in IE the list-style elements are pulled off of the list object. How can I place no padding on the list and still use the list-symbols in IE? The thought of placing my own list object in the background, but it would be silly if I could just use the disc built into windows ie. thanks! Hello! I've got a funky IE issue. I'm using IE9 with the compatibility view turned on for this one website. I've got a <ul> lists with hover states. It's acting odd. If I drag my mouse down from the top of the link, the hover state triggers. If I come from the bottom of the link, it doesn't. Do you think this has to do with a transparent PNG? Really appreciate any words of wisdom on this subject. i am trying to get the list to show over two lines like so (using _ as multiple spaces get turned on to one) how do i get both centered. _____item1____item2____item3 item4____item5____item6____item7 Code: <div class="homebodytext"> <ul> <li class="homebodylifloat">item1</li> <li class="homebodylifloat">item2</li> <li class="homebodylifloat">item3</li><br style="clear: both;"><br> <li class="homebodylifloat">item4</li> <li class="homebodylifloat">item5</li> <li class="homebodylifloat">item6</li> <li class="homebodylifloat">item7</li><br style="clear: both;"> </ul> </div> Code:
.homebodytext { border: 0px solid #0000;
text-align: center;
width: 900px;
padding-left: 20px;
font-weight:bold;
}
.homebodylifloat {
float: left;
width: 220px;
}
Hi, I have a list item that extends onto a second line. How do I keep the second line the indented more than the first line? thanks -S I have a couple of nav lists that I'm trying to position. For the first part, in FF the top list (home|site map|help) is not positioning at the top of my div. I want it aligned at the top with no margin or padding so it's flush. I have included a link which shows an image of how I want it to look. The site is APOD The way I want it to look is HERE The CSS is : Code:
#hright {
width: 240px;
height: 66px;
float: right;
text-align: right;
padding-top: 0;
}
#hright ul {
list-style: none;
}
#hright ul li {
display: inline;
}
HTML Code: <div id="hright"><ul><li><img src="images/apod_new_04.gif" alt="home" title="home"/></li><li><img src="images/apod_new_05.gif" alt="site map" title="site map"/></li><li><img src="images/apod_new_06.gif" alt="help" title="help"/></li></ul> </div> The second issue arises in IE. I have another horizontal list, that I want to appear on the same line. In FF it's behaving properly, but in IE it's not. The CSS is: Code:
#hnav {
width: 740px;
height: 29px;
clear: both;
background-color: #FFFFFF;
padding: 0;
text-align: left;
}
#hnav ul {
list-style: none;
padding: 0;
text-align: left;
}
#hnav ul li {
display: inline;
padding: 0;
text-align: left;
}
The HTML is: Code: <div id="hnav"><ul><li><img src="images/apod_new_08.gif" alt="About Us" title="About Us"/></li><li><img src="images/apod_new_09.gif" alt="News" title="News"/></li><li><img src="images/apod_new_10.gif" alt="High School" title="High School"/></li><li><img src="images/apod_new_11.gif" alt="College" title="College"/></li><li><img src="images/apod_new_12.gif" alt="Contact Us" title="Contact Us"/></li></ul></div> There's probably a better way to do this than I'm trying and I'm open to any suggestions. hello guys !!! i am using list in a website. i am using list-style-image property to set the image for lists, like Code: list-style-image:url(img/bluestar.png); problem is that the spacing between two list items is too much, how to reduce that ??? Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, Hi, can anyone give me a hand with customizing my lists? I am trying to do something like here, http://www.microsoft.com/, but with a semi-transparent background in the nav bar. It works if I have borders around the links, which is fine if I had a solid bg as I can hide them, but being semi-transparent I have a problem, and when I remove them it causes a shift when moving over a link. Any ideas?? |
|||||||