SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bournemouth
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with my Code/Styles (please!)

    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.

  2. #2
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bournemouth
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    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.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Southwest Florida
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bournemouth
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •