|
CSS - Css To Specify List Start Number
Hello all,
This isn't really all that important since I'm using the transitional DTD for HTML 4.01, but, I am curious. For my own work, and not work done for the company I work for, I stick to strict. I don't know about any caveats in technical documentation writing, but I need to provide a tip or note regarding an item in the list. Here is an example of what I'm, doing. item 1 item 2 item 3 item 4 NOTE:a tip regarding item 4 (<-should be a 5) item 5 (<-should be a 6)item 6 To do it in HTML transitional, you can still use the value property: html4strict Code: Original - html4strict Code <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> <p>note:blah blah blah</p> <ol start="5"> <!-- this works too --> <li value="5">item 5</li> <!--this also work --> <li>item 6</li> <!-- value not required here if you're using value because it's an ORDERED list so defining the value at the start will begin the order--> </ol>
I found the answer to my own question... w3schools sucks. In the LISTS section of the categorized reference they don't have anything that resembles counter-reset...or in any section for that matter. So does IE 7 for that matter, since it doesn't render the expected results. Here is where I found a usable solution...not yet tested with IE though. http://www.arraystudio.com/as-works...-using-css.html Maybe it's just my inability to fight with IE anymore...but visual studio tells me not to use start. Doesn't say anything about value as a li property though. Being lazy and this being a oneoff, and not really wanting to keep track of if dynamically, I tried to put it as inline styles, which doesn't work in Firefox either. Similar TutorialsHello, I am not sure if this is even possible but is there a way to apply css styles to a specific number of list items sequentially? For example, lets say I have a menu made from an unordered list. There are 5 <li> tags, and I want to make the first 3 have red text, but I want the last two to have white text. I can't assign specific classes because I am using a CMS and it writes the code for me. (I wish I didn't have to use a CMS but I have no choice). Is this possible? Thanks in advance! I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically. Code:
<div id='leftcolumnmenusouter'><!-- left column menus -->
<div id='leftcolumnmenus'>
<?php include "columnmenus.php"; ?>
</div>
</div>
<div id='maincontentcolumnouter'><!-- middle column -->
<div id='maincontentcolumn'>
<?php
if (is("home")) {
include "home.php";
} else if (is("register")) {
include "register.php";
} else if (is("login")) {
include "login.php";
} else if (is("comment")) {
include "comment.php";
} else if (is("profile")) {
include "profile.php";
} else if (is("category")) {
include "category.php";
} else if (is("game")) {
include "game.php";
} else if (is("links")) {
include "links.php";
} else if (is("rules")) {
include "rules.php";
} else if (is("faq")) {
include "faq.php";
} else if (is("pp")) {
include "pp.php";
} else if (is("links")) {
include "links.php";
} else if (is("page")) {
include "page.php";
} else if (is("news")) {
include "news.php";
} else if (is("users")) {
include "users.php";
} else if (is("search")) {
include "search.php";
} else if (is("taf")) {
include "taf.php";
} /*else if (is("submit")) {
include "submit.php";
} */else if (is("pm")) {
include "pm.php";
} else if (is("play")) {
include "play.php";
} else if (is("request")) {
include "request.php";
} else if (is("contact")) {
include "contact.php";
} else {
include "error.php";
}
?>
</div>
</div>
CSS: Code: #maincontentcolumnouter {
width:75%;
margin:0px;
float:left;
}
#maincontentcolumn {
margin-top:8px;
margin-bottom:0px;
margin-left:4px;
margin-right:8px;
}
#maincontentcolumn .ocontentsection {
margin-bottom:8px;
}
#maincontentcolumn h2 {
text-indent:1em;
}
#leftcolumnmenusouter {
width:25%;
margin:0px;
float:left;
}
#leftcolumnmenusouter #leftcolumnmenus {
margin-top:8px;
margin-bottom:0px;
margin-left:8px;
margin-right:4px;
}
#leftcolumnmenus .ocontentsection{
margin-bottom:8px;
}
#leftcolumnmenus h2{
text-align:center;
}
#footer {
margin:0px;
padding:0px;
clear:both;
}
ok ill paste my code for the page and css up - Quote: <?php require("header.php"); ?> <div id="content"> <br><br> <b>Welcome to Kadafi Legacy.</b><br><br> <img src="image/yaki1.jpg" alt="Yaki Kadafi" align="left"> Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon and all this and much more can be found at our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> section.<br><br> The latest news and information regarding projects from the official Kadafi site - <a href="http://www.yakikadafi.com" target="_blank" alt="YakiKadafi.com">YakiKadafi.com</a>, will also be reported and updated daily in our <a href="/news.php" alt="Yaki Kadafi News</a>Kadafi News</a> section.<br><br> Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon, all this and much more can be found on our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> page.<br><br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> ok now, as you see... the writing above all the "CONTENT" and the words "content" should all be on my page as text here - www.outlawz.frihost.net/fula/test2.php however, all of it is on the page apart from the part i put in bold, the third paragraph... also, in the second paragraph my link is for "news" on the page it says its for "history" if i remove this third paragraph... then the page completely messes up and it has only the first 2 paragraphs and no "content" words show up and the "designed by..." is directly under the first 2 paragraphs in the blue... here is my css - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head img { display: block; } #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #box1{ position: relative; top: 7px; left: 140px; width: 345px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; height: 500px; font-family: verdana; font-size: 12px; color:white; text-aligh: justify; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } really confusin me HAHA.. please help, thx!!! Hello. I designed my site using Ie, and an now getting some complaints from members who are switching to firefox. I am a total CSS newbie and I don't know exactly where to begin to troubleshoot this. URL thats the page, you will need to use username: css password: test It looks fine in IE6, but doesnt look ok in firefox. The CSS stylesheet is at URL Thank you for any help you can provide. 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 Hi, This is my code Code: <style type="text/css">
#leftcolumn {
float: left;
width: 10%;
text-align: center;
margin: 30px auto;
}
#rightcolumn {
float: left;
width: 25%;
text-align: center;
margin: 30px auto;
}
</style>
<div id="leftcolumn">
<p>Left 1</p>
</div>
<div id="rightcolumn">
<p>Right 1</p>
</div>
<div id="leftcolumn">
<p>Left 2</p>
</div>
<div id="rightcolumn">
<p>Right 2</p>
</div>
I expected it to be centered and both left and right 1 and 2 to be on the same line each left and right I want to start on a new line, although currently they are both on the same line, how can I do this Thanks This was my first css project done a couple of months ago, and I recently added some functionality to finish it off. A quick check in different browsers and I find its hosed in Mozilla and Opera. Usually this wouldn't be a problem, and normally requires some light adjustment, but this page is just hosed. Opera doesn't even react to adjustments I make. I've got 6 hours into trying to make this cross browser, and nothing works. Even link classes that work in IE/Opera, are completely ignored in Mozilla. I'm assuming if you look at the source you'll be able to see whats going on. I'm trying to break the formatting out of my page to post here for ease of reading, but its taking me some time. The desired effect is acheived in IE. Any opinions, or help would be appreciated! When you first load the page, you get the impression that there isn't much, if anything to scroll down to. But if you try anyway, the long scrollbar button quickly collapses, revealing that indeed there is much more to scroll down to. Why is this? The page is three tables with about 7 rows each. And OF COURSE this works perfectly in Mozilla browsers. Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Hi, I want to produce the same text in html-pdf-epub. This is a short-story for which I want to define two styles, one for the sections "normal" and one for paragraphs with dialogue. The two styles should be identical, the only difference being that the style paragraph should begin with a hyphen "-". How can I do? thanks Stefano (Roma-Italia) PS I tried some tricks how to do the same styles with different names, and then replace the code style "paragraph" by adding "-" but then InDesign, passing to epub, interprets the hyphen as a beginning list and is a mess. When I start my page layout, it always starts around an inch down from the top of the browser. Ive seen websites, like techeblog.com that start all the way from the top. How do i do that? Thanks. When printing at the top there is Page 1 of 1 and at the bottom the web address comes up, is there a way to get rid of these? Regards Please look at the location list on the right side of this page - http://certified.tmhdesign.com My designer sent me a layout that has each location in a list and seperated by dots that DO NOT go the whole distance of the ul/li. As you can see I am close but they are not laying out the same in IE and Firefox. IE is closer to what I am after but without the big gap Hi, I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout? Hello, I created a menu using an unordered list and after the list I have a div with some text: http://www.27lamps.com/public/Menu.htm My menu gets over the div. Why? Thanks, Miguel Im having trouble putting together a subnavigation list on my website, I am trying to create four sections each of which has a different color to it, and i can get almost everything to work except the subnavigation background color. I have tried white and transparent, but i think the parent element is somehow interfering with the css. any help would be appreciated. Here is my code 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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
ul.nav
{margin:0;
padding:0;
display:block;
width:100px;
list-style-type:none;}
ul.nav li, ul.nav li a, ul.nav li a:active, ul.nav li a:visited, ul.nav li a:hover, ul.nav li.home a:hover, ul.nav li.work a:hover, ul.nav li.for_clients a:hover, ul.nav li.contact a:hover
{font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#CCCCCC;
color:#666666;
line-height:30px;
width:100px;
list-style-type:none;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding-left:10px;}
ul.nav li.home_over, ul.nav li.home a:hover
{color:#ffffff;
background-color:#018E9F;}
ul.nav li.work_over, ul.nav li.work a:hover
{color:#ffffff;
background-color:#6F0141;}
ul.nav li.for_clients_over, ul.nav li.for_clients a:hover
{color:#ffffff;
background-color:#FF850D;}
ul.nav li.contact_over, ul.nav li.contact a:hover
{color:#ffffff;
background-color:#CCE82E;}
ul.subnav_home
{position:absolute;
top:8px;
left:118px;
margin:0;
padding:0;
display:block;
width:100px;
list-style-type:none;
background-color:#FFFFFF;}
ul.subnav_home li a, ul.subnav_home li a:active, ul.subnav_home li a:visited, ul.subnav_home li a:hover
{font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#fffffff;
color:#aaaaaa;
line-height:30px;
width:100px;
list-style-type:none;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding-left:0px;}
ul.subnav_home li a:hover, ul.subnav_home li.subnav_home_over
{color:#018e9f;}
</style>
<body>
<ul class="nav">
<li class="home_over">home</a></li>
<ul class="subnav_home">
<li class="subnav_home_over">philosophy</li>
<li><a href="process.htm">process</a></li>
<li><a href="resume.htm">resume</a></li>
</ul>
<li class="work"><a href="index.htm">work</a></li>
<li class="for_clients"><a href="index.htm">for_clients</a></li>
<li class="contact"><a href="index.htm">contact</a></li>
</ul>
</body>
</html>
|
|||||||