2 Replies - 452 Views - Last Post: 25 January 2013 - 11:50 AM

#1 Zachmag  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 25-January 13

CSS wrapper doesn't allow navigation bar links to work

Posted 25 January 2013 - 11:24 AM

If you take the wrapper div off then the links all work just fine but with the wrapper only the home/index link works.
please help me


heres the code for index.html

<!DOCTYPE html>
<html>
<head>

	<link href="style.css" rel="stylesheet"
type="text/css"media="screen" />


<style>
body
{
background-image:url('background.png');
}

.container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
}

#nav {
	width: 50%;
	float: right;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none; }

#nav li {
	float: right; }

	#nav {
	width: 45%;
	float: right;
	margin: 0 0 3em 0;
	padding: 50;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; }

	#nav li a {
		display: block;
		padding: 15px 30px;
		text-decoration: none;
		font-weight: bold;
		color: #069;
		border-right: 1px solid #ccc; }
	
#nav li a:hover {
		color: #c00;
		background-color: #fff; }


			#nav {
position:relative;
min-width: 500px;
left:-20px;
top:30px;}


p 
{
position:relative;
min-width: 75px;
max-width: 300px;
left:650px;
right:20px;
top:-215px;
}

h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; font-family:"Arial", sans-serif; }

h1 {
font-size: 40pt;
position: relative;
left: 650px;
top:100px;
}


#zach {
float: left; 
margin: 4px; }

#zach {position:relative;
left:300px;
top:100px;
}

#navbar {position:relative;
left: -225px;
top:165px;
min-width: 100px;
}


#wrapper {width: 1024px; height: 100%; margin: 0 auto; 
	background:#FFFFFE; overflow:auto;min-height:1200px; border: 5px solid black;}


</style>
</head>

<body>

<div id="wrapper">


<img src="topbar.jpg" align="right" width="1024px" >

<ul id="nav">

	<li><a href="email.html">Email</a></li>
	<li><a href="work.html">Work</a></li>
	<li><a href="resume.html">Resume</a></li>
	<li><a href="index.html">Home</a></li>
	
</ul>

<div id="navbar" >
<img src="navbar.png" style="position:absolute">
</div>


<h1>Zach Magee</h1>
	<div id="zach" >
<img style="5px;max-width:95%;border:6px ridge #545565; align:left" src="ZachMageeportrait.jpg" alt="temp" class="left" width="284" height="298">
</div>
<p>
The standard Lorem Ipsum passage, used since the 1500s

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

</div>
</body>

</html>

This post has been edited by Dormilich: 25 January 2013 - 01:21 PM
Reason for edit:: please use [CODE] [/CODE] tags when posting code


Is This A Good Question/Topic? 0
  • +

Replies To: CSS wrapper doesn't allow navigation bar links to work

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,703
  • Joined: 12-December 12

Re: CSS wrapper doesn't allow navigation bar links to work

Posted 25 January 2013 - 11:40 AM

I think you should fix the two following errors firstly:

<img src="topbar.jpg" align="right" width="1024px" >
/* remove "px" it is not correct when specifying this attribute */

<img style="5px;max-width:95%;border:6px ridge #545565; align:left"
     src="ZachMageeportrait.jpg" alt="temp" class="left" width="284" height="298">


5px is incorrect and the rules should follow the pattern:
style="property:value; property:value;"

Then re-post your code ensuring that it is wrapped in [code ] tags[/ code] (without the spaces). It tells you how to do this directly in the area where you are creating your post. Preview your post before submitting it.

BTW It is preferable to move most of the style information into the CSS stylesheet, not least because it makes it easier to see what is happening if all this information is in the same place.

..then it will be easier to assist you!

This post has been edited by andrewsw: 25 January 2013 - 11:44 AM

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,703
  • Joined: 12-December 12

Re: CSS wrapper doesn't allow navigation bar links to work

Posted 25 January 2013 - 11:50 AM

Basically both your P and H1 are overlapping the nav-bar because you are using relative positioning and then pushing them out of position using left and top. This is not a sensible approach.

Posted Image

This post has been edited by andrewsw: 25 January 2013 - 12:35 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1