Overflow is useful when you have a div box in your html file with size defined. And you may have content below the div box and the content of the div box might overlap another box or content. In that case you need to use overflow. Follow the steps provided in this tutorial to use overflow with CSS.
Steps to use overflow with CSS
1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:
<html>
<head>
<title>CSS tutorial – 11</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<div id=”text1″>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
It then turns directly south, heading over the Bagmati river to Patan – thus bypassing the main city of Kathmandu (which was a later foundation).[2] Tibetan merchants have rested and offered prayers here for many centuries. When refugees entered Nepal from Tibet in the 1950s, many decided to live around Boudhanath.
</body>
</html>
And then save the file as .html (eg: tut11.html).
Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.
we are using <div> tag to create a block where we will place a text and define its particular width and height.
2. Next, in the same directory (folder), create another folder named css and create new css file named as style.css. To do that, open notepad and save it as style.css
3. Next, open the file style.css and type following code:
#text1
width:500px;
height:100px;
text-align:justify;
Here,
Width: 500px; will limit the width of the div block to 500px
Height: 100px; will limit the height of the div block to 100px
text-align:justify; will justify the text of the div.
4. Next, open the html file and see what happens. You might have noticed that the text of div is overlapped with other text below it.
5. Next, open the style.css file again (the one you have created in step-2) and add the following css code:
overflow:auto;
So the final css file should look like this:
#text1
width:500px;
height:100px;
text-align:justify;
overflow:auto;
Here,
overflow:auto; will add scroll bar to the div block if the content is overlapped with another content. In our case, it will add a scroll bar as it overlapped when you see in Step-4.
Other possible values for overflow are:
Visible – This will show the content, whether it clipped or not. It’s the default value.
hidden - If the content is clipped/overlapped then it is hidden. That means the clipped content won’t show.
Scroll - Whether content is clipped or not, a scrollbar is shown.
auto - Scrollbar is only shown when the content is clipped or overlapped.
This completes our tutorial to use overflow with CSS. If you’ve found this CSS tutorial helpful, please leave a comment below or share with your friends!
The post How to Use Overfow With CSS appeared first on Web Design Blog | Magazine for Designers.
How to Use Overfow With CSS
Geen opmerkingen:
Een reactie posten