the links on my nav bar dont work please help!

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 827 Views - Last Post: 22 July 2014 - 12:11 PM

#1 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:11 AM

the links on my nav bar did initially work but when i came back to it, it stopped working for some reason and I have no idea why can somebody help?


<!DDOCTYPE.HTML>
<HTML>
	

	<HEAD>
		<TITLE>Index</TITLE>
	</HEAD>


	
	<BODY>
	
		<HEADER CLASS="Banner">
			<H1><IMG SRC= "images/logo.jpg"></H1>

				
		<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css">		
		
		</HEADER>
		
		
		<NAV>
		
			<UL CLASS="nav">
				<LI><A HREF="pages/page-one.html">Home Page</A>
				<LI><A HREF="pages/page-one.html">About This Site</A>
				<LI><A HREF="pages/page-one.html">Buy a Car</A>
				<LI><A HREF="pages/page-one.html">Sell a Car</A>	
			</UL>
		
		</nav>	
		
		
			
		<div CLASS="txt_over_img">
			
			<IMG SRC="images/car.jpg">

			<H2><span>GREAT DEALS<span class="pad"></span><br /><span class="pad"></span>AT MOTORACTIVE.COM</span></H2>
		</div>	
</BODY>



</HTML>




.Banner{
	padding-top:1px;
}

BODY {

margin: 0 auto;
width: 940px; 
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;

}

  /* Begin Navigation Bar Styling */
.nav{
	width: 100%;
	float: left;
	margin: 0 0 5 0;
	padding: 0;
	list-style: none;
	background:-webkit-gradient(linear,left top,left bottom,from(#DDDDDD),color-stop(0.50 #EFEDEA),to(#F0F0F0));
	background:-webkit-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:-moz-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:-o-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:-ms-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);	
	border-bottom: 1px solid #B4B3B5;
	border-top: 1px solid #B4B3B5;
}
.nav li {
      float: left; 
}
.nav li a {	
	display: block;
	padding: 10px 10px;
	font-weight: bold;
	color: #6193FF;
	border-right: 1px solid #B4B3B5; 
	text-decoration: none;
}
.nav li a:hover {
	color: #FFFFFF;
	background-color: #6193FF; 
}
   /* End navigation bar styling. */




This post has been edited by Dormilich: 22 July 2014 - 10:16 AM
Reason for edit:: fixed code tags


Is This A Good Question/Topic? 0
  • +

Replies To: the links on my nav bar dont work please help!

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:18 AM

<link> elements go into the <head> not the <body>.

PS. even in HTML 4, attribute names should always be written lowercase.
Was This Post Helpful? 0
  • +
  • -

#3 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:30 AM

which bit of the code did you change i cant find it? D: and thanks for the advice ill change the cap letters

This post has been edited by Dormilich: 22 July 2014 - 10:37 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:36 AM

I didnít change any bit. I just recognised a misplaced element. (itís not hard to remember the few elements that exclusive go into <head>)
Was This Post Helpful? 0
  • +
  • -

#5 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:39 AM

View PostDormilich, on 22 July 2014 - 10:36 AM, said:

I didnít change any bit. I just recognised a misplaced element. (itís not hard to remember the few elements that exclusive go into <head>)


I put the <link> bit in the head now and it hasnt made any difference to the nav bar not working
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:43 AM

Your DOCTYPE declaration is still wrong, as I mentioned in your previous topic.

And please describe what is not working; what happens, or doesn't happen.

This post has been edited by andrewsw: 22 July 2014 - 10:41 AM

Was This Post Helpful? 0
  • +
  • -

#7 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:46 AM

View Postandrewsw, on 22 July 2014 - 10:43 AM, said:

Your DOCTYPE declaration is still wrong, as I mentioned in your previous topic.

And please describe what is not working; what happens, or doesn't happen.

yes i corrected the doctype also and it still doesnt work :/ what its not doing is when i hover the mouse over it, it is treating it as if it is not a link and just a piece of text. it should also change color when hovered over it but it doesnt do this either. like i said it did work about half an hour ago but for some strange reason isnt now.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 10:50 AM

if even simple CSS seemingly doesnít work, chances are that there is a CSS error. check your browser Console for errors.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:10 AM

The links work for me if I copy and paste your code. I used a default size of 200x200 for the images, but even if they were larger they wouldn't overlap the menu.

The problem must be elsewhere.. unless this isn't the real code that you are using.

This post has been edited by andrewsw: 22 July 2014 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

#10 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:23 AM

iv just found the problem. I have more code than that but didnt think it had any relevance to why it wouldnt work. heres all of the code. the problem is the part of the CSS, the position:relative; and position:absolute; parts of the code... although i have no idea why it stops the nav bar working and how to fix it. any ideas?

<!DOCTYPE.HTML>
<HTML>



	<HEAD>
		<TITLE>Index</TITLE>
		
		<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css">
	</HEAD>


	
	<BODY>
	
		<HEADER CLASS="Banner">
			<H1><IMG SRC= "images/logo.jpg"></H1>		
		</HEADER>
		
		
		<nav>
		
			<UL CLASS="nav">
				<LI><A HREF="pages/page-one.html">Home Page</A>
				<LI><A HREF="pages/page-one.html">About This Site</A>
				<LI><A HREF="pages/page-one.html">Buy a Car</A>
				<LI><A HREF="pages/page-one.html">Sell a Car</A>	
			</UL>
		
		</nav>	
		
		
			
		<div CLASS="txt_over_img">
			
			<IMG SRC="images/car.jpg">

			<H2><span>GREAT DEALS<span class="pad"></span><br /><span class="pad"></span>AT MOTORACTIVE.COM</span></H2>
		</div>	

		
		<SECTION >
		 	 <BR><BR><BR>
	
			<div CLASS="section_one_border">		

				<IMG SRC="images/car.jpg" CLASS="TextWrapLeft">

				<H3>Welcome to my page</H3>

					
				<P width="75%"> ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</P>
			
			</div>

		</SECTION>			

	</BODY>



</HTML>




.Banner{
	padding-top:1px;
}

BODY {

margin: 0 auto;
width: 940px; 
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

  /* Begin Navigation Bar Styling */
.nav{
	width: 100%;
	float: left;
	margin: 0 0 5 0;
	padding: 0;
	list-style: none;
	background:-webkit-gradient(linear,left top,left bottom,from(#DDDDDD),color-stop(0.50 #EFEDEA),to(#F0F0F0));
	background:-webkit-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:-moz-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:-o-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:-ms-linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);
	background:linear-gradient(top,#DDDDDD 0%,#EFEDEA 50%,#F0F0F0 100%);	
	border-bottom: 1px solid #B4B3B5;
	border-top: 1px solid #B4B3B5;
}
.nav li {
      float: left; 
}
.nav li a {	
	display: block;
	padding: 10px 10px;
	font-weight: bold;
	color: #6193FF;
	border-right: 1px solid #B4B3B5; 
	text-decoration: none;
}
.nav li a:hover {
	color: #FFFFFF;
	background-color: #6193FF; 
}
   /* End navigation bar styling. */


.TextWrapLeft{
	float:left;
	margin-right:10px;
}


div.section_one_border{
	float: left;
     	width: 920px;
     	display:block;
     	padding:10px;
     	background: #6193FF; 
     	color: 
}
div.section_one_border img{
	float: left;
    	border: 1px solid #fff;
}
div.section_one_border h3{
	color:#FFFFFF;
}
div.section_one_border p {
  	width: 900px;
	color:#FFFFFF;
}



.header
 {
    background-color: #000;
    background-image: url(images/car.jpg);
    background-repeat: no-repeat;
    height: 400px;
    width: 940px;
}


.txt_over_img{
	position:relative;
	width:100%;
}
H2{
	position:absolute;
	top:200px;
	left:0;
	width:100%;
}


This post has been edited by Dormilich: 23 July 2014 - 01:47 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:27 AM

Your DOCTYPE is still wrong :whistling:
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:41 AM

Your "txt_over_img" is now sitting above your entire nav-bar, which is why you can't click it or see the hover effect.

Just adding relative and absolute positioning will cause things like this to happen if you don't understand how they work.

If you want the text "GREAT DEALS.." to sit above the image then there are a number of approaches, including setting the image as a background.

Anyway, a quick fix is to add clear: both to the "txt_over_img" so that it clears (moves below) floated elements, the nav-bar.
.txt_over_img{
    clear: both;
    position: relative;
    width: 100%;
}




You should learn to use the browser's console to discover what is actually happening on your page. There are links to the various consoles in my signature below.
Was This Post Helpful? 0
  • +
  • -

#13 jamesmarkham94  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 25-March 14

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:41 AM

View Postandrewsw, on 22 July 2014 - 11:27 AM, said:

Your DOCTYPE is still wrong :whistling:/>


omg im so stupid haha, my doctype is DEFINITELY correct now. but the problem is still happening -.-
Was This Post Helpful? 0
  • +
  • -

#14 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 5932
  • View blog
  • Posts: 12,857
  • Joined: 16-October 07

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:43 AM

Dude, your code is giving me flashbacks! It would be ok if you were sticking to HTML 3 and Netscape, but the nav tag you want is purely in the HTML 5 domain.

I strongly suggest you get a validator to accept your markup without having an aneurysm. Proceed from there.

This post has been edited by baavgai: 22 July 2014 - 11:43 AM

Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: the links on my nav bar dont work please help!

Posted 22 July 2014 - 11:45 AM

You will then need to bring your h2 element up:
h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    /*width: 100%; - this is the default for a block-level element anyway */
}


Not that p-tags do not have a width attribute, use css.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2