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.

Code:

<!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>

Code:

#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 -

Code:

#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 -

Code:

	<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 -

Code:

#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

Quote:

Originally Posted by bradz1993

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.