Menu

Subscribe

Some CSS snippets

on Tech, CSS

This week I have been mostly messing around in CSS while remaking my website. Below are some bits of the code that have made various revisions of the site work. Not all will make it into the final cut, but they may be useful in someone elses. \n\n

Get your footer to stay put!\n

This section of code plants the footer at the bottom of your page, and it'll stay there.

/* Create the site footer */
#site-footer {
position: absolute;
font-size: 16px;
bottom: 0px;
color: grey;
background: white;
height: 30px;
width: 100%;
text-align: center;
}

Show on hover

This bit of code can be used to enable hover to expand a menu or simply expose an undisplayed div.

.showme{ opacity: 0;}
.showhim:hover 
.showme{opacity : 1;}
Parrallel divs

This piece of code will keep 3 divs parrallel, and while it won't make the final cut it is definitely something useful to know.

Create a holder for both feeds to come into the page

#wrapper {
width: 800px; 
height: 500px; 
align: center;
margin: 0 auto;
top: 215px; 
overflow: auto;
top: 20.5%; 
}

get the tweet and blog feed positioned side by side */\n\n

#tweetfeed, #expression, #blog-feed {
border: none;\n    
min-height: 500px;\n
}

place a div between the two feeds:

#expression {
float: left;
width: 200px;
height: 500px;
}

Get the tweet feed positioned */\n\n

#tweetfeed{
float: left;
width: 300px;
height: 500px;\n
}

get the blog feed positioned */\n\n

#blog-feed{
float: left; 
width: 300px;
height: 500px;
overflow: hidden;}

Here is how that looks in action.

  • Left div = Twitter feed
  • Middle div = Space filled with background. Originally meant to contain a logo
  • Right div = Blog feed

three parrallel divs

Comments