Im having trouble figuring out how to fix the issue of my images moving up the screen when i resize the browser vertically. Also not only do my images move up the screen but my banner's text and background also move around which causes the banners text to move off the banner.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
<div>
<form id="loginForm">
<input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br>
<input type="password" class="login-password" required="true" placeholder="Password" /><br>
<input type="submit" name="Login" value="Login" class="login-submit" /><br>
forgot password?
</form>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics">
</a>
</div>
</html>
.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
#imagesMain{
position: absolute;
max-width: 75rem;
left: 0;
right: 0;
margin: auto;
bottom: 0;
padding: 0;
margin: 20px auto;
text-align: center;
}
#imagesMain a{
width:30%;
float:left;
position:relative;
margin:1.5%;
}
img{
max-width: 100%;
height: auto;
margin-right: 25px;
position: relative;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
form {
display:table;
margin:auto;
}
https://jsfiddle.net/zntzep48/7/
The banner's text isn't moving relative to the screen but the gray background is moving because you set it to 25% of the screen height. When you adjust the height of the window, the banner adjusts accordingly. Just remove the height property altogether. Remove the line-height and set padding-top. Set the banner to position relative cause its covering up the form.
Add
#form {
display: table;
margin: 0 auto;
}
and change form's div to that id. Remove the table-cell table-display you put in the body and html.
Change #imagesMain to position: relative.
Working solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<style>
.banner{
position: relative;
width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 25px;
padding-top: 50px;
}
#imagesMain{
position: relative;
max-width: 75rem;
left: 0;
right: 0;
margin: auto;
bottom: 0;
padding: 0;
margin: 20px auto;
text-align: center;
}
#imagesMain a{
width:24%;
float:left;
margin:1.5%;
}
img{
max-width: 100%;
height: auto;
margin-right: 25px;
position: fixed;
bottom:0;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
vertical-align:middle;
}
#form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 50%;
}
</style>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
<div id="form">
<form id="loginForm">
<input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br>
<input type="password" class="login-password" required="true" placeholder="Password" /><br>
<input type="submit" name="Login" value="Login" class="login-submit" /><br>
forgot password?
</form>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Maths"">
</a>
<a href="ComputerScience.html">
<img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="ComputerScience">
</a>
<a href="Physics.html">
<img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Physics"">
</a>
</div>
</body>
</html>
EDIT: Edited code to make form in middle of page and put images at bottom of page (they will move on resize).
Related
I am caught in problem due to relative position
My Other content get pushed under the showcase.
I am giving you full code please tell me what I am doing wrong.
I have given the link to google drive which cotain screenshot.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
Screenshot
https://drive.google.com/file/d/1hn4-dyx0h8BrY42zAjL4801yCZ_0YYnB/view?usp=drivesdk
To prevent overlapping of showcase on container, add position: relative; to .container.
And if you want conatiner not to overlap with .relative, then just just add height: 100vh; in .relative.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
position: relative;
background: red;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</div>
was such a result needed?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
display: flex; /* added */
height: 100vh; /* added */
flex-direction: column; /* added */
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav > a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0,0,0,0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover,rgba(0,0,0,0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
You need to add position:absolute to your .container. The position property in CSS works like this:
the property-value couple position:relative tells your layout which element shall be used as a reference for its child elements which contain the property-value pair position:absolute, for their positioning.
Then, you can use the properties top, right, bottom, and left to specify the distancing of the child HTML element having the position: absolute pair from the edges of its first parent element (walking upwards in the HTML doc from the child) which has the position:relative pair.
In your CSS code, you simply set your parent element to position:relative, which does not change anything in your layout; it just tells your page that any child of the element X having position:relative, which has position:absolute must use that X for the relative positioning using the four properties top, right, bottom, and left. And yeah, obviously, as soon as you set a HTML child of a parent having position:relative to position:absolute, it will be placed above it.
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
I am trying to have the three images centered and at the bottom of the page. I'm stuck with the images to the left instead of the center. I've tried many different ways to get it to work, but none have worked. If anyone could please help me it would be greatly appreciated
.banner {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body {
padding: 0;
margin: 0;
}
#imagesMain {
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
}
img {
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just add width:100% on #imagesMain. Your images are centered but the #imagesMain itself isn't wide enough to show it. width:100% makes it as wide as the viewport.
.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body{
padding: 0;
margin: 0;
}
#imagesMain{
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
width:100%
}
img{
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>
Just modify your css of "#imagesMain":
#imagesMain {
bottom: 0;
left: 0;
margin: 20px 10px;
padding: 0;
position: fixed;
right: 0;
text-align: center;
}
I have a menu that when in hoover, increases height, however when I try to add a Div or something in html, it goes down along the mover effect
Here´s my CSS Code
* {
font-family: sans-serif;
margin-top: -1px;
margin-right: -1px;
margin-left: -1px;
margin-bottom: -1px;
padding: 0;
width: 100%;
color: #F7F2F3;
}
header {
margin: auto;
width: 100%;
height: 23%;
}
banner#seis {
font-family:"good times rg"
}
body{
background-image: url(../Imagenes/darker_wood.jpg);
margin-top: 0px;
}
div.contenedor{
width:20%;
height:230px;
float:left;
transition:height .4s;
}
div#uno{
background-color: rgb(209,16,71);
}
div#dos{
background-color: rgb(11,2,33);
}
div#tres{
background-color: rgb(10,12,97);
}
div#cuatro{
background-color: rgb(21,110,252);
}
div#cinco{
background-color: rgb(5,3,208);
}
img.icon{
display:block;
margin:50px auto;
width:40px;
padding:20px;
border-radius: 50%;
background-color: rgba(255,255,255,.15);
box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
transition:box-shadow .4s;
}
p.texto{
font-size: 1.2em;
color: #FFFFFF;
text-align: center;
padding-top: 10px;
opacity: .6;
transition: padding-top .4s;
font-family: "good times rg";
}
div.contenedor:hover {
height:250px;
}
div.contenedor:hover p.texto{
padding-top: 30px;
opacity:1;
}
div.contenedor:hover img.icon{
box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
background-image: url(../Imagenes/darker_wood.jpg);
}
div.banner{
width: 100%;
float: left;
margin-top: 2px;
}
.menu_bar {
display:none;
}
label {
display: block;
margin-top: 20px;
letter-spacing: 1px;
padding-top: 0px;
}
.formulario {
margin:0 auto;
width:51%;
color: #666666;
font-family:Arial;
}
form {
margin: 0 auto;
width: 400px;
padding-top: 21px;
}
input, textarea {
width:100%;
height:2.7%;
background:#666666;
border:2px solid #f6f6f6;
padding:px;
margin-top:5px;
font-size:1.2em;
color:#ffffff;
}
textarea {
height:150px;
}
#submit {
width:8.5%;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}
Here´s my HTML:
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<title>Untitled Document</title>
<link href="CSS/Principal.css" rel="stylesheet" type="text/css">
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="menu_bar">
<span class="icon-menu2"></span>Menu
</div>
<div class="contenedor" id="uno">
<img class="icon" src="Imagenes/inicio.png" alt="Relevant textual alternative to the image">
<p class="texto">Inicio</div>
<div class="contenedor" id="dos">
<img class="icon" src="Imagenes/logojun.png" alt="Relevant textual alternative to the image">
<p class="texto">Nosotros
</div>
<div class="contenedor" id="tres">
<img class="icon" src="Imagenes/eventos.png" alt="Relevant textual alternative to the image">
<p class="texto">Eventos
</div>
<div class="contenedor" id="cuatro">
<img class="icon" src="Imagenes/unam.png" alt="Relevant textual alternative to the image">
<p class="texto">Votaciones UNAM
</div>
<div class="contenedor" id="cinco">
<img class="icon" src="Imagenes/contacto.png" alt="Relevant textual alternative to the image">
<P class="texto">Contacto
</div>
</header>
</body>
<div>
<section class="formulario">
<form action="contacto.php" method="post">
<p>
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre, Apellido y/o escuela" required="" />
<label for="email">Email:<br>
</label>
<input id="email" type="email" name="email" placeholder="ejemplo#nightjunkies" required="" />
<label for="mensaje">Mensaje:</label>
</p>
<label for="nombre">Nombre:</label>
<p> </p>
<p>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required> </textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</p>
</form>
</section>
</div>
</html>
`
However when I put some extra elements in my HTML, the move along with the hover effect downside. How do get rid of this?
The reason your other elements go down with the hover is that these elements are directly below the header element. When you hover over a div inside the header element, this causes the header element to expand as well. As the header element expands, the elements below it are pushed down in a reaction to this.
If you set the height on the header to be 250px, this will accomodate for any changes in the height of the divs inside of it.
header {
margin: auto;
width: 100%;
height: 250px;
}