...

View Full Version : Link not working probably because of overlap



Evander
02-05-2007, 07:38 PM
Hi!

I've been doing some sites with wysiwyg editors (tables...) and after watching some tutorial on css I decided to try and create a site with css. I'm creating a site with a top and left border. That part was not to hard to set up. The problem is when I got to the navigation bar the first link is not working. There seem to be some conflict between the left border and the navbar. I can't figure what I did wrong (it's not a big suprise) so I'm here asking for your help.

HTML

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="border1"></div>
<div id="border2"></div>
<div id="branding">
<p><img src="images/header_f2.jpg" width="800" height="222" /></p>
</div>
<div id=navbar>
<ul>
<li><a href="index.html" title="Accueil">Accueil</a></li>
<li><a href="hebergement_ile_orleans.html" title="Hébergement">Hébergement</a></li>
<li><a href="restaurants_ile_orleans.html" title="Restauration">Restauration</a></li>
<li><a href="spectacles_ile_orleans.html" title="Spectacles">Spectacles</a></li>
<li><a href="livres_ile_orleans.html" title="Livres">Livres</a></li>
<li><a href="artisans_ile_orleans.html" title="Artisans">Artisans</a></li>
<li><a href="" title="Tourisme">Tourisme</a></li>
<li><a href="partenaires_ile_orleans.html" title="Partenaires">Partenaires</a></li>
</ul>
</div>
</html>

CSS

* {padding: 0 0; margin: 0 0;}

#branding {
background-color:#0000FF;
padding-top: 50px;
text-align: center;
margin-right: auto;
margin-left: auto;
}

#border1 {
background-image: url(../images/bd_g3.gif);
background-repeat: repeat-y;
background-position: left top;
position: fixed;
width: 200px;
height: 100%;
}
#border2 {
background-image: url(../images/bd_g3.gif);
background-repeat: repeat-x;
background-position: left top;
position: fixed;
width: 100%;
height: 50px;
}

#navbar ul{
background-color:#0000FF;
text-align: center;
padding: 10px;
}

#navbar li{
list-style-type: none;
display: inline;
}

#navbar a{
line-height: 14px;
background-color:#0000FF;
color: #FFFFFF;
padding: 10px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}


Thanks for reading this and any help will be greatly appreciated.

Evander

Excavator
02-05-2007, 07:54 PM
Hello Evander,
A few problems with your code:

<div id="branding">
<p><img src="images/header_f2.jpg" width="800" height="222" /></p> <--why is that enclosed in paragraph tags?--></div>
<div id=navbar><-- should look like this: <div id="navbar">-->
<ul>
<li><a href="index.html" title="Accueil">Accueil</a></li>
<li><a href="hebergement_ile_orleans.html" title="Hébergement">Hébergement</a></li>
<li><a href="restaurants_ile_orleans.html" title="Restauration">Restauration</a></li>
<li><a href="spectacles_ile_orleans.html" title="Spectacles">Spectacles</a></li>
<li><a href="livres_ile_orleans.html" title="Livres">Livres</a></li>
<li><a href="artisans_ile_orleans.html" title="Artisans">Artisans</a></li>
<li><a href="" title="Tourisme">Tourisme</a></li>
<li><a href="partenaires_ile_orleans.html" title="Partenaires">Partenaires</a></li>
</ul>
</div>
</body><--was missing-->
</html>

Excavator
02-05-2007, 08:24 PM
This gets your menu working again. You were right, the border1 was covering your link.
I put it as a background image of the body and put padding to push everything over.
body {
background-image: url(../images/bd_g3.gif);
background-repeat: repeat-y;
background-position: left;
padding-left: 200px;
}
* {
padding: 0 0;
margin: 0 0;
}
#branding {
background-color:#0000FF;
padding-top: 50px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#border2 {
background-image: url(../images/bd_g3.gif);
background-repeat: repeat-x;
background-position: left top;
width: 100%;
height: 50px;
}
#navbar ul{
background-color:#0000FF;
text-align: center;
padding: 10px;
}

#navbar li{
list-style-type: none;
display: inline;
}

#navbar a{
line-height: 14px;
background-color:#0000FF;
color: #FFFFFF;
padding: 10px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
</style>
<link href="css/2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<--removed border1 div-->
<div id="border2"></div>
<div id="branding">
<img src="images/header_f2.jpg" width="800" height="222" />
</div>
<div id="navbar">
<ul>
<li><a href="index.html" title="Accueil">Accueil</a></li>

Have a look at this example (http://www.nopeople.com/CSS/menu_buttons_horizontal/no_images.html)if you want an idea or two on how to style your menu.

Evander
02-05-2007, 08:31 PM
Thanks a lot! That was really quick and helpfull. I'll probably be back with when a new bug occur :-P



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum