|
CSS - Problems Getting Navigation Links To Work
Similar TutorialsBeen trying to figure out why my links in my navigation bar (id="extra") won't line up horizontally -- they keep stacking vertically. Can someone please tell me what I'm doing wrong? Thanks. The important bits are below... Code:
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #999966;}
div#extra{background:#a4c2c2; text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#fff}
div#footer{background: #999966;color: #333300}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left:200px; background: #fff}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{width:100%}
</style>
<body>
<div id="container">
<div id="header">
<h1 class="logo">Sowanee's</h1>
</div>
<div id="extra"><div class="navText"> <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> </div>
</div>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong></p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
Hi Forum, A small non-profit group I am working with has put together a website. Unfortunately, the horizontal navigation menu disappears on IE browsers. The links are still in place, but are invisible. The shaded boxes around them do not load. Unfortunately we have no idea how to fix it. I am a beginner with CSS-- any helpful hints or advice? Thanks. -Sellicott <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="" xml:lang="en" lang="en"> <head> <title>BUTT OUT! Ending Tobacco Industry Exploitation of the Lesbian, Gay, Bisexual and Transgender Community</title> </head> <body> <div id="wrapper"> <div id="header"> <div id="sitename"><img src=></div> </div> <div id="navigation"> %%MENU%% </div> <div id="content-wrapper"> <div id="content">%%CONTENT%%</div> </div> <div id="footer"> <div id="footer-content">%%WEEBLYFOOTER%%</div> </div> </div> </body> </html> *|*{ margin:0pt; padding:0pt; } body{ background:transparent url(pattern3.gif)repeat-x center top; background-color:#FFFFFF; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0; } p { line-height:18px; } h1, h2, h3{ line-height:40px; } #wrapper { width:760px; margin:0pt auto; } #header { float:left; width:760px; height:170px; } #sitename { color:#fff; padding-top:0px; font-size:2em; text-transform:uppercase; } #navigation { float:left; height:30px; width:760px; position:relative; } #navigation ul { float:left; padding:5px 10px 0 0; margin-left:0; } #navigation li { float:left; display:inline; font-family:"lucida grande", arial, sans-serif; text-align:center; font-size:1em; font-weight:bold; padding:6px 15px 8px 4px; margin-right:3px; } *html #navigation li { margin-right:4px; padding-right:15px; padding-bottom:9px; } #active { background: transparent url(tab_left2.gif) no-repeat left top; padding:6px 13px 6px 4px; color:#fff; font-weight:bold; } *html #active { padding-right:15px; } #navigation a:link { color:#fff; text-decoration:none; } #navigation a:visited { color:#fff; text-decoration:none; } #navigation a:hover { color:; text-decoration:none; } #active a { background: transparent url(tab_right2.gif) no-repeat right top; color:#464e54; padding:6px 14px 9px 10px; } #active a:link { color:#fff; text-decoration:none; } #active a:hover { color:#fff; text-decoration:none; } #active a:visited { color:#fff; text-decoration:none; } a:link,a:hover,a:visited { color:464e54; font-weight:normal; text-decoration:underline; } a:link { color: #464e54; } a:visited { color: #464e54; } a:active { color: #464e54; } .weebly_header { float:left; background: width:760px; height:1200px; margin-top:35px; } *html .weebly_header { margin-top:28px; padding-top:14px; } #content-wrapper { float:left; background: transparent url(content_background.jpg) no-repeat center top; width:760px; height:700px; } *html #content-wrapper { margin-top:-9px; } #content { padding-top:20px; padding-bottom:20px; } *html #content{ padding-top:35px; } img.image-left { margin-right:15px; float:left; } img.image-right { margin-left:15px; float:right; } #footer { visibility:hidden; padding-top:280px; padding-bottom:10px; float:center; } Hi, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this? Here is my code - Code: @import url('layout.css');
body {
background-image: /images/skyBACK.gif;
background-repeat: repeat-y;
background-attachment: scroll;
background: url('images/skyBACK.gif');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#container {
width: 1020px;
margin: 10px auto;
}
#masthead {
text-align: center;
width: 698px;
height: 140px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fafaff;
}
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#content {
float: left;
width: 518px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #66cccc;
}
#footer {
text-align: center;
clear: both;
width: 698px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
color: #3d6c87;
}
#masthead h3 {
color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a {
color: #0033ff;
text-decoration: none;
display: block;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a:hover {
color: #fff;
text-decoration: none;
border: 1px solid #5f8ea9;
background-color: #5f8ea9;
}
/* Content Styles */
h6 {
color: #000000;
}
h5 {
color: #000000;
}
h4 {
color: #000000;
}
h3 {
color: #000000;
}
h2 {
color: #000000;
}
#content h1 {
color: #000000;
}
#content img {
padding: 1px;
border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
color: #808080;
margin-top: 5px;
}
#footer a {
color: #5f8ea9;
text-decoration: underline;
}
#footer a:hover {
color: #33627d;
text-decoration: none;
}
a {
color: #0033ff;
text-decoration: underline;
}
a:hover {
color: #33627d;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
This is very strange to me any help would be greatly appreciated. I used a simple mouseover menu i've done houndreds of times, but I cannot get it to work in IE6 for some reason. I do not know what the problem is. Here is the page: (URL address blocked: See forum rules) Here is he css file: (URL address blocked: See forum rules) Anyone got any clue how to fix this? -Chris I am developing a simple band webpage for my band. When you navigate between sections, the top header and menu either shift up/down or left/right depending on which section you go to and which browser you use. It is extremely annoying. I have tried 3 different forums and I'm getting no help. And this one wont let me post links (bleh). I did notice that in Dreamweaver, in some sections the header touches the top of the page and it others, it looks like it is down a bit. I have tried everything I can to get all the sections to look the same but I can't figure out why the header is in different places in different sections. I made all the sections at the same time. This is so frustrating! PM me or AIM me at blacklefthands. Please help.. someone. My navigation resizes and moves in every browser except in Opera. Also, the placement of the navigation in Opera is incorrect. I have a feelin the root of the cause is that I've set a % width on my nav div. Is there a way around this mess?? A hack maybe? My site is http://www.marginalspace.com . You will need to click on the white square on the right-hand column to get the style in which this problem occurs. Any help would be greatly appreciated. The stylesheet in question is white.css . Amit Hi, Could someone please help me to fix this error in my code. I created this website for my school, http://www.rit.edu/~cie/ but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this. Thanks in advance Please delete... Hi -- I am in the process of redesigning my website with CSS. And as I was preparing to upload it and test it (looked/worked great in NVU), I found that half of my links do not work. And ... I am a new user, so I can't post links. Gah. To be more clear, I have a menu container and a "whiteboard" container I write most of my content in. All the links in the menu container work perfectly. However, in the whiteboard, it's hit and miss. Strip out the css, and they all work, so it is the css. Try as I might, I can't figure what the problem is. Part of My CSS follows: Code: #menutop {
position: absolute;
width: 247px;
height: 74px;
background: url("menutop.gif") top left;
background-repeat: no-repeat;
top: 269px;
left: 46px;
}
div#menucontainer {
position: absolute;
width: 200px;
height:1080;
background: url("menucontainer.gif");
background-repeat: repeat-y;
padding-left: 15px;
padding-right: 50px;
top: 340px;
left: 46px;
}
#menubottom {
position: absolute;
width: 247px;
height:26;
background: url("menubottom.gif");
background-repeat: no-repeat;
top: 1420px;
left: 46px;
}
#contact {
padding-left: 20px;
}
div#whiteboard {
position: absolute;
width: 530;
background-color: white;
left: 310px;
top: 300px;
padding-bottom: 20px;
border-style: dashed;
border-color: #4080CA;
z-index=100;
}
p
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
align: left;
color: #000000;
}
h1, h2, h3
{
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
color: #130139;
padding-left: 20px;
padding-right: 20px;
align: center;
z-index=100;
}
li {
padding-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 450px;
}
A:link {
background: #E8E8E8;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
font-color: #061C5E;
font-size: 16px;
font-weight: bold;
}
On my page, it's basically: <div id="whiteboard"> <p><a href="http://www.resafantasyarts.com/wanderingstar/WS1.zip">BOOK ONE</a> </p></div> Any help would be greatly appreciated! I have a really weird problem with links and CSS. I have develop a design that can stretch in order to make room for content. Then i pull some text, and, at the bottom, there is a footer nav bar. Now, if the content i put on the page is not too long (i mean, the main content area is not stretching itself below the viewable area of the screen), then the links work as a charm, but, as soon as you put some more content, then the links stop working. I would be glad to share the source code with anyone (i am not posting it here to avoid boring), but you can take a first glimpse at http://partyingout.net/dev_zone/ I have tested it on almost any mac os x and suse linux browser and the glitch is there (in some cases, like OmniWeb. the links are not working at all). I know it is something i have done wrong, but i can spot it, and, i googling it for most than two days (and once again, i know it is me not knowing how to search). Can someone give me a hand? Best regards. Hi All, I've created the below style sheet for links on my site, but MS IE won't display the classes properly! In the first class "navlink" it displays ok except for the last cell in a table of 5 columns where no styling is applied! The second class "sidelink" is used to style side navigation links within div tags on a page, but the links appear as hyperlinks with no styling except color and the background highlight on hover does not expand to 100% of the containing div! only around the text. link to page: Click here Does anyone know what's up with this? as it all displays fine in Mozilla but not Ms IE. Thanks PHP Addict Code:
A.sidenav:LINK {
color:#FFFFFF;
font-variant: small-caps;
font-size: 85%;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
A.sidenav:VISITED {
color: #FFFFFF;
}
A.sidenav:HOVER {
color: #FFF6BF;
background-color:#00158C;
text-decoration: none;
}
A.sidenav:ACTIVE {
color: #FFF6BF;
}
The site in question... http://cbo4edu.org/newSite/index.html I know this is probably a very simple fix but I've tried everything I could think of so I now have to rely on the Dev Shed community. Can someone please tell me why theh3 tag in the center column is underlined? I only want this heading to be underlined when someone hovers over it. C Hi. I am thinking my two problems are related! Here are my two problems: My top nav bar links don't work in Firefox and the design breaks in IE7. Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide! christthesavior.org Thank you!!! edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) the url is: http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html In IE8 beta it works perfectly. In firefox the entire bottom section (the part under the slide show) is messed up. In Opera there's a gap under the play controls. If I close the gap, it messes up IE. Getting this slide show to work was quite the task, but I'm close to having it work on the big three! Should I just un-nest everything? Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. I have a nice little vertical navigation block that I would like to use in multiple pages within the same website. I would like to use the nav block without repeating the code, but I can't figure out how to do it. I have put the code in navigation.htm. What do I do next? |
|||||||