Thursday 13 September 2018
HTML CSS WEBSITE LAYOUT
-----------------------------------------------------------------------------------------------------------------
HTML CSS WEBSITE LAYOUT CODE
----------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.youtube.com/watch?v=qTP3efPeBOI -->
<head>
<title>New CSS & HTML Complete Website Layout Tutorials Urdu -Hindi Part 1</title>
<style>
*{ margin:0; padding:0; } body{ background-color:pink; } #main_wrap{ width:900px; height:auto; margin:0 auto; } #header{ width:900px; height:100px; background:url("https://goo.gl/jP6Uk8")no-repeat;
} #nav{ width:900px; height:50px; background-color:gray; } #content{ width:900px; height:auto; } #right_side{ width:200px; height:500px; background-color:blue; float:right; } #main_content{ width:700px; height:500px; background-color:brown; float:right; } #footer{ width:900px; height:100px; background-color:yellow; Clear:both; }
</style>
</head>
<body>
<div id="main_wrap">
<div id="header">Header</div>
<div id="nav">Nav</div>
<div id="content">
<div id="right_side">Right Side Bar</div>
<div id="main_content">Main Content</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------CODE:
-------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.youtube.com/watch?v=qTP3efPeBOI -->
<head>
<title>New CSS & HTML Complete Website Layout Tutorials Urdu -Hindi Part 1</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:pink;
}
#main_wrap{
width:900px;
height:auto;
margin:0 auto;
}
#header{
width:900px;
height:100px;
background:green;
}
#nav{
width:900px;
height:50px;
background-color:gray;
}
#content{
width:900px;
height:auto;
}
#right_side{
width:200px;
height:500px;
background-color:blue;
float:right;
}
#main_content{
width:700px;
height:500px;
background-color:brown;
float:right;
}
#footer{
width:900px;
height:100px;
background-color:yellow;
Clear:both;
}
</style>
</head>
<body>
<div id="main_wrap">
<div id="header">Header</div>
<div id="nav">Nav</div>
<div id="content">
<div id="right_side">Right Side Bar</div>
<div id="main_content">Main Content</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------UPPER CSS LAYOUT WITHOUT MAIN CONTENT DIV
------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.youtube.com/watch?v=qTP3efPeBOI -->
<head>
<title>UPPER CSS LAYOUT WITHOUT MAIN CONTENT </title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:Pink;
}
#main_wrap{
width:900px;
height:auto;
/*MARGIN AUTO FOR CENTER MAIN WRAPPER */
margin:0 auto;
}
#header{
width:900px;
height:100px;
background:url("https://goo.gl/jP6Uk8")no-repeat;
}
#nav{
width:900px;
height:50px;
background-color:Gray;
}
#content{
width:900px;
height:auto;
background-color: Brown;
float: right;
}
#right_side{
width:200px;
height:500px;
background-color:Blue;
float:right;
}
#footer{
width:900px;
height:100px;
background-color:Yellow;
/*CLEAR BOTH FOR FOOTER COLOR*/
Clear:both;
}
</style>
</head>
<body>
<div id="main_wrap">
<div id="header">Header</div>
<div id="nav">Nav</div>
<div id="content">
<div id="right_side">Right Side Bar</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------CSS IMAGE POSITION LIKE FACEBOOK PROFILE
TOP LEFT TOP RIGHT
CENTERED
BOTTOM LEFT BOTTOM RIGHT
READ MORE
https://www.w3schools.com/css/css_positioning.asp
NOTE:
PADDING, MARGIN, FONT SIZE, HEIGHT, WIDTH, CAN CHANGE
ELEMENT POSITION
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
<html>
<!--https://www.w3schools.com/css/css_positioning.asp -->
<head>
<style>
/*PADDING MARGIN ZERO REMOVE SPACE FROM TOP PAGE*/
/*PADDING MARGIN ZERO REMOVE SPACE FROM TOP PAGE*/
*{
padding:0px;
margin:0px;
}
#HEADER{
position:relative;
background:url("https://goo.gl/CbN4Hk")no-repeat;
width:851px;
height:315px;
margin:0 auto;
}
.bottomleft {
position: absolute;
width: 160px;
height: 160px;
background:url("https://goo.gl/Jnb1Hy")bottom left no-repeat;
bottom: 8px;
left: 16px;
font-size: 18px;
}
._2xc6 {
bottom: 12px;
left: 201px;
position: absolute;
}
a{
text-decoration:none;
font-weight:bold;
color:White;
}
</style>
</head>
<body>
<div id="HEADER">
<a href= "https://www.w3schools.com/css/css_positioning.asp">
<div class="bottomleft">Bottom Left</div>
</a>
<div class="_2nlj _2xc6">
<h1 class="_2nlv"><span class="_2t_q" id="fb-timeline-cover-name" data-testid="profile_name_in_profile_page">
<a class="_2nlw _2nlv" href="https://www.facebook.com/FaceBook">Face Book</a></span><span class="_2nly"></span>
</h1>
</div>
</div>
</body>
</html>
POSITION FLOAT LEFT BOXES SIDE BY SIDE
-----------------------------------------------------------------------------------------------------------------------
<html> <head> <style> #Red{ width:100px; height:100px; float:left; background-color:Red; margin-right:5px; } #Yellow{ width:100px; height:100px; float:left; background-color:Yellow; margin-right:5px; } #Green{ width:100px; height:100px; float:left; background-color:Green; margin-right:5px; } #Blue{ width:100px; height:100px; float:left; background-color:Blue; margin-right:5px; } </style> </head> <body> <div id="Red">This div element has float: left;</div> <div id="Yellow">This div element has float: left;</div> <div id="Green">This div element has float: left;</div> <div id="Blue">This div element has float: left;</div> </body> </html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment