|
HTML - List Item Indentation Problem
I am an HTML n00b and don't understand why this simple example is not working as I would like. I want 2 levels of indentation for list items and then I want the next line to be back at the zero margin. However, the last line is coming out indented as far as the previous list item as though the browser is remembering the margin settings for that item.
How do I get the last line back to the zero margin? Code: <html>
<head>
<style>
<!--
p.Standard
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level1
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level2
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:1cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
-->
</style>
</head>
<body lang=EN-AU link=blue vlink=blue style='tab-interval:36.0pt'>
<li class=Level1>This is a list item</li>
<li class=Level2>This is indented</li>
<p class=Standard>I want this back with zero margin</p>
</body>
</html>
Similar TutorialsIs it possible to have a <li> without it showing the bullet symbol? I want a list item that does everything a normal <li> does but doesn't look like a list item. Alternatively, is it possible to end a <ul> without unwanted space appearing after it? I want the next item to appear exactly on the next line but no matter what margins I specify in my <ul>'s CSS it leaves a blank line. A solution to either of these issues will solve my problem! Thanks, -sbs How do I get the selected item from a select option list? I dont need the value I need the text associated with the value. I can get the value with (in vbscript): strValue = .mylist.value Have searched google exhaustively to see how to do this simple thing but have found nothing. Thanks. I'm bulding a basic website navlist at the top of the screen. My problem is with the active link and how each is highlighted. I have not done this in many years so i'm sure i'm missing something simple as I just don't remember a lot of things. I believe the problem is with how my list is set up. HTML: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="home.html" target="main" id="current">HOME</a></li> <li><a href="about.html" target="main">ABOUT</a></li> <li><a href="services.html" target="main">SERVICES</a></li> <li><a href="design.html" target="main">DESIGN</a></li> <li><a href="contact.html" target="main">CONTACT</a></li> </ul> </div> CSS: #navcontainer { margin: 100px; padding: 0; height: 30px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #CBC9C9; width: 108px; height: 28px; border-top: 1px solid #7A7A7A; border-left: 1px solid #7A7A7A; border-bottom: 1px solid #7A7A7A; border-right: 1px solid #7A7A7A; padding: 0; margin: 0 0 10px 0; color: #494949; text-decoration: none; display: block; text-align: center; font: normal 20px/28px "Lucida Grande", "Lucida Sans Unicode", Arial; } #navcontainer ul li a:hover { color: #CBC9C9; background: #989797; } #navcontainer a:active { background: #7A7A7A; color: #CBC9C9; border-top: 1px solid #7A7A7A; border-left: 1px solid #7A7A7A; border-bottom: 1px solid #7A7A7A; border-right: 1px solid #7A7A7A; } #navcontainer li#active a { background: #7A7A7A; border: 1px solid #CBC9C9; color: #9B9B9C; border-top: 1px solid #7A7A7A; border-left: 1px solid #7A7A7A; border-bottom: 1px solid #7A7A7A; border-right: 1px solid #7A7A7A; } I guess I don't know how to properly identify the active link. If you'll go to www.njcomplete.com, enter, you will see what I am talking about. The initial load looks right. However when I click on another link the page changes but the active link highlight isn't right. Any idea what I'm doing wrong? Hi guys and girls, So my issue is this: I added a .gif file to the bottom of my homepage that I'm using as sort of a footer look. It is indented however, despite trying several things. Here is the current code: <img src="22MHF_IMG.gif" width="1008" height="126" alt="" title="" border="0" cellspacing=0 cellpadding=0 align="left" /> I will note that I originally created this page in Coffeecup Visual Designer, lost all my files, and then started editing in Coffeecup HTML Editor and now Notepad ++, so there may be additional code that is interfering with this. Thank you! The site's url: www.movehumanityforward.org Thank you. My site is www.movehumanityforward.com On the bottom is a banner. I need to push it to the right a little bit, to align it to the content above it, specifically the corner of the edge next where it says HOME. I appreciate You! I have this html page, you may see in the attachment. The body font-size is currently at 70%, this creates indentations for the lines below first line. If I change body font-size to 80%, the indentation is gone. Why is there such indentation if font-size is less than 80%? Thanks. I am running on firefox. I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again: http://www.trekandromeda.com/index/news.html http://www.trekandromeda.com/index/home.css I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE. Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve. I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread. On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button. However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why. Any help would be gratefully received. You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm Here's the script: <table border="0" cellpadding="0" cellspacing="0"> <form method="get" action="" tabindex="3" target="_top"> <tbody> <tr> <td height="16"> <select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value"> <option value="#"> Choose a topic </option> <option value="MainFeaturesIndex.htm"> British Isles </option> </select> <input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16"> </td> </tr> </tbody></form> </table> I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements? <dl> <dt>CHAPTER 1:Why HTML Rocks!</dt> <dd>Coding isn't for pussies</dd> <dd>What do you need to know</dd> <dd>Common Mistakes</dd> <ol> <li>Eat</li> <li>Sleep</li> <li>Huh?</li> </ol> </dl> Thanks Hi everyone I am new to these forums and I am having trouble with ordered lists on one of the article on my site: http://boostplace.com/automotives/fitting-a-motorcycle-helmet/ If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this? I am using wordpress 3.2.1 as my cms P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste. Thanks Hey, I've got this problem involving a list in IE. I've basically made a LI within another LI like so:- Code: <ul class="mainNav">
<li><a href="/index.php?frc=1" class="first">Home</a></li>
<li><a href="/GamePortal.php">Games</a></li>
<li class="headlink"><a href="/edit_profile.php">My Profile</a>
<ul>
<li><a href="/edit_profile.php">Game Profile</a></li>
<li><a href="/link.php">Community Profile</a></li>
</ul>
</li>
<li><a href="/promotions.php">Promotions</a></li>
</ul>
This generates a sort of list underneith a list to be used as a dropdown menu. I've assigned it some CSS to do this Code: .mainNav li.headlink ul {
list-style: none;
display: none;
float: none;
margin: 0px;
position: absolute;
top: 35px;
z-index: 100;
min-width: 72px;
text-align: center;
padding: 5px;
}
What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine). I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail. Any Ideas. Hey there, I'm new to the forums, and never really asked for help on a site before, but I'm stuck. Basically, i have a client that needs an automated way to send forms for bookings online. So far, i have created a basic HTML page that the client can import > as text in Outlook and the html gets placed into the Email. This works fine, as the user can fill out the form and reply back to us. The problem happens when i add the following code: Code: <select name="accomodation">
<option value="" selected="selected">Please Select</option>
<option value=""> -------------------------- </option>
<option value="32">1 Bedroom Studio</option>
<option value="41">1 Bedroom Spa</option>
<option value="48">1 Bedroom Deluxe Spa</option>
<option value="39">2 Bedroom Spa</option>
<option value="42">2 Bedroom Deluxe Spa</option>
<option value="45">3 Bedroom</option>
<option value="46">Houses / Cottage</option>
</select>
Now this code works when originally inserted into the email, i can make a selection and email it away, and the selection stays and is visible when opened. But once the email is sent, any further changes (a reply back, forward etc.) will break the drop down and just splatter the list in my table. Is there any way to correct this? any other option of code i could use or a setting i can use to stop the break? Help would be greatly appreciated. Thanking you, Evan. Hi there, i'm in the middle of setting up a shopping cart and have a little problem! I'm laying out the privacy page, and when I select numbered list for the formatting of some Terms and conditions, the numbers that run onto 2 lines are not indenting like the line above it. So the first line is indented with the number and the bottom line is aligned to the left. It looks untidy. It appears fine in dreamweaver but not when I upload to server. I'm sure there is a simple explanation for this, here is the address: http://www.thinking-forward.co.uk/privacy.cfm How come when ever I had a num/bullet list and the lines break, it shows up like this: This is a test this is a test this is a test thiestThis is a test this is a test this is a test this is a test this is a test thiestThis is a test this is a test this is a test t 1. hiestThisis a test this is a test this is a test thiest. The # 1. Should be before the first line Always... This is driving me crazy... I am using sharepoint designer, and it looks fine there, but when I load it in a browser, it shows up like it does above... Last week I decided to build my first site to get a better idea of how it is done. I found the code for a scrolling list in an old design I had from years ago. I cut the code out and placed it into a new template I am editing. It'll work, but there's two problems. I've spent about 6 hours searching for solutions or whole new code to use but it seems like there isn't much use for a scrolling list any more. Problem One: There doesn't seem to be any way to "execute" the selection on the list. I've placed the code below. I can scroll down the list - click on, say, Game 2, but it doesn't link anywhere. How would I either add a button that says "Go" and sends the user to the desired game url or have them simply click the title and link there? Problem Two: For some reason it displays completely differently in Firefox, Safari and IE. Not just a subtle difference: http://www.myimgs.net/images/zgds.jpg (Firefox) http://www.myimgs.net/images/aymd.jpg (IE) http://www.myimgs.net/images/dcqk.jpg (Safari) How would I make it display a little more uniformly across all browsers? I tried changing the values below but I don't see any difference at all. I'd rather it looked like the Safari version. --- <td valign="top" width="300" align="right"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" rowspan="2"><form> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <select name="highlight" multiple class="inputs3"> <option><game.html="#">Game 1</a></option> <option><game.html="#">Game 2</a></option> <option><game.html="#">Game 3</a></option> </select></td> </tr> </table> </form></td> </tr> </table> </td> </tr> </table> </td> <td width="1" height="80%" bgcolor="#CBCBCB"><img src="images/dot.gif" width="1" height="1" alt="" border="0"></td> </tr> Somebody suggested I do this using list items instead of left-floating DIVs, so I did. But I have no other experience of working with lists and no matter what I do, I can't get the list items to sit right next to each other. There's always a gap between them that I can't get rid of. 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" lang="en" xml:lang="en">
<HEAD>
<STYLE>
ul { list-style-type:none; }
li { display:inline; }
#headings { font-family:Courier New; line-height:25px; font-size:16px; font-weight:bold; text-align:center; margin-top:10px; }
#headings a { background-color:#000; padding:7px; padding-top:4px; padding-bottom:2px; border:1px solid #f00; }
#headings A:link { color:#ccc; }
#headings A:visited { color:#ccc; }
#headings A:hover { background-color:#aaa; color:#000; }
</STYLE>
</HEAD>
<BODY>
<DIV id="headings">
<UL>
<LI><A HREF="p1.html">News</A></LI>
<LI><A HREF="p2.html" onMouseover=showmenu(event,linkset[0],'110px') onMouseout=delayhidemenu()>Produkt</A></LI>
<LIl><A HREF="p3.html">Media</A></LI>
<LI><A HREF="p4.html">Downloads</A></LI>
<BR>
<LI><A HREF="p5.html" onMouseover=showmenu(event,linkset[1],'166px') onMouseout=delayhidemenu()>Col Dee</A></LI>
<LI><A HREF="p6.html">Contact</A></LI>
<LI><A HREF="p7.html">Guestbook</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
As you can see the "panels" are split into two rows using a simple linebreak. By the way, I've managed to get zero top and bottom margins by controlling the line-height attribute. Can anyone help with this? Thanks for reading, Seymour. Hello, I'm trying to program a couple unordered lists into my web page and I encountering a problem. I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one. Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm Here's the code for the bottom two cells with the lists in them: Code: <tr> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Elegant dining room</li> <li>Fireside lounge</li> <li>Library and computer room</li> <li>Craft room & country kitchen</li> </ul> </td> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Wellness and exercise spa</li> <li>Beauty salon</li> <li>Theater and multi-purpose room</li> </ul> </td> </tr> Does anyone know why they refuse to be aligned with the top of the cells? |
|||||||