Hi guyz!
Welcome back!!!!!
This section we will see how to make layout using CSS
Step 1: First you assing how many parts in your body section
ie
Step 2: Menu has two type (i.e) Horizantal menu vertical menu and content has two parts letf content and rightcontent
header
menu
content
footer
Step3: Write CSS in page section and call the id in body section
Write CSS in following way !
<style type="text/css">
#main_container
{
width:900px;
height:500px;
margin:0 auto;
background-color:#00CC99;
border:1px solid #006633;
}
</style>
<body>
<div id="main_container">
</div>
</body>
Note: This code using for your page has been centered layout!
Step4: Write CSS in header section and call the id in main_container section
Write CSS in following way !
<style type="text/css">
#header
{
width:900px;
height:150px;
border-bottom:10px solid #CC9900;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
</div>
</body>
Step5: Write CSS in menu section and call the id in main_container after the header section
Write CSS in following way !
<style type="text/css">
#menu
{
width:900px;
height:50px;
border-bottom:1px solid #CC9900;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
<div id="menu"></div>
</div>
</body>
Step6: Write CSS in content section and the section divide into two parts 1.leftcontent 2.rightcontent. The left content id floated left and right content is floated right. After and call the id in main_container after the menu section in following way
<style type="text/css">
#content
{
width:900px;
height:300px;
}
#leftcontent
{
width:200px;
height:300px;
background-color:#99CC66;
float:left;
}
#rightcontent
{
width:690px;
height:300px;
background-color:#99CC66;
float:right;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="leftcontent"></div>
<div id="rightcontent"></div>
</div>
</div>
</body>
Step7: Write CSS in fotter section and call the id in main_container after the content section
<style type="text/css">
#footer
{
width:900px;
height:100px;
background-color:#FF9900;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="leftcontent"></div>
<div id="rightcontent"></div>
</div>
<div id="footer"></div>
</div>
</body>
Step8: Thats done for your CSS Layout! Next add content(HTML elements) and add effect(styles).
<head>
<style type="text/css">
#main_container
{
width:900px;
height:600px;
margin:0 auto;
background-color:#99FF66;
border:1px solid #006633;
}
#header
{
width:900px;
height:100px;
border-bottom:10px solid #CC9900;
}
#menu
{
width:900px;
height:50px;
border-bottom:1px solid #CC9900;
}
#content
{
width:900px;
height:300px;
}
#leftcontent
{
width:200px;
height:300px;
background-color:#99CC66;
float:left;
}
#rightcontent
{
width:690px;
height:300px;
background-color:#99CC66;
float:right;
}
#footer
{
width:900px;
height:80px;
background-color:#FF9900;
}
#menu ul
{
list-style-type:none;
padding-left:0px;
}
#menu li
{
display:inline;
padding-right:20px;
color:#FF0000;
}
.left
{
width:190px;
height:150px;
border:1px solid #009933;
}
#rightcontent h3
{
color:#006666;
padding:20px;
}
#rightcontent p
{
padding:20px;
text-align:justify;
}
</style>
</head>
<body>
<div id="main_container">
<div id="header"><h1>My BLog</div>
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Carrer</li>
<li>Training </li>
<li>Contact Us</li>
</ul>
</div>
<div id="content">
<div id="leftcontent">
<div class="left"><h4>Catagries</h4></div>
<div class="left"><h4>Archives</h4></div>
</div>
<div id="rightcontent">
<h3>Welcome to our website</h3>
<p>CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently </p>
</div>
</div>
<div id="footer"><p align="center">Website design by XXXXXXX</div>
</div>
</body>
The output is:
Welcome back!!!!!
This section we will see how to make layout using CSS
Step 1: First you assing how many parts in your body section
ie
- page
- header
- menu
- content
- footer
Step 2: Menu has two type (i.e) Horizantal menu vertical menu and content has two parts letf content and rightcontent
- horizantal
- vertical
- leftcontent
- rightcontent
Step3: Write CSS in page section and call the id in body section
Write CSS in following way !
<style type="text/css">
#main_container
{
width:900px;
height:500px;
margin:0 auto;
background-color:#00CC99;
border:1px solid #006633;
}
</style>
<body>
<div id="main_container">
</div>
</body>
Note: This code using for your page has been centered layout!
Step4: Write CSS in header section and call the id in main_container section
Write CSS in following way !
<style type="text/css">
#header
{
width:900px;
height:150px;
border-bottom:10px solid #CC9900;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
</div>
</body>
Step5: Write CSS in menu section and call the id in main_container after the header section
Write CSS in following way !
<style type="text/css">
#menu
{
width:900px;
height:50px;
border-bottom:1px solid #CC9900;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
<div id="menu"></div>
</div>
</body>
Step6: Write CSS in content section and the section divide into two parts 1.leftcontent 2.rightcontent. The left content id floated left and right content is floated right. After and call the id in main_container after the menu section in following way
<style type="text/css">
#content
{
width:900px;
height:300px;
}
#leftcontent
{
width:200px;
height:300px;
background-color:#99CC66;
float:left;
}
#rightcontent
{
width:690px;
height:300px;
background-color:#99CC66;
float:right;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="leftcontent"></div>
<div id="rightcontent"></div>
</div>
</div>
</body>
Step7: Write CSS in fotter section and call the id in main_container after the content section
<style type="text/css">
#footer
{
width:900px;
height:100px;
background-color:#FF9900;
}
</style>
<body>
<div id="main_container">
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="leftcontent"></div>
<div id="rightcontent"></div>
</div>
<div id="footer"></div>
</div>
</body>
Step8: Thats done for your CSS Layout! Next add content(HTML elements) and add effect(styles).
<head>
<style type="text/css">
#main_container
{
width:900px;
height:600px;
margin:0 auto;
background-color:#99FF66;
border:1px solid #006633;
}
#header
{
width:900px;
height:100px;
border-bottom:10px solid #CC9900;
}
#menu
{
width:900px;
height:50px;
border-bottom:1px solid #CC9900;
}
#content
{
width:900px;
height:300px;
}
#leftcontent
{
width:200px;
height:300px;
background-color:#99CC66;
float:left;
}
#rightcontent
{
width:690px;
height:300px;
background-color:#99CC66;
float:right;
}
#footer
{
width:900px;
height:80px;
background-color:#FF9900;
}
#menu ul
{
list-style-type:none;
padding-left:0px;
}
#menu li
{
display:inline;
padding-right:20px;
color:#FF0000;
}
.left
{
width:190px;
height:150px;
border:1px solid #009933;
}
#rightcontent h3
{
color:#006666;
padding:20px;
}
#rightcontent p
{
padding:20px;
text-align:justify;
}
</style>
</head>
<body>
<div id="main_container">
<div id="header"><h1>My BLog</div>
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Carrer</li>
<li>Training </li>
<li>Contact Us</li>
</ul>
</div>
<div id="content">
<div id="leftcontent">
<div class="left"><h4>Catagries</h4></div>
<div class="left"><h4>Archives</h4></div>
</div>
<div id="rightcontent">
<h3>Welcome to our website</h3>
<p>CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently </p>
</div>
</div>
<div id="footer"><p align="center">Website design by XXXXXXX</div>
</div>
</body>
The output is:
No comments:
Post a Comment