Tumblr Tutorial
Welcome to Tumblrtutoriial! A place where we share our resources, tutorials and themes! We share graphics, buttons, themes, cursors, and everything else and we teach daily tutorials to help you improve your HTML and CSS skills.
disclaimer
tutorials here aren't ours unless stated, most of the resources here are taken from other sites but others were also made by us, it will be stated. if there is any thing/tutorial that isn't credited enough please message us! we don't bite :)

· , thank you!
Sidebar Informations/Codes a CSS Tutorial

have you ever wondered how can your sidebar float?? well, here’s a css tutorial!

look for the sidebar div, like for example:

<div id=”sidebar"> the sidebar is the div, if you see id, it means it’s with a hashtag + the div name, like:

<div id=”sidebar"> so it means the div in the css is= #sidebar! if it is

<div id class=”sidebar"> the div in the css is .sidebar!

but in your theme, sidebar could be anything! just search where you put your information, not the posts :)

Now, for the positioning, here’s an example of a floating sidebar:

#sidebar{

position: fixed;

left: 150px;

top: 40px;

width: 200px;

background-color: #fff;

}

look at the bolded word (fixed) it’s fixed, a lot of theme says there is a fixed sidebar there, it means floating, and if we say fixed, it means float. if you don’t want it to float, change the bolded text (fixed) into absolute.

DID YOU KNOW?

You can put a background image to your sidebar!!!

just add:

background-image: url(BACKGROUNDHERE);

you just have to put the background image url in the BACKGROUNDHERE between the brackets, don’t remove the brackets otherwise the codes wouldn’t work.

// Claire

September 30, 2012 with 12 notes
  1. tumblrtutoriial posted this