Hi there, I hope some of you can (or rather, will
choose to ) help me...
I'm totally new to web design, but am very keen to not only learn the basics, but (hopefully) to go on and learn bigger and better things over time. I'm curently working on my first site (for my local Church) but am having a few problems with the layout that i'm hoping you can sort for me.
I've no doubt you'll find plenty of mistakes in my code (this is my first *ever* attempt at anything like this don't forget! ) so some constructive criticism with reference to that will also be greatly received, but my main issue as stated, is currently just with the basic layout. I've tried to use CSS styles to position the various elements of my page but i'm having some trouble with setting the vertical size of the main text element.
Hopefully you'll be able to decipher from my code, the fact that i'd like the main body of text (as seen in the "#maintext" style below) to be positioned at a point beginning 25% from the top of the page, and with a maximum height of 65% so that in effect, the bottom 10% is kept clear so as not to interfere with my navigation menu. I set the overflow to "auto" in the hope that anything that exceeded the set size could be viewed by scrolling down but this doesn't happen What am I doing wrong? (Are you still with me?!?!)
The end result should be that I have the navigation menu fixed at the base of the screen (as if it existed in a frame) with the body text above it in a scrolling box...
My apologies for the length of this post - i've tried to describe everything as accurately as possible for you all. Hope you're still awake!
Now for my code:-
CSS:-
Code:
/*wolc*/
html, body {
height:100%;
border:0;
margin:0;
background-color: #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/*Positioning Elements*/
#header {
position:absolute;
width:50%;
top:5px;
left:5px;
background-color:#000000;
z-index:3;
}
#footer {
position:absolute;
width:50%;
bottom:0px;
left:0px;
background-color:#000000;
z-index:2;
}
#maintext {
position:absolute;
top:25%;
left:10%;
height:65%;
width:80%;
overflow:auto;
}
#favourite {
position:absolute;
width:auto;
top:25px;
right:25px;
background-color:#000000;
z-index:1;
}
/*Style Sheet(s) for Navigation*/
#pagenav {
position:absolute;
bottom:5%;
right:5%;
}
#pagenav ul {
margin:0;
list-style-type: none;
}
#pagenav ul li {
display:inline;
padding: 0 0 0 20px;
}
#dropdown {
position:absolute;
top:20%;
left:10px;
width:auto;
}
/*These elements refer to text style*/
p {font:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px}
.navigation {font:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size: xx-small; font-weight:bold} /*Navigation Menu*/
.favourite {font:Verdana, Arial, Helvetica, sans-serif; font-size:x-small; color:#FFFFFF}
a:link {color:#FFFFFF; text-decoration:none}
a:visited {color:#666666; text-decoration:none}
a:hover {color:#FFFFFF; text-decoration:underline}
a:active {color:#FFFFFF; text-decoration:none}
HTML:-
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Word of Life Church - Poole - Come and join us on Sundays at 10:30am</title>
<meta
name="keywords"
content="poole,bournemouth,dorset,church,word of life,wolc,christian,events,religious,contemporary,modern,relevant">
<link href="wolc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<a href="index.html"target="_top"><img src="images/header.png" width="100%" height="100%" border="0" alt="Word of Life Church - Poole"></a>
</div>
<div id="favourite">
<a class="favourite" href="javascript:window.external.AddFavorite('*address removed*','Word of Life Church - Poole')">Add us to your Favourites!</a>
</div>
<div id="maintext">
<p>Main Content to go here (mixture of text, and images)</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="pagenav">
<ul class="navigation">
<li><a class="navigation" href="index.html">HOME</a></li>
<li><a class="navigation" href="about.html">ABOUT US</a></li>
<li><a class="navigation" href="services.html">SERVICES</a></li>
<li><a class="navigation" href="events.html">EVENTS</a></li>
<li><a class="navigation" href="contact.html">CONTACT US</a></li>
</ul>
</div>
</body>
</html>
Help!
Kelvin.
