[TUT] CSS and HTML Sidebar [TUT]

Printable View

14-06-2012, 03:29 AM
Cornholio!.

[TUT] CSS and HTML Sidebar [TUT]

Hey guys! I thought I'd make a tutorial for you guys. I've noticed lots of people wanting to make a sidebar. So, why not help? Alright.

Step 1# : CSS File Creation

Make a file called global.css then open it with your favorite text editor or program like Dreamweaver or Notepad ++
Insert:

HTML Code:

.buttonscontainer {width: 150px;} .buttons a {color: #000000;border: 1px solid;background-color: #00FFCC;padding: 2px;padding-left: 3px;font: 13px Arial, sans-serif;font-weight: bold;text-decoration: none;border-color: #0000FF #000033 #000033 #0000FF;display: block;margin: 0px;width: 100%;text-align: left;} .buttons a:hover {border: 1px solid;padding-left: 4px;padding-top: 3px;padding-bottom: 1px;padding-right: 1px;background-color: #FFFFFF;border-color: #000033 #0000FF #0000FF #000033;color: #FFFFFF;text-decoration: none;}

You can edit the colors to your liking, then Save. :)

Step #2: HTML File

HTML Code:

<doctype html> <html> <head> <title>Sidebar</title> <link href="global.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="buttonscontainer"> <div class="buttons"> <a href="http://www.uzumaki-studios.co.uk/">Uzumaki-Studios</a> <a href="http://www.uzumakinet.x90x.net/">UzumakiNET</a> <a href="http://www.snowrock.caster.fm/">UzumakiFM</a> </div> </div> </body> </html>

You can always edit the buttons and add more, :)

Note, it won't come out correct if you don't put it on a web server. ;)

In the end:
http://puu.sh/AO18

P.S. Sorry the CSS is yucky. I pasted it from an old site, and I guess it messed up.

Hope I helped!
14-06-2012, 02:59 PM
Pegle

Not really a sidebar, just a collection of buttons. To make a sidebar tutorial you would have to create a sidebar and some content. But it's a nice tutorial for what it does.
14-06-2012, 03:26 PM
Cornholio!.

Quote:

Originally Posted by Pegle

Not really a sidebar, just a collection of buttons. To make a sidebar tutorial you would have to create a sidebar and some content. But it's a nice tutorial for what it does.

This is very true, it's just buttons. But it does act as a sidebar, if you put it in your CSS Sidebar. Thank you. :)
24-06-2012, 11:20 AM
David

does the job i guess :P could do with a better design

image is broken for me so here ;
http://icap.me/i/qUWsBPQqqV.png
02-07-2012, 02:09 PM
Cornholio!.

Quote:

Originally Posted by Dave.

does the job i guess :P could do with a better design

image is broken for me so here ;
http://icap.me/i/qUWsBPQqqV.png

Thanks!