I've got a little problem. I've placed my footer at absolute bottom, relative to body, but when I'm using a scroll, the footer doesn't stick to the bottom anymore.
this is the HTML
<body>
<div id="top-line"></div>
<div id="header">
<div class="wrapper">
<div class="logo"> </div>
</div>
</div>
<div id="menu">
<?php include 'menu.php';?>
</div>
<div class="wrapper">
<div id="content">
<div id="applybox">
<form action = "" method = "post">
<label>Firstname</label>
<input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" />
<label>Lastname</label>
<input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" />
<label>Age</label>
<input class="inputfield" type = "number" name = "password" min="16" max="40" />
<label>Gender</label>
<select class="inputfield" name="gender">
<option value="">Select...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Origin</label>
<select class="inputfield" name="origin">
<option value="">Select...</option>
<option value="Caucasian">Caucasian</option>
<option value="Asian">Asian</option>
<option value="African">African</option>
<option value="Latino">Latino</option>
</select>
<label>Describe your character's life up until current age.</label>
<textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea>
<input class="applybutton" type = "submit" value = "File application"/>
</form>
</div>
</div>
</div>
<div id="footer">Copyright © 2016 Degenraiderz. All rights reserved.</div>
</body>
And this is the CSS
/*===RESET===*/
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
text-decoration: none;
}
* :focus { outline: 0; }
ul {list-style: none;}
/*=================RESET COMPLETE========================*/
#font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff');
}
#font-face {
font-family: 'open_sansregular';
src: url('/fonts/OpenSans-Regular-webfont.eot');
src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
position: relative;
}
body {
font-family: Arial,sans-serif;
font-size: 12px;
background: #555;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
a {
text-decoration: none;
}
#top-line {
height: 8px;
background: #f1ebe0;
}
#footer {
color: #F7F7F7;
position: absolute;
bottom: 0;
width: 100%;
background: #292c2f;
height: 17px;
border-top: 3px solid #f1ebe0;
padding: 4px 0 2px 0;
text-align: center;
clear:both;
}
#header {
width: 100%;
background: #292c2f;
border-bottom: 3px solid #f1ebe0;
}
.headerbar {
width: 100%;
}
#navigation {
list-style: none;
display: block;
padding: 10px 0 10px 0;
text-align:right;
}
#navigation li {
display: inline-block;
position: relative;
}
#navigation li a {
color: #e5e5e5;
font-family: Bebas, Tahoma, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
padding: 10px 17px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
#navigation li a.active {
border-bottom: 3px solid #f1ebe0;
background: #444;
color: #F7F7F7;
}
#navigation li a:hover {
color: #F7F7F7;
background: #444;
border-bottom: 3px solid #f1ebe0;
}
#menu {
width: 100%;
background: #292c2f;
-webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
-moz-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
}
#menu .wrapper {
width: 1170px;
margin: 0 auto;
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
.logo {
position: relative;
min-height: 300px;
background: url(/images/banner.png) center center no-repeat;
background-size: cover;
}
#loginbox {
color: #16325c;
background: #CCC;
width: 380px;
height:300px;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.input {
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
}
.user {
margin-top: 8px;
margin-bottom: 16px;
}
.pass {
margin-top: 8px;
margin-bottom: 16px;
}
.loginbutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.loginbutton:hover {
background-color: #f1ebe0;
}
.remember {
padding: 16px 0;
position: relative;
margin: 0px;
font-size: 14px;
}
.forgot {
width: 100%;
border-top: 1px solid #D8DDE6;
color: #f1ebe0;
padding-top: 10px;
text-align: right;
}
#content {
font-family: open_sansregular, Arial, sans-serif;
margin-top: 10px;
position: relative;
text-align: justify;
color: #e5e5e5;
}
#content .wrapper {
margin-right: -2%;
}
.box {
box-sizing: border-box;
width: 23%;
margin: 1%;
float:left;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .content {
overflow: hidden;
font-size: 15px;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .title {
height:30px;
line-height:30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #666;
font-size:18px;
font-weight:bold;
display:block;
color:white;
padding:10px;
border: 1px solid gray;
border-bottom:none;
}
.dropdown-content {
z-index: 1;
display: none;
position: absolute;
bottom: -135px;
background: #292c2f;
min-width: 202px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav {
font-family: open_sansregular, Arial, sans-serif;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
display: inline-table;
position: relative;
padding: 0;
z-index: 1;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
nav ul li:hover {
background: #444;
}
nav ul li:hover a {
color: #F7F7F7;
}
nav ul li a {
display: block; padding: 15px 40px;
color: #e5e5e5; text-decoration: none;
}
nav ul ul {
background: #292c2f; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
min-width: 185px;
}
nav ul ul li a {
padding: 15px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #444;
border-bottom: 3px solid #f1ebe0;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#applybox {
color: #16325c;
background: #CCC;
width: auto;
height: auto;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.inputfield {
display:block;
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
margin-top: 8px;
margin-bottom: 16px;
}
.applybutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.applybutton:hover {
background-color: #f1ebe0;
}
https://jsfiddle.net/introzen/g88mrg3m/
What have I done wrong here? I've tried putting height: auto; and padding-bottom: 50px; on Body, but then on pages not using scroll, the footer is not at bottom.
Well its because your body got a height:100%;. Because elements height always references to its parents height, it doesn't grow the size you want to.
If you remove the height, the body will calculate its height based on his children.
Remove the height:100%; and it will stick to the end of your screen.
If u want to keep the site on at least 100% height, you can use max-height:100%;.
Change the footer to position: fixed
Using flex your header/footer can grow dynamically and still keep the footer at absolute bottom
In below sample I added a container div, removed position: absolute on the footer and updated/added these 2 CSS rules
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
Stack snippet
/*===RESET===*/
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
text-decoration: none;
}
* :focus { outline: 0; }
ul {list-style: none;}
/*=================RESET COMPLETE========================*/
#font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff');
}
#font-face {
font-family: 'open_sansregular';
src: url('/fonts/OpenSans-Regular-webfont.eot');
src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
position: relative;
}
body {
font-family: Arial,sans-serif;
font-size: 12px;
background: #555;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
a {
text-decoration: none;
}
#top-line {
height: 8px;
background: #f1ebe0;
}
#footer {
color: #F7F7F7;
bottom: 0;
width: 100%;
background: #292c2f;
height: 17px;
border-top: 3px solid #f1ebe0;
padding: 4px 0 2px 0;
text-align: center;
clear:both;
}
#header {
width: 100%;
background: #292c2f;
border-bottom: 3px solid #f1ebe0;
}
.headerbar {
width: 100%;
}
#navigation {
list-style: none;
display: block;
padding: 10px 0 10px 0;
text-align:right;
}
#navigation li {
display: inline-block;
position: relative;
}
#navigation li a {
color: #e5e5e5;
font-family: Bebas, Tahoma, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
padding: 10px 17px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
#navigation li a.active {
border-bottom: 3px solid #f1ebe0;
background: #444;
color: #F7F7F7;
}
#navigation li a:hover {
color: #F7F7F7;
background: #444;
border-bottom: 3px solid #f1ebe0;
}
#menu {
width: 100%;
background: #292c2f;
-webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
-moz-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
}
#menu .wrapper {
width: 1170px;
margin: 0 auto;
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
.logo {
position: relative;
min-height: 300px;
background: url(/images/banner.png) center center no-repeat;
background-size: cover;
}
#loginbox {
color: #16325c;
background: #CCC;
width: 380px;
height:300px;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.input {
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
}
.user {
margin-top: 8px;
margin-bottom: 16px;
}
.pass {
margin-top: 8px;
margin-bottom: 16px;
}
.loginbutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.loginbutton:hover {
background-color: #f1ebe0;
}
.remember {
padding: 16px 0;
position: relative;
margin: 0px;
font-size: 14px;
}
.forgot {
width: 100%;
border-top: 1px solid #D8DDE6;
color: #f1ebe0;
padding-top: 10px;
text-align: right;
}
#content {
font-family: open_sansregular, Arial, sans-serif;
margin-top: 10px;
position: relative;
text-align: justify;
color: #e5e5e5;
}
#content .wrapper {
margin-right: -2%;
}
.box {
box-sizing: border-box;
width: 23%;
margin: 1%;
float:left;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .content {
overflow: hidden;
font-size: 15px;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .title {
height:30px;
line-height:30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #666;
font-size:18px;
font-weight:bold;
display:block;
color:white;
padding:10px;
border: 1px solid gray;
border-bottom:none;
}
.dropdown-content {
z-index: 1;
display: none;
position: absolute;
bottom: -135px;
background: #292c2f;
min-width: 202px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav {
font-family: open_sansregular, Arial, sans-serif;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
display: inline-table;
position: relative;
padding: 0;
z-index: 1;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
nav ul li:hover {
background: #444;
}
nav ul li:hover a {
color: #F7F7F7;
}
nav ul li a {
display: block; padding: 15px 40px;
color: #e5e5e5; text-decoration: none;
}
nav ul ul {
background: #292c2f; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
min-width: 185px;
}
nav ul ul li a {
padding: 15px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #444;
border-bottom: 3px solid #f1ebe0;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#applybox {
color: #16325c;
background: #CCC;
width: auto;
height: auto;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.inputfield {
display:block;
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
margin-top: 8px;
margin-bottom: 16px;
}
.applybutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.applybutton:hover {
background-color: #f1ebe0;
}
<div class="container">
<div id="top-line"></div>
<div id="header">
<div class="wrapper">
<div class="logo"> </div>
</div>
</div>
<div id="menu">
<?php include 'menu.php';?>
</div>
<div class="wrapper">
<div id="content" style="">
<div id="applybox">
<form action = "" method = "post">
<label>Firstname</label>
<input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" />
<label>Lastname</label>
<input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" />
<label>Age</label>
<input class="inputfield" type = "number" name = "password" min="16" max="40" />
<label>Gender</label>
<select class="inputfield" name="gender">
<option value="">Select...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Origin</label>
<select class="inputfield" name="origin">
<option value="">Select...</option>
<option value="Caucasian">Caucasian</option>
<option value="Asian">Asian</option>
<option value="African">African</option>
<option value="Latino">Latino</option>
</select>
<label>Describe your character's life up until current age.</label>
<textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea>
<input class="applybutton" type = "submit" value = "File application"/>
</form>
</div>
</div>
</div>
<div id="footer">Copyright © 2016 Degenraiderz. All rights reserved.</div>
</div>
Related
I have two type's of buttons on the page I am creating:
Actual buttons <button>
Buttons created from <input type="submit">
I am trying to create button's, which on hover, perform like this:
.actions {
display:inline-block;
position:relative;
}
.hs-button {
background-color: #fff336;
}
.hs-button {
padding: 15px 20px 15px 20px;
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
border: 3px solid transparent;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover input[type="submit"] {
border: 3px solid #000;
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
As you can see, on hover, the black panel come's from bottom to top. I have managed to achieve this for <input type="submit"> buttons, but I can't seem to emulate the same aesthetics for <button>:
.cta-wrapper .cta-text p button{
border: 3px solid #fff336;
}
.thank-you .cta-wrapper {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: relative;
transition:all 0.3s;
}
.cta-text {
background-color: #ba1974;
padding:30px 30px 45px;
}
.cta-text {
background-color: #474747;
}
.cta-wrapper .cta-link {
position:absolute;
display:block;
height:100%;
width:100%;
top:0;
left:0;
}
.cta-text p {
font-size:16px;
line-height:24px;
font-weight:normal;
font-family: 'Raleway', sans-serif;
margin:0 auto 30px;
color:#fff;
}
.cta-text p:last-child {
margin-bottom:0;
}
.cta-text button {
-webkit-appearance: none;
width: 179px;
max-width: 100%;
border: 2px solid #fff336;
color: #000;
background-color: #fff336;
font-size: 16px;
font-family: 'Calibri W01 Regular_904604';
font-weight:400;
line-height: 1em;
padding: 11px 0 12px;
box-sizing: border-box;
cursor: pointer;
transition:all 0.25s;
}
.cta-wrapper:hover .cta-text button {
background-color: #000;
color:#fff336;
border: 3px solid #000;
}
.cta-wrapper:hover .cta-text button p {
color:#fff336;
}
p.button:first-of-type a:hover {
text-decoration: none;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
<div class="cta-wrapper">
<div class="cta-image">
</div>
<div class="cta-text">
<p><button>Download</button></p>
</div>
<a class="cta-link" href="#"></a>
</div>
Why isn't <button> performing like <input>?
For the <input> button, when you hover over the button, the background goes transparent for a second and then fills in with black. I want the background to remain yellow and the black to fill it on hover. How can I achieve this? The only way I can get the hover to work right now is to set the background as transparent - and input doesn't support and :after so I don't know how to work around this?
Well, here it is, I don't see your problem ...
.actions {
display:inline-block;
position:relative;
}
.hs-button {
background-color: #fff336;
}
.hs-button {
padding: 15px 20px 15px 20px;
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
border: 3px solid transparent;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover button {
border: 3px solid #000;
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<button class="hs-button primary large">DOWNLOAD NOW</button>
</div>
</div>
.cta-wrapper{
background-color: #fff336;
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.cta-text{
display:inline-block;
position:relative;
}
.cta-text button {
-webkit-appearance: none;
width: 179px;
max-width: 100%;
border: 2px solid #fff336;
color: #000;
background-color: #fff336;
font-size: 16px;
font-family: 'Calibri W01 Regular_904604';
font-weight:400;
line-height: 1em;
padding: 11px 0 12px;
box-sizing: border-box;
cursor: pointer;
transition:all 0.25s;
}
.cta-text:hover button {
border: 3px solid #000;
color: white;
background:transparent;
}
.cta-text:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.cta-text:hover::before {
height:100%;
}
span{
font-family: 'Raleway', sans-serif;
}
<div class="cta-wrapper">
<div class="cta-image">
</div>
<div class="cta-text">
<button><span>Download</span></button>
</div>
<a class="cta-link" href="#"></a>
</div>
I have a problem in my html. I can't find how can i solve it.
[class="active" then Home mark with red underline. default][1]
[When i click, red underline disappered][2]
[When i click anywhere, it is come again][3]
/*input[type=text] {
width: 40px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('glyphicons-28-search.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-left: 10px;
}*/
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('glyphicons-28-search.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 10px 10px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-left: 10px;
margin-bottom: 0px;
}
input[type=text]:focus {
/*border: 2px solid #FF0000;*/
}
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
background-color: #d9d9d9;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.container{
width: 100%;
margin: auto;
}
.navbar {
margin-bottom: 0;
border: 0;
font-size: 15px !important;
line-height: 1.42857143 !important;
letter-spacing: 1px;
border-radius: 0;
background-color: white;
padding: 30px 30px 30px 30px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
border-color: white;
}
.navbar-nav li a:hover, .navbar-nav li.active a{
border-bottom: 2px solid red;
color: black !important;
background-color: white !important;
}
.navbar .navbar-collapse {
text-align: center;
}
.center {
width: 100%;
margin: 10px 50px 0px 50px;
}
.right {
float: right;
margin-right: 130px;
margin-left: 260px;
}
.top {
margin-top: 150px;
}
.img {
padding-right: 50px;
width: 80%;
}
Thanks for helping!
Just add this CSS :
.navbar-nav li.active a:focus{
border-bottom: 2px solid red;
}
if this not works then just add important :
.navbar-nav li.active a:focus{
border-bottom: 2px solid red !important;
}
I wrote a little html page that contains some buttons. What I want to do is to have them look like this :
I'm not good at all at css, I tried some combination but what I get is to have them "below the blue line" like this :
Here is my html code :
<div class="module form-module">
<div class="flex-container">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
</div>
You can find my css code in that plunker : https://plnkr.co/edit/sCcBBFfWRiCwGz8hs8oR?p=catalogue
Can you please help me to fix this little problem in html ?
CSS changes:
.form-module {
border-bottom: 5px solid #33b5e5;
position: relative;
background: #ffffff;
width: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
Changes expalined:
The blue line is a border, and was set on the button's parent container. It was set to top when you wanted it to be on the bottom, so that's first change.
Then you had padding, which was separating the buttons from the edges of the container, that's second change, set it to 0px.
Finally, both the table and each button had a 1px border which would separate it from the edges of the container, third change was setting those borders to 0px.
Small suggestion:
In case you're not aware: it's really helpful to use browser inspector to better understand what's going on with CSS. Also, if you don't wish to make everything from scratch, I'd recommend you have a look at Bootstrap, it's quite easy and might save you a bunch of time.
Good luck.
In case it's useful, here's the complete CSS:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #33b5e5;
}
.pen-title span a {
color: #33b5e5;
font-weight: 600;
text-decoration: none;
}
/* Form Module */
.form-module {
position: relative;
background: #ffffff;
width: 100%;
border-bottom: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.form-module .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.form-module .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
}
.form-module .form:nth-child(2) {
display: block;
}
.form-module h2 {
margin: 0 0 20px;
color: #33b5e5;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.form-module table {
width: 100%
}
.form-module input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.form-module button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module button:hover {
background: #178ab4;
}
.form-module select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag button {
background: white;
color: #178ab4;
}
.flag button:hover {
background: white;
border: 20px;
border-color: #178ab4;
}
.flag {
cursor: pointer;
background: white;
width: 100%;
border: 0;
padding: 10px 15px;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a {
cursor: pointer;
background: white;
width: 100%;
border: 0;
color: #33b5e5;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a :hover {
background: white;
}
.form-module .cta {
background: #f2f2f2;
width: 100%;
padding: 15px 40px;
box-sizing: border-box;
color: #666666;
font-size: 12px;
text-align: center;
}
.form-module .cta a {
color: #333333;
text-decoration: none;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.flex-container > * {
padding: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
.detail button {
width: 120px
}
.detail table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 100%
}
.search table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 70%
}
.search button {
width: 120px
}
.search input {
outline: none;
width: 90%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.search select {
cursor: pointer;
width: 90%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.resultSearch table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 80%
}
.dropbtn {
outline: none;
border:1;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
outline: none;
width: 100%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
#searchbox
{
width: 35px;
}
#media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
.newUser button {
width: 120px
}
.newUser table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%
}
.return table{
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%;
}
.returnCheckBox input {
align: left;
width:0%;
}
.invoiceListTable table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%
}
.sessionInfo table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 100%;
align: right;
}
.sessionInfo {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.sessionInfo > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
align: right;
}
.sessionInfo {
position: relative;
background: #ffffff;
width: 20%;
border-top: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.sessionInfo .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.sessionInfo .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.sessionInfo .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
align:right;
}
UPDATE:
You mentioned the buttons should be outside and above the form-module, so the html needs to be changed and not just the css. We removed the flex-container div which was nested inside form-module div and placed it after this container is closed. Since the buttons were getting their layout properties from .form-module's style, it was necessary to create a new class "buttons". Basically now form-module and buttons are in different containers and with separated style properties.
To understand how container blocks work:
http://www.w3schools.com/html/html_blocks.asp
html:
<div class="flex-container buttons">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
<div class="module form-module">
</div>
changed css:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
width: 100%;
border-spacing:0px;
}
.buttons td {
padding:0px;
}
.buttons input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.buttons button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons button:hover {
background: #178ab4;
}
.buttons select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
complete css:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
width: 100%;
border-spacing:0px;
}
.buttons td {
padding:0px;
}
.buttons input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.buttons button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons button:hover {
background: #178ab4;
}
.buttons select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #33b5e5;
}
.pen-title span a {
color: #33b5e5;
font-weight: 600;
text-decoration: none;
}
/* Form Module */
.form-module {
position: relative;
background: #ffffff;
width: 100%;
border-top: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.form-module .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.form-module .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
}
.form-module .form:nth-child(2) {
display: block;
}
.form-module h2 {
margin: 0 0 20px;
color: #33b5e5;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.form-module table {
width: 100%
}
.form-module input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.form-module button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module button:hover {
background: #178ab4;
}
.form-module select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag button {
background: white;
color: #178ab4;
}
.flag button:hover {
background: white;
border: 20px;
border-color: #178ab4;
}
.flag {
cursor: pointer;
background: white;
width: 100%;
border: 0;
padding: 10px 15px;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a {
cursor: pointer;
background: white;
width: 100%;
border: 0;
color: #33b5e5;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a :hover {
background: white;
}
.form-module .cta {
background: #f2f2f2;
width: 100%;
padding: 15px 40px;
box-sizing: border-box;
color: #666666;
font-size: 12px;
text-align: center;
}
.form-module .cta a {
color: #333333;
text-decoration: none;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.flex-container > * {
padding: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.dropbtn {
outline: none;
border:1;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
ul{
list-style-type:none;
width:500px;
}
li{
width:33%;
text-align:center;
float:left;
border-bottom:2px solid #33b5e5;
}
Maybe instead of a 'table' use a 'list' html element like ul or li.
plunker
New HTML:
<div class="module form-module">
<div class="flex-container">
<article class="article">
<ul>
<li>
<button>Configurations</button>
</li>
<li>
<button>Create User </button>
</li>
<li>
<button>Update User</button>
</li>
</ul>
</article>
</div>
</div>
and add the following CSS:
ul{
list-style-type:none;
width:500px;
}
li{
width:33%;
text-align:center;
float:left;
border-bottom:2px solid #33b5e5;
}
I have a css issue with a media queries menu, I want the dropdown menu to be 100% width but there is a css issue on the left hand side of the menu showing a gap.
Any help would be great!!
please see fiddle here
http://jsfiddle.net/kavbE/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
}
#nav>li {
float: left;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 10px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li:hover>a, #nav li>a:hover {
color: #ddd;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li a:hover {
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
}
There's some browser-default padding on your #nav list.
Add padding: 0; to #nav and it should fix it.
I've having problems rending off screen elements properly. I believe the problem has to do with overflow properties. If I view the browser at full screen(1080p) its fine, but when I resize the browser to a smaller resolution, and then SCROLL down, the styles disappear for off screen elements.
EDIT [ Removed links to prevent broken links in the future ]
/* DEFAULT */
* {
margin: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#font-face {
font-family: leela;
src: url('leelawad_0.ttf');
}
html, body {
height: 100%;
background-color: rgb(255,255,255);
}
h1 {
color: rgb(183,183,183);
font-family: leela;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
a {
color: rgb(102,102,102);
text-decoration: none;
}
/* ID */
#container {
height: 100%;
overflow-x: hidden;
width: 100%;
}
#header {
border: 1px solid rgb(153,153,153);
border-top: 0px;
background-color: rgb(255,255,255);
padding: 8px;
position: fixed;
width: 100%;
z-index: 3;
}
#quickSearch {
border: 1px solid rgb(153,153,153);
background-color: rgb(250,250,250);
height: 30px;
margin: 8px 8px 8px 8px;
}
#quickSearch input {
background-color: rgb(250,250,250);
border: 0px;
height: 28px;
margin-left: 10px;
margin-top: 0px;
float: left;
}
#naviContainer {
float: left;
width: 200px;
border-right: 1px solid rgb(153,153,153);
background-color: rgb(225,225,225);
height: 100%;
}
#navigation {
background-color: rgb(225,225,225);
float: left;
width: 200px;
margin-top: 31px;
position: relative;
z-index: 2;
height: 100%;
}
#navigation ul {
margin: 0px;
padding: 0px;
width: 200px;
}
#navigation li {
display: block;
list-style-type: none;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navigation li:hover {
background-color: rgb(173,173,173);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navigation h1 {
border-bottom: 1px dotted rgb(153,153,153);
background-color: rgb(127,127,127);
padding: 8px;
}
#navigation h1.fix {
border-top: 1px dotted rgb(153,153,153);
}
#navigation ul li {
border-bottom : 1px dotted rgb(153,153,153);
}
#navigation li a {
display: block;
padding: 8px;
}
#contentContainer {
margin-left: 201px;
margin-top: 31px;
position: relative;
}
#breadcrumbs {
background-color: rgb(239,239,239);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(153,153,153);
padding: 8px;
position: inherit;
}
#breadcrumbs ul {
display: inline;
margin-left: 0px;
padding: 0px;
}
#breadcrumbs li {
display: inline;
}
#content {
padding: 8px;
position: inherit;
}
/* CLASSES */
.divider {
border-left: solid 1px rgb(102,102,102);
margin: 0px 7px 0px 5px;;
}
Any input would be greatly appreciated!
Try adding using position:fixed (I made it yellow so it would stand out):
#navigation {
background-color: yellow;
border-right: 1px solid #999999;
border-top: 0 none;
float: left;
height: 100%;
margin-top: 31px;
position: fixed;
width: 200px;
z-index: 2;
}
[Edit] 2nd attempt, remove height.
#navigation {
background-color: #E1E1E1;
float: left;
//height: 100%;
margin-top: 31px;
position: relative;
width: 200px;
z-index: 2;
}
that was nothing more then height:100% issue
Remove height:100% from #naviContainer will fix this.
#navigation {
background-color: #E1E1E1;
float: left;
min-height: 100%;
margin-top: 31px;
position: relative;
width: 200px;
z-index: 2;
}
#naviContainer {
background-color: #E1E1E1;
border-right: 1px solid #999999;
float: left;
min-height: 100%; /* the fix */
width: 200px;
}