|
HTML - Trying To Make A Simple Menu With Unordered List And Css.
Hi, I have a bit of a problem. I am learning HTML and CSS, and I am trying to make a simple menu withh a background button up state and a horizontal unordered list across, with a hover effect of a new bg image over the initial ones. Please help! Thanks in advance.
Similar TutorialsG'day, My unordered list (vertical nav menu) is displaying differently in IE and Firefox. IE displays each item with a large amount of space between them, while FF does not. I want to have a few pixels space between each item, and how do I do this so FF and IE both show the same? Here is the code: Code: #leftnav ul {
list-style-type:none;
color: #fff;
display: block;
text-align: left;
margin: 0px;
padding: 0px;
}
.menu A:link {
display : block;
padding-left : 0px;
text-decoration : none; color:#000000;
font-family: Verdana;
font-size: 8pt;
font-weight: bold;
}
<div id="leftnav">
<ul>
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Services</a></li>
<li class="menu"><a href="#">PT One on One</a></li>
<li class="menu"><a href="#">PT Group Fitness</a></li>
<li class="menu"><a href="#">Pre & Post Natal Fitness</a></li>
<li class="menu"><a href="#">Senior Fitness</a></li>
<li class="menu"><a href="#">Fit Kids</a></li>
<li class="menu"><a href="#">Pre Wedding Packages</a></li>
<li class="menu"><a href="#">About Us</a></li>
<li class="menu"><a href="#">Testimonials</a></li>
<li class="menu"><a href="#">Monthly Tips</a></li>
<li class="menu"><a href="#">Impel Thanks</a></li>
<li class="menu"><a href="#">Contact Us</a></li>
</ul>
</div>
Thanks for any help guys, very much appreciated. Cheers, Jamie I'm having a very odd problem with unordered lists. I have made them before like this and they have worked just fine, its odd that now its not working on any browsers. Did HTML standards change lately? Code: <ul style=" list-style-type:circle"> <li><a href="#sitespecs">Site Specs</a></li> <li><a href="#sitehistory">Site History</a></li> </ul> http://www.animeffz.com/codegeass/siteinfo.php Thats all the code i have involved with it =/ but nuttin is showing up. Not a single mention of them in my CSS also. Hey Guys, This is my first post of what I'm sure will be many more, you have a wonderful set up here on HTMLforum.com. I redesigned our eShop last week and I'm running on Mac OS X so I do most of my development in Firefox and Safari. I spent half of my day yesterday trying to sort through this IE issue with no luck.... If you go to http://www.yumsshop.com and look at the navigation menu on the left hand side you will see the various categories and sub categories for the lower level navigation around the shop. In Firefox and Safari everything displays how it should so take a look in one of those browsers so you can see how it is supposed to look. Now switch over to Internet Explorer and Welcome to my Nightmare, lol. For whatever reason the menu is staggered and completely out of alignment. I don't know if I need to have a separate style sheet just for IE with a browser detection code or what but I'm definitely in the dark on how to get this properly working. Any help is going to be much appreciated. Thanks, Taylor Leach Yums Shoes I have a list that's unordered, and I'm having a hard time figuring out how to make it centered as a whole instead of individual lines. The list would look something like: * Item 1 - Subitem 1 - Subitem 2 * Item 2 - Subitem 1 I want to center the entire unordered list, not center each row individually. Any ideas? I have an unordered list on my page and the links continue after the /a in the webpage. The link can be clicked until the end of the line instead of just the words themselves. Also, with IE7 I noticed that the hover changes all the way until the next list item starts. Here's the link and css info: http://www.yotti.de/englishcourses.html .rccovers { position:absolute; width:650px; margin:0 0 0 150px; text-align:justify; } .rccovers a { color: #666; cursor: pointer; display:block; text-decoration:none; font-weight:700; } .rccovers a:hover { font-size:12px; background:#fff; color:#000; } Thanks for any help you can give. Hi all, Im having a problem with unordered lists. When I view it in Dreamweaver, the bullet points are small, but when I view in browser, they are huge. Ive tried adding classes to the CSS, but not sure what im doing wrong. Ive got one class that is: .bulletList { padding:0px; margin:12px; } I tried adding a different class for the actual lists: .bulletSize { font-size:12px; } But all this did was change the size of the font and not the size of the bullet point. Can anyone suggest what I could do to fix this? Thanks in advance 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? Hello there, My site header buttons aren't showing up in Google Chrome. Design fees, web design and answers, are the only buttons that show in Chrome. The header buttons show up fine in IE, Firefox, Safari and others. Site is dreamboxdesigndotcomdotau Any help appreciated! How can I make a list in HTML like so... Name: Charles Steve Mike James James Johnson Marcus Willis All the names should be aligned straight down aligned properly with the first name "Charles" for some reason this forumn does not show post the way i wrote it How do I make an expandable list? Example: not clicked: +link1<br> +link2<br> +link3 link2 clicked: +link1<br> +link2<br> -<a href="2-1.html">link2-1</a><br> -<a href="2-2.html">link2-2</a><br> link3 I have a list of names in say a data base flat file, Do you know if there is a utility that will take and read per line and generate a html file? Hav'nt found anything as of yet but am wondering if someone could steer me in the right direction. thanks Hi girls and guys, I have confront a problem regarding the select menu list. From an example, have 1000 customer name records in the select list, I try to scroll down the list and select one of them only. So it may spend some time to look through the 1000 customer name records and select only one customer name. Any ways or solution can solve this kinds of messy works? Thank you. So, I'm looking to make a drop down style menu that can be seen on all (or at least the vast vast majority) browsers/universal. Basically, I don't want anything too flashy, but I just have no idea to do any sort of dropdown list aside from the basic html menu and input type of thing. To give an example of something I'm trying to do, I made a simple picture. I'm not looking to make it with flash or anything fancy; as I said, it's really basic and I just want it to be text. Any help or links would be appreciated! I have this 2 scripts: 1. script Allowed me to make URL switching (new page is opened after 20 sec) 2. script Allowed me a vertical scroll My Question: HOW TO MAKE THIS: I WANT EACH SITE TO OPEN AUTOMATICALLY LIKE IN 1. SCRIPT AND TO BEGIN TO SCROLL AUTOMATICALLY AFTER OPENING DURING 20 SEC... THAN SWITCHING TO A NEW PAGE, SCROLLING VERTICALY DURING 20 SECONDS... AND SO FOR EACH SWITCHING WEBPAGE... 1. script: <html> <head> <title>URL Switcher</title> <script language="JavaScript" src="url_switcher.js"> </script> <script language="JavaScript"> var i = 0; var url_array = new Array(); url_array[0] = "http://www.google.com"; url_array[1] = "http://www.codingforums.com"; url_array[2] = "http://www.ebay.com"; url_array[3] = "http://wm2.uvic.ca"; function changeURL(ms) { document.frames['my_frame'].location.replace(url_array[i]); i = (i+1)%url_array.length; setTimeout("changeURL("+ms+")", ms); } </script> </head> <body style="margin:0px; overflow-y:hidden" onLoad="changeURL(20000);"> <iframe name="my_frame" width="100%" height="100%" border="0" frameborder="0"></iframe> </body> </html> 2. script: <!-- Vertical Scroll Use this script to automatically scroll the web page when the user pushes a button --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function CoffeeScroll() { for (I=1; I<=750; I++){ parent.scroll(1,I) } } // End --> </SCRIPT> <!-- Put this into the BODY of your webpage --> <BODY><CENTER><FORM><input type=button value="Scroll Page" onClick="CoffeeScroll()"></FORM></CENTER> THANK YOU VERY MUCH FOR YOUR HELP I have a site that is rather large with several pages and files. It is an internal site for the company I work for. Some of the people who send me content to put on the site want to be able to make these updates themselves. None of them know much, if any, HTML or CSS. Is there any tool out there that can make it possible for them to updtate the site without adding a bunch of unecessary code to what is already there? I was looking into CMS applications (this was suggested to me last time I posted about this), but they seem to be applications that you have to build the site with, rather than take a site that already exists and modify. Thanks for any help! Hi all, I'm helping a friend out with his website but have come across a bit of an issue which I think may be related to the web server itself although I'm sure there's a way round it? http://www.pixelrite.co.uk/completed/ Basically my friend wants to be able to upload images that he has worked on into this folder so people can then browse to the above url and simply download the images they want. I used to have a similar thing on an old site of my own which was just a load of files I had uploaded into a folder, anyone could then download them from there. I suspect it's some sort of server side security implemented by the host... is there some way to insert a very basic index.html page into the folder that somehow would show any files that were currently in that folder allowing someone to right click and download them? Thanks in advance! Hello everyone, I just registered on here because for the past 2 or 3 hours straight I have searched the internet madly for a solution to what I believe to be a simple problem. I'm using Dreamweaver for another site I'm doing and all i want to do is have a list menu with 3 or 4 options. Once one of those options is selected, have the label, text area or whatever down below, to display/change it's text. Whether it be loaded from an xml file, reveal a hidden text area or something. It's an musician's site for the lyrics page. So for example, Choose Album in the list, Choose Song in second list (would be nice if this changed correpsonding to the album chose) and then display lyrics below. I have to be retarded not to find this. I've looked through these forums as well and the only one close to what I am wanting seemed to be http://www.htmlforums.com/html-xhtml...enu-72789.html But the site he links to is not very friendly or helpful. In the past I've done (button onclick imgbox1.src='x') but haven't done text before. I don't know if using a label or what is best for this since I want to use the same font. Would label1.value need to change? Or label1.text... I just don't know. My apologies for the ignorance.. So if anyone in this world can assist in any way you would be MORE than appreciated! Thanks for all who view this.. -cbkyro How do I made a navigation menu, with expandable arrows? So basically its a vertical menu, with main headings one under the next, then if a main heading has sub headings, you would click the plus icon next to it, to expand it, and you could see the subheadings under it, and indented. Like how it looks in windows registry (regedit). <form method="post" name="nameform"> <font color="#9933CC" size="2" face="Times New Roman"><select name="tanyasmenu" size="1" style="BACKGROUND: #cc99ff; BORDER-BOTTOM: outset; BORDER-LEFT: outset; BORDER-RIGHT: outset; BORDER-TOP: outset; COLOR: #0066FF; FONT-FAMILY: Times New Roman; FONT-SIZE: 12px"> <option selected value="http://something.com">name here</option> <option value="http://something.com">name here</option> <option value="http://something.com">name here</option> </select> <input type="button" value="Go" onclick="location = document.nameform.tanyasmenu.options [document.nameform.tanyasmenu.selectedIndex].value;" style="BACKGROUND: #cc99ff; COLOR: #0066FF; FONT-FAMILY: Times New Roman; FONT-SIZE: 12px"> </form> Hello everybody! First timer here. I'm a total noob here that somehow got assigned to design our company's website. My company is very understanding about my lack of experience and is willing to send me to any training I need. So, here's my question: Go to www.whitehouse.gov. I think the pretty scrolling menu at the top is exactly the kind of thing I want on my new website. How do I make something like that? I guess this breaks down into several separate ideas: I look at the source and I see that the menu is all set on a background image file called bg-main-one.jpg. How do you design these kinds of images? I love how you can right-click the submenu and open in a new tab. A lot of these menus I've seen you can't do that. I also love how the hyperlink appears on the status bar. Why isn't it like that everywhere? Hovering the mouse over each menu's title launches a separate menu. Is that just your basic ul li list-item HTML accompaned by extremely complex CSS? So how do I create something like that? What groovy technologies do I need to know? |
|||||||