deaselene
04-03-2011, 10:35 AM
Hi there!
I'm currently working on a tumblr layout but my problem is that there's this small space in between the bottom of my layout and the bottom of the browser page that I want to get rid of. I've tried setting the height to 100% but it still doesn't work.
I was hoping for my layout to end up like here:
http://xfrecklesandtea.tumblr.com/
notice how the bottom's attached to the page? :D
Also, my dummy text for the post is aligned in the center when it shouldn't be. If someone could help me with these two problems, that'd be awesome! :D
here's my code:
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #E8ECEC;
}
.header {
background-color: #ffffff;
width: 600px;
height: 200px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
.icon {
position: relative;
right: 40px;
border: solid;
border-width: 1px;
border-color: #E8ECEC;
padding: 8px;
}
.brace {
font-family: times new roman;
font-size: 150px;
color: #E8ECEC;
margin-top: 5px;
padding-bottom: 20px;
}
.headquote {
border-right: solid;
border-color: #A2CCA5;
width: 310px;
font-family: Tahoma;
color: #C1C0BE;
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
display: table-cell;
vertical-align: middle;
}
.navbar {
height: 40px;
width: 600px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.navbar ul{
margin: 0px;
padding: 0px;
font-family: Tahoma;
font-size: 11px;
color: #01AF8E;
line-height: 30px;
white-space: nowrap;
text-transform: uppercase;
}
.navbar li {
list-style-type: none;
display: inline;
padding: 10px;
}
.navbar li a, a:visited {
text-decoration: none;
padding: 10px;
background-color: #E4E3E1;
margin-left: 5px;
margin-right: 5px;
}
.navbar li a:link{
color: #F1A499;
}
.navbar li a:hover {
background-color: #C1C0BE;
color: #01AF8E;
margin-left: 5px;
margin-right: 5px;
}
.entries {
position: relative;
height: 100%;
width: 600px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: top;
padding-top: 10px;
}
.tableentries {
font-family: verdana;
font-size: 11px;
color: #707070;
}
.titles {
font-family: Courier New;
font-size: 18px;
text-transform: uppercase;
letter-spacing: -1px;
text-align: center;
padding: 5px;
color: #707070;
}
.icon2 {
background-color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">
<table width="600px" height="200px">
<tr>
<td class="brace">
{
</td>
<td>
<div class="headquote">
If I had but an hour of love,</br>
if that be all is given me,</br>
an hour of love upon this earth,</br>
I would give my love to thee</br>
-- The Lovely Bones
</div>
</td>
<td>
<img src="icon1.jpg" class="icon" align="right"
valign="middle"></img>
</td>
</tr>
</table>
</div>
<div class="navbar">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>
<div class="entries">
<table border="0" cellpadding="10" width="745px"
class="tableentries">
<tr>
<td rowspan="2">
</td>
<td border=1 width="645px" class="titles">
~ title goes here. ~
</td>
<td rowspan="2">
</td>
<td rowspan="2" align="center" width="100px">
<div class="icon2"><img
src="icon2.png"></img></div>
</td>
</tr>
<tr>
<td style="border-bottom: dashed 1px #DEDEDE;">
if god is a dj
</td>
</tr>
</table>
</div>
</body>
</html>
I'm currently working on a tumblr layout but my problem is that there's this small space in between the bottom of my layout and the bottom of the browser page that I want to get rid of. I've tried setting the height to 100% but it still doesn't work.
I was hoping for my layout to end up like here:
http://xfrecklesandtea.tumblr.com/
notice how the bottom's attached to the page? :D
Also, my dummy text for the post is aligned in the center when it shouldn't be. If someone could help me with these two problems, that'd be awesome! :D
here's my code:
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #E8ECEC;
}
.header {
background-color: #ffffff;
width: 600px;
height: 200px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
.icon {
position: relative;
right: 40px;
border: solid;
border-width: 1px;
border-color: #E8ECEC;
padding: 8px;
}
.brace {
font-family: times new roman;
font-size: 150px;
color: #E8ECEC;
margin-top: 5px;
padding-bottom: 20px;
}
.headquote {
border-right: solid;
border-color: #A2CCA5;
width: 310px;
font-family: Tahoma;
color: #C1C0BE;
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
display: table-cell;
vertical-align: middle;
}
.navbar {
height: 40px;
width: 600px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.navbar ul{
margin: 0px;
padding: 0px;
font-family: Tahoma;
font-size: 11px;
color: #01AF8E;
line-height: 30px;
white-space: nowrap;
text-transform: uppercase;
}
.navbar li {
list-style-type: none;
display: inline;
padding: 10px;
}
.navbar li a, a:visited {
text-decoration: none;
padding: 10px;
background-color: #E4E3E1;
margin-left: 5px;
margin-right: 5px;
}
.navbar li a:link{
color: #F1A499;
}
.navbar li a:hover {
background-color: #C1C0BE;
color: #01AF8E;
margin-left: 5px;
margin-right: 5px;
}
.entries {
position: relative;
height: 100%;
width: 600px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: top;
padding-top: 10px;
}
.tableentries {
font-family: verdana;
font-size: 11px;
color: #707070;
}
.titles {
font-family: Courier New;
font-size: 18px;
text-transform: uppercase;
letter-spacing: -1px;
text-align: center;
padding: 5px;
color: #707070;
}
.icon2 {
background-color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">
<table width="600px" height="200px">
<tr>
<td class="brace">
{
</td>
<td>
<div class="headquote">
If I had but an hour of love,</br>
if that be all is given me,</br>
an hour of love upon this earth,</br>
I would give my love to thee</br>
-- The Lovely Bones
</div>
</td>
<td>
<img src="icon1.jpg" class="icon" align="right"
valign="middle"></img>
</td>
</tr>
</table>
</div>
<div class="navbar">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>
<div class="entries">
<table border="0" cellpadding="10" width="745px"
class="tableentries">
<tr>
<td rowspan="2">
</td>
<td border=1 width="645px" class="titles">
~ title goes here. ~
</td>
<td rowspan="2">
</td>
<td rowspan="2" align="center" width="100px">
<div class="icon2"><img
src="icon2.png"></img></div>
</td>
</tr>
<tr>
<td style="border-bottom: dashed 1px #DEDEDE;">
if god is a dj
</td>
</tr>
</table>
</div>
</body>
</html>