|
HTML - Help - My Navigation Buttons Are Spilling Over Onto A 2nd Row
Hi
I'm new to web design but have created a 1st shot. Unfortunately the 9 navigation buttons (spread horizontally) spill over onto a 2nd row. My guess is tat this is because the wording for some of the buttons is a bit wordy. I don't want to lose the words at this time. Any ideas of how I can arrive at a neat solution. Ideally I would prefer that all the buttons fitted into a single row. Is there any way of achieving this? (even if the text within certain cells is split over 2 rows within the cell) Thanks for any help you can give Chris you can see the sort of results I'm getting at www.universal-campus.net Below is the tswtabs.css style sheet referred to in the code for each web page and which contains the settings for the navigation buttons /* tswtabs.css 1.0.2 Please use the CSS Menu Button Wizard at http://www.thesitewizard.com/wizards...-buttons.shtml to generate your own customized menu buttons. */ #tswcsstabs ul { margin: 10 ; padding: 0 ; list-style: none ; display: inline ; } #tswcsstabs ul li { margin: 0 ; padding: 0 ; display: inline ; text-align: center ; list-style: none ; font-family: Arial, Helvetica, sans-serif ; } #tswcsstabs li a { color: #000 ; background-color: #36b4d6 ; border: 1px outset #00f ; padding: 8px ; text-decoration: none ; display: inline ; } #tswcsstabs li a:hover { color: #ff0 ; background-color: #0000c0 ; } Below is the code I'm using on each page to set out the navigation buttons <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="http://www.universal-campus.net/tswtabs.css"> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>about</title> </head> <body> <ul> </ul> <table style="text-align: left; width: 1360px; height: 282px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><a href="worldheader.jpg"><img style="border: 0px solid ; width: 1348px; height: 265px; float: left;" alt="" src="worldheader.jpg"></a></td> </tr> </tbody> </table> <table style="text-align: left; font-family: Arial; font-weight: bold; width: 100%;" border="1" cellpadding="2" cellspacing="5"> <tbody> <tr> <td> <div id="tswcsstabs"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Global Campus</a></li> <li><a href="portfolio.html">Our own Business Portfolio</a></li> <li><a href="business.html">Getting more from your Business</a></li> <li><a href="investment.html">Maximising your Investments</a></li> <li><a href="coach.html">Your Coach & Mentor</a></li> <li><a href="exit.html">Making the most from your exit</a></li> <li><a href="feedback.html">Contacting Us</a></li> <li><a href="associate.html">Working as one of our Associates</a></li> </ul> </div> </td> </tr> </tbody> Similar TutorialsI have some buttons I made for a navigation that goes across the top (horizontaly) and I have quite a few. So they don't all fit in one row. What I want to do is make a second row of buttons benethe the first row. like for example, button button button button button button button button ect. I knew using breaks wouldn't work, so I don't know why I tried. I used a generator so I know nothing really about divs or tables or anything like that, but if someone could show me where to add like a break for this type of html that would be great!! HTML Code: <td width="3"></td>
<td><div class="wg-button">
<a title="Quotes" style ="POSITION: relative" href="../quotes/index.html" ><img alt="" src="../_frame/button.png"><span style="LEFT: 18px; WIDTH: 77px; CURSOR: hand; POSITION: absolute; TOP: 18px"
>Quotes</span></a></div></td>
<td width="3"></td>
<td><div class="wg-button">
<a title="Glitters" style="POSITION: relative" href="../glitters/index.html" ><img alt="" src="../_frame/button.png"><span style="LEFT: 16px; WIDTH: 77px; CURSOR: hand; POSITION: absolute; TOP: 11px"
>Glitters</span></a></div></td>
<td width="3"></td>
<td><div class="wg-button">
<a title="Icons" style="POSITION: relative" href="../icons/index.html" ><img alt="" src="../_frame/button.png"><span style="LEFT: 18px; WIDTH: 77px; CURSOR: hand; POSITION: absolute; TOP: 18px"
>Icons</span></a></div></td>
Hello, I painted web design with Photoshop and used slice tool to slice it. Than exported to html file. No css file. And I got a problem. When in page are a lot of text wich goes down, my navigation buttons gets far away from each other. I attached screenshots. Looking to the website with Opera browser, everything is alright, but browsing via IE it looks bad. Editing with dreamweaver everything looks good like with opera, but editing with FrontPage, it looks bad like via IE. Maybe someone can help me? Thank you. Sorry for my bad english. LINK TO THE WEBSITE Here's a link to the page I'm currently working on. http://www.vancouver4condos.com/test/ The big map picture is set up as an image map, with all the areas already specified. Each area gets highlighted when viewer hovers the cursor over it. Also, right above the map is a navigation menu, with all the buttons corresponding to each of the areas on the image map below. I was wondering if there is a way to connect each of the navigation buttons with their corresponding map image areas in such a way that when the user hovers the cursor over a button, its map area will automatically get highlighted. Ideally, the opposite would also be true - when hovering the cursor over one of the map areas, its corresponding navigation button would also highlight. Hey guys, EDIT: I figured it out. There was a phantom image that I had between the two that no longer belongs. Nevermind! Thanks, ~C-Style~ http://www.iankovi.com/htmlllll.html http://www.iankovi.com/csssss.css Any suggestions? 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 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! 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 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!!!!! 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, 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! 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. 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>
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! 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 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 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. 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.) Hi Guys/Ladies Im working through CSS learning it and so far its going well but i am stuck on this issue and a refuse to turn back to Html Tables etc i want to learn how to code without tables So i have a horizontal Menu bar and i would like to populate it with buttons linking to different sections on the site there is already two buttons but you can see from the image they are both touching one another i need to space them out, the buttons arent finished i want to get the layout sorted first then start adding detail. This is the CSS for the menu bar. I added the background image. HTML Code:
div.hideSkiplink
{
background-image: url('/images/BottomMenu.gif');
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
This is the code on the site master where im calling the CSS HTML Code: <div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
iv attached the image so you can see what its doing.... Hope some one can help me |
|||||||