Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-09-2012, 07:39 PM   PM User | #16
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
The writing on the image you attached is too blurry to read, no idea what you're wanting to do.

My current html code (do not use the previous html codes)
Code:
<!DOCTYPE html>

<html>
<head>
<meta name="keywords" content="donatinon,rsps,near-reality,pvp,pking,hacks,haxs,hacks,rsps,runescape,runescape private server,rs-ps,rune-server,soulsplit,guides,tizenx-rsps,sparc mac,best pvp,bh,bounty hunter,#1 server, rsps server,econmy,spawn,711 revision,rsps help,rsps coding,runelocus"> <meta name="description" content="Experience one of the MOST UNIQUE Runescape private server out there. PKing is #1 to us, so if you love pking, join!" />

	<meta charset="UTF-8">
	<title>TizenX - Rsps</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
	<div id="header">
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/forums"><span>Forums</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/Faqs.html"><span>Faqs</span></a>
					</li>
				</ul>
				<ul id="secondary">
					<li>
						<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Play</span></a>
                        	<ul>
                            	<li><a href="http://www.tizenx-rsps.com/webclient.html"><span>Webclient</span></a></li>
                            	<li><a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Download</span></a></li>
                            </ul>
					</li>					<li>
						<a href="http://tizenx-rsps.com/vote/index.php"><span>Vote4cash</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/donate.html"><span>Donate</span></a><a href="http://tizenx-rsps.spreadshirt.co.uk/"><span>Merchandise</span></a>
					</li>
				</ul>
			</div>
			<a id="logo" href="http://tizenx-rsps.com/index.html"><img alt="LOGO" src ="images/Tizenxmas2.png" ></a>
		</div>
	</div>
	<div id="adbox">
		<h1><font color="#ffffff">TizenX News</font> </h1>
		<font color="#ffffff">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><p><font face="Verdana">11-30-1
</font><font face="Verdana"> 
<a href="http://usuarios-online.com/en/stats/9bcc7ef8bc82baf08dad412c26b529bb" target="_blank" id="uox_link"
  
  rel="9bcc7ef8bc82baf08dad412c26b529bb">Online Users</a> </font></p><p><b>What is this item you say?
  Well, this is now known as the L33T Partyhat. It's called L33T because it's
  for the most wealthiest people in the game. How is this so rare you say? Well,
  every new member will now receive a blank partyhat on login. You can craft the
  partyhat into a L33T Partyhat by right clicking &gt; Craft. So why's it so
  rare? Well, in order to craft
it, you need to have obtained the current in-game rares in your inventory!</b></p><p><b>
            Image:</b></p><p><b>
       --- Still To Be Discovered ---</b></p></blockquote></font>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<h1><font color="#ffffff">Choose one</font> </h1>
		<ul>
			<li>
				<a href="http://tizenx-rsps.com/webclient.html"
 ><img alt="Img" src ="images/java 1.png" ></a>
			</li>
			<li>
				<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><img alt="Img" src ="images/java 2.png" ></a>
			</li>
			<li>
				<a href="http://tizenx-rsps.com/youtube.html"><img alt="Img" src="images/youtube2.png"></a>
			</li>
		</ul>
	</div>
	<div id="body">
		<div id="contents">
			<ul id="articles">
				<li>
					<h1>Why Us?</h1>
					<p><font color="#ffffff" face="Verdana">We are such a unique 
  server. We dedicated our time in providing the best pvp possible. The server 
  is 100% pvp based, and we thrive to bring our players the best content! 
  </font>
						                               
					</p>
									</li>
				<li>
					<h1>Donate</h1>
					<p><font color="#ffffff" face="Verdana">Without your generous 
  donations, TizenX wouldn't be what it is today. We require funding for our 
  $750 a month loadout. This includes dedicated webhosts, website hosts, DDoS 
  protection and our domain.</font>
						                              					</p>
									</li>
				<li>
					<h1>Vote!</h1>
					<p><font color="#ffffff" face="Verdana">Voting on every link 
  will bring attention to the users that are viewing us on the toplists, etc. So 
  if you vote &amp; put us on the toplist to #1, people migth be curious &amp; 
  join our server.</font>
						                                     <br><br>
					</p>
									</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<div class="background">
			<div class="body">
				<div class="subscribe">
					<h3>Recieve Updates(beta)</h3>
					<form action="http://tizenx-rsps.com/index.html" method="post">
						<input class="txtfield" >
						<input type="submit" class="button" name="submit_button" value="Submit Query">
					</form>
				</div>
				<div class="posts">
					<h3></h3>
					<p>
						</p>
				</div>
				<div class="connect">
					<h3> </h3>
									</div>
			</div>
		</div>
		<span id="footnote" style="WIDTH: 100%; HEIGHT: 6px">
<p align="center"><font face="Verdana" color="#fdfdfd"><strong><a 
href="http://www.tizenx-rsps.com/tos.html"><em><u><font color="#ffffff">Terms of 
Service</font></u></em></a>   
|&nbsp;Tizenx-rsps is not affiliated with RuneScape</strong></font></p>
<p align="center"><font face="Arial"><strong><a 
href="http://www.copyrightauthority.com/copyright-symbol"><font 
color=#ffffff><u>Copyright</u></font></a><font color="#ffffff"><u>&nbsp;&nbsp;2012 tizenx</u> - All Rights Reserved // 
<em><u><font color="#686bec">Web Design By 
Morphine</font></u></em>   
       </font></strong></font></p></span>
	</div>
<div></div>
</body>
</html>

My current css (if you need// do not use previous ones)
Code:
/*  */
@font-face {
	font-family: 'SancreekRegular';
	src: url('../fonts/sancreek-regular-webfont.eot');
	src: url('../fonts/sancreek-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/sancreek-regular-webfont.woff') format('woff'), url('../fonts/sancreek-regular-webfont.ttf') format('truetype'), url('../fonts/sancreek-regular-webfont.svg#SancreekRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	background: url(../images/bg-body.gif) repeat;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
}
#page {
	width: 960px;
	margin: 0 auto;
}
img {
	border: 0;
}
.more, #footer .subscribe form input.button, #contacts input.button, #shirts a.button {
	background: url(../images/buttons.png) no-repeat;
}
#footer .subscribe form input.txtfield, #contacts input, #contacts textarea {
	background: url(../images/inputs.png) no-repeat;
}
.more {
	background-position: -162px 0;
	color: #fff;
	display: block;
	font-family: 'SancreekRegular';
	font-size: 20px;
	line-height: 54px;
	height: 54px;
	width: 152px;
	margin: 0 auto;
	text-decoration: none;
	text-transform: uppercase;
}
.more:hover {
	background-position: 0 0;
	color: #fbf8b5;
}
/*------------------------------ HEADER ------------------------------*/
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding-bottom: 25px;
}
#header > div {
	height: 426px;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
/** Logo **/
#logo {
	position: absolute;
	top: 36px;
	left: 338px;
}
/** Navigation **/
#navigation {
	display: inline-block;
	width: 960px;
}
#navigation div {
	background: url(../images/bg-info-links.png) no-repeat;
	color: #f9fbca;
	height: 32px;
	width: 180px;
	text-align: center;
}
#navigation div.infos {
	float: right;
}
#navigation div a {
	color: #fcf3b2;
	font-size: 14px;
	line-height: 32px;
	border-left: 1px solid #f9fbca;
	padding: 0 5px;
	text-decoration: none;
}
#navigation div a:first-child {
	border-left: 0;
	padding-left: 0;
}
#navigation ul {
	display: inline-block;
	list-style: none;
	width: 338px;
	margin: 144px 0 0;
	padding: 0;
}
#navigation li {
	float: left;
	width: 112px;
	text-align: center;
}
#navigation ul li a {
	color: #feffff;
	font-family: Impact;
	font-size: 24px;
	line-height: 36px;
	padding: 5px 0px 5px 3px;
	text-decoration: none;
}
#navigation ul li a span {
	padding: 5px 10px 5px 7px;
}
#navigation ul li a:hover, #navigation ul li.selected a {
	background: url(../images/bg-menu-selected-left.png) no-repeat left center;
	color: #fcf3b2;
}
#navigation ul li a:hover span, #navigation ul li.selected a span {
	background: url(../images/bg-menu-selected-right.png) no-repeat right center;
}
#navigation ul#primary {
	float: left;
}

#navigation ul#secondary {
	float: right;
}
ul#secondary li {position: relative;}
ul#secondary ul {
				position: absolute;
				margin: 0;
				padding: 0;
				left: 0;
				top: 31px;
				visibility: hidden;
			}
				ul#secondary li:hover ul {visibility: visible;}
					ul#secondary li ul li {float: none;}

/** Adbox **/
#adbox {
	width: 960px;
	margin: 0px auto 24px;
	position: relative;
}
#adbox ul {
	display: inline-block;
	list-style: none;
	margin: 0 30px;
	padding: 0;
}
#adbox ul li {
	float: left;
	width: 288px;
	margin-left: 16px;
}
#adbox ul li:first-child {
	margin-left: 0px;
}
#adbox ul li img {
	border: 1px solid #83826e;
}
#adbox h1, #contents h1 {
	background: url(../images/bg-heading.png) no-repeat center;
	color: #ffffb0;
	font-family: 'SancreekRegular';
	height: 61px;
	line-height: 60px;
	margin: 0 0 30px;
	text-align: center;
	text-transform: uppercase;
}
/*------------------------------ CONTENTS ------------------------------*/
#body {
	background-color: #242424;
	border-bottom: 1px solid #161616;
	border-top: 1px solid #494949;
	margin: 0 0 30px;
}
#contents {
	width: 960px;
	margin: 0 auto;
	padding: 30px 0;
}
#articles {
	display: inline-block;
	list-style: none;
	margin: 0 30px;
	padding: 0;
}
#articles li {
	float: left;
	width: 288px;
	margin-left: 16px;
	text-align: center;
}
#articles li:first-child {
	margin-left: 0px;
}
#articles li h1 {
	background: url(../images/bg-heading2.png) no-repeat center;
	color: #fff;
	font-family: 'SancreekRegular';
	height: 60px;
	line-height: 60px;
	margin: 0 0 24px;
	text-transform: uppercase;
}
#articles li p {
	color: #717272;
	font-size: 14px;
	line-height: 24px;
	margin: 0;
	padding: 0 15px 24px;
}
#articles li p a {
	color: #717272;
}
#articles li p a:hover {
	color: #b6b6b6;
}
#sidebar {
	float: right;
	height: inherit;
	width: 220px;
	margin: 0 30px 0 10px;
}
#sidebar h4, #main h4 {
	color: #7b8c96;
	line-height: 24px;
	margin: 0 0 24px;
	text-shadow: 1px 0px #151c22, 0px -1px #151c22, -1px 0px #151c22, 0px 1px #151c22;
}
h4.uppercase {
	text-transform: uppercase;
}
#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#about-list li {
	color: #fbfaa7;
	list-style: square inside;
}
ul#about-list li a, ul#archives li a {
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	text-decoration: none;
}
ul#about-list li a:hover, ul#archives li a:hover {
	color: #b5b5b5;
}
#main {
	width: 650px;
	margin: 0 10px 0 30px;
}
#main p {
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	margin: 0;
	padding: 0 0 24px;
	text-align: justify;
}
#main p a {
	color: #fff;
	text-shadow: 1px 0px #151c22, 0px -1px #151c22, -1px 0px #151c22, 0px 1px #151c22;
}
#main p a:hover {
	color: #b6b6b6;
}
/** Blogs **/
ul#blogs, #sidebar ul.contacts {
	background: url(../images/border-latest-post.gif) repeat-x left bottom;
	margin: 0 0 22px;
	padding: 0 0 2px;
}
ul#blogs li, #sidebar ul.contacts li {
	background: url(../images/border-latest-post.gif) repeat-x left top;
	padding: 26px 0 0;
}
ul#blogs li:first-child, #sidebar ul.contacts li:first-child {
	background: none;
	padding-top: 0;
}
ul#blogs li span, #sidebar ul.contacts li span {
	color: #81888e;
	font-size: 15px;
	line-height: 24px;
}
ul#blogs li a, #sidebar ul.contacts li a {
	color: #fff;
	display: block;
	font-size: 15px;
	line-height: 24px;
	margin: 0;
	padding: 0 0 24px;
	text-align: justify;
	text-decoration: none;
}
#sidebar ul.contacts li a {
	font-size: 14px;
	text-align: left;
}
#sidebar ul.contacts li .num {
	font-size: 0.843em;
}
ul#blogs li a:hover, #sidebar ul.contacts li a:hover {
	color: #b5b5b5;
}
/** Contacts **/
#contacts {
	font-size: 15px;
	line-height: 24px;
	min-height: 400px;
	margin-bottom: 30px;
}
#contacts td {
	vertical-align: top;
}
#contacts label {
	color: #81888e;
	display: inline-block;
	width: 140px;
}
#contacts input {
	background-position: 0 -59px;
	height: 23px;
	width: 373px;
	border: 0;
	padding: 1px 4px;
}
#contacts input.button {
	float: right;
	background-position: -162px -212px;
	cursor: pointer;
	height: 42px;
	width: 81px;
}
#contacts input.button:hover {
	background-position: 0 -212px;
	color: #fbf8b5;
}
#contacts textarea {
	background-position: 0 -108px;
	height: 190px;
	width: 373px;
	border: 0;
	padding: 4px;
}
#contacts table td {
	padding-bottom: 24px;
}
/** Mens and Womens Pages **/
#shirts {
	display: inline-block;
	list-style: none;
	margin: 0 30px;
	padding: 24px 0;
}
#shirts li {
	float: left;
	width: 288px;
	margin-left: 16px;
}
#shirts li:first-child {
	margin-left: 0px;
}
#shirts li img {
	margin: 0 0 12px;
	border: 1px solid #83826e;
}
#shirts li a.button {
	float: right;
	background-position: -162px -78px;
	color: #fefefe;
	display: block;
	font-family: 'SancreekRegular';
	line-height: 49px;
	height: 49px;
	width: 121px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
#shirts li a.button:hover {
	background-position: 0 -78px;
	color: #fbf8b5;
}
#shirts li p {
	color: #eee9a9;
	font-family: 'SancreekRegular';
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0;
	text-transform: uppercase;
}
#shirts li p span {
	color: #81888e;
	font-weight: bold;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
	background: url(../images/border-copyright.gif) repeat-x left bottom;
	border-top: 1px solid #5f6d6d;
	padding-bottom: 2px;
	position: relative;
}
#footer div.background {
	background: url(../images/bg-footer.jpg) repeat;
	padding: 30px 0;
}
#footer div.body {
	min-height: 107px;
	width: 900px;
	margin: 0 auto;
	padding: 0 30px;
}
#footer div.body div {
	float: left;
}
#footer div.body div h3 {
	color: #fff;
	letter-spacing: 1px;
	margin: 0 0 24px;
	text-align: left;
	text-shadow: 1px -1px #161a1b;
	text-transform: uppercase;
}
#footer .subscribe {
	width: 300px;
}
#footer .subscribe form {
	padding-top: 6px;
}
#footer .subscribe form input.txtfield {
	float: left;
	background-position: 0 0;
	height: 35px;
	width: 176px;
	border: 0;
	margin-right: 10px;
	padding: 0px 2px;
}
#footer .subscribe form input.button {
	background-position: -162px -151px;
	cursor: pointer;
	height: 37px;
	width: 82px;
	border: 0;
}
#footer .subscribe form input.button:hover {
	background-position: 0 -151px;
}
#footer .posts {
	width: 380px;
	padding: 0 15px;
}
#footer .posts p {
	color: #aab4b6;
	font-size: 14px;
	line-height: 24px;
	margin: 0;
}
#footer .posts p a {
	color: #aab4b6;
	font-weight: bold;
	text-decoration: none;
}
#footer .posts p span {
	float: right;
	display: inline;
	margin-right: 6px;
 *margin-top: -24px;/** Needed for IE **/
}
#footer .connect {
	line-height: 24px;
	width: 140px;
	padding: 0 15px;
	text-align: center;
}
#footer .connect a {
	background: url(../images/icons.png) no-repeat;
	display: inline-block;
	height: 22px;
	width: 23px;
	margin: 5px 10px 5px 0;
}
#footer .connect a.facebook {
	background-position: -38px 0;
}
#footer .connect a.facebook:hover {
	background-position: 0 0;
}
#footer .connect a.twitter {
	background-position: -38px -46px;
	width: 28px;
}
#footer .connect a.twitter:hover {
	background-position: 0 -46px;
	width: 28px;
}
#footer .connect a.googleplus {
	background-position: -38px -90px;
}
#footer .connect a.googleplus:hover {
	background-position: 0 -90px;
}
#footnote {
	background-color: #393939;
	color: #808080;
	display: block;
	font-size: 12px;
	line-height: 30px;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;
	left: 0;
}
#footnote a {
	color: #808080;
	text-decoration: none;
}

Image: look in the attachment & read please, thanks!


the 2nd image i would like it to be located where i said it on the first picture.
Attached Thumbnails
Click image for larger version

Name:	for coding forums.jpg
Views:	25
Size:	48.1 KB
ID:	11779   Click image for larger version

Name:	teamspeak.png
Views:	24
Size:	16.5 KB
ID:	11780  
legendrock7 is offline   Reply With Quote
Old 12-09-2012, 11:42 PM   PM User | #17
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Look at these changes -

Code:
</head>
<body>
	<div id="header">
    	<img src="http://www.codingforums.com/attachment.php?attachmentid=11780&amp;d=1355082047" alt="description" width="264" height="66" id="tizen" />
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					<li>



Code:
/*------------------------------ HEADER ------------------------------*/
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding-bottom: 25px;
}
#tizen {float: left;}
#header > div {
	height: 426px;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
/** Logo **/
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-10-2012, 02:17 AM   PM User | #18
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
Look at these changes -

Code:
</head>
<body>
	<div id="header">
    	<img src="http://www.codingforums.com/attachment.php?attachmentid=11780&amp;d=1355082047" alt="description" width="264" height="66" id="tizen" />
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					<li>



Code:
/*------------------------------ HEADER ------------------------------*/
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding-bottom: 25px;
}
#tizen {float: left;}
#header > div {
	height: 426px;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
/** Logo **/



thanks very much, you've cleared all of my issues, but i encountered one more :l

I don't know if i'm bugging you to much, but hopefully i'm not.

When i go to add a new "text" on the navigation bar, it goes under "one text"

For example, look in the attachments for more information, thanks!


Code:
<!DOCTYPE html>

<html>
<head>
<meta name="keywords" content="donatinon,rsps,near-reality,pvp,pking,hacks,haxs,hacks,rsps,runescape,runescape private server,rs-ps,rune-server,soulsplit,guides,tizenx-rsps,sparc mac,best pvp,bh,bounty hunter,#1 server, rsps server,econmy,spawn,711 revision,rsps help,rsps coding,runelocus"> <meta name="description" content="Experience one of the MOST UNIQUE Runescape private server out there. PKing is #1 to us, so if you love pking, join!" />

	<meta charset="UTF-8">
	<title>TizenX - Rsps</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
	<div id="header">
    	<img src="http://www.codingforums.com/attachment.php?attachmentid=11780&amp;d=1355082047" alt="description" width="264" height="66" id="tizen" >
		<div>
			<div id="navigation">
				<div class="infos">
					<font color="#00ff00">Online</font> 				</div>
				<div>
					Owner:<font color="#00ff00"> Luke</font>			</div>
				<ul id="primary">
					<li class="selected">
						<a href="http://tizenx-rsps.com/index.html"><span>Home</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/forums"><span>Forums</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/Faqs.html"><span>Faqs</span></a>
					</li>
				</ul>
				<ul id="secondary">
					<li>
						<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Play</span></a>
                        	<ul>
                            	<li><a href="http://www.tizenx-rsps.com/webclient.html"><span>Webclient</span></a></li>
                            	<li><a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><span>Download</span></a></li>
                            </ul>
					</li>					<li>
						<a href="http://tizenx-rsps.com/vote/index.php"><span>Vote4cash</span></a>
					</li>
					<li>
						<a href="http://tizenx-rsps.com/donate.html"><span>Donate</span></a>
					</li>
										<li>
						<a href="http://tizenx-rsps.com/donate.html"><span>Merchandise</span></a>
					</li>
				</ul>
			</div>
			<a id="logo" href="http://tizenx-rsps.com/index.html"><img alt="LOGO" src ="images/Tizenxmas2.png" ></a>
		</div>
	</div>
	<div id="adbox">
		<h1><font color="#ffffff">TizenX News</font> </h1>
		<font color="#ffffff">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><p><font face="Verdana">11-30-1
</font><font face="Verdana"> 
<a href="http://usuarios-online.com/en/stats/9bcc7ef8bc82baf08dad412c26b529bb" target="_blank" id="uox_link"
  
  rel="9bcc7ef8bc82baf08dad412c26b529bb">Online Users</a> </font></p><p><b>What is this item you say?
  Well, this is now known as the L33T Partyhat. It's called L33T because it's
  for the most wealthiest people in the game. How is this so rare you say? Well,
  every new member will now receive a blank partyhat on login. You can craft the
  partyhat into a L33T Partyhat by right clicking &gt; Craft. So why's it so
  rare? Well, in order to craft
it, you need to have obtained the current in-game rares in your inventory!</b></p><p><b>
            Image:</b></p><p><b>
       --- Still To Be Discovered ---</b></p></blockquote></font>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<h1><font color="#ffffff">Choose one</font> </h1>
		<ul>
			<li>
				<a href="http://tizenx-rsps.com/webclient.html"
 ><img alt="Img" src ="images/java 1.png" ></a>
			</li>
			<li>
				<a href="http://www.tizenx-rsps.com/TizenX%20V2.jar"><img alt="Img" src ="images/java 2.png" ></a>
			</li>
			<li>
				<a href="http://tizenx-rsps.com/youtube.html"><img alt="Img" src="images/youtube2.png"></a>
			</li>
		</ul>
	</div>
	<div id="body">
		<div id="contents">
			<ul id="articles">
				<li>
					<h1>Why Us?</h1>
					<p><font color="#ffffff" face="Verdana">We are such a unique 
  server. We dedicated our time in providing the best pvp possible. The server 
  is 100% pvp based, and we thrive to bring our players the best content! 
  </font>
						                               
					</p>
									</li>
				<li>
					<h1>Donate</h1>
					<p><font color="#ffffff" face="Verdana">Without your generous 
  donations, TizenX wouldn't be what it is today. We require funding for our 
  $750 a month loadout. This includes dedicated webhosts, website hosts, DDoS 
  protection and our domain.</font>
						                              					</p>
									</li>
				<li>
					<h1>Vote!</h1>
					<p><font color="#ffffff" face="Verdana">Voting on every link 
  will bring attention to the users that are viewing us on the toplists, etc. So 
  if you vote &amp; put us on the toplist to #1, people migth be curious &amp; 
  join our server.</font>
						                                     <br><br>
					</p>
									</li>
			</ul>
		</div>
	</div>
	<div id="footer">
		<div class="background">
			<div class="body">
				<div class="subscribe">
					<h3>Recieve Updates(beta)</h3>
					<form action="http://tizenx-rsps.com/index.html" method="post">
						<input class="txtfield" >
						<input type="submit" class="button" name="submit_button" value="Submit Query">
					</form>
				</div>
				<div class="posts">
					<h3></h3>
					<p>
						</p>
				</div>
				<div class="connect">
					<h3> </h3>
									</div>
			</div>
		</div>
		<span id="footnote" style="WIDTH: 100%; HEIGHT: 6px">
<p align="center"><font face="Verdana" color="#fdfdfd"><strong><a 
href="http://www.tizenx-rsps.com/tos.html"><em><u><font color="#ffffff">Terms of 
Service</font></u></em></a>   
|&nbsp;Tizenx-rsps is not affiliated with RuneScape</strong></font></p>
<p align="center"><font face="Arial"><strong><a 
href="http://www.copyrightauthority.com/copyright-symbol"><font 
color=#ffffff><u>Copyright</u></font></a><font color="#ffffff"><u>&nbsp;&nbsp;2012 tizenx</u> - All Rights Reserved // 
<em><u><font color="#686bec">Web Design By 
Morphine</font></u></em>   
       </font></strong></font></p></span>
	</div>
<div></div>
</body>
</html>
current html code (when i add the merchandise text) ^^


Code:
/*  */
@font-face {
	font-family: 'SancreekRegular';
	src: url('../fonts/sancreek-regular-webfont.eot');
	src: url('../fonts/sancreek-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/sancreek-regular-webfont.woff') format('woff'), url('../fonts/sancreek-regular-webfont.ttf') format('truetype'), url('../fonts/sancreek-regular-webfont.svg#SancreekRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	background: url(../images/bg-body.gif) repeat;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
}
#page {
	width: 960px;
	margin: 0 auto;
}
img {
	border: 0;
}
.more, #footer .subscribe form input.button, #contacts input.button, #shirts a.button {
	background: url(../images/buttons.png) no-repeat;
}
#footer .subscribe form input.txtfield, #contacts input, #contacts textarea {
	background: url(../images/inputs.png) no-repeat;
}
.more {
	background-position: -162px 0;
	color: #fff;
	display: block;
	font-family: 'SancreekRegular';
	font-size: 20px;
	line-height: 54px;
	height: 54px;
	width: 152px;
	margin: 0 auto;
	text-decoration: none;
	text-transform: uppercase;
}
.more:hover {
	background-position: 0 0;
	color: #fbf8b5;
}
/*------------------------------ HEADER ------------------------------*/
#header {
	background: url(../images/bg-header.png) repeat-x;
	padding-bottom: 25px;
}
#tizen {float: left;}
#header > div {
	height: 426px;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
/** Logo **/#logo {
	position: absolute;
	top: 36px;
	left: 338px;
}
/** Navigation **/
#navigation {
	display: inline-block;
	width: 960px;
}
#navigation div {
	background: url(../images/bg-info-links.png) no-repeat;
	color: #f9fbca;
	height: 32px;
	width: 180px;
	text-align: center;
}
#navigation div.infos {
	float: right;
}
#navigation div a {
	color: #fcf3b2;
	font-size: 14px;
	line-height: 32px;
	border-left: 1px solid #f9fbca;
	padding: 0 5px;
	text-decoration: none;
}
#navigation div a:first-child {
	border-left: 0;
	padding-left: 0;
}
#navigation ul {
	display: inline-block;
	list-style: none;
	width: 338px;
	margin: 144px 0 0;
	padding: 0;
}
#navigation li {
	float: left;
	width: 112px;
	text-align: center;
}
#navigation ul li a {
	color: #feffff;
	font-family: Impact;
	font-size: 24px;
	line-height: 36px;
	padding: 5px 0px 5px 3px;
	text-decoration: none;
}
#navigation ul li a span {
	padding: 5px 10px 5px 7px;
}
#navigation ul li a:hover, #navigation ul li.selected a {
	background: url(../images/bg-menu-selected-left.png) no-repeat left center;
	color: #fcf3b2;
}
#navigation ul li a:hover span, #navigation ul li.selected a span {
	background: url(../images/bg-menu-selected-right.png) no-repeat right center;
}
#navigation ul#primary {
	float: left;
}

#navigation ul#secondary {
	float: right;
}
ul#secondary li {position: relative;}
ul#secondary ul {
				position: absolute;
				margin: 0;
				padding: 0;
				left: 0;
				top: 31px;
				visibility: hidden;
			}
				ul#secondary li:hover ul {visibility: visible;}
					ul#secondary li ul li {float: none;}

/** Adbox **/
#adbox {
	width: 960px;
	margin: 0px auto 24px;
	position: relative;
}
#adbox ul {
	display: inline-block;
	list-style: none;
	margin: 0 30px;
	padding: 0;
}
#adbox ul li {
	float: left;
	width: 288px;
	margin-left: 16px;
}
#adbox ul li:first-child {
	margin-left: 0px;
}
#adbox ul li img {
	border: 1px solid #83826e;
}
#adbox h1, #contents h1 {
	background: url(../images/bg-heading.png) no-repeat center;
	color: #ffffb0;
	font-family: 'SancreekRegular';
	height: 61px;
	line-height: 60px;
	margin: 0 0 30px;
	text-align: center;
	text-transform: uppercase;
}
/*------------------------------ CONTENTS ------------------------------*/
#body {
	background-color: #242424;
	border-bottom: 1px solid #161616;
	border-top: 1px solid #494949;
	margin: 0 0 30px;
}
#contents {
	width: 960px;
	margin: 0 auto;
	padding: 30px 0;
}
#articles {
	display: inline-block;
	list-style: none;
	margin: 0 30px;
	padding: 0;
}
#articles li {
	float: left;
	width: 288px;
	margin-left: 16px;
	text-align: center;
}
#articles li:first-child {
	margin-left: 0px;
}
#articles li h1 {
	background: url(../images/bg-heading2.png) no-repeat center;
	color: #fff;
	font-family: 'SancreekRegular';
	height: 60px;
	line-height: 60px;
	margin: 0 0 24px;
	text-transform: uppercase;
}
#articles li p {
	color: #717272;
	font-size: 14px;
	line-height: 24px;
	margin: 0;
	padding: 0 15px 24px;
}
#articles li p a {
	color: #717272;
}
#articles li p a:hover {
	color: #b6b6b6;
}
#sidebar {
	float: right;
	height: inherit;
	width: 220px;
	margin: 0 30px 0 10px;
}
#sidebar h4, #main h4 {
	color: #7b8c96;
	line-height: 24px;
	margin: 0 0 24px;
	text-shadow: 1px 0px #151c22, 0px -1px #151c22, -1px 0px #151c22, 0px 1px #151c22;
}
h4.uppercase {
	text-transform: uppercase;
}
#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#about-list li {
	color: #fbfaa7;
	list-style: square inside;
}
ul#about-list li a, ul#archives li a {
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	text-decoration: none;
}
ul#about-list li a:hover, ul#archives li a:hover {
	color: #b5b5b5;
}
#main {
	width: 650px;
	margin: 0 10px 0 30px;
}
#main p {
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	margin: 0;
	padding: 0 0 24px;
	text-align: justify;
}
#main p a {
	color: #fff;
	text-shadow: 1px 0px #151c22, 0px -1px #151c22, -1px 0px #151c22, 0px 1px #151c22;
}
#main p a:hover {
	color: #b6b6b6;
}
/** Blogs **/
ul#blogs, #sidebar ul.contacts {
	background: url(../images/border-latest-post.gif) repeat-x left bottom;
	margin: 0 0 22px;
	padding: 0 0 2px;
}
ul#blogs li, #sidebar ul.contacts li {
	background: url(../images/border-latest-post.gif) repeat-x left top;
	padding: 26px 0 0;
}
ul#blogs li:first-child, #sidebar ul.contacts li:first-child {
	background: none;
	padding-top: 0;
}
ul#blogs li span, #sidebar ul.contacts li span {
	color: #81888e;
	font-size: 15px;
	line-height: 24px;
}
ul#blogs li a, #sidebar ul.contacts li a {
	color: #fff;
	display: block;
	font-size: 15px;
	line-height: 24px;
	margin: 0;
	padding: 0 0 24px;
	text-align: justify;
	text-decoration: none;
}
#sidebar ul.contacts li a {
	font-size: 14px;
	text-align: left;
}
#sidebar ul.contacts li .num {
	font-size: 0.843em;
}
ul#blogs li a:hover, #sidebar ul.contacts li a:hover {
	color: #b5b5b5;
}
/** Contacts **/
#contacts {
	font-size: 15px;
	line-height: 24px;
	min-height: 400px;
	margin-bottom: 30px;
}
#contacts td {
	vertical-align: top;
}
#contacts label {
	color: #81888e;
	display: inline-block;
	width: 140px;
}
#contacts input {
	background-position: 0 -59px;
	height: 23px;
	width: 373px;
	border: 0;
	padding: 1px 4px;
}
#contacts input.button {
	float: right;
	background-position: -162px -212px;
	cursor: pointer;
	height: 42px;
	width: 81px;
}
#contacts input.button:hover {
	background-position: 0 -212px;
	color: #fbf8b5;
}
#contacts textarea {
	background-position: 0 -108px;
	height: 190px;
	width: 373px;
	border: 0;
	padding: 4px;
}
#contacts table td {
	padding-bottom: 24px;
}
/** Mens and Womens Pages **/
#shirts {
	display: inline-block;
	list-style: none;
	margin: 0 30px;
	padding: 24px 0;
}
#shirts li {
	float: left;
	width: 288px;
	margin-left: 16px;
}
#shirts li:first-child {
	margin-left: 0px;
}
#shirts li img {
	margin: 0 0 12px;
	border: 1px solid #83826e;
}
#shirts li a.button {
	float: right;
	background-position: -162px -78px;
	color: #fefefe;
	display: block;
	font-family: 'SancreekRegular';
	line-height: 49px;
	height: 49px;
	width: 121px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
#shirts li a.button:hover {
	background-position: 0 -78px;
	color: #fbf8b5;
}
#shirts li p {
	color: #eee9a9;
	font-family: 'SancreekRegular';
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0;
	text-transform: uppercase;
}
#shirts li p span {
	color: #81888e;
	font-weight: bold;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
	background: url(../images/border-copyright.gif) repeat-x left bottom;
	border-top: 1px solid #5f6d6d;
	padding-bottom: 2px;
	position: relative;
}
#footer div.background {
	background: url(../images/bg-footer.jpg) repeat;
	padding: 30px 0;
}
#footer div.body {
	min-height: 107px;
	width: 900px;
	margin: 0 auto;
	padding: 0 30px;
}
#footer div.body div {
	float: left;
}
#footer div.body div h3 {
	color: #fff;
	letter-spacing: 1px;
	margin: 0 0 24px;
	text-align: left;
	text-shadow: 1px -1px #161a1b;
	text-transform: uppercase;
}
#footer .subscribe {
	width: 300px;
}
#footer .subscribe form {
	padding-top: 6px;
}
#footer .subscribe form input.txtfield {
	float: left;
	background-position: 0 0;
	height: 35px;
	width: 176px;
	border: 0;
	margin-right: 10px;
	padding: 0px 2px;
}
#footer .subscribe form input.button {
	background-position: -162px -151px;
	cursor: pointer;
	height: 37px;
	width: 82px;
	border: 0;
}
#footer .subscribe form input.button:hover {
	background-position: 0 -151px;
}
#footer .posts {
	width: 380px;
	padding: 0 15px;
}
#footer .posts p {
	color: #aab4b6;
	font-size: 14px;
	line-height: 24px;
	margin: 0;
}
#footer .posts p a {
	color: #aab4b6;
	font-weight: bold;
	text-decoration: none;
}
#footer .posts p span {
	float: right;
	display: inline;
	margin-right: 6px;
 *margin-top: -24px;/** Needed for IE **/
}
#footer .connect {
	line-height: 24px;
	width: 140px;
	padding: 0 15px;
	text-align: center;
}
#footer .connect a {
	background: url(../images/icons.png) no-repeat;
	display: inline-block;
	height: 22px;
	width: 23px;
	margin: 5px 10px 5px 0;
}
#footer .connect a.facebook {
	background-position: -38px 0;
}
#footer .connect a.facebook:hover {
	background-position: 0 0;
}
#footer .connect a.twitter {
	background-position: -38px -46px;
	width: 28px;
}
#footer .connect a.twitter:hover {
	background-position: 0 -46px;
	width: 28px;
}
#footer .connect a.googleplus {
	background-position: -38px -90px;
}
#footer .connect a.googleplus:hover {
	background-position: 0 -90px;
}
#footnote {
	background-color: #393939;
	color: #808080;
	display: block;
	font-size: 12px;
	line-height: 30px;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;
	left: 0;
}
#footnote a {
	color: #808080;
	text-decoration: none;
}
current updated css code ^^
Attached Thumbnails
Click image for larger version

Name:	for coding forums.jpg
Views:	23
Size:	48.9 KB
ID:	11783  

Last edited by legendrock7; 12-10-2012 at 02:21 AM..
legendrock7 is offline   Reply With Quote
Old 12-10-2012, 06:52 AM   PM User | #19
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Quote:
When i go to add a new "text" on the navigation bar, it goes under "one text"
#navigation is only 960px wide. How wide is your two menus plus that image?
You are just running out of room.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-10-2012, 07:14 PM   PM User | #20
legendrock7
New Coder

 
Join Date: Sep 2012
Posts: 58
Thanks: 8
Thanked 0 Times in 0 Posts
legendrock7 is an unknown quantity at this point
Quote:
Originally Posted by Excavator View Post
#navigation is only 960px wide. How wide is your two menus plus that image?
You are just running out of room.
the images repeat it self so it can be large enough so it covers the whole page (navigation bar)
legendrock7 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:30 PM.


Advertisement
Log in to turn off these ads.