I am at a complete loss as to what is wrong here. I've been at it for quite some time but no luck. For some reason whenever I load my page in IE or Firefox I get scrollable bars on some of my divs and the font sizes seem to be larger. I have an odd feeling that whatever the root cause is, it is causing both problems.
Here is where you can see the page: https://jsfiddle.net/041j4e9b/
Just load it in chrome and you will see it looks fine, even Opera and Safari windows load it fine. But then load it in IE, Edge or Firefox and you will what I am talking about. Below username and password you will see scrollable bars. Remember me and forgot password fonts are also much bigger in IE & Edge than in chrome, they can't fit on the single line. Firefox doesn't seem to have the font-size problem.
I have done my best to isolate the relevant code. The below html and css is required to load and show you everything that you see, I understand that this is a bit more code than required, but I honestly cannot remove more without altering the outcome and having a different issue than what I have on my original website.
<body>
<div class="wrapper">
<div class="login-page-wrapper">
<div class="login-wrapper">
<div class="login-dialog-wrapper">
<div class="single-element-wrapper">
<input value="" placeholder="Username" type="text">
</div>
<div class="single-element-wrapper">
<input value="" placeholder="Password" type="password">
</div>
<div class="single-element-wrapper adjusted-height">
<input type="submit" value="Log In" class="button-login">
<a class="button-link button-register">Register</a>
</div>
<div class="single-element-wrapper">
<div class="remember-me">
<input data-val="true" type="checkbox" value="true">
<label for="RememberMe">Remember me?</label>
</div>
<div class="forgot-password">
Forgot Password?
</div>
</div>
</div>
</div>
</div>
</div>
</body>
body{
background: #000;
}
input[type=text] {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 100%;
font-size: 28px;
font-weight: 300;
font-stretch: condensed;
}
input[type=text]:focus {
outline: none;
}
input[type=text]:-webkit-autofill, input[type=text]:-autofill {
-webkit-box-shadow: 0 0 0px 1000px green inset;
-webkit-text-fill-color: red !important;
}
input[type=text]::-webkit-input-placeholder, input[type=text]:-moz-placeholder, input[type=text]::-moz-placeholder, input[type=text]:-ms-input-placeholder {
color: green;
}
input[type=text]::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=text]:-moz-placeholder {
color: #FF6A00;
}
input[type=text]::-moz-placeholder {
color: #FF6A00;
}
input[type=text]:-ms-input-placeholder {
color: #FF6A00;
}
input[type=password] {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 100%;
font-size: 28px;
font-weight: 300;
font-stretch: condensed;
}
input[type=password]:focus {
outline: none;
}
input[type=password]:-webkit-autofill, input[type=password]:-autofill {
-webkit-box-shadow: 0 0 0px 1000px green inset;
-webkit-text-fill-color: red !important;
}
input[type=password]::-webkit-input-placeholder, input[type=password]:-moz-placeholder, input[type=password]::-moz-placeholder, input[type=password]:-ms-input-placeholder {
color: green;
}
input[type=password]::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=password]:-moz-placeholder {
color: #FF6A00;
}
input[type=password]::-moz-placeholder {
color: #FF6A00;
}
input[type=password]:-ms-input-placeholder {
color: #FF6A00;
}
input[type=submit], button {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 150px;
font-size: 28px;
font-weight: 300;
font-stretch: condensed;
border: 2px solid #333;
border-radius: 8px;
color: #FFF;
font-size: 24px;
}
input[type=submit]:focus, button:focus {
outline: none;
}
input[type=submit]::-webkit-input-placeholder, button::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=submit]:-moz-placeholder, button:-moz-placeholder {
color: #FF6A00;
}
input[type=submit]::-moz-placeholder, button::-moz-placeholder {
color: #FF6A00;
}
input[type=submit]:-ms-input-placeholder, button:-ms-input-placeholder {
color: #FF6A00;
}
input[type=submit]:hover, button:hover {
cursor: pointer;
background: #FF6A00;
text-decoration: underline;
}
input[type=checkbox] {
width: 20px;
height: 20px;
vertical-align: middle;
}
label {
vertical-align: middle;
}
a:link, a:visited {
color: #ff6a00;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
a.button-link {
display: block;
height: 56px;
line-height: 60px;
text-align: center;
color: #FFF;
width: 150px;
background: transparent;
border: 2px solid #333;
border-radius: 8px;
font-size: 24px;
}
a.button-link:hover {
cursor: pointer;
background: #FF6A00;
text-decoration: underline;
}
html {
width: 100%;
height: 100%;
min-width: 320px;
font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnRegular", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", "sans-serif";
font-size: 21px;
font-weight: 300;
font-stretch: condensed;
color: #FFF;
}
html body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
html body .wrapper {
position: relative;
z-index: 100;
max-width: 1024px;
width: 100%;
margin: 0 auto;
background: url("../../Images/Shared/30-Percent-Black-Background.png");
height: 100%;
}
.login-page-wrapper {
width: 100%;
overflow: auto;
}
.login-page-wrapper .login-wrapper {
width: 50%;
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper {
margin-left: 25%;
margin-top: 10px;
min-width: 320px;
max-width: 350px;
overflow: auto;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .button-login {
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .button-register {
float: right;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .remember-me {
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .forgot-password {
float: right;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .adjusted-height {
height: 60px;
}
I did use box-sizing: border-box on the input elements, plus removed overflow: auto from the buttons' wrapper (as #Aziz have commented) :
Screenshot of the result at Chrome 49/Firefox 45:
Code:
* {
font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnRegular", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", "sans-serif";
}
input[type=text] {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 100%;
font-size: 28px;
font-weight: 300;
box-sizing: border-box;
}
input[type=text]:focus {
outline: none;
}
input[type=text]:-webkit-autofill, input[type=text]:-autofill {
-webkit-box-shadow: 0 0 0px 1000px green inset;
-webkit-text-fill-color: red !important;
}
input[type=text]::-webkit-input-placeholder, input[type=text]:-moz-placeholder, input[type=text]::-moz-placeholder, input[type=text]:-ms-input-placeholder {
color: green;
}
input[type=text]::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=text]:-moz-placeholder {
color: #FF6A00;
}
input[type=text]::-moz-placeholder {
color: #FF6A00;
}
input[type=text]:-ms-input-placeholder {
color: #FF6A00;
}
input[type=password] {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 100%;
font-size: 28px;
font-weight: 300;
box-sizing: border-box;
}
input[type=password]:focus {
outline: none;
}
input[type=password]:-webkit-autofill, input[type=password]:-autofill {
-webkit-box-shadow: 0 0 0px 1000px green inset;
-webkit-text-fill-color: red !important;
}
input[type=password]::-webkit-input-placeholder, input[type=password]:-moz-placeholder, input[type=password]::-moz-placeholder, input[type=password]:-ms-input-placeholder {
color: green;
}
input[type=password]::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=password]:-moz-placeholder {
color: #FF6A00;
}
input[type=password]::-moz-placeholder {
color: #FF6A00;
}
input[type=password]:-ms-input-placeholder {
color: #FF6A00;
}
input[type=submit], button {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 150px;
font-size: 28px;
font-weight: 300;
border: 2px solid #333;
border-radius: 8px;
color: #FFF;
font-size: 24px;
box-sizing: border-box;
}
input[type=submit]:focus, button:focus {
outline: none;
}
input[type=submit]::-webkit-input-placeholder, button::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=submit]:-moz-placeholder, button:-moz-placeholder {
color: #FF6A00;
}
input[type=submit]::-moz-placeholder, button::-moz-placeholder {
color: #FF6A00;
}
input[type=submit]:-ms-input-placeholder, button:-ms-input-placeholder {
color: #FF6A00;
}
input[type=submit]:hover, button:hover {
cursor: pointer;
background: #FF6A00;
text-decoration: underline;
}
input[type=checkbox] {
width: 20px;
height: 20px;
vertical-align: middle;
}
label {
vertical-align: middle;
}
a:link, a:visited {
color: #ff6a00;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
a.button-link {
display: block;
height: 56px;
line-height: 60px;
text-align: center;
color: #FFF;
width: 150px;
background: transparent;
border: 2px solid #333;
border-radius: 8px;
font-size: 24px;
}
a.button-link:hover {
cursor: pointer;
background: #FF6A00;
text-decoration: underline;
}
html {
width: 100%;
height: 100%;
min-width: 320px;
font-size: 21px;
font-weight: 300;
color: #FFF;
}
html body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: black;
}
html body .wrapper {
position: relative;
z-index: 100;
max-width: 1024px;
width: 100%;
margin: 0 auto;
background: url("../../Images/Shared/30-Percent-Black-Background.png");
height: 100%;
}
.login-page-wrapper {
width: 100%;
overflow: auto;
}
.login-page-wrapper .login-wrapper {
width: 50%;
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper {
margin-left: 25%;
margin-top: 10px;
min-width: 320px;
max-width: 350px;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .button-login {
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .button-register {
float: right;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .remember-me {
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .forgot-password {
float: right;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .adjusted-height {
height: 60px;
}
<div class="wrapper">
<div class="login-page-wrapper">
<div class="login-wrapper">
<div class="login-dialog-wrapper">
<div class="single-element-wrapper">
<input value="" placeholder="Username" type="text">
</div>
<div class="single-element-wrapper">
<input value="" placeholder="Password" type="password">
</div>
<div class="single-element-wrapper adjusted-height">
<input type="submit" value="Log In" class="button-login">
<a class="button-link button-register">Register</a>
</div>
<div class="single-element-wrapper">
<div class="remember-me">
<input data-val="true" type="checkbox" value="true">
<label for="RememberMe">Remember me?</label>
</div>
<div class="forgot-password">
Forgot Password?
</div>
</div>
</div>
</div>
</div>
</div>
jsfiddle DEMO
Remove overflow: auto; form the below css code.
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper {
margin-left: 25%;
margin-top: 10px;
min-width: 320px;
max-width: 350px;
overflow: auto;
}
Related
I'm trying fix the Log-In & registration form. When you click on "Register" on my menu, you can see that the labels are perfectly formatted in the form but the input box are offset. I tried to fix it with float:left but it didn't work out too well. If somebody could help me with that, that would be awesome.
var popup = document.getElementById('id01');
var popupreg = document.getElementById('id02');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
if (event.target == popupreg) {
popupreg.style.display = "none";
}
}
body {
margin: 0 auto;
background: #fff;
}
div.container {
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.main-menu {
width: 200px;
margin: 0 auto;
right: 26px;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 35%;
}
.floating-sidebar li {
text-decoration: none;
outline: none;
line-height: 2em;
display: block;
border-radius: auto;
position: relative;
top: 10px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.floating-sidebar li a {
background-color: #fff;
color: #444950;
display: block;
padding: 7px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18;
font-weight: bold;
border-radius: 9px;
}
.floating-sidebar li a:hover {
background-color: #eee;
color: #00B200;
}
.floating-sidebar li a.active {
background-color: #eee;
color: #00B200;
}
.floating-sidebar:hover li a.register-link {
color: #b5e7a0;
background: #fff;
}
.floating-sidebar li a.active:hover {
background-color: #00B200;
color: #fff;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
.sortby-box {
padding-top: 124px;
padding-left: 44;
margin: 0 auto;
position: fixed;
}
.select-opt {
padding: 4px;
width: 120px;
border-radius: 8px;
outline: none;
border: 1px solid #00B200;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.select-opt option {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.popup,
.popupreg {
display: none;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
padding-top: 60px;
}
.popup-content,
.popupreg-content {
float: left;
position: fixed;
background-color: rgb(245, 245, 245);
width: 600px;
height: 400px;
border-radius: 39px;
left: 666px;
top: 210px;
border: 2px solid rgb(109, 196, 109);
}
.popup,
.popupreg label {
font-family: Arial, Helvetica, sans-serif;
}
.popup [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popupreg [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popup input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popupreg input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popup [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popupreg [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popup .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.popupreg .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.cancel {
text-align: right;
position: relative;
cursor: pointer;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.username-section,
.reg-section {
padding: 32px;
margin-left: 75px;
margin-top: 20px;
}
span.psswrd {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<header>
<div class="container">
Hello
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<div class="main-menu">
<ul class="floating-sidebar">
<li>Log In</li>
<li>Register</li>
<li>About</li>
<li>Language</li>
</ul>
</div>
</sidebar>
<div class="sortby-box">
<select class="select-opt">
<option>Newest</option>
<option>Popularity</option>
<option>Recommended</option>
</select>
</div>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
<div id="id01" class="popup">
<form class="popup-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="username-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Log In">
</div>
</form>
</div>
<div id="id02" class="popupreg">
<form class="popupreg-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="reg-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="usrname">Mail</label>
<input type="text" id="mail" name="mail" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Register">
</div>
</form>
</div>
<script src="index.js"></script>
<footer>
</footer>
A simple fix would be to give the label elements a display: inline-block; and give them a defined width such as width: 100px;.
I quickly created a JSFiddle to illustrate.
Hope this helped.
I know this sounds like an obvious question and answer, but I have spent a long time trying to figure this out, and for some reason, none of the answers are not working for me. Honestly, this is probably going to be a simple obvious answer I just can't catch. But here's the problem: I am making a website out of HTML5, CSS, and some PHP.
The issue is, that my links appear blue and purple with an underline. I know this is how they are supposed to look, but I have tried many different ways to re-style the links with text-decoration: none, and different colors and so on.
Here is my CSS and the HTML part with a link:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: brown;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants.">
</div></a>
I'm not sure if you needed all that, but there it is anyway.
For hover color change you can use this css
.sidebar a:hover{color:red; }
For keep the color focus after click
.sidebar a:focus{color:blue; }
1) You need to change your code from </div></a> at the end to this: </div></a></div>
2)Links can be styled differently depending on what state they are in.:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
You can read more about this in: https://www.w3schools.com/css/css_link.asp
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a, a:link, a:visited{
text-decoration: none;
color: brown;
}
a:hover, a:active{
color: green;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/>
</div>
</a>
</div>
a {
text-decoration: none;
color: brown;
}
is where you need to make changes to edit links
to change hover options:
a:hover {
style it here
}
and for already visited links on your site:
a:visited {
style it here
}
You asked how to style links.
a{
color: red;
cursor: wait;
font-size: 24px;
transition: color 0.3s, text-shadow 0.3s;
text-decoration: none;
}
a:hover{
color: green;
text-shadow: 1px 2px 3px #000;
text-decoration: overline;
}
a:active{
font-weight: 900;
}
Working link.
First of all i dont know if its permited more than one question in one topic, however i didnt find anything talking about that.
I have been developing a website, but im a bit new to this and my site has some things that need to be worked out, i will be listing the issues bellow and hopefully someone will help me.
1- Slideshow
How i can put the circles (bullet navigation) of the slideshow inside the slideshow ?
Images are not fully the size as the screen, i can see the current slide and a bit of the next slide, what do i do ?
2- Last 2 pages, Mobile & Contacts
If i change
.mobile {
min-width: 1100px;
}
to:
.mobile {
min-width: 1300px;
}
The mobile div will not make text stay on top of the image but the contacts page will not be as responsive as before, just try by yourself.
Thats it, it may simple, but i cant figure it out, i hope theres no problem with this topic, if so tell me.
See it live: http://optential.co.nf/
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
The css of the slideshow is "slider" and "controls".
Hope someone can help.
To answer questions 1
I will be answering the others shortly. To move the button controls first we need to give them a div, however as the controls are being dynamically generated so we have to edit the code which creates them, to do this we go into slider.js and add class="button move" to the
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div class="buttonmove">');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
Now we have something that we can edit, the most easiest way to move them is to use position:relative and give them a -100 top value like so.
.buttonmove {
position: relative;
top: -250px;
}
Question 2
Unfortantly I don't see the issue with your question as changing it 1300px works better as the layer don't overlap, please let me know in more detail;
A- the problem
B- what the result should be like
I hope this helped!
EDIT
Here is the jQuery function;
$(document).ready(function() {
var sliderImgH = $(".sliderimages:first").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
$(window).resize(function() {
var sliderImgH = $(".sliderimages").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
I also added this CSS;
.buttonmove {
position: relative;
}
#slider {
position: absolute;
}
*NOTE**
Adjust your function order so it goes or it won't work on load,
<script src="js/slider.js"></script>
Then the function I just made
<script src="js/fixedbar.js"></script>
EDIT(sorry forgot to add...)
I forgot to tell you to to add a class called sliderimages to your first or all of the images in your slider.
<div id="slider">
<div class="images">
<div class="controls">
<img class="sliderimages" src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
On the site i am making, one-paged site, the first div should always has the height of 100%, however this isnt working, the div does not cover all the height size of the screen.
At the moment, the div (header) has the weight set to 650px and its fine on 1336x768 resolution, but not different resolutions. When i set height:100%; it doesnt happen, does not make div have all the height of the screen on different resolutions.
I think its a css error, but cant figure it out yet.
I hope you can understand.
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: auto;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 110px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 110px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 36px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
.optimize {
background-image: url("img/fundo2.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
color: white;
padding-bottom: 48.1%;
}
.optimize.fixed {
margin-top: 110px;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div class="optimize"></div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>
Try to add the following css to your code:
html,
body { height: 100%; }
.header {
(...)
height: 100%;
}
See a demo here: CodePen
it wont be set to 100%, 100% of height will only work for the amount of content it has, you will have to set the height by javascript..if your content takes a height of 300px then 100% will taken as 100% of 300px,and no the browser height
got a solution using css
html
{
height:100%;
}
.header:
{
height:100%;
}
this will do your job.
Add height:100% to html,body and .header.
Remove min-height:650 from .header.
html {
height:100%; /*added*/
}
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
height:100%; /*added*/
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height:100%;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 110px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 110px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 36px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
.optimize {
background-image: url("img/fundo2.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
color: white;
padding-bottom: 48.1%;
}
.optimize.fixed {
margin-top: 110px;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div class="optimize"></div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>
I'm having an issue with a new design I'm working on. Check it out here on CodePen. When I size down the window and bring it back up, the navigation on the right gets all messed up. It only does that in Chrome and Opera, though. Works perfectly fine in IE 11 and FireFox. If I open up inspect element and uncheck and recheck the float:left; checkbox, it corrects the issue. What is causing this problem? I wouldn't be surprised if it was something stupid that I've overlooked.
/*tags*******************************************************/
html,
body {
background-color: #111;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: #FFF200;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#headerprofile #pic {
display: inline-block;
height: 56px;
margin-top: 27px;
}
#headerprofile img {
border: 1px solid #ecf0f1;
border-radius: 5px;
max-height: 100%;
}
#headerprofile #profnav {
display: inline-block;
float: left;
margin-right: 32px;
}
#headerprofile #profnav a {
color: #fff;
margin-left: 30px;
}
#headerprofile #profnav a:first-child {
margin-left: 0px;
margin-left: initial;
}
#navigation a {
display: inline-block;
padding: 8px;
color: #ecf0f1;
}
#navigation a:hover {
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
color: #010107;
text-decoration: none;
}
#navigation ul li {
display: inline;
}
/*IDs********************************************************/
#firstrow {
height: 112px;
position: relative;
}
#headerContainer {
background-color: #180153;
background-color: #c0392b;
padding-bottom: 15px;
padding-top: 15px;
}
#headerprofile {
float: right;
line-height: 112px;
max-height: 100%;
}
#logo {
float: left;
position: relative;
height: 100%;
}
#logo #logovector {
width: 250px;
}
#logo #logovector #logoOutline {
fill: #ecf0f1;
}
#logo #logovector .outlinetext {
fill: #ecf0f1;
}
#navigation {
background-color: #2c3e50;
font-size: 20px;
margin-top: 6px;
text-align: center;
padding-bottom: 20px;
padding-left: 16px;
padding-right: 16px;
padding-top: 5px;
}
/*classes****************************************************/
.columnize {
margin: auto;
width: 80%;
}
.columnize.full {
width: 97%;
width: calc(100% - 50px);
}
.center {
text-align: center;
}
.content {
margin-top: 25px;
line-height: 30px;
}
.displayNone {
display: none;
}
.zigzag {
-webkit-filter: drop-shadow(rgba(255, 255, 255, .3) 0px -3px 0px);
position: relative;
width: 100%;
}
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 20px;
}
.zigzag.first:before {
background: linear-gradient(45deg, transparent 33.333%, #2c3e50 33.333%, #2c3e50 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #2c3e50 33.333%, #2c3e50 66.667%, transparent 66.667%);
background-size: 20px 40px;
}
.zigzag.second:before {
background: linear-gradient(45deg, transparent 33.333%, #111 33.333%, #111 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #111 33.333%, #111 66.667%, transparent 66.667%);
background-size: 20px 40px;
}
#media screen and (max-width: 680px) {
#headerprofile #pic {
/*loat:none;*/
clear: both;
display: block;
text-align: center;
margin-top: 0px;
margin-top: initial;
}
#headerprofile #profnav {
float: none;
clear: both;
display: block;
margin-right: 0px;
margin-right: initial;
text-align: center;
}
#firstrow {
height: auto;
}
#headerprofile {
line-height: 60px;
}
#logo {
float: none;
}
#logo #logovector {
display: block;
margin: auto;
max-width: 385px;
width: 100%;
width: calc(100% - 10px);
}
#headerprofile {
float: none;
}
}
.formContainer h1 {
margin-bottom: 25px;
margin-top: 25px;
}
form input.textinput {
position: relative;
padding: 5px 10px;
margin: 2px;
font-size: 13px;
background-color: #222;
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, .8);
cursor: pointer;
color: #fff;
-webkit-user-select: none;
}
.login.formContainer form {
background-color: #2c3e50;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
padding: 10px;
width: auto;
}
.login.formContainer form h3 {
margin-bottom: 10px;
}
.login.formContainer form input.textinput {
width: 254px;
width: calc(100% - 30px);
}
.login.formContainer form input#signemail {
width: 151px;
width: calc(100% - 129px);
}
.login.formContainer form input.textinput:hover,
.login.formContainer form input.textinput:focus {
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, 1);
}
.login.formContainer form .formbtns {
margin-top: 10px;
}
.login.formContainer {
width: 300px;
margin: auto;
}
/*...................................*/
/*...........button stuff............*/
/*...................................*/
.button {
position: relative;
padding: 5px 10px;
margin: 2px;
font-size: 13px;
background-color: rgba(255, 255, 255, 0);
font-weight: bold;
border: 2px solid;
cursor: pointer;
-webkit-user-select: none;
}
.button.white {
color: #fff;
border-color: #fff;
}
.button.white:hover {
background-color: #fff;
color: #000;
}
.button.emerald {
color: #2ecc71;
border-color: #2ecc71;
}
.button.emerald:hover {
background-color: #2ecc71;
color: #fff;
}
.button.springgreen {
color: #00FF7F;
border-color: #00FF7F;
}
.button.springgreen:hover {
background-color: #00FF7F;
color: #fff;
}
.button.sky {
color: #33ccff;
border-color: #33ccff;
}
.button.sky:hover {
background-color: #33ccff;
color: #fff;
}
.button.orangered {
color: #FF4500;
border-color: #FF4500;
}
.button.orangered:hover {
background-color: #FF4500;
color: #fff;
}
.button.cyan {
color: #2980b9;
border-color: #2980b9;
}
.button.cyan:hover {
background-color: #2980b9;
color: #fff;
}
.button.purple {
color: #8e44ad;
border-color: #8e44ad;
}
.button.purple:hover {
background-color: #8e44ad;
color: #fff;
}
<div id="headerContainer">
<div class="columnize full">
<div id="firstrow">
<div id="logo">
<h1>Logo</h1>
</div>
<!--logo-->
<div id="headerprofile">
<div>
<div id="pic">
<img src="http://placekitten.com/g/200/200" />
</div>
<div id="profnav">Log OutSettingsUSERNAME
</div>
</div>
</div>
<!--#headerprofile-->
</div>
<!--#firstrow-->
</div>
<!--.columnize.full-->
</div>
<!--#headerContainer-->
<div class="first zigzag">
</div>
<!--.zigzag-->
<nav role="navigation">
<div id="navigation">
<ul>
<li>Home
</li>
</ul>
</div>
<!--#navigation-->
</nav>
<div class="second zigzag">
</div>
<!--.zigzag-->
<div class="columnize content">
<h1>Settings</h1>
<form id="settingsform" action="#" method="post">
<h3>Make changes to your account</h3>
<label class="displayNone" for="usersname">Name</label>
<input id="usersname" type="text" class="textinput" name="name" placeholder="Name" required="required" title="Real first name, maybe a last initial" />
<br/>
<label class="displayNone" for="usersusername">Username</label>
<input id="usersusername" type="text" class="textinput" name="username" placeholder="Username" required="required" title="Your SSB tag" />
<br/>
<label class="displayNone" for="userspass">Password</label>
<input id="userspass" type="password" class="textinput" name="password" placeholder="Password" required="required" title="A unique password" />
<br/>
<div class="formbtns">
<input class="button emerald" type="submit" id="save" value="Save" name="submit" />
</div>
</form>
</div>
</body>
Thank you.
Add text-align: center; to #firstrow and display: inline-block; to #headerprofile
DEMO
#firstrow {
height: auto;
text-align: center;
}
#headerprofile {
line-height: 60px;
display: inline-block;
}