|
CSS - Advanced Lists
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 Similar TutorialsOk here is my layout http://codingcore.com/template.html there are no tables at all its all css floats but the only problem is that the left and right menus go over the copyright bar on the bottom the middle box doesnt the copyright stays 45px from the middle box but i want it to be under all the boxs because right now the menus go over the copyright i want its copyright to be below the boxs on the right and left ive tried many things but I cant seem to get it to work i dont want to use tables ither Thanks Matt I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with: #EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno But that styles the combinedno element... Any ideas? Code: <div id="EditMedHistoryDisplay"> <div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div> </div> </div> Hi! 1/ Is display:table; supported in IE6? In IE7? Searched the web but found contradictory answers. 2/ In Opera 9.02, when declaring a div display:table; and then applying padding to it (the div), there is a bug: the padding is contained in the width of the div (making the "content" or "room" available in the div smaller) rather than added tp the width of the div. Is there a fix for this? Thanks html code: Code: <div id="sidebar"> <h2>South Winds Park Info</h2> <ul> <li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li> <li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li> <li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li> <li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li> <li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li> </ul> <h2>South Winds Resources</h2> <ul> <li><a href="calendar" title="Calendar">Calendar</a></li> <li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a> <ul> <li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li> <li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li> <li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li> </ul> </li> <li><a href="resources/special-events" title="Special Events">Special Events</a></li> <li><a href="resources/maintenance" title="Maintenance">Maintenance</a> <ul> <li><a href="resources/maintenance/fees" title="Fees">Fees</a></li> <li><a href="resources/maintenance/trash" title="Trash">Trash</a></li> </ul> </li> <li><a href="resources/faq" title="FAQ">FAQ</a></li> </ul> </div> CSS Code: Code: #sidebar ul{
margin:10px 0 30px 0; padding: 0;
text-align:right;
}
#sidebar li a, #nav li {
display:block;
}
#sidebar li {
list-style: none;
position: relative;
}
#sidebar li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#sidebar li ul {
display: none;
position: absolute;
left: 100%;
top: 0px;
padding: 0; margin: 0;
z-index:100;
}
#sidebar li:hover > ul {
display: block;
}
#sidebar li ul li, #nav li ul li a {
float: none;
z-index:1000;
}
#sidebar li ul li {
_display: inline; /* for IE6 */
}
#sidebar li ul li a {
width: 150px;
display: block;
background-color:#2c9091;
}
This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ I have searched the internet for a solution: using csshover.htc (doesn't work) The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed. The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index. I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser. What else could it be? Since the code should work. What else around this menu could be my problem? Thank you so much for your help (ready to pull my hair out) I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported. The layout is split up into 9 different panels that need to be positioned correctly. Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div? See attached file for layout. P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS. Thus far I've done all of the CSS courses on lynda.com and have read css Zen Design and Transcending CSS, both GREAT books. What would be a good "next step book" into advanced CSS coding or have I done it all? Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help I am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a left column and a right column In the right column, I would like to split that into two equal columns, width-wise and then underneath that I would like to have three equal columns under the top two which can span as far down as possible. I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox. the link to the test page is http://www.test.angrybrownman.com and the css sheet would be www.test.angrybrownman.com/style_test.css The css for the site (since I am not sure the link will link) is as follows: #container { width:775px; margin:0px auto; background-color:transparent; border:1px solid #424242; line-height: 100%; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #top { padding:0px; height:100px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#FFFFFF; } #main { padding:0px; height:200px; background-image:url(main.jpg); background-repeat:no-repeat; background-position:top left; background-color:#fff; } #mid_box { padding:0px; height:200px; background-color:transparent; margin:0px 0px 0px 258px; /*background-image:url(mid_spacer.jpg); background-repeat:no-repeat; background-position:top left;*/ } #leftnav { float: left; width: 259px; margin-top:0px; padding:0px; } #rightnav { float: right; width: 150px; margin-top:0px; padding:0px; background-color:transparent; border-left:1px solid red; /*border-right:1px solid green;*/ border-top:2px solid #003366; } #center { margin-left: 259px; margin-right: 0px; margin-top:0px; padding:0px 0px 10px 0px; background-color:#fff/*#649DD8*/; border-top:2px solid #003366; } #leftbox { width: 168px; float: left; background-color:transparent; } #rightbox { width:167px; float: right; background-color:transparent; } #middle { margin-left: 169px; margin-right:168px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } #left_top { width: 250px; float: left; background-color:transparent; } #right_top { width:250px; float: right; background-color:transparent; } I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much. Thanks a million. Jon I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document. In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3"> For each new paragraph the class p is incremented by 1. However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet. Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission? Can anybody explain to me how this affects those paragraphs? Firefox works, IE doesn't Help with CSS pls :-) Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg Here is that part of css i believe is affecting it: Code:
div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}
div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}
div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}
div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}
div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}
div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}
================== I have seen this code in some index files Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use? Code:
<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->
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 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, 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 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. 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 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. http://jordanmeeter.com/new/links.php If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up! Any suggestions? Thanks, Jordan |
|||||||