Hi there,
An upfront sorry for being such a NabCake, I've done a bit of HTML editing in my time, however when it comes the CSS and Javascript I've forgetten everything ive learnt at university

I've building my own website using code to build up my skill set again, i dont want to use a GUI editor cause that takes away a bit of the fun.

Basically, what I want to do is, on my main page, I want to have bar at the top of the page and a smaller bar resting at the bottom. I would like these bars to either be an image or a colour....

If you have a look at this pic, the bars at the top and bottom are what I would like to achieve.



I've played around but all I could manage is two bars that wrap arond the text on the web page, so they increase, decrease depending on how much text there is.

First let's work out what you're talking about.

Do you mean the bars with diagonal stripes? And would you like your own bars to be patterned?

Further, do you want the bars (whatever their color, etc.) to stay where they are relative to the browser window as what's between the bars is scrolled up and down, or do you instead want the bars to scroll with the rest? (If you hadn't thought of the former and now think "Yeah, kewl!", I'd urge against it: it would cut into the usable space within a smallish browser window.)

Anyway, God (aka W3C) gave humankind the glorious gift of CSS for stuff like this.

hehe thanks, I've gone though W3C css tutorial, but only seemed to cover basic lame stuff. I want my website to have those stripey bars and say where they are and the rest the scroll up and down within.

Major, major waste of space there.

Go three better: have yourself a floating, dropdown, translucent menu. It took me ages to create the thing; now, it's all yours:

<div class="onthispage">
<ul>
<li><a>ON THIS PAGE</a>
<ul>
<li><a href="#this">This</a></li>
<li><a href="#that">That</a></li>
<li><a href="#theother">The other</a></li>
<li><a href="#and more">And more</a></li>
</ul>
</li>
</ul>
</div>

I'm puzzled to notice that the whole thing is a list within the sole item of another list. I vaguely remember that I wanted a list with a nested list but then decided that all I wanted was the nested bit, but was so exhausted by that time that I couldn't stomach the slight rewriting needed to simplify the result.....

AND

<style type="text/css" media="screen">
@import url(super.css);
</style>

<!-- +++ Section for MSIE only +++ -->
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="common/msie_older.css" />
<![endif]-->
<!-- +++ End of section for MSIE only +++ -->

WHERE super.css INCLUDES

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright © 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* NB the original is very different, and also has special provisions
for MSIE. (The version here doesn't work with MSIE, and is hidden from
MSIE via a kludge designed by Microsoft for its browsers.) */

/* Position the whole thing */
div.onthispage {
position:fixed;
right:2px;
top:2px;
}

/* remove the bullets, padding and margins from the lists */
.onthispage ul{
list-style-type:none;
padding:0;
margin:0;
}

/* make the top level links horizontal and position relative so that we can position the sub level */
.onthispage li{
float:left;
position:relative;
z-index:100;
}

/* Make the list translucent */

div.onthispage li {
background-color: #ffffff; /* the background */
-moz-opacity:0.9; /* Mozilla 1.6 and below */
opacity: 0.9; /* newer Mozilla and CSS-3 */
}

/* style all the links */
.onthispage a {
display:block;
font-size:70%;
font-family:verdana, monaco, "DejaVu Sans", sans-serif;
width:149px;
padding:7px 0;
color:#000;
background:#9e7c7c;
text-decoration:none;
margin-right:1px;
text-align:center;
z-index:100;
}

.onthispage :link, .onthispage :visited {
text-decoration: none;
color:#fff;
z-index:100;
}

/* style the links hover */
.onthispage :hover{
color:#000;
background:#d8d4bd;
z-index:100;
}

/* hide the sub level links */
.onthispage ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}

/* make the sub level visible on hover list or link */
.onthispage ul li:hover ul,
.onthispage ul a:hover ul{
visibility:visible;
z-index:100;
}

AND msie_older.css INCLUDES

div.onthispage {
visibility:hidden;
position:relative;
margin:0;
}

SORRY, MSIE users, mwah ha ha.