|
CSS - List Menu And Background Images
If you take at the link below I'm having trouble with the top menu.
http://departments.brooklands.ac.uk/ifp/test/ I'm trying to use background images as buttons with normal xhtml text links. But I can't seem to get the text in the middle of the buttons. I think I may be going about this in the wrong way, so if anyone could take a look that would be great. Thanks Jemes Code:
#topbar{
padding-top:18px;
border: 0px solid #000000;
background-image:url(../images/top.gif);
background-repeat:no-repeat;
height:120px;
margin-left:16px;
}
#topmenu{
margin:32px 0px 0px 30px;
font-size: 10pt;
font-weight:bold;
height:30px;
}
#topmenu ul{
margin:0px;
padding:0px;
list-style-type: none;
}
#topmenu ul li{
padding-right:4px;
}
.home{
float:left;
display:inline;
background-image: url(../images/home.gif);
background-repeat: no-repeat;
height:33px;
width:45px;
}
.active{
float:left;
display:inline;
background-image: url(../images/top_active.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}
.norm{
float:left;
display:inline;
background-image: url(../images/top_norm.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}
#topmenu li a{
text-decoration: none;
color: #AC5BA0;
padding-right: 0.7em;
height:30px;
}
Similar TutorialsAt h**p://www.topofferspage.com in IE6, the bullet points do not have images appearing unlike Firefox. Before anyone says it's because of validation errors, it's not. I can turn off the offending stylesheets just fine and I get the same problem. Little help? Why would background images not work in IE6 but every other browser? I have a fairly simple page that is composes of a header and two cols. The left hand col is the menu which I would like to use with background images but these seem not to work. Any advice is appreciated. [Code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <!--Uncomment the following line and remove the embedded style sheet if your style is external--> <style type="text/css"> body { min-width: 760px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 720px; margin:0 auto; text-align: left; background-color: #CDCDCD; } #branding { width:720px; height:120px; } #content { width: 520px; float: right; } #mainNav { width: 180px; float: left; } ul { list-style: none; margin: 0; padding: 0; } /* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */ #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #000000; font-weight: bold; display: block; background: url(images/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover { color: #257EB7; background: url(images/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(images/menu8.gif) 0 -64px; padding: 8px 0 0 25px; } #footer { clear: both; width: 720px; background-color: #CDCDCD; border: 2px solid; } body{ background-color:#ffffff; } </style> </head> <body> <div id="wrapper"> <div id="branding"> <img border="0" src="images/Top Bar.gif" width="720" height="120" alt="Hawkesley Publishing Solutions"/> </div><!--End Branding--> <div id="content"> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> <p>Spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> </div><!-- End of Content --> <div id="mainNav"> <div id="menu8"> <ul> <li><a href="home.php" title="Home"><b>Home</b></a></li> <li><a href="e-books.php" title="E-Books"><b>E-Books</b></a></li> <li><a href="e-learninig.php" title="E-Learing"><b>E-Learning</b></a></li> <li><a href="hoe.php" title="How To Books"><b>How To Books</b></a></li> <li><a href="about.php" title="About Us"><b>About Us</b></a></li> </ul> </div><!-- End menu8--> </div><!-- End of mainNav --> <div id="footer"> <p>spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam.</p> </div><!-- End Footer--> </div><!--End Wrapper--> </body> </html> [Code] The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Hi, I have an inline menu list. I want the background to be the image, with the text in the html list. However I cant seem to do this. http://img185.imageshack.us/my.php?image=linkfd4.png I tried using: Code:
#leftnav li
{
display:inline;
background-image:url(images/menu.png);
}
But the width of the list item is just the width of the text. It doesn't show the ull background image. I hope someone can help. Thanks in advance. I am going to heck right now trying to get this navigation to work. Here is what it is A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise? Hi, Below is part of my code. Sorry could not upload everything otherwise code would look cumbersome, also could not load images but each image is 234 X 110. What I have is a left column. I firstly want to place a list and then three divs, each div containing an image (with text), that is also a link. I assumed with normal flow the list would appear first and then the divs, one after another. For some reason the divs go to the top of the column and are hidden by the list. I want a normal flow so that the list appears first and then the divs. Any suggestions? I would be grateful for all help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p{
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#left
{ width: 17.38em;
padding: 0;
border: 0.125em solid #FF0000;
}
#left.column
{ text-align: justify;
}
#left ul
{ margin: 0;
padding: 0;
}
#left ul li
{ list-style-type: none;
}
#left ul li a, #left ul li a.first_in_list
{ float: left;
display: block;
width: 16em;
margin-left: 0.4em;
padding: 0.28em 0 0.28em 0.25em;
background-color: #FFD700;
border-top: 1px dotted #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000000;
}
#left ul li a:hover
{ text-decoration: none;
}
#left ul li a:hover span
{ text-decoration: underline;
}
#left ul li a.first_in_list
{ width: 16em;
font-size: 1em;
font-weight: bold;
margin-top: 1.8em;
padding: 0.8em 0 0.8em 0.25em;
border-top: none;
}
#leftVLink, #leftSLink, #leftGLink
{ text-align: right;
border: none;
margin: 0.3em 0 0 1em;
}
#leftVLink a:link,#leftSLink a:link,#leftGLink a:link
{ color: #333;
width: 15em;
height: 7em;
display: block;
font-size: 0.95em;
font-family: Verdana;
}
#leftVLink a:hover,#leftSLink a:hover,#leftGLink a:hover
{ color: #000;
text-decoration: underline;
}
#leftVLink
{ min-width: 14em;
background: #fff url(leftVLink1.gif) no-repeat left top;
margin: 1.5em 0 0 1em;
padding: 0.6em 0.5em 0 0;
}
#leftSLink
{ background: #fff url(leftSLink1.gif) no-repeat left top;
padding: 0.6em 0.5em 0 0;
}
#leftGLink
{ background: #fff url(leftGLink1.gif) no-repeat left top;
padding: 1.4em 0.5em 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left" class="column">
<ul>
<li><a class="first_in_list" href="#">
Shopping Directory</a></li>
<li><a href="#">► <span>Latest</span></a></li>
<li><a href="#">► <span>Phone Finder</span></a></li>
<li><a href="#">► <span>iPhone finder</span></a></li>
<li><a href="#">► <span>Deal Finder</span></a></li>
<li><a href="#">► <span>Phones + FREE gifts</span></a></li>
<li><a href="#">► <span>Shop by brand</span></a></li>
<li><a href="#">► <span>Sim free phones</span></a></li>
<li><a href="#">► <span>Coming soon</span></a></li>
<li><a href="#">► <span>New and exclusive</span></a></li>
<li><a href="#">► <span>Trade in</span></a></li>
<li><a href="#">► <span>Compare phones</span></a></li>
<li><a href="#">► <span>Mobile services</span></a></li>
</ul>
<div id="leftVLink"><a href="#" title="voucher codes and offers">Voucher codes<br />and offers</a></div>
<div id="leftGLink"><a href="#" title="gift ideas: be inspired by our gift ideas">Be inspired by<br />our gift ideas</a></div>
<div id="leftSLink"><a href="#" title="safe shopping: advice for safe shopping">Advice for<br />safe shopping</a></div>
</div>
</div>
</body>
</html>
I'm having troubles with a list menu. The first problem I have is that the menu options dont fill the whole of the menu but do in Firefox. The second problem is that the padding is different in IE and Firefox and I would like them to be the same. If anyone could help that would be great. http://departments.brooklands.ac.uk/wine/example/ Jemes I am having problems with a horizontal list menu. If you take a look at the link below I'm trying to get the top picture, menu and the main content area to all line up vertically. http://www.willisemail.co.uk/skill/ I may be wrong but the list menu seems to be the problem as it never lines up. Any help would be great or a suggestion on how to go about this another way. Thanks Jemes html { padding:0px; margin:0px; } body { background-color: #F5F5F5; font-size: 12px; color: #564b47; text-align:center; margin:0px; padding:0px; } /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: auto; } /*Right Menu End */ .imgRight { text-align:center; margin-top: 10px; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding: 1px; margin:0px; } .Main { margin: 0px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion? Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that. Hi there, hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image. this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves. here is my code but none of the top or bottom background images show. please help, thanking you in advance. css: #feature { float:right; width: 287px; height: auto; } .featuretop { background-image:url(../images/css/featuretop.gif); background-position:top; background-repeat:no-repeat; } .featuremiddle { background-image:url(../images/css/feature.gif); background-position:center; background-repeat:repeat-y; } .featurebottom { background-image:url(../images/css/featurebottom.gif); background-position:bottom; background-repeat:no-repeat; } html code: <div id="feature"> <div class="marTOP10"> <div class="featuretop"></div> <div class="featuremiddle"></div> <div class="featurebottom"></div> </div> </div> Hi Folks, I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins. Is it possible to somehow attach an image to one side of an element? Thanks John Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? Hello, I'm new to Dev Shed, I hope I won't seem like a fool here Is there any way to have to background images? I mean, I want to have a heading background image, and a footer background image to the same table. longing to your replies>>>> K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box. HTML Coding ************* <div id="special_feature_top"> <img src="images/specialfeatures.jpg" width="800" height="30" alt="" /> </div> <div id="special_feature_mid"> <img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" /> <img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" /> <img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" /> </div> <div id="special_feature_btm"> <img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" /> </div> CSS Coding ************* #special_feature_mid { padding: 1px 0px 1px 10px; background-image: url('images/content_bg.jpg'); } That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks Matta I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though. This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background. This is the css: Code: .professor_forum_row {
background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}
.professor_corner_tab {
background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}
the html is just a table with those classes assigned to the row and first td. Any ideas on why this is happening? Thanks, Ryan Hi I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example http://dmumford.bizhat.com/test/list.htm I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense. Could someone please help me! Thank you! I'm embedding menumatic into a joomla 1.6 based website. Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page. Anybody have any ideas about how i can do this? (In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work ) below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment. Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think). Anybody have an idea about how to get around this? I tried to justify the text (that would be fine for my purposes), but it didn't work either. CSS: Code:
#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/
/* ----[ LINKS ]----*/
/* all menu links */
.menuMain a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#036 ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
margin:0;
float:left;
color:#fff;
}
/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
}
/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#06c ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
.menuMain a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
background-color:#06c ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin:0 20px 0 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#036;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
.menuMain li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
margin:0 5px;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
.menuMain{
display:block;
list-style:none;
margin-top:0px;
margin-bottom:0px;
margin-left:40px;
margin-right:auto;
z-index:5;
text-align: center;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{ float:none; }
.menuMain li li a{ /* Just submenu links*/
position:relative;
float:none;
}
.menuMain li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
.menuMain li:hover ul{ margin-left: 0; }
.menuMain li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul { margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }
The menu html (an excerpt) Code: <html> <head> <link rel="stylesheet" href="MenuMatic.css" type="text/css" /> </head> <body> <div id="mainMenu" style="width:950px;"> <ul class="menuMain"> <li id="item-101" class="current active"><a href="/ottest/" >Home</a></li> <li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a> <ul> <li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li> </ul> </li> <li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li> <li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li> <li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li> <li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li> </ul> </div> </body> </html> I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can. I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list. FIRST MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
<ul>
<li><a href="page1.1.html">Link 1.1</a></li>
<li><a href="page1.2.html">Link 1.2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Link 2</a>
<ul>
<li><a href="page2.1.html">Link 2.1</a></li>
</ul>
</li>
</ul>
SECOND MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
</li>
<li>
<a href="page2.html">Link 2</a>
</li>
</ul>
My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu. This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS. The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do. Does anyone out there have an idea of where I can start with this? I'm trying to create a menu using 'list' but so far without much success :-( Problems? Not displaying horizontally in browser. Can't center text in box. Adding 'padding' didn't work. Any help would be much appreciated, Mike P.S. Please ignore the colors ;-) //paste.pocoo.org/show/207718/ Please add http to the above - I'm not yet allowed to .. |
|||||||