|
HTML - Pls Help With Navigation Menu Formatting!
I'm trying to build a horizontal menu that has tabs. Basically it's a horizontal 5px line with the inactive links/tabs upside down hanging from the line, and the active page having the tab above the line. But I'm having a heck of a time getting the css to work on the one tab on top (contact link shown here). Anyone have any ideas how I can accomplish this? You can see my css attempt below. Thanks!!
Code: #menu
{
width: 490px;
height: 20px;
padding-left: 300px;
padding-top: 72px;
border-bottom: 5px solid #b8ac85;
}
#menu.down
{
width: 490px;
height: 20px;
padding-left: 300px;
padding-top: 92px;
border-bottom: 5px solid #b8ac85;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu.up ul {
list-style: none;
padding-top:40px;
}
#menu.up li {
display: inline;
padding-top:-40px;
}
#menu a {
float: left;
width: 84px;
height: 20px;
display: block;
text-align: center;
text-decoration: none;
color: #663300;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
padding-top: 5px;
background: url(images/button_down.gif) no-repeat;
}
#menu a:hover {
width: 84px;
height: 20px;
padding-top: 5px;
color: #FFffff;
text-decoration: underline;
}
#menu a.up:link {
float: left;
width: 84px;
height: 20px;
display: block;
text-align: center;
text-decoration: none;
color: #663300;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
padding-top: 5px;
background: url(images/button_up.gif) no-repeat;
}
#menu a.up:hover {
width: 84px;
height: 20px;
padding-top: 5px;
color: #FFffff;
text-decoration: underline;
}
Similar TutorialsI'm trying to center the drop menu x horizontal code from the following url: http://www.gosu.pl/MyGosuMenu/ The problem is every time I center it all browsers except Internet Explorer mess up when you try to resize the window. For example in Firefox if you center the drop down menu and hover your mouse over the drop down menu it will line up but then if resize the Firefox window and hover your mouse over the drop down menu again the drop down options will not line up. For centering I've tried centering with CSS and using the <center> tag and both ways cause this same problem. Any help with this would be appreciated. Thanks, Jeff Hi, on my website I've made a navigation menu from a table. What I wanted to know was if there was an easier way of making changes to it without having to go to every page and editing the HTML. The website is located here ( www.robs550paracord.com ). I'd like to keep the look of the nav bar the same, w/o having to use flash. Thank You. So Im on my way discovering Wordpress. My html/css knowledge is more then reaching.. php is my problem. I want to know how to have one menu on the homepage. But another menu on the follow up pages. I want to convert this site, so have a look and press the first button on the right to see what I mean. My problem is that I dont know how to load that .css file / several .css files ? thanks for reading 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). http://www.ivoog.com/test1 The page is fully complete, feel free to give any suggestions/updates. However, the only problem I have found so far is that in Internet Explorer 6, the menu does not turn green onmouseover. Is there a simple fix for this? Thanks. Hi guys, www.ivoog.com - I am having a problem with IE 6 on the navigation menu. Open it up in IE 6 and mouseover the different buttons (scooters, miniscooters, bikes, atvs, accessories, etc). See how it kind of gets "messed up" when you mouseout? What is the problem? Is it a simple solution? Here's my CSS: http://www.pics.ivoog.com/top/navigation.css javascript: http://www.pics.ivoog.com/top/navi.js If it's a fairly simple solution what do I need to change? Thanks! Hi, Can anybody tell me how to code a sliding navigation bar? By sliding navigation menu i mean that when the user scrolls down the page, the navigation menu follows the screen down and vice versa. Below I have pasted my code for my navigation menu. Cheers, <div id"quicklinks"> <p id="quicklinks"> <img src="images/greekflag.jpg" alt="Greek Flag"><br> <br> <a href="index.html">Home</a><br> <br> <a href="pages/apartment.html">Apartment Details</a><br> <br> <a href="pages/kassiopi.html">Kassiopi</a><br> <br> <a href="pages/corfu.html">Corfu</a><br> <br> <a href="pages/corfutimeline.html">Corfu Timeline</a><br> <br> <a href="pages/gallery.html">Gallery</a><br> <br> <a href="pages/quiz.html">Corfu Quiz</a><br> <br> <u><b>External Links</b></u><br> <br> <a target="_blank"href="http://www.kassiopi.info">Kassiopi Experience</a><br> <br> <a target="_blank" href="http://www.kassiopi.org">Kassiopi</a><br> <br> <a target="_blank" href="http://www.greeklandscapes.com/greece/corfu.html">Hydropolis Water<br> Park</a><br> <br> <a target="_blank" href="http://www.agni.gr">Agni</a><br> <br> <a target="_blank" href="http://www.kassiopi-cosmic.com">Kassiopi-Cosmic</a><br> <br> <a target="_blank" href="http://www.aqualand-corfu.com">Aqualand</a><br> <br> <a target="_blank" href="http://www.yannisrentacar.gr">Yannis Rentacar</a><br> <br> <img src="images/greekflag.jpg" alt="Greek Flag"> </div> </p> Does anyone know how to create this in Dreamweaver? I'm mostly interested in how the navigation bar jpg has sort of an image map idea to it (even though it's not an image map). This is how the navigation bar looks in your html browsers: This is how it looks without any CSS coding: This is how the navigation bar's jpg looks alone: (different states for how the navigation "button" will look when hovered over, clicked, etc) Any help would be greatly appreciated! I'm very new to HTML/CSS/Javascript. In the website I'm trying to build, I want to display a relatively simple navigation menu on the left side of the webpage, similar in look to the one here (example): http://build-website.com/design/opportunity.html Is there some way to put the initialization text for the navigation menu in a separate .html file (or, just some other file), so that every time I want to add a section/link to the nav menu, I won't have to go through each of my web pages individually and add the code for the link? (I am not going to use frames because, among other things, that would make it more difficult to bookmark and copy addresses of individual pages) I have been teaching myself through the w3schools tutorials, but despite looking through them and googling for answers I haven't been able to find a solution. Is this possible in HTML? Something that would allow something like like <div src="navmenu.html"> would be ideal but I haven't been able to find anything. (At the moment I'm just using notepad and typing in code manually) Hi everyone.. I;ve just launch my new webiste but IE seems to have messed up some of the formatting. Is there an eastyfix/tool to remedy this? All other browsers see fine. I have tested in Browsershots... Thanks Hey there just starting to make a new site, and just kinda slowly making pages and trying to get the formatting and looks down first. anyways here is my site: http://uberwalla.com and you may notice depending on the resolution the footer is not at the very bottom its kinda floating high with a gray bottom under it. I am just wondering how i can make it so that no matter what resolution and no matter what browser, that it'll automatically make the footer the very bottom (touching the status bar or past it have to scroll down) no matter the size of the page. thanks in advance, uberwalla Alright since you all were so much help with my last question, here's another. if you look at my website ottersupport.com, you will see that the first page is using a template. I downloaded this and it is working/looks correct on this page but if you click the links for "Rates" and " terms" the templates styles are not on the left side like they are on the first page. I don't see any problems with the code, however I really don't know what I am doing. Thanks in advance, James --Come on is there seriously nobody that can answer this ? If I have this in the wrong area let me know or move it. I am a total newbie to this and so I have no idea what is going on. I downloaded a template from a wesite I forget which, but it looks great in IE, and Safari, however in Firefox, or Opera it is all screwed up. The site is www.ottersupport.com would somebody mind look at the code and let me know what i need to fix ? Thanks Hi there, HTML noob here trying to edit existing pages in our student information system. I've added a number of elements in the immunization row, however I can't seem to figure out how to line up the Compliant? and Exempt? rows with the above immunizatiion rows. Any suggestions would be much appreciated. Thanks, John Greetings All, Some background: I'm as green as grass when it comes to html and website design, but that still did not stop me from buying a small website (business) from a desginer on ebay. It did well with some advertising, but recently I have had to change my payment processor because paypal froze my account for something that they have yet to explain to me (apparantly this is common with paypal) In any event, I managed to add the new payment processor to my website, but in the process of doing so, I did something to this page that made it larger and the pics are not in allignment any longer. There are gaps and it looks just plain ugly and unprofessional See for yourself: 1. The website as it should be: http://get-your-ride.com 2. The malfunctioning page: http://get-your-ride.com/join.html Can anyone walk me through on how to fix this? Is there a magic button to push? Or would you prefer I copy and paste the script for your expert eyes,since at this time html is more or less mumbo jumbo to me. I was wondering if anyone could help me. I have two DIVs. One is 43px high and 100% width. The second I want to be 100% high - 43 px. Is there a way to do this with CSS without resorting to Javascript? Many thanks. Hi, I made a webpage using dreamweaver 8. When i preview the page in firefox it has not problems in design layout of the page but when i view it in IE it breaks the design format and is messed up. Can anyone guide me as to why it would do it and how i can fix it? Also, when i try to display some text in Chinese, it shows random characters. I changed the fonts in internet options to display Chinese but it didn't work. I have viewed Chinese websites and they i didn't have any problem in seeing the text. Any reason or suggestion as to why it would do this? I would really appreciate any help on this, Thanks, Hi Guys, Does any body know where in html you can change auto-formatting on or off Because previsouly i had turned it on and when i press ctrl + a then ctrl + X and then repaste the code HMTL would automatically format it.... This would be really handy if some one can tell me please... Thanks. |
|||||||