I am trying to code my portfolio page. And it seems like every time i do a wrapper div. And put everything including the content, footer and sidebar inside the wrapper, that the footer still doesnt seem to always stay at the bottom of the page. When i add more content it goes over the footer. The footer doesnt stay at the bottom. So I need these things fixed if someone can help me.
Here is the html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crescent Moon Designs ~ Coming Soon!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Begins Wrapper-->
<div id="wrapper">
<!--Begina Header--><div id="header"></div><!--Ends Header-->
<div id="menu_top">
<div id="menu_top1">
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Home</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">About</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Portfolio</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Tutorials</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Contact</a></li>
</div>
</div>
<!--Starts Sidebar-->
<div id="sidebarleft">
<table border="0" cellpadding="0" cellspacing="0" width="200px"style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="side_title">
Sidebar Title
<img border="0" src="images/sideheader1.png" align="left">
</td>
</tr>
<td id="sidetext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.
Vestibulum eu porttitor mauris. Praesent sed malesuada dui.
Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</table>
</div>
<!--Ends Sidebar-->
<!--Starts Content-->
<div id="content_box">
<table border="0" cellpadding="0" cellspacing="0" width="600px" style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="content_title">
Content Title
<img border="0" src="images/titleheader1.png" align="left"></td>
</tr>
<td class="content_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.
Vestibulum eu porttitor mauris. Praesent sed malesuada dui.
Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</tr>
</table>
</div>
<!--Ends Content-->
<div id="footer">
All Rights Reserved © Crescent Moon Designs 2016
</div>
</div><!--Ends Wrapper-->
</body>
</html>
Here is the css:
@charset "utf-8";
body {
background-image: url('images/mainbg.jpg');
background-repeat: fixed;
background-color: #ffffff;
margin-top: 10px;
}
#wrapper {
margin-left: 240px;
clear: both;
}
#header {
background: url('images/cmdblack.png');
height: 250px;
width: 800px;
}
#footer {
margin: auto 0;
clear: both;
position: relative;
top: 800px;
}
#sidebarleft {
position: absolute;
left: 229px;
top: 334px;
}
.side_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#sidetext {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 8px;
}
.content_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#content_box {
position: absolute;
left: 555px;
top: 334px;
}
.content_text {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 18px;
}
#menu_top {
position: absolute;
left: 273px;
top: 260px;
border-bottom: 1px solid #000000;
}
#menu_top1 li {
display: inline;
padding: 8px;
padding-top: 0;
}
li a {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: normal;
text-decoration: none;
color: #000000;
padding: 10px;
}
li a:hover {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: italic;
text-decoration: none;
color: #3D3D3D;
border-radius: 9px;
padding: 10px;
}
.listimg {
padding-right: 7px;
}
Aucun commentaire:
Enregistrer un commentaire