top



i was looking to make a tool bar for my site, i want it's fixed to the bottom.
but i don't want one pre made.

i have been on google trying to follow tutorials but it all failed

i was wondering can anyone make me one from scratch?


thanks

HTML

Code:
<div class="btmbar">
<a href="URL"><img src="IMG_URL"></a><a href="URL"><img src="IMG_URL"></a>
</div>

CSS
Code:
.btmbar {
  background: #000;
  width: 90%;
  height 30px;
  bottom: 0px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

I think this is a base for one. Go ahead and edit everything else. But erm... I can't seem to centralize the bar (I kinda forgot the tag for it). Someone needs to help out on that.

To center it just add

Code:
<div align="center">  </div>
around the div class.


Toolbar by Saxaca Designs Oh, btw McStorm rocks!


Intrested in what i put in the bottom?

can i have the one at the bottom of this topic?

it looks good Happy

Code:
<div style="position: fixed; bottom: 0; align: center; margin: 0px auto; background: #CCCFFF; border: 3px solid #383838; width: 70%; text-align: center; color: black; height: 50px; border-bottom: none;"><a href="#bottom"><img src="http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0360/door_in.png"></img></a><br>Toolbar by <a href="#bottom">Saxaca Designs</a> Oh, btw McStorm rocks!</div>

Next time click on "Quote" Razz

Code:
<div style="position: fixed; bottom: 0; align: center; margin: 0px auto; background: #CCCFFF; border: 3px solid #383838; width: 70%; text-align: center; color: black; height: 50px; border-bottom: none;"><a href="#bottom"><img src="http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0360/door_in.png"></img></a><br>Toolbar by <a href="#bottom">Saxaca Designs</a></div>

Guys, you forgot the z-index tag. Now the bar clashes with the forum contents.

Code:
<div style="position: fixed; bottom: 0; align: center; margin: 0px auto; background: #CCCFFF; border: 3px solid #383838; width: 70%; text-align: center; color: black; height: 50px; border-bottom: none; z-index: 1000;"><a href="#bottom"><img src="http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0360/door_in.png"></img></a><br>Toolbar by <a href="#bottom">Saxaca Designs</a></div>

There you go..

Toolbar by Saxaca Designs

Since no reply has been posted by the topic author,and a possible solution is already been given by our staff,i will now lock this thread and mark it as solved.