I have a page:
.
I wanted to make it centralized, but I could not do it. Problems:
- I want to give a full page of a black div.
- I want to centralize the other two divs without using the left property in css.
- While the hover of the z value should increase by any value so that the entire div can rise.
I learned about margin: 0 auto o auto; that it centralizes the element with respect to the page. I want to get the same for yellow and green divs using the margin wrt property of black divisions. Can I get these results using CSS or will I have to use Javascript, etc.? My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> <a href="http://www.google.com">The first link </a></center>
</div>
<div class="second">
<center> <a href="http://www.fb.com"> The second link </a></center>
</div>
<div class="third">
<center> <a href="http://www.yahoo.com"> The third link </a></center>
</div>
</body>
<html>
My css document: -
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English. And I hope that you will have my problems.