PDA

View Full Version : [TUT] CSS and HTML Sidebar [TUT]


Cornholio!.
14-06-2012, 03:29 AM
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:


.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


<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!
Pegle
14-06-2012, 02:59 PM
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.
Cornholio!.
14-06-2012, 03:26 PM
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. :)
David
24-06-2012, 11:20 AM
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
Cornholio!.
02-07-2012, 02:09 PM
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!

Want to hide these adverts? Register an account for free!