|
CSS - Nested Lists + List Type = Decimal
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? Similar TutorialsOK 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"? I'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 Hi, I am trying to have different type of lists on the same page by using different CSS. Basically I want to define a general list to be used through out the whole website, and another list to be used only within a box. I wish that the list in the box does not contain the bullets. However setting the list-style-type: none; is not working as sugested in the following link: http://css.maxdesign.com.au/listutorial/02.htm Here is my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url(bullet.png);
background-repeat: no-repeat;
background-position: 0 .8em;
padding-left: 1em;
line-height: 14pt;
}
div.box{
border: 1px solid red;
}
div.box ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
<div class="box">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
</body>
</html>
Thanks for any sugestions, best regards, Sim085 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> Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself Please look at this page - http://www.tmhdesign2.com The list nav up at the top I have a bg image for the a tag and want to not display the bullet for the <li> but list-style-top:none does not work... So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer. I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01. In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated. How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type? TIA for all help and advice. I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right. Here is the web page The top navigation bar has a link "Other regions". I want to have a drop down list of the other regions under it. I nested a list under the "Other regions" li. It is working - sort of but not correctly. The nested list is showing up under "home" and the are all on top of each other. Here is the html: Code: <div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li class="dropmenu"><a href="other_regions.html">Other Regions</a>
<ul>
<li><a href="#">Ireland</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">USA (North America)</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div>
Here is the css: Code: #topbar {
height: 20px;
background-color: #3399FF;
border: 1px solid #000099;
padding-left: 10px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
color: #FFFFFF;
background-color: transparent;
border: 1px solid #3399FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar a:hover, #topbar a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar ul {
list-style: none;
margin: 1px 0px 1px 0px;
padding: 2px 0px 0px 0px;
}
#topbar li {
display: inline;
margin-right: 150px;
}
.dropmenu ul {
position: relative;
}
.dropmenu li {
position: absolute;
}
.dropmenu a:link, .dropmenu a:visited {
color: #000000;
background-color: transparent;
border: 1px solid #FF00FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu a:hover, .dropmenu a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu li:hover ul { display: block; }
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 519px;
background: url(../images/bgcol.gif) repeat-y;
padding: 0px;
margin: 0px;
}
Help please Hello all, I'm modifying Cory LaViska's PHP_File_Tree cascading style sheet, default.css, to remove the round bullets from the LI tags. Browsed through the forums to find a solution to my problem with no luck. Please, take a look at my test website: www seemyinvestments dot com There, you can see what I'm talking about. The webpage lists a directory tree on the left-hand side, and I want to get rid of the bullets (the little dark dots). I've tried a number of ways of implementing 'list-style-type: none;' (You'll see one attempt below labelled 'not working!') Doesn't work for Firfox or IE. Any suggestions? Thanks. Code:
/* PHP File Tree Default Theme
By Cory LaViska (http://abeautifulsite.net/)
Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)
*/
.php-file-tree {
font-family: Georgia;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.5;
}
.php-file-tree A {
color: #000000;
text-decoration: none;
}
.php-file-tree A:hover {
color: #666666;
}
.php-file-tree .open {
font-style: italic;
}
.php-file-tree .closed {
font-style: normal;
}
.php-file-tree .pft-directory {
list-style-image: url(images/directory.png);
}
.php-file-tree .pft-directory-empty {
list-style-image: url(images/directory_empty.png);
}
/* Default file */
.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
/* Additional file types */
.php-file-tree LI.ext-3gp { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-afp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-afpa { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-asp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-aspx { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-avi { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-bat { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-bmp { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-c { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-cfm { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-cgi { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-com { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-cpp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-h { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-jar { list-style-image: url(images/java.png); }
.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-lasso { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-m4p { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-mov { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mp3 { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-mp4 { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mpg { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mpeg { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-ogg { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-pcx { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
not working! ---> .php-file-tree LI.ext-php { list-style-image: url(images/php.png); list-style-type: none; }
.php-file-tree LI.ext-png { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-ppt { list-style-image: url(images/ppt.png); }
.php-file-tree LI.ext-psd { list-style-image: url(images/psd.png); }
.php-file-tree LI.ext-pl { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-py { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-rb { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rbx { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rhtml { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rpm { list-style-image: url(images/linux.png); }
.php-file-tree LI.ext-ruby { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-sql { list-style-image: url(images/db.png); }
.php-file-tree LI.ext-swf { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-tif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-tiff { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-vb { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-wav { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-wmv { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-xls { list-style-image: url(images/xls.png); }
.php-file-tree LI.ext-xml { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-zip { list-style-image: url(images/zip.png); }
/* You can add millions of these... */
I was just testing some possible layouts for my navigation.. and I came across an inconsistency that I've never encountered befo Code:
#menu #nav{
padding:0px;
list-style-type:none;
margin: 0px 0px 15px 0px;
background-color:#FFF;
}
#nav li{
float:left;
/*display:inline;*/
margin-left:5px;
margin-right:5px;
}
So basically, in Fx 1.0.7 when I comment out the display:inline the bullets are shown again (despite the declaration being uncommented) In IE 6.0 there isn't an issue. Is this descrepancy another time where Fx revets to what it assumes as the correct way to handle the code? Or am I just missing out on something here. if you go he http://www.tvshow-caps.co.uk/showPics.php?showid=24&season=6&episode=1 you will see that the nested list do not expand but OVERLAP in IE. firefox displays is ok. EDIT1: i have fixed the nested list problem (i was using height property which IE doesnt like) second problem: now IE doesnt apply the border-bottom property properly (use the above link) Weird issue with FF ive noticed can anyone explain why this happens? I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule... Code: #nav ul{
margin-top:0px;
}
The error goes away. Strange isnt it? Heres my html and css Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
</div>
</div>
<div id="content">
<h1 id="mainheader">Latest Templates</h1>
<h1 class="sideheader">List One Title</h1>
<h1 id="latesttemplates">Heres the latest templates</h1>
<ul class="sidebarlist">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<h1 class="sideheader" style="top:150px">List One Title</h1>
<ul class="sidebarlist" style="top:175px;">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<div id="templateholder" class="toprow" style="left:20px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template1name</td>
</tr>
<tr>
<td class="descrip">Added</td>
<td class="answer">template1date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template1type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template1images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:185px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template2name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template2date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template2type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template2images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:350px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template3name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template3date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template3type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template3images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:515px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template4name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template4date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template4type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template4images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:20px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template5name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template5date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template5type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template5images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:185px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template6name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template6date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template6type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template6images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:350px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template7name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template7date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template7type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template7images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:515px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template8name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template8date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template8type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template8images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
#nav{
position:relative;
height:35px;
background-color:#3d3d66;
width:405px;
left:55%;
top:65px;
}
#nav li{
display:inline;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
}
#nav ul{
margin-top:0px;
padding-top:8px;
}
#header{
height:100px;
background-color:#333333;
background-image: url(../images/jpegs/header.jpg);
background-repeat:repeat-x;
}
#content{
position:relative;
margin-top:50px;
margin-left:auto;
margin-right:auto;
height:500px;
width:974px
}
h1#mainheader{
margin-top:0px;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width:70%;
}
.sideheader{
position:absolute;
margin-top:9px;
top:0px;
left:75%;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width:25%;
}
h1#latesttemplates{
position:absolute;
margin-top:0px;
padding-top:50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-right:dotted;
border-right-width:1px;
width:72.7%;
height:105%;
top:0;
}
.sidebarlist{
position:absolute;
margin-top:9px;
top:25px;
left:695px;
}
.sidebarlist li{
list-style-image:none;
list-style-type:none;
}
#templateholder{
position:absolute;
height:105px;
width:140px;
border:solid 1px;
}
.toprow{
top:100px;
}
.bottomrow{
top:330px;
}
.descriptoprow{
top:215px;
}
.descripbtmrow{
top:445px;
}
#templatedescript{
position:absolute;
width:140px;
height:105px;
}
#templatedescript table{
width:140px;
}
.descrip{
text-align:left;
font-weight:bold;
font-size:12px;
}
.answer{
text-align:right;
font-size:12px;
}
.P{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
border-right:1px solid;
border-right-color:#FF0000;
margin-left:12%;
padding-right:5px;
}
.D{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:5%
}
http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it. In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears. CSS Code:
a:link {
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
ul{
margin:10px;
padding: 10px;
list-style-type: none;
}
li
{
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
html Code:
<div id="projects">
<h1>Projects</h1>
<P>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul></p>
</div>
|
|||||||