...

View Full Version : Set text to top of element



bradz1993
10-29-2011, 09:19 PM
I seem to have trouble getting the text 'Top of Page' to be vertically aligned to the top of the footer section.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"/>


<!-- The external style sheets -->
<link rel="stylesheet" type="text/css" href="mystyle.css">

<meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
<meta name="description" content="Capability Berwick - Landscape Maintenance">
<meta name="author" content="Bradley Berwick">

<style type="text/css">




</style>

</head>


<body>

<a name="top"></a>

<div id="top">
<div id="header">
<h1>
Capability Berwick
</h1>
</div>
<div id="topnav">
<ul>
<li><a href="index.html" >Home</a>
<li><a href="services.html" > <span class="currentpage"> Services </span></a>
<li><a href="gallery.html" >Gallery</a>
<li><a href="contact.html" >Contact Us</a>

</ul>
</div>
</div>
<div id="content">
<h2>
Services
</h2>
<p>
Capability Berwick provides a wide range of services, where no job is too big and certainly not too small.
</p>

<ul>
<li>Lawn Maintenance:</li>
<ul>
<li> Mowing lawn </li>
<li> Edge lawn </li>
<li> Lawn treatment - when full of weeds, patches of brown grass </li>
<li> Flower bed management </li>
</ul>
<li> Tree Maintenance </li>
<ul>
<li> Removal of trees </li>
<li> Trim and shape trees and scrubs </li>
</ul>
<li> Patio's / Driveways </li>
<ul>
<li> Crazy paving </li>
<li> Block paving </li>
<li> Slab work </li>
<li> Walls - border walls, flower bed walls </li>
</ul>
<li> Garden maintenance </li>
<ul>
<li> Garden clearance </li>
<li> Garden design </li>
</ul>
</ul>

<a href="http://www.pavingsuperstore.co.uk/buy-by-stone-type-9-c.asp" target="_blank">Different types of block paving</a>

<p>
This is only a small selection of services that the company provides.
</p>

<p>
Feel free to contact us (<a href="contact.html">Contact Us</a>) with any of your gardening problems to get a free call-out and quote.
</p>





</div>



<div id="footer">
<div id="mailto">Last updated on 28th Oct 2011<br>
Maintained by <a href="mailto:berwick_bradley@mail.com">
Bradley Berwick</a>
</div>
<div id="footertop">
<a href="#top">Top of Page</a>
</div>
</div>



</body>
</html>






#top
{
margin: 0;
background: #fff;
}

#header
{
background: #7A991A;
padding: 20px;
}

#header h1
{
margin: 0; color: #FFFFFF; font-family:"Broadway"; font-size:40px;
}


#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#topnav li
{
float:left;
width: 25%;
}

#topnav a {
background-color: #98BF21;
color: #FFFFFF;
display: block;
font-weight: bold;
padding: 5px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}

#topnav a:hover
{
background-color:#7A991A;
}



.currentpage
{
font-style:italic;
}



#content
{
clear: left;
padding: 20px;
background-color:#7A991A;
overflow: auto;
color: #ffffff;
}

#content h2
{
color: #ffffff;
font-size: 160%;
margin: 0 0 .5em;
}



#footer
{
background: #98bf21;
height: 70px;

}

#mailto
{
font-style: italic;
font-weight: bold;
padding: 0 5px 0 0;
text-align: right ;


}

Excavator
10-29-2011, 09:27 PM
Hello bradz1993,
Your divs #mailto and #footertop are both full width elements. Floating one or both will put them side by side and allow Top of Page to goto the top of #footer.

Try this -

#footer
{
background: #98bf21;
height: 70px;

}
#footertop {
width: 200px;
float: left;
}
#mailto
{
margin: 0 0 0 220px;
font-style: italic;
font-weight: bold;
padding: 0 5px 0 0;
text-align: right ;


}

And some re-ordered markup -

<div id="footer">
<div id="footertop">
<a href="#top">Top of Page</a>
</div> <div id="mailto">Last updated on 28th Oct 2011<br>
Maintained by <a href="mailto:berwick_bradley@mail.com">
Bradley Berwick</a>
</div>
</div>

bradz1993
10-29-2011, 09:55 PM
Thanks. Would I have to use margin or padding if I wanted to move Top of Page to the vertical middle of the footer section?

Excavator
10-29-2011, 10:11 PM
Margin would work if you want.
So would this bit hightlighted in red -
#footer {
background: #98bf21;
height: 70px;
}
#footertop {
line-height: 70px;
width: 200px;
float: left;
}
#mailto {
margin: 0 0 0 220px;
font-style: italic;
font-weight: bold;
padding: 0 5px 0 0;
text-align: right ;
}

bradz1993
10-29-2011, 10:21 PM
What does that do?

Excavator
10-30-2011, 12:29 AM
What does that do?

It matches your links line-height to the space available in your 70px high #footer. That's an easy way to vertically center a single line of text. Doesn't work if there's more than one line.

See line-height here (http://www.w3schools.com/cssref/pr_dim_line-height.asp).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum