Search code examples
csshtmlhyperlinkbroken-links

Links that used to work now do not

So I'm making a webpage in html5 for a school project, and some of my hyperlinks that were working before have become completely broken, so much so that even the a:hover attribute doesn't work.

Here is the exact code (comments included) for my About page, on which the hyperlinks on the left do work:

@charset "UTF-8";
/* CSS Document */

#container {
	width:1024px;
	height:800px;	
	background-image:url(Images/All%20Pages/Background.png);
}

header{
	width:1024px;
	height:100px;
	text-align:left;
	font-family:Georgia, "Times New Roman", Times, serif;
	background-image:url(Images/All%20Pages/Top_Banner.png);s
	display:inline;
}

footer{
	width:1024px;
	height:80px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	background-image:url(Images/All%20Pages/Bottom_Border.png);
}

#content{
	width:869px;
	height:620;
	padding-left:155px;
	padding-bottom:80px;
	position:absolute;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

h2{
	color:#FFF;
}

h4{
	color:#FFF;
}

p{
	color:#FFF;
}

#left_bar{
	background-image:url(Images/All%20Pages/Sidebar.png);
	height:700px;
	width:155px;
	text-align:center;
}

a{
	text-decoration: none;
	color:#FFF;
}

a:hover{
	color:#000;
	text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="About.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>

<body>
<div id="container">

				<header>
                	<div style="line-height:5%;">
    				<br>
					</div>
                <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2>
                <h4>Adventures in Design</h4>
				</header>
                				<!-- CONTENT DIV HERE -->
                
							<div id="left_bar">
                            <br />
                            <h2><a href="#" id="current">ABOUT</a></h2>
                            <br />
                            <h2><a href="#">PORTFOLIO</a></h2>
                            <br />
                            <h2><a href="#">CONTACT</a></h2>
                            </div>


						<footer>
                        <br />
                        <p>Last Updated: 05-08-2017</p>
                        </footer>

</div>

</body>
</html>
 <!--<div style="border-left:1px solid #000;height:500px"></div>
 	for vertical line -->

Here is the complete code for my main page, on which only the link leading back to the main page works:

@charset "UTF-8";
/* CSS Document */

#container {
	width:1024px;
	height:800px;	
	background-image:url(Images/All%20Pages/Background.png);
}

header{
	width:1024px;
	height:100px;
	text-align:left;
	font-family:Georgia, "Times New Roman", Times, serif;
	background-image:url(Images/All%20Pages/Top_Banner.png);s
	display:inline;
}

footer{
	width:1024px;
	height:80px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	background-image:url(Images/All%20Pages/Bottom_Border.png);
}

#content{
	width:869px;
	height:620;
	padding-left:155px;
	padding-bottom:80px;
	position:absolute;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

h2{
	color:#FFF;
}

h4{
	color:#FFF;
}

p{
	color:#FFF;
}

#left_bar{
	background-image:url(Images/All%20Pages/Sidebar.png);
	height:700px;
	width:155px;
	text-align:center;
}

a{
	text-decoration: none;
	color:#FFF;
}

a:hover{
	color:#000;
	text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>

<body>
<div id="container">
	
				<header>
                	<div style="line-height:5%;">
    				<br>
					</div>
                <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2>
                <h4>Adventures in Design</h4>
				</header>
                									
                                                    <div id="content">
                                                    <h2> Hello and welcome to [Title Goes Here], <br  /> 
                                                    one adventure in design, from websites to photos and beyond!</h2>
                                                    	<div style="line-height:217px;">
    													<br />
														</div>
            										<img src="Images/Front Page/Landscape.png" />
           											</div>
                
							<div id="left_bar">
                            <br />
                            <h2><a href="About.html" id="current">ABOUT</a></h2>
                            <br />
                            <h2><a href="#">PORTFOLIO</a></h2>
                            <br />
                            <h2><a href="#">CONTACT</a></h2>
                            </div>
			
						<footer>
                        <br />
                        <p>Last Updated: 05-08-2017</p>
                        </footer>

</div>

</body>
</html>

Any answers to this would be much appreciated, as I have yet to find anything wrong. Thank you in advance for any advice you could throw my way

Solution

  • Your #content element is overlaid on top of your #left_bar element because of the padding-left. You can use margin-left instead.

    @charset "UTF-8";
/* CSS Document */

#container {
	width:1024px;
	height:800px;	
	background-image:url(Images/All%20Pages/Background.png);
}

header{
	width:1024px;
	height:100px;
	text-align:left;
	font-family:Georgia, "Times New Roman", Times, serif;
	background-image:url(Images/All%20Pages/Top_Banner.png);s
	display:inline;
}

footer{
	width:1024px;
	height:80px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	background-image:url(Images/All%20Pages/Bottom_Border.png);
}

#content{
	width:869px;
	height:620;
	margin-left:155px;
	padding-bottom:80px;
	position:absolute;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

h2{
	color:#FFF;
}

h4{
	color:#FFF;
}

p{
	color:#FFF;
}

#left_bar{
	background-image:url(Images/All%20Pages/Sidebar.png);
	height:700px;
	width:155px;
	text-align:center;
}

a{
	text-decoration: none;
	color:#FFF;
}

a:hover{
	color:#000;
	text-decoration: none;
}
    <!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>

<body>
<div id="container">
	
				<header>
                	<div style="line-height:5%;">
    				<br>
					</div>
                <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2>
                <h4>Adventures in Design</h4>
				</header>
                									
                                                    <div id="content">
                                                    <h2> Hello and welcome to [Title Goes Here], <br  /> 
                                                    one adventure in design, from websites to photos and beyond!</h2>
                                                    	<div style="line-height:217px;">
    													<br />
														</div>
            										<img src="Images/Front Page/Landscape.png" />
           											</div>
                
							<div id="left_bar">
                            <br />
                            <h2><a href="About.html" id="current">ABOUT</a></h2>
                            <br />
                            <h2><a href="#">PORTFOLIO</a></h2>
                            <br />
                            <h2><a href="#">CONTACT</a></h2>
                            </div>
			
						<footer>
                        <br />
                        <p>Last Updated: 05-08-2017</p>
                        </footer>

</div>

</body>
</html>