Help with html please
3 posts
Page 1 of 1
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.
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>
You could try adding a top margin to the elements you want to bring down:
Code: Select all
margin-top: 10px;
3 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023