Jump to content

Problems...


cpugeek
 Share

Recommended Posts

I need help with my webpage coding. the example of my problem is HEREmy problem is getting a navigation bar to go in the empty space to the left of the text examples.note: I would also like some feedback on the site look & feel [if you want]here is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Language" content="en-us" /><title>PicsByPros.com - Photography by You ™</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="alternate" type="application/rss+xml" title="PicsbyPros.com feed" href="http://www.picsbypros.com/dev index/feeds/rss.xml"><link rel="stylesheet" type="text/css" href="master.css" /></head><body><center><div id="content"><div id="masthead" align="left">	<a href="#"></a></div><div id="top_nav">	<ul>	  <li><a href="http://www.picsbypros.com/index.html">Home</a></li>	  <li><a href="http://www.picsbypros.com/About Us.html">About Us</a></li>	  <li><a href="http://www.picsbypros.com/Development/Forum/index.php">Forum</a></li>	  <li><a href="http://www.picsbypros.com/Articles.html">Articles</a></li>	  <li><a href="http://www.picsbypros.com/Services.html">Services</a></li>	  <li><a href="http://www.picsbypros.com/Dev Index/Search.html">Search</a></li>	  <li><a href="http://www.picsbypros.com/Contact.html">Contact</a></li>	  <li><a href="#">Gallery</a></li>	</ul></div>		<div class="body">		</div><div id="page_content" align="left"><h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p><h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p> <h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p> <h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p> </div><div id="footer">  <form id="searchbox_000401974666400556055:bzicsxm3x08" action="search.html">	<input type="hidden" name="cx" value="000401974666400556055:bzicsxm3x08" />	<input type="hidden" name="cof" value="FORID:11" />	<input name="q" type="text" size="30" />	<input type="submit" name="sa" value="Search" class="submit"/>  </form></div></div> </center><div id="copyright"><br>© PicsbyPros.com - All Rights Reserved. <br></div></body></html>

also here is the css:

/* CSS layout */a:link {	color: #FFFFFF;	text-decoration: none;}a:visited {	text-decoration: none;	color: #FFFFFF;}a:hover {	text-decoration: none;	color: #CCCCCC;}a:active {	text-decoration: none;	color: #FFFFFF;}body{	color: #FFFFFF;	margin: 0;	padding: 0;	background-image:url('images/background.jpg');	background-repeat:repeat-x;	background-color:#282828;	}#content{	width: 800px;	border:#FFFFFF 4px solid;}#masthead {	background-image: url('images/header.jpg');	width: 780px;	height: 40px;	font: 40px serif;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;	padding-top: 40px;	padding-bottom: 40px;	padding-left: 20px;}#masthead a:hover {color:#FFFFFF;}#top_nav {	background-image:url(images/nav.jpg);	border-top: #999999 1px solid;	border-bottom: #999999 1px solid;	width: 780px;	height: 12px;	font: 12px serif;	font-family: Arial, Helvetica, sans-serif;	padding-bottom: 10px;	padding-top: 5px;	padding-left: 20px;}#top_nav ul {	margin:0;	padding:0;}#top_nav li {	display:inline;	margin:0;	padding-bottom: 0;	padding-top: 0;}#top_nav a:hover {	background-image:url(images/nav-roll.jpg);	margin: 0;	padding-bottom: 6px;	padding-top: 5px;	padding-left: 10px;	padding-right: 10px;	text-decoration: none;}#top_nav a {	padding-bottom: 8px;	padding-top: 5px;	padding-left: 10px;	padding-right: 10px;}#central_container{	width: 800px;	background-color:#333333;	font: 12px serif;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;	padding-bottom: 10px;	padding-left: 0px;	padding-right: 0px;}#extras{	width: 200px;	float: left;}#extras h2 {	color: #5A5A43;	font: bold 1.1em Tahoma,sans-serif;	line-height: 30px;	margin: 0;}#extras ul {	padding: 0;	border-top: 1px solid #EAEADA;}#extras li {	border-bottom: 1px solid #EAEADA;}#extras li a {	font-size: 1.1em;	color: #554;	display: block;	text-decoration: none;	width: 95%;}#extras li a:hover {	background: #F0F0EB;	color: #654;	}#page_content {	width: 600px;	float: right;}#page_content h1{	border-bottom:#CCCCCC thin dotted;	font-size:16px;	padding-top: 3px;	padding-bottom: 3px;	margin: 0;}#page_content p{	padding-top: 3px;	padding-bottom: 3px;	margin: 0;}#footer {	background-image: url('images/footer.jpg');	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #FFFFFF;	width: 780px;	height: 20px;	padding-top: 9px;	padding-bottom: 9px;	padding-left: 20px;}input.submit{	cursor:pointer;   	border:outset 1px #ccc; 	background:#ffffff; 	font-size:.9em; 	color:#ffffff; 	font-weight:bold; 	background:url(images/bg.jpg) repeat-x left top; 	padding:1px; }#copyright {	text-align: center;	margin-bottom: 1.0em;	font-size: 0.8em;	font: 12px serif;	font-family: Arial, Helvetica, sans-serif;}iframe {height: 1060px;}

Link to comment
Share on other sites

hey,I think I might help with the basics i know :)The only thing I couldn't move was your copyright.I also lowered your blogs a bit, cause they were crossing your menu.First of all your index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Language" content="en-us" /><title>PicsByPros.com - Photography by You â„¢</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="alternate" type="application/rss+xml" title="PicsbyPros.com feed" href="http://www.picsbypros.com/dev index/feeds/rss.xml"><link rel="stylesheet" type="text/css" href="master.css" /></head><body><center><div id="content"><div id="masthead" align="left">	<a href="#"></a></div><div id="top_nav">	<ul>	  <li><a href="http://www.picsbypros.com/index.html">Home</a></li>	  <li><a href="http://www.picsbypros.com/About Us.html">About Us</a></li>	  <li><a href="http://www.picsbypros.com/Development/Forum/index.php">Forum</a></li>	  <li><a href="http://www.picsbypros.com/Articles.html">Articles</a></li>	  <li><a href="http://www.picsbypros.com/Services.html">Services</a></li>	  <li><a href="http://www.picsbypros.com/Dev Index/Search.html">Search</a></li>	  <li><a href="http://www.picsbypros.com/Contact.html">Contact</a></li>	  <li><a href="#">Gallery</a></li>	</ul></div>		<div class="body">		</div><div id="left_nav"><h1>menu</h1><br /><br />	<ul>		  <li><a href="http://www.picsbypros.com/index.html">Home</a></li><br />		  <li><a href="http://www.picsbypros.com/About Us.html">About Us</a></li><br />		  <li><a href="http://www.picsbypros.com/Development/Forum/index.php">Forum</a></li><br />		  <li><a href="http://www.picsbypros.com/Articles.html">Articles</a></li><br />		  <li><a href="http://www.picsbypros.com/Services.html">Services</a></li><br />		  <li><a href="http://www.picsbypros.com/Dev Index/Search.html">Search</a></li><br />		  <li><a href="http://www.picsbypros.com/Contact.html">Contact</a></li><br />		  <li><a href="#">Gallery</a></li><br /><br />	</ul></div><div id="page_content" align="left"><h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p><h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p><h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p><h1>Topic</h1><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text.</p></div><div id="footer">  <form id="searchbox_000401974666400556055:bzicsxm3x08" action="search.html">	<input type="hidden" name="cx" value="000401974666400556055:bzicsxm3x08" />	<input type="hidden" name="cof" value="FORID:11" />	<input name="q" type="text" size="30" />	<input type="submit" name="sa" value="Search" class="submit"/>  </form></div></div></center><div id="copyright"><br>© PicsbyPros.com - All Rights Reserved. <br></div></body></html>

So like you might have noticed I've set a new div layer : <div id="left_nav">wich I've edited in your cssand here is your css :

/* CSS layout */a:link {	color: #FFFFFF;	text-decoration: none;}a:visited {	text-decoration: none;	color: #FFFFFF;}a:hover {	text-decoration: none;	color: #CCCCCC;}a:active {	text-decoration: none;	color: #FFFFFF;}body{	color: #FFFFFF;	margin: 0;	padding: 0;	background-image:url('images/background.jpg');	background-repeat:repeat-x;	background-color:#282828;	}#content{	width: 800px;	border:#FFFFFF 4px solid;}#masthead {	background-image: url('images/header.jpg');	width: 780px;	height: 40px;	font: 40px serif;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;	padding-top: 40px;	padding-bottom: 40px;	padding-left: 20px;}#masthead a:hover {color:#FFFFFF;}#left_nav {border: 1px dashed #000000;padding: 0px;width: 150px;text-align: center;font-size: 0.8em;font: 12px serif;font-family: Arial, Helvetica, sans-serif;float: left;margin: 50px 0 0 0px;}#left_nav ul {	margin:0;	padding:0;}#left_nav li {	display:inline;	margin:0;}#left_nav a:hover {	margin: 0;	text-decoration: none;}#left_nav a {}#top_nav {	background-image:url(images/nav.jpg);	border-top: #999999 1px solid;	border-bottom: #999999 1px solid;	width: 780px;	height: 12px;	font: 12px serif;	font-family: Arial, Helvetica, sans-serif;	padding-bottom: 10px;	padding-top: 5px;	padding-left: 20px;}#top_nav ul {	margin:0;	padding:0;}#top_nav li {	display:inline;	margin:0;	padding-bottom: 0;	padding-top: 0;}#top_nav a:hover {	background-image:url(images/nav-roll.jpg);	margin: 0;	padding-bottom: 6px;	padding-top: 5px;	padding-left: 10px;	padding-right: 10px;	text-decoration: none;}#top_nav a {	padding-bottom: 8px;	padding-top: 5px;	padding-left: 10px;	padding-right: 10px;}#central_container{	width: 800px;	background-color:#333333;	font: 12px serif;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;	padding-bottom: 10px;	padding-left: 0px;	padding-right: 0px;}#extras{	width: 200px;	float: left;}#extras h2 {	color: #5A5A43;	font: bold 1.1em Tahoma,sans-serif;	line-height: 30px;	margin: 0;}#extras ul {	padding: 0;	border-top: 1px solid #EAEADA;}#extras li {	border-bottom: 1px solid #EAEADA;}#extras li a {	font-size: 1.1em;	color: #554;	display: block;	text-decoration: none;	width: 95%;}#extras li a:hover {	background: #F0F0EB;	color: #654;	}#page_content {	width: 600px;	float: right;	margin: 50px 0 0 0px;}#page_content h1{	border-bottom:#CCCCCC thin dotted;	font-size:16px;	padding-top: 3px;	padding-bottom: 3px;	margin: 0;}#page_content p{	padding-top: 3px;	padding-bottom: 3px;	margin: 0;}#footer {	background-image: url('images/footer.jpg');	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #FFFFFF;	width: 780px;	height: 20px;	padding-top: 9px;	padding-bottom: 9px;	padding-left: 20px;}input.submit{	cursor:pointer;  	border:outset 1px #ccc;	background:#ffffff;	font-size:.9em;	color:#ffffff;	font-weight:bold;	background:url(images/bg.jpg) repeat-x left top;	padding:1px;}#copyright {	text-align: center;	margin-bottom: 1.0em;	font-size: 0.8em;	font: 12px serif;	font-family: Arial, Helvetica, sans-serif;	float: right;}iframe {height: 1060px;}

I gotta say nice work with your menu going trhough your logo :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...