Look and feel of the website helps to gain more authority of internet users. Websites need to be updated with new style effects and layouts.All of us are familiar with websites having vertical scrolling content. Why shouldn't you create a webpage with horizontal scrolling content? Here is a way to do it.
First of all, we need a outer container and a inner container.
Add content blocks to the inner container element. You can add as many blocks as you need.
Then add the following CSS to the head section of the webpage.
You are done! You have created a page with horizontally moving content blocks.
Full html source is given below. Copy and save it as a HTML file and open it in a browser. Enjoy!
First of all, we need a outer container and a inner container.
<div id="outer_wrapper"> <div id="inner_wrapper"> <!-- more boxes here --> </div> </div>
Add content blocks to the inner container element. You can add as many blocks as you need.
<div id="outer_wrapper"> <div id="inner_wrapper"> <div class="box"> <!-- Add desired content here --> HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript </div> <div class="box"> <!-- Add desired content here --> HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript </div> <div class="box"> <!-- Add desired content here --> HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript </div> <!-- more boxes here --> </div> </div>
Then add the following CSS to the head section of the webpage.
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
You are done! You have created a page with horizontally moving content blocks.
Full html source is given below. Copy and save it as a HTML file and open it in a browser. Enjoy!
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
0 comments:
Post a Comment