Help with my Code/Styles (please!)

**kelvinp** · Sep 20, 2004 08:29

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.

**kelvinp** · Sep 20, 2004 08:50

How embarassing - having posted all of that, everything seems to be working the way I intended!!

Oh well - i've been meaning to sign up to these forums for an age! Any comments on the basic code of my site (good or bad) however will still be most welcome - i'd rather find out soonere than later if i'm making any basic errors

Sorry to waste the time of anyone who's read through all of the above looking for an error!

K.

**sonjay** · Sep 20, 2004 12:08

Ah, go on! This can't be your first-ever site!

I didn't examine your code super-close, since you said it's working, but glancing over it, I think it's some of the cleanest code I've seen.

You could save a little trouble by leaving out the class="navigation" on every navigation link. Just put: .navigation a { style here } in your stylesheet, and the navlinks will pick up your style when you apply that navigation class to your <ul> tag. You could even do #pagenav a {style here} and leave out the navigation class from the ul.

But overall it looks like you've really done your homework and learned how to use html and css the way they're supposed to be used.

**kelvinp** · Sep 20, 2004 16:33

Wow... I wasn't expecting a first response like that

Thankyou very much

This really is my first ever site - although I did spent a great deal of time reading up on various aspects of HTML/CSS before starting! (The majority of which came from w3schools.com - fantastic site!

)

I appreciate your comments on my use of the navigation class tag - i'll make the changes you've suggested tomorrow - I totally overlooked the fact that I could do that.

Thanks so much for taking the time to reply

K.

User Tag List

Thread: Help with my Code/Styles (please!)

Thread Tools

Display

Help with my Code/Styles (please!)

Bookmarks

Bookmarks

Posting Permissions