Three columns Text Box
Textbox.html
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="textbox.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div class="container">
<div
class="header"></div>
<div
class="leftcol"></div>
<div
class="main"></div>
<div
class="rightcol"></div>
</div>
</body>
</html>
Textbox.css
.container {
float:
left;
height:
1200px;
width:
975px;
}
.header {
background-color:
#0000FF;
float:
left;
height:
200px;
width:
975px;
}
.container .leftcol
{
background-color:
#33CCFF;
float:
left;
height:
600px;
width:
175px;
}
.container .main
{
background-color:
#0099FF;
float:
left;
height:
600px;
width:
500px;
}
.container .rightcol
{
background-color:
#99CCFF;
float:
left;
height:
600px;
width:
300px;
}
Three columns Text Box (Try Myself….)
Index.css
(container commands)
.container {
float:
left;
width:
975px;
}
.container .header
{
background:
#00BFFF;
height:
20px;
width:
975px;
float:
left;
color:
#FF0000;
font: 14px
Arial, Helvetica, sans-serif;
}
.container .leftcol
{
background:
#A0A0A4;
float:
left;
height:
900px;
width:
175px;
font: 12px
Arial, Helvetica, sans-serif;
margin-right:
auto;
margin-left:
auto;
}
.container .main
{
background:
#FFFBF0;
float:
left;
height:
900px;
width:
600px;
font: 16px
"Times New Roman", Times, serif, Algerian;
}
.container .rightbox
{
background:
#A0A0A4;
float:
left;
height:
900px;
width:
200px;
font: 12px
Arial, Helvetica, sans-serif;
}
#head {
height:
300px;
width:
975px;
}
.container #footer
{
background:
#3D0001;
width:
975px;
font: 14px
"Arial Black";
color:
#00FFFF;
}
.container #footer
#backto {
color:
#FFFBF0;
float:
right;
height:
33px;
width:
100px;
}
Horizontal
Menu Bar
hmenu.html
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link href="hmenu.css"
rel="stylesheet" type="text/css" />
<title>Menu bar Horizontal</title>
</head>
<body>
<div
id="container">
<div
id="navmenu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Blog</a></li>
<li><a
href="#">Store</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
hmenu.css
body {
padding:
0px;
margin:
0px;
}
#container {
border: 1px
solid red;
text-align:
center;
margin:
15px;
}
#navmenu {
width:
570px;
height:
50px;
padding:
0px;
margin: 0px
auto;
border: 1px
solid blue;
}
#navmenu ul {
list-style-type:
none;
margin:
0px;
padding:
0px;
text-align:
center;
}
#navmenu ul li {
width:
130px;
float:
left;
margin:
4px;
border: 1px
solid green;
}
#navmenu ul li a
{
font-family:
Arial, Helvetica, sans-serif;
text-decoration:
none;
display:block;
width:
130px;
height:
40px;
line-height:
40px;
font-size:
14pt;
background-image:
url(images/menubgimg.jpg);
}
#navmenu a:hover
{
background-position:
0px -40px;
font-weight:
bold;
color: red;
}
Vertical
Menu bar
vmenu.html
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link href="vmenu.css"
rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="button">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Hidden Cameras</a></li>
<li><a
href="#">CCTV Cameras</a></li>
<li><a
href="#">Employee Theft</a></li>
<li><a href="#">Helpful
Hints</a></li>
<li><a
href="#">F.A.Q</a></li>
<li><a href="#">About
Us</a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
vmenu.css
#button {
width:
12em;
border-right:
1px solid #000;
padding: 0
0 1em 0;
margin-bottom:
1em;
font-family:
'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
background-color:
#90bade;
color:
#333;
}
#button ul {
list-style:
none;
margin: 0;
padding: 0;
border:
none;
}
#button li {
border-bottom:
1px solid #90bade;
margin: 0;
list-style:
none;
list-style-image:
none;
}
#button li a {
display:
block;
padding:
5px 5px 5px 0.5em;
border-left:
10px solid #1958b7;
border-right:
10px solid #508fc4;
background-color:
#2175bc;
color:
#fff;
text-decoration:
none;
width:
100%;
}
html>body #button
li a {
width:
auto;
}
#button li a:hover
{
border-left:
10px solid #1c64d1;
border-right:
10px solid #5ba3e0;
background-color:
#2586d7;
color:
#fff;
}
CONTACT FORM
Contact.html
(Use CSS Code)
<title>Contact Form</title>
<link
href="conform.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div
id="formwrap">
<form>
<fieldset>
<h4>Contact
Me:</h4>
<label
class="lableone" for="name">Name: </label>
<input
name="name"/>
<label
for="email">Email: </label>
<input
name="email" />
<label
for="comments">Comments: </label>
<textarea
name="comments"></textarea>
</fieldset>
<fieldset>
<input
class="btn" type="submit" value="Send Email"/>
<input
class="btn" type="reset" value="Reset Form"/>
</fieldset>
</form>
</div>
</body>
</html>
Contact.css
Use CSS Code
html {
background:
#808080;
}
#formwrap {
width:
600px;
border: 5px
solid #ccc;
background:
#A0A0A4;
margin:
50px auto;
padding:
20px 0;
}
form {
width:
500px;
margin: 0
auto;
}
label {
display:
block;
margin: 5px
0 5px 20px;
font:Arial,
Helvetica, sans-serif 18px;
color:#000000;
}
input {
width:
250px;
margin: 0 0
0 20px;
}
textarea {
width:250px;
margin: 0 0
0 20px;
}
fieldset {
border:
none;
background-color:#D4DFAA;
padding: 0
0 20px 0;
}
.labelone {
margin-top:
10px;
}
.btn {
width:
125px;
}
form h4 {
margin:20px
0 0 30px;
color:#0000FF;
font-weight:
bold;
font-family:
Arial, Helvetica, "sans-serif 24px";
}
CSS: Text over Image – Add Text Caption to Images
The HTML
<div class="image"> <img alt="" src="http://www.kavoir.com/img/text-over-image.jpg" /> <div class="text"> <p>This lovely image gladly demonstrates how I (this text) can be flying over her face.</p> <p>It's very kind of her but don't you agree that this place needs a camp fire and a little love?</p> </div></div>The CSS
.image { position:relative; float:left; /* optional */}.image .text { position:absolute; top:10px; /* in conjunction with left property, decides the text position */ left:10px; width:300px; /* optional, though better have one */}
My Self
HTML
<div class="image">
<img
alt="" src="w3review_header.jpg" />
<div
class="text">
<p>This
lovely image gladly</p>
<p>It's very
kind of her but don't yo</p>
</div>
</div>
CSS
body {
margin-top:
0px;
padding:
0px;
}
.image {
position:relative;
/* optional */
margin-right:
auto;
margin-left:
auto;
background-color:
#7F3F55;
height:
auto;
width:
1125px;
}
.image .text {
position:absolute;
width:300px;
font-family:
Arial, Helvetica, sans-serif;
font-size:
18px;
color:
#FFFBF0;
left: 10px;
top: 10px;
margin-left:
700px;
}
Image + Text Float
CSS Code:
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
HTML Code:
<img src="images/buddha.jpg"
width="120" height="90" alt="peacemine"
class="floatLeft"/>
<p>The images are contained within the paragraph tag.
The image has floated to the left, and also to the right because we have used
both types of image floating in this example. Notice how the text wraps around
the images quite nicely. The images are contained within the paragraph tag. The
image has floated to the left, and also to the right because we have used both
types of image floating in this example. Notice how the text wraps around the
images quite nicely. </p>
<img src="images/ragavendra.jpg"
width="120" height="90" alt=" peacemine "
class="floatRight">
<p>The images are contained within the paragraph tag.
The image has floated to the left, and also to the right because we have used
both types of image floating in this example. Notice how the text wraps around the
images quite nicely. The images are contained within the paragraph tag. The
image has floated to the left, and also to the right because we have used both
types of image floating in this example. Notice how the text wraps around the
images quite nicely. </p>
No comments:
Post a Comment