Thread: CSS / HTML problem!
View Single Post
  #1 (permalink)  
Old 08-17-05, 04:44 PM
zenonflare zenonflare is offline
Newbie Coder
  
Join Date: Dec 2003
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
CSS / HTML problem!
Hey guys, well, I've got the following code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HumorSiteScript v. 1.0</title>
<style type="text/css">
<!--

a:link { 
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

a:visited { 
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

a:hover { 
	color: #fff;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

a:active { 
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	}

body {
	background-image: 
	url('images/background.gif');
	background-repeat: repeat-x;
	background-color: #f2f2f2;
	color: #678;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	margin: 0px;
}

input, select, textarea {
	border: solid 1px #7e7e7e;
	background-color: #ffffff;
	color: #002a77;
	padding: 2px;
	font-face: verdana;
	font-size: 8pt;
	font-weight: bold;
}

#mainbody {
	width: 778px;
	background-color: #fff;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}


#license_text {
	color: #8396a4;
	padding-top: 5px;
	float: left;
	width: 20%;
	height: 62px;
	position: relative;
	background-image: url(images/header_bg.gif);
}

#logo {
	float: left;
	height: 67px;
	background-image: url(images/header_bg.gif);
	width: 80%;
}

#navbar {
	clear: left;
	background-image: url(images/nav_bg.gif);
	height: 19px;
	position: relative;
	padding-left: 10px;
	width: 768px;
}

#fix	{
	background-image: url(images/header_bg.gif);
	height: 67px;
}

#nav_dividers {
	color: #ededed;
	font-family: verdana, Geneva, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
}

#content_area {
	background-color: #fff;
	border-left: solid 2px #ebebeb;
	border-right: solid 2px #ebebeb;
	
}

#main_box {
	background-color: #e6e9ec;
	position: relative;
	width: 748px;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 3px #a2a3a6;
	border-bottom: solid 3px #a2a3a6;
	height: 720px;
	padding: 7px;
}

.title_box {
	background-color: #d8dadd;
	font-weight: bold;
	border-top: solid 3px #a2a3a6;
	border-bottom: solid 3px #a2a3a6;
	padding: 5px;
	color: #8396a4;

}
.content {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;

}






	
#footer {
	font-weight: bold;
	text-align: center;
	background-color: #fff;
	padding: 5px;
	border-left: solid 2px #ebebeb;
	border-right: solid 2px #ebebeb;
}
-->
</style>
</head>
<body>
<div id="borders">
<div id="mainbody">
		<div id="fix">
			<div id="logo">
				<img src="images/logo.gif" alt="" />
			</div>
			<div id="license_text">
				Version 1.0 Stable Release<br />
				Licensed to: Mike Rowland<br />
				http://www.humorscript.net
			</div>
			<div id="navbar">
				<span id="nav_dividers"><a href="#">Home</a> | <a href="#">Support Forums</a> | <a href="#">License</a> | <a href="#">Help</a> | 
				<a href="#" style="color: #bfbfbf">View Your Site</a> </span>
			</div>
			<div id="content_area">
				<br/>
				<div id="main_box">
					<div class="title_box">
					<a href="#" style="color: #8396a4">Add A New Category</a>
					</div>
					<br />
					<div class="content">
					Category Name: <input type="text" name="name"> <input type="submit">
					</div>
					<div class="title_box">
					<a href="#" style="color: #8396a4">Add A New Category</a>
					</div>
					<br />
					<div class="content">
					Category Name: <input type="text" name="name"> <input type="submit">
					</div>
					
				</div>
			</div>
			<div id="footer">
			Copyright 2005, humorscript.net all rights reserved. Licensed only to Mike Rowland.
			</div>
		</div>
		
		
		
</div>
</div>
</body>
</html>
http://www.humorscript.net/developem...ing/index.html

It's my first site I'm trying to code in divs.

It's nearly done now, as you can see the problem (look in internet explorer) is it messes up the nav bar a bit?

Thanks.
Reply With Quote