<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>
Related
No matter what I attempt, I cannot seem to get the divisions within the header element to line up instead of stack. I wanted the logo to float left, while the social media icons and the search bar float left. Also, I want the search bar icon (magnifying glass) to also fall inline with the text area.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Maj's Php Project 2022</title>
<!-- Jquery Link -->
<!-- CSS Stylesheet Link -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Links -->
<!-- Metadata Information -->
<!-- Website Comment Information -->
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
</div>
<div id="social-media-icons">
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
</div>
<div id="search-bar">
<img src="img/search.png" width="25px" height="25px" />
<form action="#" method="POST">
<input type="text" placeholder="Search" name="search" id="search" />
<input type="submit" value="GO" name="submit" id="submit" />
</form>
</div>
<nav>
<ul>
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li>
</ul>
</nav>
</header>
And here is the CSS:
/* GLOBALS */
/* ELEMENT */
body {
background-color: white;
}
header {
width: 960px;
background-color: #336699;
border-radius: 15px;
padding: 10px;
}
main {
background-color: #33FF99;
border-radius: 15px;
padding: 10px;
color: #330099;
}
li {
display: inline;
padding: 5%;
}
li > a {
text-decoration:none;
color: #33CC99;
}
li > a:hover {
color: #330066;
}
footer {
background-color: #336699;
border-radius: 15px;
padding: 10px;
color: #33CC99;
}
header {
display: inline-block;
}
/* IDS */
#wrapper {
border-radius: 15px;
width: 960px;
clear: both;
margin: 0 auto;
padding-top: 5px;
}
#logo {
width: 100px;
height: 100px;
margin: 5px;
margin-top: 5px;
background-color: white;
border-radius: 15px;
}
#search-bar {
display: inline;
float: right;
}
#social-media-icons {
float: right;
}
/* CLASSES */
I need all the divs in the to align inline, but floating the elements is not working. What am I missing! PLease and thank you.
You may wish to make it easier on yourself and utilize either Bootstrap or Flexbox because those tools can help you with alignment desires. With Bootstrap, you'll need to include external resources like bootstrap css; with Flexbox, it's already there. My preference is Flexbox because it provides more flexibility.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I mocked up a quick example using your code and making slight additions and modifications. I also presume you wanted the social media icons and the search functionality to float "right" instead of "left". If not, that's easy enough to change.
HTML
<body>
<div id="wrapper">
<header>
<div class="header-utility">
<div id="logo"></div>
<div class="social-media-icons">
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
</div>
<div class="search-bar">
<form action="#" method="POST">
<img src="img/search.png" />
<input type="text" placeholder="Search" name="search" class="search-input" />
<input type="submit" value="GO" name="submit" id="submit" class="search-submit" />
</form>
</div>
</div>
<nav>
<ul>
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li>
</ul>
</nav>
</header>
</div>
</body>
CSS
/* GLOBALS */
/* ELEMENT */
body {
background-color: white;
}
header {
width: 960px;
background-color: #336699;
border-radius: 15px;
padding: 10px;
}
main {
background-color: #33FF99;
border-radius: 15px;
padding: 10px;
color: #330099;
}
li {
display: inline;
padding: 5%;
}
li > a {
text-decoration: none;
color: #33CC99;
}
li > a:hover {
color: #330066;
}
footer {
background-color: #336699;
border-radius: 15px;
padding: 10px;
color: #33CC99;
}
/* IDS */
#wrapper {
border-radius: 15px;
width: 960px;
clear: both;
margin: 0 auto;
padding-top: 5px;
}
#logo {
width: 100px;
height: 100px;
margin: 5px;
margin-top: 5px;
background-color: white;
border-radius: 15px;
}
/* CLASSES */
.header-utility {
display: flex;
align-items: center;
}
.social-media-icons {
flex-grow: 1;
text-align: right;
padding-right: 30px;
}
.search-input,
.search-submit {
padding: 0px;
height: 25px;
}
Feel free to play around with the mock as you desire. https://jsfiddle.net/9g6ms7pz/
I'm trying to get my Nav menu text to sit beside one another beside the logo like a real website would have.
I made a mockup of the side for reference linked below for viewing purposes.
I've been literally stressing myself out over this simply mundane task, messing with margins, padding, floating, etc and no matter what I do to any of my elements either NOTHING happens or a whole bunch of shit will start flying all over the place and I can't even understand why.
My mockup Preview
How mine looks at present
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike{
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float:left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu{
margin-top:15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.search{
float: left;
}
.SearchGlass{
margin: 30px 900px;
float: left;
}
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
padding-bottom: 42px;
float:left;
text-align: left;
}
h1{
}
/* Class For Articles*/
.article{
float: left;
width: 100%;
margin-bottom: 72px
}
.article img{
width: 400px;
height: 225px;
margin-right: 1%
}
.article h1{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer{
display: block;
width: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Display your list items inline block.
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike {
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu {
margin-top: 15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.navmenu li {
display: inline-block;
}
.search {
float: left;
}
.SearchGlass {
margin: 30px 900px;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Either you're not posting the needed code for the solution or you have some indentation erros in your html.
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike"> <--- open never closed
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</header> <--- this was after div that goes next
</div>
A simple way to do this would be to split your header into 3 columns and then place your logo, navigation and search fields into each of those sections.
I have included an example below:
.clearfix {
overflow: auto;
}
.header__section {
float: left;
width: 30%;
margin-right: 5%;
}
.header__section:last-child {
margin-right: 0;
}
<header class="header clearfix">
<section class="header__section">
Logo
</section>
<section class="header__section">
Nav
</section>
<section class="header__section">
Search
</section>
</header>
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 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;
}
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/