|
CSS - <ul> Li Problems.. (nested Lists!)
OK i have a nested list:
PHP Code: <div id="sideMenu"> <ul> <li><a href="">Menswear</a> <ul> <li><a href="">Shalwar</a></li> <li><a href="">Shalwar2</a></li> </ul> </li> <li><a href="">Womenswear</a></li> <li><a href="">Jewelry</a></li> </ul> </div> i am applying css to it! i want to set the background of the LI to be one colour but i want the background of the nested lists to be another. but what is happening (and its not really a bug) is that whne i apply the background colour to LI this colour also goes behind the nested lis? http://www.zahra-zahra.com/fullpage.html i am talking about the side menu (purple and light purple) is there a "fix"? Similar TutorialsI'm looking to use lists to create 2 columns of info: Info 1 Info A Info 2 Info B Presumably I would do this like (excuse the inline style): Code:
<ul style="display:inline">
<li style="display:inline">
<ul style="display:inline">
<li>Info 1</li>
<li>Info 2</li>
</ul>
</li>
<li style="display:inline">
<ul style="display:inline">
<li>Info A</li>
<li>Info B</li>
</ul>
</li>
</ul>
This outputs: Info 1 Info 2 Info A Info B I'm also looking to do a mix of images and text in a list, but have alignment issues. Code: <ul style="display:inline;list-style:none"> <li style="display:inline">Some</li> <li style="display:inline">random</li> <li style="display:inline">words</li> <li style="display:inline">with</li> <li style="display:inline">an</li> <li style="display:inline"><img src="mypic.jpg"></li> <li style="display:inline">mixed</li> <li style="display:inline">in</li> </ul> Is this bad practice? Should I just make a table, or a seperate div to contain the images and text apart from each other? Tia! PS. Hi Kravvitz :P ok i would like to have on my nested list 1.1 and 1.2 instead of 1? ie Code: 1. hhh 1.1 jjj 1.2 kkk 2. kkk 2.1 kkkk etc but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc... is it even possible to do this? hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children. so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> Take a look at my code... http://www.trinitysql.co.uk/jubilee2005/ Those links at the top are a <ul> with fixed height and width... What I want to do is push the text down to the bottom and make the whole area of the <li> link... Any help you couyld give me would be very much appreciated! Thanks! Hello, I have three accordions based on Accordion2 by stickmanlabs on my site. Each of the three accordions (web, motion & print) have nested accordions within that open when clicked to reveal different projects I have done. This works great in Firefox and Safari. In IE the first accordion (web) works properly, opening up to reveal the nested accordions closed up and waiting to be clicked on. However, when I click on either of the following accordions in IE, it opens to reveal that all of the nested accordions are already open at the same time. The nested accordions are open, but also inactive, I can't even click to close them up. I have played with this to no avail, and can't figure it out. I would really appreciate it if someone could tell me how I can get this working properly on IE, or why this might be happening? Here is essentially what the code looks like for the three nested accordions: Code: <div id="vertical_container" >
<h1 class="accordion_toggle">Web</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">Motion</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">Print</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
</div>
</div>
</div>
I realize this might not be enough info, and I am happy to provide any additional CSS or javascript info. I guess I am hoping someone out there might be familiar with Accordion2. Another strange thing is that I have noticed is that none of the accordions work unless I leave a blank <div id="horizontal_container"></div> in there. Thanks in advance! Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> I want to have a list that each listed item has a different image, how can i do this. Thanks 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;
}
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. 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 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. 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 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 ??? 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. Hey i am trying to create a navigation bar that uses hover lists so that there are a number of links and when these are hovered over, the provide links which are under this section. I have sourced code and used this and it all works apart from that the hovered options are about 0.8cm apart and the first is over the top of the original list, which still needs to be seen. The code for the CSS is below; #navmenu{ width: 100%; float: left; background: #900; height: 100%; } #navmenu ul{ list-style: none; margin: 0; padding: 0; width: 120px; float: left; } #navmenu li{ margin: 3px 0px 3px 0px; padding: 3px 0px 3px 0px; display: inline } #navmenu a{ font: bold 15px Calibri; display: block; border-width:1px; border-style:solid; border-color:#F90; margin: 0; padding: 2px 3px; color: #FC0; background: #900; text-decoration:none; } #navmenu a:hover{ color:#FFF; background:#C30; } #navmenu li { position:relative; } #navmenu ul ul { position:absolute; top: 0; left: 100%; } div#navmenu ul ul{ display: none; } div#navmenu ul li:hover ul {display: block;} div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} body { behavior: url(csshover.htc); } [if IE]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} #menu a { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif] and the code for the section of the webpage (btw it is linked in the header) <div id="navmenu"> <ul> <li><a href="index.html" title="Home">Home</a></li> </ul> <ul> <li><a href="products.html" title="Products">Products</a> <ul> <li><a href="rubber.html" title="Rubber">Rubber</a></li> <li><a href="struts.html" title="Struts">Struts</a></li> <li><a href="hardware.html" title="Hardware">Hardware</a></li> </ul> </li> </ul> </div> Thanks help would be appreciated. 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 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, |
|||||||