Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link not working probably because of overlap

    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
    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=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
    Code:
    * {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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Evander,
    A few problems with your code:
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    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.
    Code:
    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 if you want an idea or two on how to style your menu.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot! That was really quick and helpfull. I'll probably be back with when a new bug occur :-P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •