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;
}
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;
}
My image separator covers the whole separator container on my first 2 html. But it doesn't work on the third one. On the third html there are 8 div rows and in each row there are 3 div columns. Some selectors are not found on the given css because i use it for 4 htmls
/*----------------REMINDERS------------------*/
/*Standard rule: Styles and layout of a webpage
should look like itself until window reaches 992px*/
/* To test responsiveness:
> On browser: press f12 to see dev tools
> click on the second icon to toggle responsive layout
> set width to 992px and leave the height to blank to get the max height of current window
(You can also choose desired device to test with.
Just click the dropdown beside current window width)
*/
/*Now on 991px, the design and layout should change to mobile view*/
/*Read more about "CSS Media Queries" to control styles on specific window sizes*/
/*------------------------------------------*/
/*Reset all styles of elements*/
*{
margin: 0;
padding: 0;
}
/*Observe this container on sections*/
.main-container {
width: 80%; /*This will always get the 80% of the body*/
margin: auto; /*To center element*/
}
/*Navigation*/
nav {
font-size: 0;
background-color: #ffdead;
position: fixed; /*Navigation will stay on top even on scroll*/
width: 100%;
box-shadow: -1px -8px 9px 9px; /*Shadow under navigation, this gives illusion that this element float*/
/*The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.*/
z-index:2; /*This will force other elements to stay on lower stack (higher numbers will do)*/
}
nav ul a li {
/*tdisplay: inline-block;o position li horizontally
(if this cause problems, you may use "vertical-align: top;" so it will stay at the same vertical position )*/
display: inline-block;
/*vertical-align: top;*/
padding: 10px;
transition: all .5s; /*animate on hover*/
}
nav ul a li:hover {
color: maroon;
}
nav ul a {
font-family: Garamond;
font-size: 20px;
font-weight: bolder;
color: maroon;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
}
li.active {
border-bottom: 5px solid maroon;
color: black;
}
/*Banner*/
.banner-container {
background-image: url("../images/banner.jpg");
background-size: cover; /*This will cover the whole container even on window resize*/
background-repeat: no-repeat;
background-attachment: fixed; /*To create parallax effect*/
background-position: bottom;
height: 370px;
}
/*Welcome*/
.welcome-container {
font-size: 35px;
padding-top: 70px;
text-align: center;
}
.welcome-container h1 {
letter-spacing: 3px; /*to adjust letter spacing*/
border-bottom: 2px solid #ffdead;
color: maroon;
padding-bottom: 20px;
font-size: 30px;
/*Set texts to uppercase*/
text-transform: uppercase; /*Always rely to set text-transform on styles and not directly to HTML*/
}
.welcome-container p {
margin-top: 20px;
color: maroon;
padding: 15px;
font-size: 18px;
}
/*Articles*/
.articles {
font-size: 0;
padding-top: 200px;
}
.articles h1 {
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 2px solid #e59866;
color: maroon;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
}
.article-item-container {
width: 33.33%; /*To get 1/3 of the .main-container*/
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.article-box {
background: #ffdead;
border-radius: 5px;
width: 90%; /*Get 90% width from 33.33%*/
margin: auto;
transition: all .325s; /*Animate on hover*/
}
.article-box:hover {
background: #f0b27a;
color: maroon;
}
/* ".article-content a" (child element of ".article-box") will
change color whenever mouse hovers on ".article-box" (parent element of ".article-content a") */
.article-box:hover .article-content a {
color: maroon;
}
.article-title {
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding-top: 20px;
letter-spacing: 3px;
}
.article-content {
font-size: 13px;
text-align: center;
padding: 20px 5px;
}
.article-content a {
font-size: 12px;
margin-left: 5px;
color: gray;
text-decoration: none;
font-style: italic;
transition: all .325s;
}
div.row.column.text {
text-align: left;
background-color: maroon;
color: darkgray;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.row .column input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
div input[type=button] {
background-color: #7b241c;
border: none;
color: white;
padding: 1px 5px;
text-align: center;
text-decoration: none;
font-size: 1px;
width: 85px;
height: 30px;
position: relative;
}
h6 {
text-align: left;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
color: maroon;
}
h5 {
font-size: 14px;
font-family: Garamond;
color: black;
text-align: auto;
text-transform: uppercase;
}
h3 {
padding-top: 3px;
text-align: center;
font-size: 15px;
margin-left: 5px;
color: maroon;
text-decoration: none;
font-family: Georgia;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.row{
display: flex;
padding-top: 20px;
}
.column {
flex: 33.33%;
padding: 5px;
margin:auto;
}
/*Image Separator*/
.separator-container {
margin-top: 40px;
background-image: url("../images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Same effect on banner*/
background-position: center;
height: 400px;
}
/*Set dark overlay on separator*/
.overlay {
background-color: ;
opacity: .8; /*To adjust tranparency, this only accept values from .1 to 1*/
width: 100%; /*Get full width of container ".separator-container" */
height: 100%; /*Get full height of container ".separator-container" */
}
/*Contact*/
.contact-container {
font-size: 0px;
margin-top: 40px;
}
.contact-container h1 {
font-size: 30px;
text-transform: uppercase;
color: maroon;
letter-spacing: 3px;
}
.contact-container form {
margin-top: 20px;
}
.contact-field {
width: 33.33%; /*Get 1/3 of .main-container*/
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%; /*Get 90% from 1/3 set of its container ".contact-field" */
padding: 10px;
border: 3px solid #ffdead;
color: black;
/*Try to remove this style "outline: none;" and click on the input*/
/*You should see a color blue outline*/
outline: none; /*use this to remove blue outline*/
margin-bottom: 10px;
transition: all .325s;
}
/* ":focus" executes when user clicks on an input*/
.contact-field input:focus {
border: 3px solid #f0b27a;
color: maroon;
}
.contact-field-full {
width: 100%;
}
.contact-field-full input {
float: right; /*Set to right of container ".contact-field-full"*/
margin-right: 12px; /*Adjust to align to the Message input*/
width: 20%; /*Always get 20% of container ".contact-field-full" */
padding: 10px;
margin-bottom: 10px;
outline: none;
border: none;
transition: all .325s;
cursor: pointer; /*To get a hand cursor*/
background-color: #ffdead;
}
.contact-field-full input:hover {
background: #f0b27a;
color: maroon;
}
<!DOCTYPE html>
<html>
<head>
<title>Shawn Mendes </title>
<!-- Call external CSS file -->
<link rel="stylesheet" type="text/css" href="css/blog.css">
<link rel="stylesheet" type="text/css" href="css/style-media-queries.css">
<!-- Meta tag viewport helps browser window to render webpages for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<!-- Always put title on anchor tags and don't leave blank hrefs -->
<a href="index.html" title="Home">
<li>Home</li>
</a>
<a href="about.html" title="Music">
<li>Music</li>
</a>
<a href="blog.html" title="Tour">
<li class="active">Tour</li>
</a>
<a href="register.html" title="Video">
<li>Video</li>
</a>
</ul>
</nav>
<section class="banner-container">
</section>
<div class="main-container">
<section class="welcome-container">
<h1>ON TOUR</h1>
</section>
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 8" value="MAR 8">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 10" value="MAR 10">
</div>
<div class="column">
<div class="caption">
<h6>ANTWERPS SPORTPALEIS</h6>
<h5>ANTWERP, BELGIUM</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 11" value="MAR 11">
</div>
<div class="column">
<div class="caption">
<h6>MERCEDES-BENZ ARENA</h6>
<h5>BERLIN-FRIEDRICHSHAIN, GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 13" value="MAR 13">
</div>
<div class="column">
<div class="caption">
<h6>OSLO SPEKTRUM ARENA</h6>
<h5>OSLO, NORWAY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 15" value="MAR 15">
</div>
<div class="column">
<div class="caption">
<h6>ERICSSON GLOBE</h6>
<h5>STOCKHOLM, SWEDEN</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 16" value="MAR 16">
</div>
<div class="column">
<div class="caption">
<h6>ROYAL ARENA</h6>
<h5>COPENHAGEN, DENMARK</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 18" value="MAR 18">
</div>
<div class="column">
<div class="caption">
<h6>LANXESS ARENA</h6>
<h5>KOLN,GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<section class="separator-container">
<div class="overlay"></div>
</section>
<div class="main-container">
<section class="contact-container">
<h1>Get Updates</h1>
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
<div class="contact-field">
<input type="text" name="email-address" placeholder="Postal Code" required/>
</div>
<div class="contact-field">
<input type="text" name="message" placeholder="Country" required/>
</div>
<div class="contact-field-full">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<h3>By submitting this form, you agree to our privacy policy </h3>
<h3> Disclaimer: The owner of this website does not own any of its images and contents. Credits to the rigtful owner. </h3>
</section>
</div>
</body>
</html>
<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>
I've tried margin-bottom and min-height on my body tag with the same height as the footer. The footer container called .contact is not respecting the div .store-items above it. I'm looking for a clean fix, eventually I will learn about flex boxes but I am suspicious there is a simple error in my strategy. Thanks, here is the code:
/*=================
Start of Rules after reset
===================*/
body{
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
/*
================================
Body
================================
*/
.store-items {
margin-left: 20px;
margin-right: 20px;
width:900px;
max-height: 900px;
border: solid 1px;
position: absolute;
padding: 30px;
padding-left: 65px;
display: block;
}
.store-items .item-1-3 {
display: inline-block;
width:30%;
margin-right: 20px;
margin-bottom: 20px;
height:300px;
border: solid 1px;
background-color:#333333;
position: relative;
}
.store-items .item-1-3 img{
height: 190px;
width: 150px;
position: relative;
width:100%;
}
.store-items .item-1-3 h3{
text-align: center;
color:white;
position: relative;
top: 7px;
}
.store-items .item-1-3 p{
position: relative;
left:170px;
top:15px;
border:solid 1px black;
width:40px;
background-color: white;
z-index: 1;
}
/*
================================
Footer
================================
*/
.contact {
position: relative;
width:100%;
left:0;
bottom:0;
height:70px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>The Viking Store</title>
<link rel="stylesheet" type="text/css" href="vkhmp.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body>
<header>
<div class="navbar">
Viking Store
<div class="cart">
<img src="resources/noun_355_cc.svg" alt="shopping cart" style="width:32px; height:32px;">
Your Cart
</div>
</div>
<div class="header-image">
<img src="resources/viking_ship_background_medium.jpg" alt="viking ship background">
<h1>The Viking Store</h1>
</div>
<div>
<div class="tagline1">
<p>The Best Viking Gear on the Whole Web</p>
</div>
<div class="tagline2">
<p>Choose from among our lineup of fine axes below</p>
</div>
</div>
</header>
<div class="store-items">
<div class="item-1-3">
<h3>The Silent Night</h3>
<p>$200</p>
<img src="resources/axe_silent_night_small.jpg" alt="The Silent Night">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Dainty Daisy</h3>
<p>$100</p>
<img src="resources/axe_dainty_daisy_small.jpg" alt="The Dainty Daisy">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Double Trouble</h3>
<p>$340</p>
<img src="resources/axe_double_trouble_small.jpg" alt="Double trouble">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Whispering Wind</h3>
<p>$225</p>
<img src="resources/axe_whispering_wind_small.jpg" alt="Whispering Wind">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Cunning Cutter</h3>
<p>$200</p>
<img src="resources/axe_cunning_cutter_small.jpg" alt="The Cunning Cutter">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Kingmaker</h3>
<p>$400</p>
<img src="resources/axe_kingmaker_small.jpg" alt="The Kingmaker">
<div>
<input type="submit" value="Add to Cart">
</div>
</div>
</div>
<div class="pagination"></div>
</body>
<footer>
<div class="contact">
<h2>Contact</h2>
<img src="resources/noun_14614_cc.svg" alt="horn call" style="height:32px; width:32px;">
1-000-000-000
<img src="resources/noun_631009_cc.svg" alt="scroll email" style="height:32px; width:32px;">
<h2>contact#vikingstore.com</h2>
</div>
</footer>
</html>
As K. Daniek wrote, you closed the bodytag before the footer, Apart from that, there is a lot of unnecessary code - no need for all this absolute and relative positioning - use margins for creating distances and leave the position settings at the default.
Here's a codepen: http://codepen.io/anon/pen/BLJxyk
Here's the changed CSS:
body {
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
.store-items {
margin-left: 20px;
margin-right: 20px;
width: 900px;
max-height: 900px;
border: solid 1px;
padding: 30px;
padding-left: 65px;
}
.store-items .item-1-3 {
display: inline-block;
width: 30%;
margin-right: 20px;
margin-bottom: 20px;
height: 300px;
border: solid 1px;
background-color: #333333;
position: relative;
}
.store-items .item-1-3 img {
height: 190px;
}
.store-items .item-1-3 h3 {
text-align: center;
color: white;
margin-top: 7px;
}
.store-items .item-1-3 p {
left: 170px;
margin-top: 15px;
border: solid 1px black;
width: 40px;
background-color: white;
}
.contact {
height: 70px;
display: block;
}
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;
}