Scribd
Upload
16 views

Overlapping of Image

Uploaded by

vikasballa229306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Overlapping of Image

Uploaded by

vikasballa229306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

1.

Use of overlapping of image and text


<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;

}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="tom.png" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the
text.</p>

</body>
</html>
2. Use of image tag for giving position

<html>
<head>
<title>image </title>
</head>
<style>
img {
position: absolute;
right: 20px;
top: 50px;
z-index: -1;
}
</style>
<body>
<img src ="tom.png">
</body>
</html>

3. Use of center

<html>
<head>
<title>image </title>
</head>
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
<body class = "center">
nbscgyewfhcknvbrureubmfd,trkhij
</body>
</html>

4. Use of image in the center:

<html>
<head>
<title>image</title>
</head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
</style>
<body>
<img src= "tom.png">
</body>
</html>

5. Pseudo class selector:


Example for mouse on link

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the
CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS
definition in order to be effective.</p>

</body>
</html>

6. Navigation bar:

using css in navigation bar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<p>In this example, we remove the bullets from the list, and its default
padding and margin.</p>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Horizontal navigaton bar :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Navigation bar vertically:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background
color and a white text. The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

You might also like