|
HTML - Need Help With Navigation Bar Tweaks
On this page, I haven't been able to figure out how to make the following fixes to the horizontal navigation bar:
Close the gaps between the buttons Make the width of the bar match the graphic above it so left/right edges align Center-align first button on the left that appears left-aligned in IE Set the font & font-size for the navbar (not sure where this goes) Here's my current css: ul#navlist { margin: 0; margin-left: 0 ; margin-top: 2px; padding: 0; padding-left: 0; text-align: top; list-style-type: none; white-space: nowrap; } ul#navlist li { display: inline; } ul#navlist li a { padding: 2px 11px; text-decoration: none; color: #AFEEEE; background-color: #528B8B; border-top: 2px #65909A solid; border-bottom: 2px #65909A solid ; border-left: 0px #c1f0f6 solid; border-right: 0px #c1f0f6 solid; } ul#navlist li a:hover{ background: #ffffff; color:#336699; } I'd also love to make a simple gradient background for the buttons, shading from #336699 along the top to #528B8B along the bottom, but I haven't been able to find instructions on how to do this without Photoshop. If anyone knows of a tutorial for doing this with Publisher (or Paint.NET), I'd love the URL. Thanks, folks! Similar Tutorialshi guys, I am creating a site and i want to have sub navigation. here is a link to what i got so far http://renttheweb.com/cah/ and here is the code Code: #sidebar
{
float: left;
width: 225px;
background-color:#ffffff;
}
#sidebar ul
{
margin:0;
padding:0;
list-style:none;
}
#sidebar ul ul
{
margin:1em 0;
padding:0 1em;
}
#sidebar ul ul ul
{
margin:0.3em 0;
padding:0 0.5em;
}
#sidebar form
{
margin:1em 0;
padding:0 1em;
}
#sidebar h2
{
margin:0;
padding:0;
font-size:1.1em;
}
i got the sub nav working but i want it hidden until the parent link is clicked and then it will expand and show the sub pages under that link. any ideas? CC_DESIGN Basicly, the problem is when you resize the window to the site, the navigation bar moves frome the place it is suppose to be, and stretches; this throws off the whole layout of the site when the window is resized by anyone(it needs to stay in with the background but it's not) Any help will be great!!!!! So with some trial and error (and much help from the topics on this forum) I figured out how to make my navigation bar static throughout my templates. But now I have another problem, I'm not sure how to add another link to it.. Not successfully at least. I can add another menu, but either it won't go on the bar, or it will force another link off and it will be below the bar. I used This to make my bar, but the site doesn't seem to be working right now. If that isn't good to use, would someone be so kind to recommend a good free\cheap one? Also, I am using Kompozer and have little experience with any of this.. So any help is greatly appreciated. (BTW, sorry if this is the wrong section.) Im currently working on a site offline but i want to have it when you hover over the navigation it switches to an image! Let Me Explain I made buttons in photoshop but when you hover over them i want it to change to another image! im going to give you an example! this is before i hover over my navigation this is what i want it to change to when i hover over it! thanks in advance! I built a nice little tabbed navigation and it works great in firefox and safari and displays perfectly fine in IE 6 but for some reasons my rollovers don't work. I'm not too sure as to why, everything seems fine to me... but apparently not to Internet Explorer. I've attached my code below and you can see an example of the nav here. (I don't have IE7 installed so if someone can take a look at it in that and let me know if it works or not that would be awesome!) 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if IE]><link rel="stylesheet" media="screen" type="text/css" href="css/htc.css" /><![endif]-->
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
body { background: #999; }
#tab_wrap { width: 328px; background: #fff; }
#tab_wrap h1 { margin: 0 0 1px 0; width: 328px; height: 37px; background: #44c2fd url(images/header_reviews.png) no-repeat 0 0; text-indent: -2800px; }
#tab_wrap ul { width: 328px; height: 31px; list-style-type: none; }
#tab_wrap ul li { display: block; float: left; }
#tab_wrap a { display: block; width: 55px; height: 31px; text-indent: -2800px; }
#tab_wrap a:hover { background-position: 0 -31px; }
#tab_wrap a.last { width: 53px; }
#tab_wrap a.current { background-position: 0 -31px; }
#music { background: #44c2fd url(images/tab_nav_music.png) no-repeat 0 0; }
#film { background: #44c2fd url(images/tab_nav_film.png) no-repeat 0 0; }
#dvd { background: #44c2fd url(images/tab_nav_dvd.png) no-repeat 0 0; }
#media { background: #44c2fd url(images/tab_nav_media.png) no-repeat 0 0; }
#games { background: #44c2fd url(images/tab_nav_games.png) no-repeat 0 0; }
#gear { background: #44c2fd url(images/tab_nav_gear.png) no-repeat 0 0; }
</style>
</head>
<body>
<div id="tab_wrap">
<h1>Reviews</h1>
<ul>
<li><a id="music" class="current" title="Music Reviews">Music</a></li>
<li><a href="#" id="film" title="Film Reviews">Film</a></li>
<li><a href="#" id="dvd" title="DVD Reviews">DVD</a></li>
<li><a href="#" id="media" title="Media Reviews">Media</a></li>
<li><a href="#" id="games" title="Games Reviews">Games</a></li>
<li><a href="#" id="gear" class="last" title="Gear Reviews">Gear</a></li>
</ul>
</div>
</body>
</html>
Howdy, I have a navigation bar at the top of every page on a website. This nav bar contains several links, and they are the same on each page. The problem is, the urls they reference often need to be changed. And editing a bunch of documents every time this happens seems like needless work. Is there a way I can make the links in this nav bar reference some CSS document or some such thing, which contains the actual links? Thanks for your time, - A noobie. Hi, I know basic html and I am trying to make a simple website for myself. I just can't get the navigation bar at the top of the page to display correctly. Look he pacificnewsnow.com/index2.htm I want to get the 2nd line of the navigation right under the 1st one. I've tried a table and it comes out like this: http://pacificnewsnow.com/index3.htm (The image for the 2 line of the nav bar will be different, but for now, it's just the same.) So, for a professional example of what I'm looking to do, look at this website: katu.com Thank you! I am new to html and web designing. I have an idea for a Navigation Bar but I do not know if its possible or if its been done before. My idea is for a horizontal Nav Bar with a green background. As the visitor puts his or her cursor over the link, a lightning bolt appears from the left side and extends to the right to where the cursor is located. When the cursor moves to the links on the right side it extends, and to the left it retracts. The lightning design will be above the green background but behind the text of the link. Has this ever been done before, if so where can I find it? If not, how can I make one just like it? Are there any navigation generators or 3rd party applications that have pre-set options to allow this as well? I initially had my website on freewebs.com, and used the code <!--#include virtual="/nav.shtml" --> for the navigation on each html page. I've now found a host and am trying to transfer all the pages over, however I can't seem to get the navigation sorted. The navigation should be on the left of this page - http://broadcast.tcg-publicity.org/about.html I really don't know why it's not working, as I haven't changed anything or edited any of the files. And the files are definitely in the right folder. This is the current index, and you can see that the correct file is there - http://broadcast.tcg-publicity.org/ Does anyone know what could be wrong?? Hi im currently re designing my site and would like a navigation bar similar to the one at http://spundoogle.com/skyserpent/GoogleX/ i just dont know where to begin though please help Hi people, I'm taking care of my web site but I would like to improve it with your help as I'm a bit of an ignorant with html and stuff. The navigation bar I've created is actually not a real navigation bar I believe. Every time you change page the bar reloads with the new page, you know what I mean? See for yourself http://www.clorinde.org/clorinde/index.htm How can I fix this so the loading of the pafe would be smoother and faster? Would you be able to provide me some codes? Thanks! Hi there, I am currently working on a website for the school I work at. The website requires a drop down menu that has some submenus to it. Since the site it going to be rather large, I decided to create a div for the navbar where I would use an SSI file. This would allow me to change the navbar in one place rather than on 25 pages. I have created the navbar in Fireworks, and have set up the properties for each button. I have altered the paths to the images so that they appear properly (see http://www.prestigeinteractive.com/wmems2/index.shtml ), I place the references to the js and css file in the shtml file where the menu is loaded and the paths are correct to the best of my knowledge. The problem I am facing is when the page is viewed, the drop down menu appears fifty or so pixels above where they should appear. I am not sure if I've done this correctly. Please view my work at http://www.prestigeinteractive.com/wmems2/index.shtml The files have been uploaded to this thread, as they are too long to cut and paste. Thanks for any help you can give. Greg I was wondering how i could do a navigation like this one with out using flash. I dont know java but only html. Please can someone help me? Here is what im looking for: http://nexon.net I just need the navigation part. Can someone please tell me how to make the navigation and the line right to the right of the navigation as seen here on this site: http://www.girlsnightoutmusic.com/ Thanks! Hi, I'm in high school and need a website for my "up-and-coming" YouTube channel. I've already finished two months of a basic Web Design class and we've just made the switch from HTML coding to Dreamweaver (but I use HTML for what I'm doing). Anyway, I know some stuff but am still pretty new and having minor difficulties with my navigation bar. I can get the links but I can't get the actual "bar" to form. I've already designed the site in OpenOffice.org (alternative for Microsoft Publisher) The link can be found on my YouTube channel's Facebook page. The image's URL is he https://www.facebook.com/photo.php?f...0634082&type=3 The link to the screenshot of my problem (includes web browser and code in the image) is he https://www.facebook.com/photo.php?f...0634082&type=3 Thanks in advance - Brad Can someone point me in the right direction for something that I think is simple (but I'm just not getting it). In one of my web pages I'l using the following code to close an open window: <form><input type="button" value="Close Window" onclick="window.close();return(false);" class="ppbuttonsmall"></form> I'd like to use similar code to advance to a different web page in the same window. For example, the page that is currently open is "page1.html". I'd like to have a button named "Next" that, when pressed, opens "page2.html" in the same window. I've changed value+"Close Window" to value+"Next" and I'd like to modify the "onclick" element to open "page2.html". Can someone help? This may be a silly question to some of you but I have never done it so here goes. I want to have my navigation menu overlay my header information, banner. Now I can do this by making the banner background but then how do I give the header its size with no actual content? Can I have the header content which is a img file be overlayed by a menu, unordered list? Thanks Hi, I am making a web site and stuck in a place and need help in resolving the issue. Let me explain the issue. I have 3 frames... top, left, right(the main page). The top frame non navigable and has banner. In the left frame I have created tree menus to navigate between different links. The first link is to show the main page in the right frame. I have make a link in the right frame which will take you to the google web site. When I click on the link to take me to the google web page I get the google web page on the right frame. But when I click on the home link which is in the left frame tree menu I AM UNABLE TO GO TO THE MAIN PAGE on the right frame. That mean that the google page that was showing on the right frame should go off and the main page should show in the right frame when I click on the home link ( on the left hand frame tree menu). But it does not happen in that way. I do not understand the reason...... Please help me to resolve this issue........ Hi there, I'm new to this forum so please let me know if I make any mistakes. I'm semi-literate in HTML and a little CSS, I've been coding small, very simple websites for 8 years or so, so I wanted to try something new for a friend's website. I'm making a website for a friend, and so I made a layout (I'm also a graphic artist) and sliced it in photoshop, then began assembling it using iframes. This is my first time using iframes, but I feel like I've caught on to the general idea now. I don't have an error I need help with, rather, I would like to know how I can use iframes to make the navigation bar on the right change with each new page. At the moment the top navigation buttons each open a new page within the main body of the website, each using iframes. I want to code it so as each new page is opened within the main body, the right side navigation bar (which consists of simply text links) changes with it. This is so the top can have links for the very main pages of the website, and the right side bar can have links for sub-pages within those main pages. The website is he http://lyericcosplay.webs.com/index.htm I can post the code or any other information you may need to help me. I'm also happy to use something other than iframes if it works for the right navigation bar, however I think I'm correct in using iframes for the main pages because it runs quite smoothly, and just how I want it to Thanks so much for reading! Hello! Can you please help me with this? I have the following HTML code (it is a navigation bar): Code: <html>
<head>
<style type="text/css">
ul {list-style-type: none;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Previous</li>;
<li>Page
<form>
<select name="page">";
<option>1</option>";
<option>2</option>";
<option>3</option>";
</select>
of 3
<input type="submit" value="Go"/>
</form>
</li>
<li>Next</li>
<li>Last</li>
</ul>
</body>
</html>
The problem is that the browser prints it on 3 lines. Can you tell me what I should do to get everything printed on one line? Using the white-space property doesn’t help. |
|||||||