|
HTML - Css Vert. Navbar - Large Left-margin Inside Each Box
I've been having problems lately with my navigation bar. For some reason it adds a huge, annoying margin on the left of each button that makes it 1. Hard for the navigation buttons with more than one word in them to fit correctly and 2. Looks really bad.
I attached a screenshot and my code. CSS HTML Code: .navContainer {
background: #336600;
margin: 0.5em;
padding: 0;
float: left;
width: 15%;
height: 18em;
}
ul#nav {
list-style-type: none;
}
ul#nav li a {
background-color: #A35200;
color: #fff;
font-family: "Trebuchet MS";
font-size: 19px;
padding: 0.3em 2em 0.3em 2em;
text-decoration: none;
border: 2px solid #824200;
border-style: inset;
display: block;
margin-top: 1em;
text-align: left;
}
ul#nav li a:hover {
background-color: #8F8F00;
color: #000;
border-style: outset;
}
HTML HTML Code: <div class="navContainer">
<ul id="nav">
<li><a href="#" style="margin-top: none;">Home</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
Similar TutorialsHi, Do you know the answer to this question? (I wasted a lot of time trying figure out this problem, before finally giving up.) How do I get the book cover image to display with no left margin, while preserving the 5px right margin? It displays with no left margin in my WYSIWYG editor. But, it displays with a 5px left margin in IE and Firefox. Here is the code... <a target="_blank" title="New Covenant Theology" href="/images/stories/book/book_cover_original_size.jpg"> <img style="border-style: none; border-width: 0px; left-margin: 0px; right-margin: 5px; title=" alt="New Covenant Theology" src="/images/150x199.jpg" width="150" align="left" height="199" /></a> 24 Reasons Why All Old Testament Laws Are Cancelled and All New Testament Laws Are for Our Obedience. See God's law in redemptive history explained simply and clearly with 7 diagrams, 20 charts, and 702 verses. Dedicated to Reformed, Covenant Theologians; Seventh Day Adventists; and other Sabbath-keepers. Read 3, free chapters from the book now: <a href="/new-covenant-theology.htm" title="New Covenant Theology"><span class="style20">New Covenant Theology</span></a></p> And, here is the webpage... http://www.jesussaidfollowme.org/#biblestudies Thanks for your insight, Greg Gibson Hello! I've checked my coding and found that my coding is correct, no margins on top of the page, but when I copy and paste a form code, it causes a top margin to appear, please see the coding, it's this page http://www.autoattireparts.com/freestuffform.html Can anyone tell me what's wrong with it? The form works, just need the top header to be flush with the top of the page. Thanks! Skattered Pictures Hello! How can I center the divs and keep this arrangement? I have the bg centered and would like the divs to be also, without using the margin-left tag since it will only look centered on some screens. Thank you very much for your assistance! www.rkgrant.co.cc The layout of my page, like that of many pages, consists of a bunch of divs inside divs. Whenever I specify the width or height of a div, there appears a space to its left, three pixels wide. This gap also appears when I substitute a standard image (img) for a div. Some of these divs are floated left; others are not. In the latter case, floating left actually gets rid of the space, but causes other problems as I don't really want those ones floated left. Setting the borders, margins, or padding to zero (or a negative number) does not affect the 3px gap. I am using IE7. Okay I know IE 7 problems are nothing new but being that I am fairly new at this and I am reading everything I can and I am still not catching up with how to correct it. I have the website up on a test server at http://www.vsncom.com/sterling I am working on a mac and the site works fine on IE 5.2 for mac and any other browser. However, IE7 causes a huge shift in the whole page to the left. And a few other elements are slightly shifted as well. The bottom nav is up a little higher than it belongs. The three pictures on the left are shifted further right. And that is all that I get shown when I capture the screen from net render and such. (Please look at attached picture to see what IE7 gives me) So, im not sure what else may be going on. If I can get the whole page to come back to the left then I can address the other issues maybe. But does anyone have any ideas how to do this. Please. I appreciate the help. I have been trying to figure this out for a week now and reading everything I can find online and trying anything I can think of so please save me. Matt Hi. The following example code displays the way I want it to in Firefox, with the top row about one pixel deep. But in IE 7 and MS email viewers (outlook, outlook express) it doesn't, with the top row being maybe 15 px deep. I've tried coding it all kinds of ways but I can't get the same effect as in Firefox. Does anyone know how to get round this? (The reaso for using inline style and tables is that it's for a subscriber-only email newsletter. and that's what works.) Would be grateful for any suggestions ! Thanks Dedge ******************************** Code: <TABLE width="520" cellSpacing=0 cellPadding=0 border=1> <tr><!--Row to set column widths--> <td valign="middle" align="center"> <IMG src="spacer.gif" width="1" height="1" alt=""> </td> <td valign="middle" align="center"> <img src="spacer.gif" width="256" height="1" alt=""> </td> <td valign="middle" align="center"> <IMG src="spacer.gif" width="8" height="1" alt=""> </td> <td valign="middle" align="center"> <IMG src="spacer.gif" width="255" height="1" alt=""> </td> </tr> <tr> <td><IMG src="spacer.gif" width="1" height="30" alt=""></td> <td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; LINE-HEIGHT: 15px; PADDING-BOTTOM: 3px; MARGIN: 4px 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #000066; TEXT-ALIGN: center">Left-Hand Heading</td> <td><IMG src="spacer.gif" width="1" height="1" alt=""></td> <td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; LINE-HEIGHT: 15px; PADDING-BOTTOM: 3px; MARGIN: 4px 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #000066; TEXT-ALIGN: center">Right-Hand Heading</td> </tr> </TABLE> Hello, I've downloaded the Extreme Gaming template and was pleased to find the the navigation bar had a PSD that was easy and simple to edit. However, I'm having problems integrating the edited navigation bar into my site. When I do, it seems to move around all the tables and leave black spaces everywhere. I'm not experienced enough at HTML to find the problem and fix it. I was hoping that maybe someone could do it for me or give me a few pointers at what I'm doing wrong. Here's the images I go after editing the PSD and slicing it accordingly. This is what I want the new nav bar too look like... (mouse off) (mouse on) (those are all different images, not one big long one) Here's a zip for all the images above... images.zip The links are as follows... Home - index.html Forums - forums/index.php Downloads - downloads.html Structure - structure.html Frappr - frappr.html Mail - http://mail.google.com/a/extremedeadlyforce.com/ And here's the code for the current navbar... Code: <tr>
<td colspan="3">
<a href="#"><img src="index_files/Slice_07_7.gif" alt="" hsrc="images/Slice_07_7_over.gif" border="0" height="37" width="57"></a></td>
<td>
<a href="#"><img src="index_files/Slice_08_8.gif" alt="" hsrc="images/Slice_08_8_over.gif" border="0" height="37" width="73"></a></td>
<td>
<a href="#"><img src="index_files/Slice_09_9.gif" alt="" hsrc="images/Slice_09_9_over.gif" border="0" height="37" width="49"></a></td>
<td colspan="3">
<a href="#"><img src="index_files/Slice_10_10.gif" alt="" hsrc="images/Slice_10_10_over.gif" border="0" height="37" width="71"></a></td>
<td colspan="2">
<a href="#"><img src="index_files/Slice_11_11.gif" alt="" hsrc="images/Slice_11_11_over.gif" border="0" height="37" width="81"></a></td>
<td>
<a href="#"><img src="index_files/Slice_12_12.gif" alt="" hsrc="images/Slice_12_12_over.gif" border="0" height="37" width="105"></a></td>
<td>
<a href="#"><img src="index_files/Slice_13_13.gif" alt="" hsrc="images/Slice_13_13_over.gif" border="0" height="37" width="93"></a></td>
<td>
<a href="#"><img src="index_files/Slice_14_14.gif" alt="" hsrc="images/Slice_14_14_over.gif" border="0" height="37" width="57"></a></td>
<td>
<a href="#"><img src="index_files/Slice_15_15.gif" alt="" hsrc="images/Slice_15_15_over.gif" border="0" height="37" width="85"></a></td>
<td colspan="2">
<img src="index_files/Slice_16_16.gif" alt="" height="37" width="194"></td>
</tr>
Here's the link for the whole template... default_template.zip Thanks is advance! If you need anything else just say so. I am trying to create a navbar based on http://www.myweddingfavors.com. Here is mine: http://www.prizepappa.com In FireFox the onmouseover and onmouseout seem to be working fine but not in IE. There is a strange delay. And I can't seem to get my searchbar looking right. I am really new to this. Anyone think they could help me straighten out my code and css? Thanks Hello, I'm new to this forum, but I came here because I need help with editing a navbar that came with a free template I downloaded. You can view the navbar (along with the rest of the sight) here. I'd like to change it to these images in the order they come. Regular = Mouse Over = Link To = index.htm Regular = Mouse Over = Link To = forum/index.php Regular = Mouse Over = Link To = download.htm Regular = Mouse Over = Link To = http://mail.google.com/a/layercakeclan.com Regular = Mouse Over = Link To = frappr.htm Regular = Mouse Over = Link To = music.htm And here's the spacer to fill the rest of the space... The current code for the navbar is... HTML Code: <td colspan="3"> <a href="index.html"><img src="images/Slice_07_7.gif" alt="" width="57" height="37" border="0" hsrc="images/Slice_07_7_over.gif"></a></td> <td> <a href="forum/index.php"><img src="images/Slice_08_8.gif" alt="" width="73" height="37" border="0" hsrc="images/Slice_08_8_over.gif"></a></td> <td> <a href="forum/index.php?board=3.0"><img src="images/Slice_09_9.gif" alt="" width="49" height="37" border="0" hsrc="images/Slice_09_9_over.gif"></a></td> <td colspan="3"> <a href="roster.html"><img src="images/Slice_10_10.gif" alt="" width="71" height="37" border="0" hsrc="images/Slice_10_10_over.gif"></a></td> <td colspan="2"> <a href="matches.html"><img src="images/Slice_11_11.gif" alt="" width="81" height="37" border="0" hsrc="images/Slice_11_11_over.gif"></a></td> <td> <a href="downloads.html"><img src="images/Slice_12_12.gif" alt="" width="105" height="37" border="0" hsrc="images/Slice_12_12_over.gif"></a></td> <td> <a href="sponsors.html"><img src="images/Slice_13_13.gif" alt="" width="93" height="37" border="0" hsrc="images/Slice_13_13_over.gif"></a></td> <td> <a href="links.html"><img src="images/Slice_14_14.gif" alt="" width="57" height="37" border="0" hsrc="images/Slice_14_14_over.gif"></a></td> <td> <a href="about.html"><img src="images/Slice_15_15.gif" alt="" width="85" height="37" border="0" hsrc="images/Slice_15_15_over.gif"></a></td> <td colspan="2"> <img src="images/Slice_16_16.gif" width="194" height="37" alt=""></td> ..that's all the information I think you'll need, but if you need more jusr reply and I'll see what I can do. Hello, Can someone please tell me how I can implement a navigation menu which will highlight the currently viewed page content when using CMS? Basically every page address has the name 'index.php?site=(name of page)' so effectively every page is the same but the content differs. I want to add a navigation menu which indicates the currently viewed content within the page. Thanks very much in advance for your time. Hi all, I'm obviously a newbie here, but I was wondering if anyone could provide some help on this NavBar problem that I'm having on a site I'm building for a client. This is probably an easy fix, but I'm not sure what the exact issue is. The site is http://www.telcare.com/ I added that new button for "Careers" last night and now I'm noticing on Firefox & Chrome that the dark blue NavBar with the buttons is stretching to the right. I'm thinking that perhaps the buttons are too wide and it's moving the dark blue background bar beyond the page size. Any help or advice will be much appreciated. Thanks Hello folks! I'm currently designing a site and must create the navbar below. However, to maintain consistency with IE6, we're not going to be using negative margins which makes this much more difficult. Between my partner and myself we've put a good 10 hours into what we thought was a simple element. Despite him being a programming and myself being a graphic developer, we'be both had a limited amount of education in HTMl and CSS and assumed we'd be able to handle it. Unfortunately it's not looking so at the moment. Any help given is most appreciated... I'm super frustered. Here are the two images I'm using in the above example if anybody feels like taking a stab at it: Hi, sorry if this is something that has already been answered but I'm trying to make a site that had a standard navbar on every page, however when ever I want to change the navbar I have to copy the new code to each and every page on the site. How can I do this so that I only need to update the code in one place? I did a course in web design years ago and in that I used frames to achieve this however it's my understanding that frames are now depreciated and so there must be another way to do this? I know you can link to javascript that is stored in another file as well as have your css as a separate file, is it possible to do this with HTML and if so is that the easiest way to do it? I know I have posted in the HTML section but I'm also trying to learn PHP at the moment (which is largely what the site if for) so if there is a solution involving PHP that that's welcome too, doesn't have to be a HTML solution, I just presumed that there would be an easy way to do it with HTML alone. I fixed It! I added the images inside the banner image hi there, ive searched all over the internet about this. but i think im searching the wrong way...and thats why im here, to ask you guys. how does one get the neato lil icon in the navbar for their website? im fairly new to html, but if anyone could explain or point me in the right direction, i would be very appreciative thanks I need to create a very basic nav bar with some properties. Here are my requirements below: *I use six images in place for the link *I use six additional images for 'hover images'. So when the user hovers over one of the nav images a new one shows up *Each additional image is different. *I need it to work in ie6(hopeful), ie7, ie8 *I would like for it to be valid code as well. Now I'm busy doing css navs and I forget the 'old school' days of html nav bars. What would be good resources for such a navbar for me to review and create this? Any help would be greatly appreciated. My main pages have a thick navy blue nav bar at the top. http://budurl.com/u24k/d This is the way I'd like it to be. I copied and pasted the code to create the portfolio pages http://budurl.com/7fpy/dbut the navbar appears skinnier ... making a space appear when the "portfolio" pulldown menu is engaged. I'm probably missing something completely obvious, right? Thanks so much for your help! Hi there I have a navigation bar on the site im building, but when im in screen resolution 800x600 two of the links do not work, they become unclickable. Here is the html code for one of the pages: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <link rel="stylesheet" type="text/css" href="styles4.css"> <title>Kabasa Guest House and Restaurant</title> <meta name="author" content="xxxxx"> <meta name="description" content="xxxx"> <meta name="copyright" content="2011"> <meta name="keywords" content="xxxxx"> </head> <body> <ul id="navbar"> <li><a href="home5.html">HOME</a></li> <li><a href="menu4.html">MENU</a></li> <li><a href="room4.html">ROOMS</a></li> <li><a href="rates2.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1 align="center">Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxx xxxx xxxx 0000000 </pre> </div> </div> <h3>Rates</h3> <div id="rates"> <pre> <u>Our Rates are as follows:</u> <b>Single rooms:</b> Self contained complete with breakfast at only kshs 1500 ($17)<br /> <b>Double rooms:</b> Self contained complete with breakfast at only Ksh 2500 ($28)<br /> <b>Double rooms twin rooms:</b> Self contained complete with breakfast at only Ksh 2500 ($28)<br /> <b>Lunch and dinner</b> is also available at very affordable rates. See our restaurant section for more details.<br /> <b>Our aim </b>is to provide the best service both to local and international clients at the most economical rates. </pre> </div> </body> </html> CSS code: Code: #navbar li {
list-style-type: none;
background-color: #CCFFFF;
margin: -1%;
margin-top: 2%;
position: relative;
top: 20px;
left: -6px;
padding: 1px;
width: 12%;
font-size: 20px;
}
#navbar a:hover {
color: #000;
background: #fff;
}
body {
font-family:Lucida Grande,Tahoma,Helvetica;
font-size:11pt;
color:#000066;
background:#ffffcc;
}
h3 {
position: relative;
top: 15%;
left: 45%;
}
h4 {
position:absolute;
top: 10%;
left: 40%;
}
h5 {
position:absolute;
top: 14%;
left: 36%;
}
h6 {
position: absolute;
margin: auto;
left:0;
right:0;
top: 37%;
width: 520px;
}
#address {
position: absolute;
margin: auto;
left:0;
right:0;
font-weight: bold;
font-size: 10pt;
font-family: arial, sans-serif;
width: 182px;
}
#header {
position: absolute;
margin: auto;
left:0;
right:0;
top: 2%;
width: 800px;
}
p {
position:absolute;
top: 53%;
left: 5%;
}
pre {
margin: 8px 8px;
clear:both;
z-index: 2;
background-color:white;
filter: alpha(opacity=75);
opacity: 0.75;
}
#rates {
position:absolute;
top: 50%;
left: 4%;
width: 85%;
}
When in 1440 x 900 all the links work fine. The two links that stop working in 800x600 are Home and Menu. Any ideas on what could cause this? Many thanks Jackie Can anyone help me with this problem? www.enveme.com/index.php The navbar is separating and i can not figure out why. Hello everyone, here we go: I've got nice nav bar with js, working perfect (got it at http://net.tutsplus.com/tutorials/de...vigation-menu/ ), now when I try to add rel="lightbox" to images, the lightbox doesn't work ? Here's the html, I'll explain more; HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">About Them</a></li>
<li><a href="#">About You</a>
<ul>
<li><a href="#">More About Us</a></li>
<li><a href="#">More About Them</a></li>
<li><a href="#">More About You</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">American Offices</a></li>
</ul>
</li>
<li><a href="#">American Offices</a></li>
</ul>
</li>
<li><a href="#">Mission Statement</a></li>
</ul>
<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
</p>
<p>
<img src="file:///C|/Users/Miha/Documents/_Blinds_.jpg" width="256" height="256">
<script type="text/javascript" src="js/scripts.js"></script>
</p>
</body>
</html>
In order to install the "lightbox": You will need to include these three Javascript files in your header (in this order). <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> If I place these scripts in head - it wont work. If i delete the bottom three scripts which are used for nav bar then lightbox will work but then I shut off animation for nav bar? May-b someone had same problem and found solution where to put this three scripts from lightbox to work with nav bar ? (files for lightbox are in right position, styles are in right place, js is also located right - triple checked) Finished the whole d**n site and now the lighbox is eating my brains.. Tried searching for the answer on google and other forums and didnt find answer so any idea at all is very welcome. |
|||||||