How can you layout a web page:
- Create an HTML first.
- Style with CSS
- Build a layout
Multiple column layouts:
CSS3 introduces a multiple column layout design of a web page. There are two ways to create a multiple column layout:
- By using the float property
- By using position property
You can manage multiple columns by using CSS3 properties like:
- column-count : The number of columns
- column-fill : Strategy for filling column
- column-gap : Space between two columns
- column-rule : Shorthand property of column-role property
- column-rule-color : Color of the rule
- column-rule-style : Style of the rule
- column-rule-width : Width of the rule
- column-span : Spanning of column or columns
- column-width : Fix the column width
- columns : Shorthand property for column
But these properties are not suitable for all designers yet. So, here I use float property and other CSS3 tricks to design a multiple column layout. The position property does not ideal for all devices like tablet and mobile devices. For this reason you should avoid position property for the multiple column layout design.
Example:
In this example I create a two column layout for container portion of the web page. The first column contains “Tutorial” and “We provide you” heading. The second column contains “More from this site” heading with some links, “Did you know?” and “Submit your code”. At first I write the HTML code for these headings and then float them as they are the two individual <div> elements.
I also create the two column layout for footer portion. First column of footer contains copyright information and second column contains the contact information.
You can design a three column layout also by CSS3. But greater than three is not better for web design.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Multi layout</title>
<style>
/* style for body */
body {
background-color: rgb(255,255,255);
color: rgb(58,69,71);
margin: 0;
padding: 0;
font-size: .85em;
}
/* style for header */
h1, h2, h3 {
margin: 0;
padding: 0 0 1em 0;
text-shadow: 3px 1px 2px rgba(1,1,1,0.9);
}
/* style for list and paragraph */
ul, ol, p {
margin:0;
padding: 0 0 1em 0;
}
/* Style for individual header */
h1 {
font-size: 1.3em;
color: rgb(241,47,93);
}
h2 {
font-size: 1.25em;
color: rgb(241,47,93);
}
h3 {
font-size: 100%;
}
/* Style for link */
a:link, a:visited {
color: rgba(241,47,93,0.8);
}
a:hover { /* hover effect */
color: rgb(241,47,93);
text-decoration: none;
}
.nav {
list-style-type: none;
padding: 0;
}
.nav a:link, .nav a:visited {
text-decoration: none;
display: block;
border-top: 1px solid rgb(232,243,248);
padding: 0.5em 0 0.5em 0;
color: rgb(66,148,182);
}
.nav a:hover {
background-color: rgba(232,243,248,0.3);
}
.box {
border-top: 1px solid rgb(219,230,236);
padding: 1em 0 1em 0;
}
/* Style for view area of web page */
.wrapper {
width: 940px;
margin: 0 auto 0 auto;
}
/* style for header of web page */
.header {
text-align: right;
padding: 40px 0 0 0;
border-bottom: 8px solid rgb(58,69,71);
margin-bottom: 40px;
}
.header h1 {
font-size: 187.5%;
border-bottom: 1px solid rgb(58,69,71);
margin-bottom: 2px;
padding-bottom: 10px;
color: rgb(58,69,71);
}
.header h1 span {
font-style: italic;
color: rgb(241,47,93);
}
.main {
position: relative;
}
/* first column of wrapper */
.article {
float: left;
top: 0;
left: 0;
width: 540px;
}
/* second column for wrapper */
.aside {
float: right;
width: 300px;
top: 0;
right: 0;
}
/* Style for footer */
.footer {
clear: both;
background-color: rgb(58,69,71);
color: rgb(255,255,255);
padding: 2px;
overflow:auto;
}
/* first column of footer */
.footer .copy {
float: left;
width: 520px;
}
/*second column of footer */
.footer .vcard {
float: right;
width: 280px;
}
.footer a:link, .footer a:visited {
color: rgb(255,255,255);
}
</style>
</head>
<body>
<div>
<div>
<h1>Tech-info24.com <span>for</span> Success</h1>
</div>
<div>
<h1>Tutorial</h1>
<p>Don't rely on books! You must need to visit here. All technical tutorials
absolutely ready for you! Easy presentation and more readable example give
you a feel of heaven in the computer world. </p>
<p>Here you get:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<h2>We provide you</h2>
<ol>
<li>Tutorial about programming Language</li>
<li>News about recent technology</li>
<li>Tips and trics about computer</li>
</ol>
</div>
<div>
<h2>More from this site</h2>
<ul>
<li><a href="">More HTML code</a></li>
<li><a href="">More CSS code</a></li>
<li><a href="">More PHP code</a></li>
</ul>
<div>
<h3>Did you know?</h3>
<p>Tech-info24.com is a great tutorial side of Bangladesh. This website is specially
for Bangladeshi students assisting themselves to be a world class programmer.
</p>
</div>
<div>
<h3>Submit your code</h3>
<p>If any problem with your code, you can submit here and we try our best
to fix it.</p>
<p><a href="">Send it to us here!</a></p>
</div>
</div>
<div>
<p>Copyright © tech-info24.com 2013</p>
<div>
<h3>Contact Us</h3>
<div>
<div>Sahjadpur, Dhaka 1200</div>
<div>Bangladesh</div>
<div><a href="mailto:saifulrony4@gmail.com">
test@example.com</a></div>
<div>+88 (0) 1683 814575 </div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
The post Create a complete Layout in CSS 3 appeared first on Tech-info24.com | Popular Newsletter on Information Technology News.