Custom scrollbar
Posted by admin in html / css, tips
I recived a webpage design which included a page with scrollable content. You can use CSS parameters like scrollbar-face-color, scrollbar-highlight-color, but in my case I needed to remove the arrows, so I found fleXcroll. With this code you can create scrollbar just the way you need it. It’s also very easy to use, that’s why I recommend it.
The zip also includes all the examples for the use.
Download fleXcroll (just look under Download section).
How many HTML/CSS elements can you name?
Posted by admin in relax, html / css
Here are 2 interesting tests for you. Try it!
- How many HTML elemets can you name in 5 minutes?
myScore:
53 - How many CSS properties can you name in 7 minutes?
myScore:
54
Fixed footer at the bottom of the browser
Posted by admin in html / css
Here is an example for fixing the web site footer to the bottom of your browser. The content is scrollable while the footer is fixed and stays visible all the time.
The example.
Center page verticaly and horizontaly
Posted by admin in html / css
I have to center almost all web pages horizontaly and it is simply made by adding margin and width parameter to your container div. Then I came accross the problem to align the page also verticaly to the center of a browser. I found some suggestions with 50% width or height of divs, but the problem was that page would hide at the top of the browser window as you resize it. Sometimes it’s good to look a little in the past as I found the solution using tables (for a long time now I use nothing but divs!). Page is verticaly centered if you add the vertical-align parameter to the table tag. Below you can find full code for centering your page.
HTML code:
<html>
<head>
<title>Center page verticaly and horizontaly</title>
</head>
<body>
<table id=”container”>
<tr>
<td>Contenet is centered verticaly and horizontaly.</td>
</tr>
</table>
</body>
</html>
CSS code:
html, body, #container {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#container {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}
Here is example.
Stick footer to bottom with CSS
Posted by admin in html / css
Here is some usefull code how to stick footer to the bottom of browser with CSS.
HTML code:
<html>
<title>Stick Footer</title>
<body>
<div id=”container”>
<div id=”content”>
<p>Content text …</p>
</div>
<div class=”push”></div>
</div>
<div id=”footer”>
<p>Footer text …</p>
</div>
</body>
</html>
CSS code:
* {
margin: 0;
}
html, body {
height: 100%;
}
#container {
width:700px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -40px; /* the bottom margin is the negative
value of the footer’s height */}
.push {
height: 40px; /* .push must be the same height as #footer */
}
#content {
padding:20px;
}
#footer {
width:700px;
margin:0px auto;
height: 40px;
}
Here is example.
