Help with html please

3 posts Page 1 of 1
Contributors
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Help with html please
Mark
Hello,

this is my html template im trying to get the top to move down alittle bit so its not bang on the top.

can anyone help this is the demo site http://www.mbdues.co.uk

and this is the code.
Code: Select all
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>New Site</title>
<style>

body {
	background: #CBBB98;
	margin : 0;
	padding : 0;
	font-family : "Helvetica","Arial";	
}

#wrapper {
	width : 960px;
	height : auto;
	background : #DAD5C1;
	border-left: 5px solid #A09885;
	border-right: 5px solid #A09885;
	overflow : auto;
	margin : 0 auto;
	padding : 10px;
}

#header {
	width : 100%;
	height : 100px;
	border-bottom : 3px solid #7C7063;
}	

#logo {
	float : left;
	margin : 15px 0px 0px 80px;
}

#social {
	float : right;
	margin : 20px 30px 0px 0px;
}

#social ul li{
	float : left;
	list-style : none;
	padding-right : 5px;
}

#social img {
	height : 55px;
	width : 55px;
}

#sidebar {
	float :left;
	width : 275px;
	height : 100%;
}

#menu ul{
	float : left;
	height : auto;
	width : 200px;
}

#menu ul li {
	list-style : none;
	padding : 5px;
	text-align : center;
}

#menu ul li a {
	background : #CBBB9B;
	color : #4E4F3E;
	text-decoration : none;
	padding : 10px 0px; 
	display : block;
}

#menu ul li a:hover {
	color : #fff;
}

#content {
	float : left;
	width : 655px;
	height : 100%;
	padding-left : 15px;
	letter-spacing : 1;
	color : #57574C;
	border-left : 3px solid #7C7063;
}

h1 {
	text-align :center;
	padding : 5px;
	border-bottom : 1px solid #7C7063;
}

p {
	text-indent : 50px;
	line-height :25px;
}

img {
	float: right;
	padding-left : 0px 0px 5px 5px;
}

.top a{
	color : #4E4F3E;
	text-decoration : none;
	
}

#table {
	margin : 0px 0px 30px 175px;
}

iframe {
	margin-left : 55px;
}

#footer {
	clear : both;
	width : 100%;
	height : 80px;
	color : #7C7063;
	border-top : 3px solid #7C7063;
}

h5 {
	text-align : center;
}

</style>

</head>

<body>

<div id="wrapper">

	<div id="header">
		<a name="top"></a>
		<div id="logo">
			<img src="http://www.w3newbie.com/wp-content/uploads/boxer_logo.png" width="350px height="80px" alt="logo" title="Boxer Dogs"/>
		</div> <!--- End of logo --->
		
		<div id="social">
			<ul>
				<li><a href="http://www.facebook.com" target="_blank"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png" alt="Facebook" title="Facebook"/></a></li>
				<li><a href="http://www.twitter.com" target="_blank"><img src="http://www.w3newbie.com/wp-content/uploads/twitter.png" alt="Twitter" title="Twitter"/></a></li>
				<li><a href="http://www.youtube.com" target="_blank"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png" alt="Youtube" title="Youtube"/></a></li>
				<li><a href="http://www.plus.google.com" target="_blank"><img src="http://www.w3newbie.com/wp-content/uploads/google_plus.png" alt="Google Plus" title="Google Plus"/></a></li>				
			</ul>
		</div><!--- End of social --->
	
	</div> <!--- End of header --->
	
	<div id="sidebar">
		<div id="menu">
			<ul>
				<li><h2><a href="#home">Home</a></h2></li>
			</ul>
		</div> <!--- End of menu --->
	</div> <!--- End of sidebar --->
	
	<div id="content">
		<a name="home"><h1>Welcome</h1>
			
			
			<div id="table">
				<table border="1">
					<tr>
						<th>-------</th>
						<th>Meal 1</th>
						<th>Meal 2</th>
						<th>Meal 3</th>
					</tr>
					<tr>
						<th>-------</th>
						<th>Wet</th>
						<th>Dry</th>
						<th>Bacon</th>
					</tr>
						<tr>
						<th>-------</th>
						<th>5oz</th>
						<th>9lbs</th>
						<th>334</th>
					</tr>
					<tr>
						<th>-------</th>
						<th>test 1</th>
						<th>test 2</th>
						<th>test 3</th>
					</tr>
				</table>
			</div> <!--- End of table --->
			
			<div class="top">
				<h4><a href="#top">Go To The Top!</a></h4>
			</div> <!--- End of top class --->
			
	</div> <!--- End of content --->
	
	<div id="footer">
		<h5>2014 mbdues.co.uk!</h5>
	</div> <!--- End of footer --->
	
</div> <!--- End of wrapper --->

</body>

</html>
http://www.mbappz.com
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Help with html please
comathi
You could try adding a top margin to the elements you want to bring down:
Code: Select all
margin-top: 10px;
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Re: Help with html please
XTechVB
Also you have about 13 errors in you markup source code See Here
You can find me on Facebook or on Skype mihai_92b
3 posts Page 1 of 1
Return to “Help & Support”