View Full Version : Colour bar?

03-31-2005, 03:41 PM
Hi there,

On my website I would like to have a grey bar about an inch tall running right accros the bottom of my webpage. Does anyone have any suggestions as to how I could easily do this? I have one at the top which I have done by calling the DIV=TOP and then using a CSS style sheet to fill in the colour for me. Can I do something similar with a bar at the bottom? I want to put my e-mail and a few contact details into it which will then appear on every page.

I know I could possibly use a table and use background fill ? Or possibly an image?

Suggestions welcome.

Cheers all.

Jim Shady.

03-31-2005, 05:46 PM
Hi Jim, No reason to use tables for this :)
The following should work, and you can style it any way you want:

<div id="c-box">
<div class="c-name">My name</div>
<div class="c-address">My Address</div>
<div class="c-phone">My Phone</div>
<div class="c-email"><a href="mailto:email@email.com">email@email.com</a></div>

CSS:div#c-box {border: 2px dotted blue; width: 200px; background-color: orange; text-align: center;}
.c-name {margin: 0.5em 10px; font-weight: bold;}
.c-address {margin: 0.5em 10px;}
.c-phone {margin: 0.5em 10px;}
.c-email {margin: 0.5em 10px;}
.c-email a:link {color: brown;}
.c-email a:visited {color: brown;}
.c-email a:active {color: brown;}
.c-email a:hover {color: red;}

03-31-2005, 05:47 PM
If you like a background image just use the CSS property for that: div#c-box {border: 2px dotted blue; width: 200px; background-color: orange; text-align: center;background-image: url('assets/background.jpg');}

03-31-2005, 06:55 PM
Hi Domedia.

Thanks for the code - I can play around with it to format it , but how can I make it so that the bar/box that appears is always at the bottom of the browser window that it open? It's a little hard to explain. Do you know what I mean?

The following piece of code by the way:

div#c-box {border: 2px dotted blue; width: 200px; background-color: orange; text-align: center;}

Can I enter a percentage for the width? Eg: width: 100%;

I want a bar that goes the width of someone's screen and is always at the very bottom of their browser window - with my name in it.

Sos for being demanding and appreciate the help as always!

Off on hols now so hopefully they'll be a reply or two when I get back in a few days! :D

Jim Shady

03-31-2005, 07:21 PM
http://www.solardreamstudios.com/learn/css/footerstick/ ('http://www.solardreamstudios.com/learn/css/footerstick/')

04-01-2005, 04:26 AM
That's actually pretty nice.. Site bookmarked.
http://www.solardreamstudios.com/learn/css/footerstick/ ('http://www.solardreamstudios.com/learn/css/footerstick/')

04-06-2005, 12:56 PM
Have you actually tried doing it Domedia?

Didn't really work for me to be honest.

Give it a crack and let me know what you think if you can spare 10 mins?!

Jim Shady.

04-08-2005, 03:44 PM
AFter having another play with this I've realised I'm wasting my time as the person that I'm making this for has Safari on the Mac - and the very first line of this tutorial is "By the way, this doesn't work for Safari" !!