Table of Contents
Web developers mess with many questions regarding HTML and CSS while designing the website that kills much of their precious time to find out the perfect solution. Here are the solutions to the frequently asked questions by web developers.
How to hide vertical and horizontal scrollbars of a website?
Assume you have created a website that fits in browser but still you get scroll bars, it irritates right? Here is the simple code to hide vertical as well as horizontal scrollbars of webpage-
body {
overflow-y:hidden;
overflow-x:hidden;
}
In case If you want to hide the vertical scrollbar just use overflow-y:hidden; or else use the code mentioned above to hide both vertical and horizontal scrollbars.
How to create sticky header and footer for website?
Sticky header or sticky footer sticks to their position even if you scroll the webpage, here is the code to create sticky header and footer-
Sticky header
<div style=”width:100%; height:45px; margin:0 auto; position:fixed; top:0; background-color:#000;”>
This is a sticky header
</div>
Sticky footer
<div style=”width:100%; height:45px; margin:0 auto; position:fixed; bottom:0; background-color:#000;”>
This is a sticky footer
</div>
Here we have used “fixed” value for “position” property for both DIV’s that makes them stick to their position either to top or bottom.
How to align text vertically centered in a DIV?
It is easy to align the text horizontally center in a DIV but it is bit tricky to align vertically centered. Here is the code to align the text vertically centered in a DIV-
<div style=”height:100px; width:200px; line-height:100px;”>
Lorem Ipsum
</div>
According to the code above we have included line-height property and set the value of DIV height to it, just change the line-height according your DIV height to align text vertically center in DIV.
How to create the DIV with rounded edges?
Here is the CSS code to create the rounded edges for DIV, use this code in the ID or else in the class that the DIV uses.
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
Wonder why there are three lines of codes? Let me explain a bit, the first line –moz is used to support those browsers that uses gecko engine such as Firefox and Seamonkey, -webkit is used for Google Chrome and Safari which rely on webkit engine and the last line “border-radius” is used so that the code should work in Internet Explorer that uses trident engine. Unfortunately Internet Explorer 7 and 8 does not support border radius.
How to stretch the website background with browser?
Do you want your website background to stretch according to your browser’s height and width? Here it is-
body{
background-size:100%;
}
