I'm trying to remove the white strip above the "form-strip" div and also center it to the middle of the page (exactly below the image) with no success. Any suggestions?
(I also used a CSS reset style).
Thanks!
HTML:
<!DOCTYPE html>
<html lang="he">
<meta charset="UTF-8">
<head>
<title>Title</title>
<link href="Styles/Reset.css" rel="stylesheet" />
<link href="Styles/Base.css" rel="stylesheet" />
</head>
<body dir="rtl">
<header>
<div class="title">
<h1>text come here</h1>
<h2>text come here</h2>
</div>
</header>
<div class="img-strip" align="center">
<img src="img/picture.jpg" class="image" />
</div>
<div class="form-strip" align="center">
<h1>text come here</h1>
<form method="post" accept-charset="utf-8" action="">
<input type="text" class="form-control" id="name" placeholder="text come here">
<input type="text" class="form-control" id="name" placeholder="text come here">
<input type="text" class="form-control" id="email" placeholder="text come here">
<input type="text" class="form-phone" id="phone" placeholder="text come here">
<ul>
<li>052</li>
<li>054</li>
<li>057</li>
</ul>
<input type="submit" value="text come here">
</form>
</div>
<div class="footer">
<img src="img/logo.png" class="logo" />
<div class="address">
<h1>text come here</h1>
<h2>text come here</h2>
</div>
</div>
</body>
</html>
CSS - base.css:
body{
direction: rtl;
background-color: #FFFFFF;
}
.title h1 {
font-family:"FbSpoiler";
font-size:18px;
color:#1BABCD;
text-align:center;
font-weight:lighter;
margin-top: 25px;
}
.title h2 {
font-family:"FbSpoiler";
font-size:22px;
color:#1BABCD;
text-align:center;
font-weight:bold;
margin-top: 3px;
margin-bottom: 7px;
}
img.image {
max-width: 100%;
clear: both;
}
.form-strip {
padding-top: 10px;
background-color:#016a88;
height: 70px;
clear: both;
overflow: hidden;
max-width: 920px;
}
.form-strip h1 {
font-family:"FbSpoiler";
font-size:15px;
color:#ffffff;
font-weight:lighter;
margin-bottom: 7px;
}
.form-control {
width: 200px;
height: 25px;
margin-left: 4px;
}
.form-phone {
width: 150px;
height: 25px;
}
.footer {
padding-top: 10px;
padding-right: 700px;
background-color:#ffffff;
height: 100px;
clear: both;
overflow: hidden;
max-width: 920px;
}
.address h1 {
font-family:"FbSpoiler";
font-size:10px;
color:#737676;
text-align:right;
font-weight:lighter;
margin-top: 5px;
margin-bottom: 3px;
}
.address h2 {
font-size:15px;
color:#737676;
text-align:right;
font-weight:lighter;
margin-top: 3px;
margin-bottom: 7px;
}
Try making the image in the div above the form-strip div a block element to get rid of the gap.
div.img-strip img {
display: block;
}
I'm not sure what you're trying to center - the div.form-strip? If so add left/right margins of 'auto' to it:
div.form-strip {
margin: 0 auto;
}
div.form-strip {
margin-left: 0px;
margin-right: 0px;
}
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
Newbie here. I am trying to come up with a simple one-page site but my contact form first name label is not attaching with the correct section.
I am attaching the image where the underlined "First Name" is not with the input, even though I have added it under another section and container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sitemize Hoşgeldiniz</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-items">Home</li>
<li class="nav-items">Contact</li>
<li class="nav-items">About</li>
</ul>
</nav>
<section id="information">
<div class="container">
<div class="information-showcase">
<h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
</div>
</div>
</section>
<section id="short-info">
<div class="container">
<div class="container-image-1">
<div class="row">
<div class="column">
<h2>Anında Sipariş</h2>
<i class="fas fa-shopping-cart fa-5x"></i>
</div>
<div class="column">
<h2>Hızlı Teslimat</h2>
<i class="fas fa-truck fa-5x"></i>
</div>
<div class="column">
<h2>Mmnuniyet Garantisi</h2>
<i class="fas fa-smile-beam fa-5x"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us">
<div class="container">
<form action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="Enter your first name">
<label for="fname">Last Name</label>
<input type="text" id="lname" placeholder="Enter your last name">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</html>
/* Body */
body {
background-color: burlywood;
}
/* Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A800C
}
.nav-items {
display: inline;
float: left;
}
.nav-items a {
text-decoration: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-items a:hover {
background-color: #111;
}
/* Image section */
.column {
float: left;
width: 25%;
padding: 10px;
margin-top: 25px;
margin-left: 100px;
background-color: aqua;
}
#information {
background:url("resim2.jpg");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
#header {
text-align: center;
padding-top: 150px;
color: aqua;
font-size: 60px;
}
.lead {
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: center;
width: 20%;
padding: 10px;
height: 200px;
text-align: center;
background-color: burlywood;
}
.row {
margin-left:150px;
}
Thank you
Onur
the problem is you are using the
float
in your css that is makeing the problem
if you need your elements to be horizantly
add this to .row
.row {
margin-left: 150px;
display:flex;
}
remove this property from your css
.column
and wrap the items with a div that has this property
display:flex;
you can learn more about it here
https://www.youtube.com/watch?v=fYq5PXgSsbE
good luck!
look how i did it
https://stackblitz.com/edit/js-qjmbgj?file=index.html
https://js-qjmbgj.stackblitz.io
if you cant use display flex
use position :absolute ;
for more understanding
go here
https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position
<style type="text/css">
* {margin: 0px; padding: 0px;}
#Header {width:100%;height: 100px;background-color: black;}
#Header #Tools { width: 600px;height: 100px;line-height: 100px;float: left;background-color: brown;overflow:hidden}
#Header #Tools a {position:relative; text-align:center;padding-left:50px; padding-right:50px;border-style:solid;border-width: 5px;border-color: chartreuse;text-decoration: none;font-size: 20px;color: aliceblue;}
#Header #Tools li { float: left;list-style: none;}
#Header #Login {width: 150px;height: 100px; background-color: brown;float: right;line-height: 100px}
#Header #Search {width: 700px; height: 100px;float: left;line-height: 100px; padding-left: 200px;position:relative}
#Header #Search #Text {border:0px;height: 38px;width: 300px;padding-left: 10px; font-size: 15px;position:absolute;top:31px}
#Header #Search #Submit {border-style: none;background: url("../pictures/search.jpg");width: 35px;height: 38px;position:absolute;top:31px;left:500px}
#Header #Login a {border-color: chartreuse;text-decoration: none;font-size: 20px;color: aliceblue;padding-left: 10px}
#Header #Tools .tools1_content {display:none;border-width:2px;border-style: solid;border-color:red; width: 400px;height: 250px;background-color: burlywood;position:absolute;top:80px;left:50px}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="Header">
<div id="Tools">
<ul>
<li id="Li" onmouseover="showdiv()" onmouseout="hidediv()">
Tools1
<div class="tools1_content" id="Li_div">
<div>SubTools1</div>
</div>
</li>
<li>
Tools12
<div class="tools1_content">
<div>SubTools2</div>
</div>
</li>
<li>
Tools13
<div class="tools1_content">
<div>SubTools3</div>
</div>
<li/>
</ul>
</div>
<div id="Search">
<form>
<input id="Text" type="text" placeholder="please enter keywords to search" />
<input id="Submit" type="submit" value="" />
</form>
</div>
<div id="Login">
Loagin
Info
</div>
<div id="Content_Left">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
</div>
</body>
</html>
The Normal behavior
The issues
I just want them in one horizontal line,but when I drag the browser edge resulting in browser screen smaller.
The html element will drop to unexpected position.I want them only change in header div.
You should not use float for layout unless you need support for Internet Explorer. Since flex does not work in IE<10 at all and is buggy in IE>=10.
Flexbox is widely (display: flex) used nowdays and you should rely on this.
You will need to remove or adjust the widths of the element to % values to keep everything responsive.
I set flex as display to the parent element already to keep the element horizontally aligned. (see below)
Also you should try to avoid absolute display as much as possible and also try to use % or "em" values where possible. They are more responsive and more dynamic than static px values.
Resource: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Responsive Design (adjust design on different sizes): https://developer.mozilla.org/de/docs/Web_Development/Mobile/Responsive_design
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#Header {
width:100%;
height: 100px;
background-color: black;
display: flex;
}
#Header #Tools {
margin: 0;
padding: 0;
width: 50%;
height: 100px;
line-height: 100px;
background-color: brown;
overflow:hidden
}
#Header #Tools li {
display: inline;
list-style: none;
margin-left: 20px
}
#Header #Tools a {
position:relative;
text-align:center;
padding-left:50px;
padding-right:50px;
border-style:solid;
border-width: 5px;
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
#Header #Login {
height: 100px;
background-color: brown;
line-height: 100px
}
#Header #Search {
width: 40%;
height: 100px;
line-height: 100px;
margin-left: 5%;
position:relative
}
#Header #Search #Text {
border:0px;
height: 38px;
padding-left: 10px;
font-size: 15px;
position:relative;
}
#Header #Search #Submit {
border-style: none;
background: url("../pictures/search.jpg");
width: 35px;
height: 38px;
position:relative;
}
#Header #Login {
width: 10%;
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
padding-left: 10px
}
#Header #Login a {
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
padding-left: 10px
}
#Header #Tools .tools1_content {
display:none;
border-width:2px;
border-style: solid;
border-color:red;
height: 250px;
background-color: burlywood;
position:absolute;
top:80px;
left:50px
}
#Content_Left{
display: none;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="Header">
<ul id="Tools">
<li id="Li" onmouseover="showdiv()" onmouseout="hidediv()">
Tools1
<div class="tools1_content" id="Li_div">
<div>SubTools1</div>
</div>
</li>
<li>
Tools12
<div class="tools1_content">
<div>SubTools2</div>
</div>
</li>
<li>
Tools13
<div class="tools1_content">
<div>SubTools3</div>
</div>
<li/>
</ul>
<div id="Search">
<form>
<input id="Text" type="text" placeholder="please enter keywords to search" />
<input id="Submit" type="submit" value="" />
</form>
</div>
<div id="Login">
Loagin
Info
</div>
<div id="Content_Left">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
</div>
</body>
</html>
please help, i want this form dead center both vertical and horizontal so it looks like this http://www.creattor.com/files/14743/5515/futuristic-login-form-screenshots-1.jpg and so it is dynamical center hope you can help me.
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
body{
background-color:#33383E;
}
.login input{
width:150px;;
background-color:#1D1E22;
border: 0px solid;
padding:5px;
color:#33383E;
}
.login{
width:320px;
padding:20px;
background-color:#1D1E22;
border-radius:10px;
margin-top:33.3%
}
#user{
margin-bottom:-10px;
}
#pass{
margin-top:-10px;
margin-bottom:0px;
}
#login{
display: inline;
margin: 0;
}
hr{
border:2px solid;
background-color: #33383E;
}
#circle {
width: 100px;
height: 100px;
background: #33383E;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:right;
}
#mini-circle{
width: 70px;
height: 70px;
background: #1D1E22;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
margin-right:auto;
margin-left:auto;
margin-top:15px;
}
.ring{
margin-top:-125px;
margin-left: 200px;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-3">
<div class="form-group">
<div class="login">
<form id="login" method="post">
<input type="text" id="user" name="user" placeholder="Username" /><br />
<hr />
<input type="password" id="pass" name="pass" placeholder="Password" />
</form>
</div>
<div class="ring"><div id="circle"><div id="mini-circle"></div></div></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
Codepen: http://codepen.io/anon/pen/rVjpJb
CSS for .form
display: inline-block
CSS for containing element (eg. div, body)
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
Also, Make sure that the document has 100% height
PS- Sorry I didn't use all the markup
You can achieve it with CSS tables too.
Here's the fiddle: http://jsfiddle.net/jf4nvk1n/ for the futuristic-login-form
And here's the fiddle for the fast explanation http://jsfiddle.net/1dcevxhm/
HTML:
<div class="table">
<div class="table-cell">
<p>Test</p>
</div>
</div>
CSS:
html, body, .table, .table-cell{
height: 100%;
width: 100%;
}
.table{
display: table;
}
.table-cell{
display: table-cell;
vertical-align: middle
}
p{
margin-right: auto;
margin-left: auto;
width: 20%;
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;
}