The previous lesson of html lessons series was about 2 column layout of a web page in html. In this lesson we will learn about 3 column layout of a web page.
3 column layout web page:
3 column layout of a web page consists of a header, a navigation menu, a main content area (3 column) and a footer i.e
The above code shows the html structure of a very simple 3 column layout web page. Now we will use our knowledge from the previous html lessons to make an actual 3 column layout of a web page.If you do not have any knowledge of html, please follow the html lesson series from the very beginning.
The above image shows a simple 3 column layout web page and to make a web page similar to the one shown in the above image consider the html code given below:
<head>
<title>Demo Page</title>
<style>
body{ background:#363333; }
h1{ margin:20px;font-size:24px; }
.header{ background:#4E2121;width:100%;height:80px;border:1px solid black;color:white;font-family:arial; }
.navigation{ height:auto;padding:0px;background:#1A1A1A;font-family:arial; }
.horizontal-menu{ overflow:hidden;padding:10px;margin-top:2px; }
.horizontal-menu li{ float:left;width:120px;list-style:none;text-align:center;color:white;border-right:2px solid white;font-family:arial; }
.content{ width:100%;overflow:hidden;margin-top:0px;font-family:arial;color:white; }
.sidebar{ width:20%;float:left; }
.vertical-menu{ padding:10px;margin-top:2px; }
.vertical-menu li{ width:200px;list-style:none;background:#4E2121;border-bottom:2px solid white;color:white;padding:10px; }
.main{ width:50%;float:left;padding:10px;border:1px solid white;margin-top:50px;min-height:300px;margin-right:5%;margin-left:3%; }
.footer{ width:100%;border:1px solid black;text-align:center;background:4E2121;color:white;font-family:arial;padding-top:10px;padding-bottom:10px;margin-top:30px; }
</style>
</head>
<body>
<div class="header">
<h1>My Demo Website</h1>
</div>
<div class="navigation">
<ul class="horizontal-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="content">
<div class="sidebar">
<ul class="vertical-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="main">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div class="sidebar">
<ul class="vertical-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
</div>
<div class="footer">
All Rights Reserved.
</div>
</body>
Related Posts3 column layout web page:
3 column layout of a web page consists of a header, a navigation menu, a main content area (3 column) and a footer i.e
<head>
<title>Demo Page</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div id="sidebar2"></div>
</div>
<div id="footer"></div>
</body>
The above code shows the html structure of a very simple 3 column layout web page. Now we will use our knowledge from the previous html lessons to make an actual 3 column layout of a web page.If you do not have any knowledge of html, please follow the html lesson series from the very beginning.
The above image shows a simple 3 column layout web page and to make a web page similar to the one shown in the above image consider the html code given below:
<head>
<title>Demo Page</title>
<style>
body{ background:#363333; }
h1{ margin:20px;font-size:24px; }
.header{ background:#4E2121;width:100%;height:80px;border:1px solid black;color:white;font-family:arial; }
.navigation{ height:auto;padding:0px;background:#1A1A1A;font-family:arial; }
.horizontal-menu{ overflow:hidden;padding:10px;margin-top:2px; }
.horizontal-menu li{ float:left;width:120px;list-style:none;text-align:center;color:white;border-right:2px solid white;font-family:arial; }
.content{ width:100%;overflow:hidden;margin-top:0px;font-family:arial;color:white; }
.sidebar{ width:20%;float:left; }
.vertical-menu{ padding:10px;margin-top:2px; }
.vertical-menu li{ width:200px;list-style:none;background:#4E2121;border-bottom:2px solid white;color:white;padding:10px; }
.main{ width:50%;float:left;padding:10px;border:1px solid white;margin-top:50px;min-height:300px;margin-right:5%;margin-left:3%; }
.footer{ width:100%;border:1px solid black;text-align:center;background:4E2121;color:white;font-family:arial;padding-top:10px;padding-bottom:10px;margin-top:30px; }
</style>
</head>
<body>
<div class="header">
<h1>My Demo Website</h1>
</div>
<div class="navigation">
<ul class="horizontal-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="content">
<div class="sidebar">
<ul class="vertical-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="main">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div class="sidebar">
<ul class="vertical-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
</div>
<div class="footer">
All Rights Reserved.
</div>
</body>
Basics of Html
Simple 2 column layout of a web page
Html Tables
Row and Column Span in html
Html Form Elements
Html Text Tags
Html Image and Anchor Tags
Iframe tag in html
No comments:
Post a Comment