|
HTML - Multi Layered List
Hi everyone.
I'm currently trying to code a web page that uses a three level list tree. For example, I want the following effect. Code:
1. First Level Heading
1.1 Second Level Item
1.1.1 Third Level Item 1
1.1.2 Third Level Item 2
2. First Level Heading
2.1 Second Level Item
2.1.1 Third Level Item 1
2.1.2 Third Level Item 2
2.1.3 Third Level Item 3
etc etc.
Is there any way I can achieve this using lists? As I cannot figure it out. I'm thinking I may have to scrap the list idea, and just use standard paragraphs instead. EDITED: Think I've worked it out. Is this semantically correct though? Code: <ol style="list-style-type: decimal;"> <li>First Level Heading <dl> <dt>1.1 Second Level</dt> <dd>1.1.1 Third Level 1</dd> <dd>1.1.2 Third Level 2</dd> </dl> </li> <li>First Level Heading <dl> <dt>1.1 Second Level</dt> <dd>1.1.1 Third Level 1</dd> <dd>1.1.2 Third Level 2</dd> </dl> </li> </ol> Similar TutorialsHello, I am currently working on a website and needed a little help in setting up it's background. I'm referencing ESPN.com's setup for inspiration. They have a background color of #f2f2f2. On top of that is a gradient from red to gray to f2f2f2. On top of this is a background image that seamlessly blends in with the gradient. On top of this they have the content. I am able to get a background color and gradient that only repeats horizontally. I am also able to get the background image and the content to show up on top of this. However, I'm having a few problems. 1) The background image is being placed a few pixels down so that it doesn't quite match up with the gradient. How do I force this to line up to the very top of the page? 2) The content and background image do not "float" in the middle of the browser window. How do I get them to be centered in the browser? Thank you for answering my questions! I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks 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 I have a css ok it works in combination When I try to put another css It does not work :cole Here the <Link /> my css Code: * 1. <Link rel ="Stylesheet" media ="Screen" type ="Text / css" title ="Home" href ="Forum.css" />
* 2. <Link rel ="Stylesheet" media ="Screen" type ="Text / css" title ="Design" href ="Http://localhost/siteweb/css/design.css" />
forum.css is in the same folder as my css file and design.css is or it is said. forum.css it does not appear and that appears design.css! Thank you for helping me It works on Firefox but not on Chrome Hi sorry if this has been asked before but i couldnt find any answers doing a search of the site. My question.... We have a local homepage for the office computers and have a basic search box which searches google. I would like to know if it is possible to add other site to the search e.g. Ebay. I have the code for searching ebay but i would like to merge the two (google and ebay) so i have a single search input box and two seperate buttons so the user can enter their search text then click whichever relevant button they want to search. I know u can do this with drop down boxes as iv seen other multi search engines but we dont have a lot of space left on the page for another search box. Is this even possible - 1 search box and 2 buttons (1 button for google and 1 for ebay) Sorry for the long winded question Thanks in advance I created a website and its basic, but I want to be able to update news on the main page. I have a friend who is going to update the news but I dont really want her messing with files so is there a way to easily make a page that has a text box where she can enter text then press submit to add it to the main page? Something like this: Quote: <!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>Update Text</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <p> <label for="text">Enter text in the box below then when you are finished press the button below to<br /> add it to the new section in the main page. <br /> <br /> </label> <label for="textfield"></label> Subject: <input name="textfield" type="text" id="textfield" size="96" /> <label for="text"><br /> <br /> </label> <textarea name="text" cols="80" rows="9" id="text"></textarea> </p> <p> <input type="submit" name="Submit" id="Submit" value="Finished?" /> </p> </form> </body> </html> Hi every body, i have i simple square div : A with 3 other small divs : x, y and z i want when i hover x or y or z the Photo in the div A CHANGES ... in order to do that (Without using Java Script : Only Html + css), i think about using the normal hover, but this time with partitionning the area over witch the mouse hover ... suppose that we have an area divided with horizontal and vertical axes ... and we want that each time the mouse hover some part, the effect occures in some div ... Can i do that without JS (html + css) Thanks to any usefull help hi, i want to add a multi quote button on phpbb2 forum using only the template files so it would be in viewtopic_body.tpl could anyone tell me how i can add this using html or javascript code: there is different ways of doing 1 way: there will be a checkbox for each post, you select the checkbox for each post you want to quote, then at the bottom a button called "quote selected" and it will quote all the selected posts in the quick reply box second way: you highlight the text from a post that you want to quote, then you click the button that says "quote selected" and it will quote everything you highlighted on the page. does anyone know how to do this please? what i would need to add to my template file called viewtopic_body.tpl please help me.. Is there a way to use mailto to send an email to 2 recipients? Is there a way to send an email and to cc someone? Thanks so much. Hello, I've got a few questions to do with CSS, now I use it in my code!: 1. Is it ok to use minus in your margins? margin-top:-10px; 2. If not, then how do you keep your things on the same line? Please help! Thanks, ToshNeox i constructed my webpage using div tags and tables. when inserting the content (flash menu, text, pics) into the table, the page looks fine in Internet Explorer. However, when viewed in Mozilla Firefox, the content is not aligned properly. How can I make the content uniform in both browsers? Look at this code <html> <body> <table> <tbody style="display: none;"> <tr> <td>Row 1 hasn't to be appeared</td> </tr> <tbody> <tr> <td>Row 2 hasn't to be appeared as well</td> </tr> </tbody> <tr> <td>Row 3 hasn't to be appeared as well</td> </tr> </tbody> </table> </body> </html> The result is: Row 2 hasn't to be appeared as well Row 3 hasn't to be appeared as well With Row 2 we can work through some "CSS/JavaScript/AJAX ... etc" stuff. But WHY DOES THE ROW 3 APPEARED ????????? You probably clicked on this just to see what the title actually meant! I don't know what you call it but this is what I have and this is what i'm trying to achieve. I currently have a file, say page1.php It gives a couple of drop down selection boxes in html and a submit button, this is the first filter. The button opens page2.php which has run a query based on the drop down selections and displays data adding a checkbox to the table output. You can select certain rows via the checkbox then click another submit button which loads page3.php, updating the database based on checkboxes. Anyway, what I would prefer is to have everything inside a single page. So firstly it loads step 1, click submit and refresh with step 2 data, then step 3. Can anyone point me in the right direction of how to implement this? Assuming that it's not particularly complex to achieve. The reason to do this is for neatness as it is a solution I may distribute in the future. Thanks, Matt Hello, I am trying to create a website with muti level menu for the following HTML. I have attached 3 files here. 1. Outdoor.css is HTML css file 2. jqueryslidemenu is muti level menu css 3. jqueryslidemenu is muti level menu js I edited all three files with my HTML code i could not get result that i wish. navigation bar is displayed but muti level menu is not displayed. How to overcome this? Thanks, Suresh.G Hi everyone, I just started tinkering with HTML coding and have been bouncing around tutorial sites and the like trying to figure out how to achieve my goals. im trying to create a 3 framed page (easily done so far)...with a form to create a purchase order style form....(heres where i begin to struggle). i have found plenty of samples of code to get the elements of the form going, drop down menus, text input, submit form via email, ect. but what im trying to find now, and im hoping someone here can help me is this. i want to create either a multi-level drop down menu, OR, a dropdown menu that referres to the next menu. ill try to explain this better with an example.... sample content for first menu.... Bread Milk Cheese say for example you select bread..... next menu content will be dependant on the first menu's selection sample content for second menu, "Bread" selected..... Wholegrain White Wholmeal sample content for second menu "Milk" selected Full cream Low fat Long life....ect, ect. I have done plenty of searching but all i have found is stuff that is waaaaaay out of my league this early in the game, most of my searching has yielded results from javascript, flash and something called jquery. is there any way to do this without spending lots of coin on fancy programs? im just using good o'l notepad here Thanks for any assistance in this, and i do appologise if it has been covered before, perhaps i have not been using the correct key words in my searches. I've got a data entry form where a user optionally puts data in a couple sections. It's too big to fit on-screen, so currently it's a multi-column, spreadsheet-style form. First, before I even chase this and waste everybody's time, is using tabs a good way to make a form that'd otherwise scroll through multiple sections? To make it easier to use I'm thinking about using tabs. I've found a couple examples and can display the tabs fine, but I"m having trouble understanding how to do the interaction between the form and php. The list is a set of hrefs like <li><a href="abcdform.php">a</a></li> <li id="selected"><a href="#">b</a></li> I can see that the first li is going to jump to "abcdform.php", but what does the "#" in the second li do? I want this to be a single php file with the html in it and a single php file with all the code. How do I get php to know what tab was hit? I"m generating the table rows and data in the php so how do I get the right rows of data into the right tab section? Hi all you guys! I'm planning on making a website that sells customly made computers. I don't know how to make a few lits of items wich would have a choise box for each item, and when the user checks a box, it automaticly would count the new price, and paste it on a thing that follows the user as he scrolls down the page, without refreshes. Any help? http://addictinginfo.webs.com/politics.htm ^^the page at hand Looking for a comment box that i can use for every story rather than just the page. If i try to copy the same comment box html over to the next stories it has errors. Any help is great. Thanks. I have a multiselect dropdown in JSP/HTML. How can i add a mouse hover information...over those dropdown values.. Thanks! |
|||||||