Jump to content

Problems...

cpugeek

By cpugeek
in HTML/XHTML

Recommended Posts

cpugeek Member

cpugeek

Posted
Posted

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
killay Newbie

killay

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...