Hi everyone I am having trouble getting to stay in place while I scroll, essentially making it 'fixed'. I have set the CSS to fixed, as you can see below, but the header still disappears when I scroll.
HTML PAGE
<title>Final Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.open = function(){};
window.print = function(){};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
<body>
**<div class="fixed">
<h1>Packit<br>
<style>
.col-group {
overflow: hidden;
}
.col-group > div {
padding: 1em;
}
#media screen and (min-width: 44em) {
.col-group > div {
float: left;
width: 50%;
}
.col-group > div:nth-child(odd) {
clear: left;
}
}
#media screen and (min-width: 50em) {
.col-group > div {
float: left;
width: 33.3333333%;
}
.col-group > div:nth-child(3n+1) {
clear: left;
}
.col-group > div:nth-child(odd) {
clear: none;
}
}
#media screen and (min-width: 70em) {
.col-group > div {
width: 20%;
}
.col-group > div:nth-child(odd), .col-group > div:nth-child(3n+1) {
clear: none;
}
}body h1 {
font-size: 12em;
}
body h1 {
font-size: 3em;
}
body h1 {
font-size: 16em;
}
body h1 {
font-size: 16px;
}
body h1 {
font-size: 12px;
}
</style>
<link href="../Documents/Unnamed Site 2/stylesheet2.css" rel="stylesheet" type="text/css">
Hi there. We are here to help.</h1>
</div>**
CSS PAGE
/*
colors
red: #e51837; rgb(229,24,55)
gray: #808080;
*/
/************Reset**************/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, object, iframe, fieldset {
margin: 0;
padding: 0;
border: 0;
}
input, select
{
width: 120px;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header, footer, nav, section, article, hgroup, figure {
display: block;
}
legend {
display: none;
}
/************End Reset**************/
/************Global**************/
.fixed
{ position:fixed;
top:0;
left:0;
width:100%;
margin:0 auto;
}
.form
{ position:fixed;
margin: auto;
width: auto;
line-height: 1;
}
body {
background: #fff;
color: #000;
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
padding: 0;
-webkit-text-size-adjust: none;
}
a {
color: #808080;
text-decoration: none;
}
a:hover, a:focus {
color: #e51837;
}
p {
margin: 0 0 1em;
}
img, object, video {
max-width: 100%;
border: 0;
}
a img {
border: 0;
outline: 0;
}
h1 {
font-size: 3em;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 0.2em;
}
h2 {
font-size: 2em;
line-height: 1.1;
margin-bottom: 0.2em;
}
h3 {
font-weight: normal;
line-height: 1.1;
padding-bottom: 0.4em;
border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
display: block;
color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
color: #e51837;
}
blockquote {
border-left: 0.5em solid #ddd;
padding-left: 1em;
margin-left: 1em;
}
small {
color: #e51837;
}
input[type=search] {
-webkit-appearance: none;
border-radius: 0;
}
::-webkit-input-placeholder {
color: #808080;
}
:-moz-placeholder {
color: #808080;
}
/************End Global**************/
/************Classes**************/
.inactive {
color: #ddd;
}
/************End Classes**************/
/************Structure**************/
.container {
max-width: 70em;
margin: 0 auto;
padding: 0 1em;
overflow: hidden;
}
div[role=main] {
padding-bottom: 1em;
}
/*Footer*/
footer[role=contentinfo] {
color: #fff;
background: #000;
margin: 0 -1em;
position: fixed;
z-index: 2;
}
footer[role=contentinfo] > div {
max-width: 70em;
padding: 0 1em;
margin: 0 auto;
overflow: hidden;
}
footer[role=contentinfo] p {
margin: 0;
}
footer[role=contentinfo] .nav li a {
display: block;
border-bottom: 1px solid #808080;
padding: 1em;
margin: 0 -1em;
}
footer[role=contentinfo] a {
display: inline-block;
padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
color: #fff;
}
footer[role=contentinfo] .f-rga {
padding: 0.6em 0;
}
footer[role=contentinfo] img {
max-width: 4.4em;
display: inline-block;
margin-bottom: -0.22em;
}
/*End Footer*/
/*Grid*/
.grid {
margin: 0 -1em;
overflow: hidden;
}
.grid:target {
-webkit-animation: fadeout 5s 1 ease-out;
-moz-animation: fadeout 5s 1 ease-out;
-o-animation: fadeout 5s 1 ease-out;
animation: fadeout 5s 1 ease-out;
}
.grid > h2 {
margin-left: 0.45em;
}
.grid > section {
padding: 1em 1em 0.5em;
}
.grid > section:target {
-webkit-animation: fadeout 5s 1 ease-out;
-moz-animation: fadeout 5s 1 ease-out;
-o-animation: fadeout 5s 1 ease-out;
animation: fadeout 5s 1 ease-out;
}
.grid ul {
overflow: hidden;
}
.grid ul li {
margin-bottom: 0.3em;
}
.featured:after {
content: "*";
color: #e51837;
}
/*Fluid*/
.fluid {
display: block;
margin: 0 auto;
max-width: 40em;
}
/*Homepage*/
.home h1 {
margin-bottom: 0.2em;
}
.intro {
font-size: 1.8em;
line-height: 1.2;
margin: 0 auto;
}
.intro a:hover ,.intro a:focus {
color: #000;
border-bottom-color: #000;
}
.ani {
position: relative;
height: 15em;
margin: 1em 0 0;
width: 100%;
z-index: 0;
}
.ani div {
width: 100%;
}
.ani div b {
display: block;
position: absolute;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
background: rgba(229,24,55,0.22);
}
/*Patterns*/
.mod {
padding: 1em;
}
.pattern {
background: #f7f7f7;
border-bottom: 1px solid #808080;
margin-bottom: 1em;
overflow: hidden;
}
.pattern-description h1 {
font-size: 3.4em;
margin-bottom: 0.5em;
}
.pattern-description {
max-width: 40em;
margin: 0 auto;
}
.pattern-description ul, .pattern-description ol {
margin-bottom: 2em;
}
.pattern-description li {
margin-bottom: 1em;
}
/*Blog*/
/*Blog Header*/
.blog .container {
max-width: 62em;
}
.blog header[role=banner] {
overflow: hidden;
margin-bottom: 2em;
padding: 2em 0 1em;
border-bottom: 1px solid #000;
}
.blog-logo {
font-weight: normal;
font-size: 1.2em;
margin: 0 0 1em;
}
.blog-logo img {
width: 3.3em;
}
.blog-logo a {
color: #000;
}
.search-form {
width: 100%;
margin-bottom: 1em;
}
.search-field {
width: 100%;
padding: 0.5em 0;
border: 0;
border-bottom: 1px solid #808080;
outline: none;
}
.search-field:focus {
background: #e51837;
color: #fff;
}
.search-field:focus::-webkit-input-placeholder {
color: #fff;
}
.search-field:focus :-moz-placeholder {
color: #fff;
}
.blog .nav {
clear: both;
}
.blog .nav a {
display: block;
font-weight: bold;
color: #000;
}
.blog .nav a:hover {
color: #e51837;
}
/*Posts*/
.posts ol > li {
padding-bottom: 1em;
border-bottom: 1px solid #ccc;
margin-bottom: 1em;
overflow: hidden;
}
.posts h2 {
font-size: 1.4em;
margin: 0.28em 0 0.1em;
font-weight: normal;
}
.posts h2 a {
color: #000;
}
.posts h2 a:hover, .posts h2 a:focus {
color: #e51837;
}
.permalink {
display: block;
font-size: 0.8em;
margin-bottom: 1.2em;
}
.post-body a {
border-bottom: 1px solid #ccc;
}
.posts blockquote {
margin: 0 0 1em;
color: #666;
border-left: 0.25em solid #ccc;
padding-left: 1em;
}
.tags {
float: left;
}
.tags li {
display: inline-block;
font-size: 0.8em;
margin-right: 0.5em;
}
.posts ol > li .tags a, .permalink {
color: #ccc;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
-ms-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
}
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
color: #808080;
}
.blog-nav {
text-align: center;
overflow: hidden;
padding: 1em 0;
}
.posts .blog-nav a {
border: 0;
}
.nav-next {
float: right;
}
.nav-prev {
float: left;
}
/* Sidebar */
.sidebar {
font-size: 0.8em;
padding-bottom: 1.4em;
}
.sidebar div {
margin-bottom: 2em;
}
.sidebar h3 {
font-weight: bold;
font-size: 0.9em;
line-height: 1;
border-bottom: 1px solid #000;
}
.sidebar a {
color: #808080;
}
.sidebar a:hover, .sidebar a:focus {
color: #e51837;
}
.social-links {
overflow: hidden;
}
.social-links li {
float: left;
margin-right: 1.2em;
}
.social-links li a {
display: block;
height: 17px;
width: 16px;
text-indent: -99999em;
background: url(images/sprite_social.png) no-repeat;
}
.social-links li a.s-fb {
background-position: -0px -76px;
}
.social-links li a.s-fb:hover {
background-position: -16px -76px;
}
.social-links li a.s-twitter {
background-position: -0px -37px;
}
.social-links li a.s-twitter:hover {
background-position: -16px -37px;
}
.social-links li a.s-linkedin {
background-position: -0px -113px;
}
.social-links li a.s-linkedin:hover {
background-position: -16px -113px;
}
.social-links li a.s-rss {
background-position: -0px -0px;
}
.social-links li a.s-rss:hover {
background-position: -16px -0px;
}
.top {
clear: both;
display: block;
padding: 1em 0;
}
.top:before {
content: '▲';
}
/******Media Queries*******/
/* Medium Screens*/
#media all and (min-width: 35em) {
.blog-logo {
float: left;
font-size: 2em;
margin: 0 0 1em;
}
.blog-logo img {
width: auto;
}
}
#media all and (min-width:40em) {
h1 {
font-size: 5.6em;
}
.container {
padding-bottom: 4em;
}
footer[role=contentinfo] {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
footer[role=contentinfo] .nav {
float: left;
}
footer[role=contentinfo] .nav li {
display: inline-block;
margin-right: 0.8em;
}
footer[role=contentinfo] .nav li a {
border: 0;
}
footer[role=contentinfo] .f-rga {
float: right;
}
.grid ul li {
width: 50%;
float: left;
}
.grid ul li:nth-child(odd) {
padding-right: 1em;
clear: left;
}
.ani {
position: absolute;
top: 0;
right: 0;
bottom: 4em;
left: 0;
width: 100%;
height: 90%;
margin: 0;
z-index: 0;
}
.home {
position: absolute;
top: 0;
right: 0;
bottom: 5em;
left: 0;
z-index: 1;
width: 100%;
height: 90%;
display: table;
text-align: center;
color: #fff;
color: rgba(255,255,255,0.7);
}
.home > div {
display: table-cell;
vertical-align: middle;
}
.home .intro a {
color: #fff;
color: rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(255,255,255,0.8);
}
.home .intro a:hover, .home .intro a:focus {
color: #000;
border-bottom-color: #000;
}
/*Blog*/
.search-form {
float: right;
width: 30%;
max-width: 16em;
padding-left: 0.8em;
margin-top: 0.4em;
}
.posts {
float: left;
width: 64%;
}
.sidebar {
float: right;
width: 30%;
max-width: 21em;
margin: 0 0 1em;
padding-left: 0.8em;
}
}
/* Large Screens */
#media all and (min-width: 54em) {
h1 {
font-size: 6.4em;
}
.grid > section {
float: left;
width: 33.3333333%;
}
.grid > section:nth-of-type(3n+1) {
clear: left;
}
.grid ul li {
width: auto;
float: none;
}
.grid ul li:nth-child(odd) {
padding-right: 0;
}
}
/* CSS Animations */
#-webkit-keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
#-moz-keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
#-o-keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
#keyframes fadeout {
0% { background: #fff; }
10% { background: #eee; }
100% { background: #fff; }
}
The problem in your case is the formatting of your HTML-Code, so improve it like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../Documents/Unnamed Site 2/stylesheet2.css" rel="stylesheet" type="text/css">
<script>
window.open = function(){};
window.print = function(){};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
<style>
.col-group {
overflow: hidden;
}
.col-group > div {
padding: 1em;
}
// ... AND SO ON... //
</style>
<title>JS Bin</title>
</head>
<body>
<div class="fixed">
<h1>Packit</h1><br> // YOU DON'T CLOSED HERE THE H1 TAG
</div>
</body>
</html>
And why don`t you put your css style in an extern file instead of embedded style sheet?
The reason you're having this problem is because you're HTML code is incorrectly formatted. You have the CSS stylesheet "Stylesheet2.css" in the body section and unfortunately external style sheets need to be linked to in the head or else they don't work. The same cannot be said for however it is common practice to also put in the section of the page too.
I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
.fixed {
position: fixed;
background: white;
border-bottom: 2px solid #eaeaea;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
height: 80px;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
Related
Probably pretty basic question but I'm having issues with it. I'm using bootstrap design for website that I'm making. By default, website didn't have any image sliders.
After adding in img slider, it appears that my navigation bar is always above it and never over the slider, which I don't like. Here's example:
This is how it looks at the moment when you load up the page
And this is how I want it to look when you load the page (note that It works fine when i scroll down a bit)
So basicly my navigation works just fine, It's just not on top of the slider.
I'll include whole .css file that has everything, I linked an image to the slider and created navbar that sits on top (Opacity is 0.7).
I just want to make it sit on top of the slider at start and continue being on top of everything as I scroll (Note scrolling will not work in snippet). It works fine when scrolling just start position is what I'm having problems with.
Also don't worry about the blue stuff over the image in slider. It's WIP.
.slider {
box-shadow: 0px 4px 10px #9d9d9d;
padding: 0;
margin: 0;
max-width: 100%;
max-height: 600px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
}
.slider ul {
width: 1000%;
height: 600px;
position: relative;
list-style: none;
left: 0;
margin: 0;
padding: 0;
line-height: 0;
-moz-animation:slide-animation 5s infinite;
-webkit-animation:slide-animation 25s infinite;
}
.slider li {
width: 10%;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
border-radius: 4px;
}
span.desc1 {
position: absolute;
height: 240px;
width: 600px;
display: block;
font-size: 50px;
bottom: 250px;
left: 800px;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.7);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
span.desc2 {
position: absolute;
height: 80px;
width: 300px;
display: block;
font-size: 0.8em;
bottom: 0;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.6);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
p.desc{
color: #FFF;
}
#-webkit-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
#-moz-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
p {
line-height: 1.55;
color: #333;
font-size: 400;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 62px;
}
h2 {
font-size: 30px;
margin-bottom: 65px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
/* ==================================================
General
================================================== */
a {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
/* ==================================================
Elements
================================================== */
.btn {
background-color: #2f76ab;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 800;
color: #fff;
padding: 15px 45px;
border-radius: 50px;
}
.btn:hover {
background-color: #E04F00;
color: #fff;
}
.btn:focus {
color: #fff;
}
.btn-ghost {
border: 3px solid #fff;
background-color: transparent;
}
.btn-ghost:hover {
background-color: #fff;
color: #2f76ab;
}
section {
padding: 85px 0;
}
.card {
position: relative;
padding: 0;
border: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
}
a:hover {
text-decoration: none !important;
}
.scrolltop {
display: none;
position: fixed;
bottom: 15px;
right: 15px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #199EB8;
color: #fff;
text-align: center;
font-size: 24px;
}
.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
color: #fff !important;
opacity: .75;
}
/* ==================================================
Hero Styling
================================================== */
.hero {
display: table;
position: relative;
background-image: url(../img/cover.jpg);
background-size: cover;
padding: 150px 0;
color: #fff;
width: 100%;
height: 100vh;
}
.hero:after {
content: '';
z-index: 0;
position: absolute;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.hero .container {
position: relative;
z-index: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.hero-brand {
margin-bottom: 75px;
display: inline-block;
}
.hero-brand:hover {
opacity: .75;
}
.tagline {
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 26px;
margin: 45px 0 75px 0;
color: #fff;
}
/* ==================================================
Header Styling
================================================== */
#header {
background: rgba(47, 118, 171, 0.7);
height: 70px;
}
#header #logo {
margin: 14px 25px 0 0;
}
#header #logo h1 {
font-size: 36px;
margin: 0;
padding: 2px 0;
line-height: 1;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
#header #logo h1 a, #header #logo h1 a:hover {
color: #fff;
}
#header #logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
#media (max-width: 768px) {
#header {
height: 50px;
}
#header #logo {
margin: 10px 0 0 0;
}
#header #logo h1 {
padding: 2px 0;
font-size: 26px;
}
#header #logo img {
max-height: 30px;
}
}
#header .social-nav {
margin-top: 15px;
}
#header .social-nav a {
font-size: 24px;
margin-left: 15px;
color: #fff;
}
#header .social-nav a:hover {
color: rgba(255, 255, 255, 0.75);
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu > li {
float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
margin: 0;
}
#media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}
/* Nav Meu Styling */
.nav-menu a {
padding: 22px 15px 18px 15px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
outline: none;
}
.nav-menu a:hover, .nav-menu li:hover > a, .nav-menu .menu-active > a {
color: rgba(255, 255, 255, 0.75);
}
.nav-menu ul {
margin: 4px 0 0 15px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}
.nav-menu ul li {
background: #fff;
border-top: 1px solid #f4f4f4;
}
.nav-menu ul li:first-child {
border-top: 0;
}
.nav-menu ul li:hover {
background: #199EB8;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.nav-menu ul li a {
color: #333;
-webkit-transition: none;
-o-transition: none;
transition: none;
padding: 10px 15px;
}
.nav-menu ul li a:hover {
color: #fff;
}
.nav-menu ul ul {
margin: 0;
}
/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 8px 10px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #fff;
}
#media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}
/* ==================================================
About styling
================================================== */
.about h2{
color: #2f76ab;
}
img.tbasr{
width: 50%;
height: 50%;
margin: 10px;
float: right;
}
img.tbasl{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Features Styling
================================================== */
.features {
padding-bottom: 45px;
}
.features h2 {
color: #2f76ab;
}
.features img {
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #199EB8;
}
#mobile-nav ul .menu-item-active {
color: #199EB8;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.6);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
/* ==================================================
Stats Styling
================================================== */
.stats-row {
margin-top: 65px;
}
.stats-col .circle {
display: inline-block;
width: 160px;
height: 160px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 500;
color: #666;
border: 6px solid #2f76ab;
border-radius: 50%;
padding: 55px 25px 0 25px;
position: relative;
}
.stats-col .circle .stats-no {
color: #fff;
width: 75px;
height: 75px;
line-height: 70px;
top: -25px;
right: -15px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 18px;
background-color: #E04F00;
position: absolute;
border-radius: 50%;
font-weight: 700;
}
/* ==================================================
Call-to-action Styling
================================================== */
.cta {
background-color: #2f76ab;
padding: 25px 0;
}
.cta h2 {
margin-bottom: 5px;
}
.cta h2,
.cta p {
color: #fff;
}
.cta p {
margin-bottom: 0;
opacity: .75;
}
.cta .btn-ghost {
position: relative;
top: 13px;
}
/* ==================================================
Portfolio Styling
================================================== */
.portfolio {
background-color: #edf6ff;
padding-bottom: 0;
}
.portfolio h2 {
color: #2f76ab;
margin-bottom: 25px;
}
.portfolio-grid {
margin-top: 65px;
}
.portfolio-grid .row {
margin: 0;
}
.portfolio-grid .row > div {
padding: 0;
}
.portfolio-grid .row > div .card img {
width: 100%;
}
.portfolio-grid .row > div .card .portfolio-over {
position: absolute;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.portfolio-grid .row > div .card .portfolio-over > div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.portfolio-grid .row > div .card .portfolio-over .card-title {
color: #fff;
font-size: 30px;
}
.portfolio-grid .row > div .card .portfolio-over .card-text {
color: #fff;
opacity: .75;
padding: 0 45px;
}
.portfolio-grid .row > div .card:hover .portfolio-over {
opacity: 1;
visibility: visible;
}
.portfolio img{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Team Styling
================================================== */
.team h2 {
color: #199EB8;
}
.team .col-sm-3 {
padding: 0;
}
.team .card > a {
display: block;
}
.team .card img {
width: 100%;
}
.team .card h4 {
color: #fff;
text-transform: uppercase;
}
.team .card p {
font-size: 11px;
color: #fff;
opacity: .75;
margin: 0;
padding: 0 35px;
}
.team .card .social-nav {
margin-bottom: 45px;
}
.team .card .social-nav a {
color: #fff;
font-size: 16px;
margin: 0 4px;
}
.team .card .social-nav a:hover {
opacity: .75;
}
.team .card:hover .team-over {
opacity: 1;
visibility: visible;
}
.team .card:hover .card-title-wrap {
background-color: #199EB8;
}
.team .card:hover .card-title-wrap .card-title, .team .card:hover .card-title-wrap .card-text {
color: #fff;
}
.team .team-over {
padding-top: 45px;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.team .card-title-wrap {
padding: 15px 25px;
position: relative;
z-index: 9;
background-color: #fff;
}
.team .card-title-wrap .card-title, .team .card-title-wrap .card-text {
font-family: "Raleway", Helvetica, Arial, sans-serif;
display: block;
margin: 0;
}
.team .card-title-wrap .card-title {
font-size: 24px;
color: #333;
}
.team .card-title-wrap .card-text {
font-size: 18px;
color: #999;
}
/* ==================================================
Contact Section
================================================== */
#contact {
background: #f7f7f7;
padding: 80px 0;
}
#contact h2 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #199EB8;
}
#contact .info i {
font-size: 32px;
color: #199EB8;
float: left;
}
#contact .info p {
padding: 0 0 10px 50px;
line-height: 24px;
}
#contact .form #sendmessage {
color: #199EB8;
border: 1px solid #199EB8;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
display: block;
}
#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#contact .form input, #contact .form textarea {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#contact .form button[type="submit"] {
background: #199EB8;
border: 0;
padding: 10px 24px;
color: #fff;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#contact .form button[type="submit"]:hover {
background: #23c2e1;
}
/* ==================================================
Footer Styling
================================================== */
.site-footer {
background-color: #111;
padding: 0;
}
.site-footer h2, .site-footer p {
color: #fff;
}
.site-footer p {
opacity: .75;
line-height: 2.0925;
}
.site-footer h2,
.site-footer .btn {
margin-bottom: 25px;
}
.site-footer .social-nav a {
color: #fff;
opacity: .25;
}
.site-footer .social-nav a:hover {
opacity: 1;
}
.site-footer .bottom {
background-color: #000;
padding: 20px 0;
}
.site-footer .bottom .list-inline, .site-footer .bottom p {
margin: 0;
}
.site-footer .bottom .list-inline {
position: relative;
top: 5px;
}
.site-footer .bottom .list-inline a {
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
margin-right: 15px;
}
.site-footer .bottom .list-inline a:hover {
color: #199EB8;
}
.site-footer .credits {
color: #ddd;
}
.site-footer .credits a {
color: #199EB8;
}
/* ==================================================
Responsive Styling
================================================== */
#media (max-width: 61.9em) {
section,
.block,
.cta {
padding: 35px 0;
}
.features {
padding-bottom: 5px;
}
p,
.block p {
margin: 0;
}
.hero-brand {
margin-bottom: 35px;
}
.tagline {
margin: 35px 0;
}
h1 {
font-size: 32px;
margin: 0;
}
h2,
.tagline {
font-size: 24px;
}
h2 {
margin-bottom: 25px;
}
h3 {
font-size: 14px;
}
.hero {
padding: 75px 0;
}
.stats-col {
margin-bottom: 25px;
}
.block {
height: auto;
}
.feature-col {
padding-bottom: 30px;
}
.portfolio-grid .card h3.card-title {
font-size: 18px !important;
}
.portfolio-grid .card .card-text {
font-size: 13px;
}
.team .team-over {
padding-top: 20px;
}
.team .card .social-nav {
margin-bottom: 15px;
padding: 0;
}
.site-footer .social-nav {
margin-bottom: 35px;
}
.site-footer .list-inline {
text-align: center;
padding-bottom: 15px;
}
.site-footer .list-inline li {
display: inline-block;
}
}
#media (max-width: 767px) {
.block {
padding-left: 30px;
padding-right: 30px;
}
}
<!-- Header -->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<img src="img/logo-nav.png" alt="" title="" /></img>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><?php echo $lang['nav_tbas']; ?></li>
<li><?php echo $lang['nav_hansaworld']; ?></li>
<li><?php echo $lang['nav_solutions']; ?></li>
<li><?php echo $lang['nav_about']; ?></li>
<!--<li class="menu-has-children">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="menu-has-children">Drop Down 2
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
<li>Drop Down 5</li>
</ul>
</li>-->
<li><?php echo $lang['nav_contact']; ?></li>
<li><?php echo $lang['nav_support']; ?></li>
</ul>
</nav>
<!-- #nav-menu-container -->
<nav class="nav social-nav pull-right hidden-sm-down">
<i class="fa fa-facebook"></i>
<i class="fa fa-envelope"></i>
</nav>
</div>
</header>
<!-- /header -->
<!-- Slider -->
<div class="slider">
<ul>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc1">
<p class="desc1"><div id="slide01">You are awesome<div></p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc2">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
</ul>
</div>
<!-- /Slider -->
Using position: absolute on #header will take it out of the static layout flow and the slider should "slide" up, so to say. You will also need to specify the width since it's out of the flow: width: 100% or width: 100vwshould work. For good measure you should also add top: 0 and left: 0.
You will probably need to set a z-index as well.
Note, I am not very familiar with Bootstrap and there might be a more "Bootstrap-way" to accomplish this, but it should work.
Also note, that I do not know if this will mess with the plugin, you use, that makes the header fixed.
I have set up a page with Wordpress in which thumbnails are displayed for all posts along with the respective post's title as a link to the post itself. The thumbnail images are links to the post as well.
The current version of the site can be seen here: http://udkdev.skopec.de/category/projekte/
Can someone explain to me, why all of the thumbnail images slightly shift when being hovered over? I thought I might have messed up something with the margins, the padding or the border, but after going through the site's CSS multiple times, I can't make out the mistake. Here's the code of the site itself along with the theme's CSS:
<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-projekte">
<div class="projekte">
<div class="button-group filters-button-group">
<button class="active btn" id="all">alle</button>
<button class="projekt-btn btn" id="category-wise-201516">WiSe 15/16</button>
<button class="projekt-btn btn" id="category-sose-15">SoSe 15</button>
<button class="projekt-btn btn" id="category-wise-201415">WiSe 14/15</button>
<button class="projekt-btn btn" id="category-sose-14">SoSe 14</button>
<button class="projekt-btn btn" id="category-wise-201314">WiSe 13/14</button>
<button class="projekt-btn btn" id="category-sose-2013">SoSe 13</button>
<button class="projekt-btn btn" id="category-wise-201213">WiSe 12/13</button>
<button class="projekt-btn btn" id="category-sose-2012">SoSe 12</button>
</div>
<?php if (is_home()) {
query_posts("cat=-3");
} ?>
<?php if (have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<div <?php post_class(); ?>>
<p><?php the_title(); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
} ?>
</a>
<!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Couldn’t find any articles!</h2>
<?php endif; ?>
</div>
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(300);
} else {
var $el = $('.' + this.id).fadeIn(300);
$('.projekte > .post').not($el).fadeOut(300);
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
<?php get_footer(); ?>
The CSS of the site's WP-Theme:
/* -------------------------------- Default WP classes */
* {
/*cursor: url('kvscursor-01-4.png'), auto; */
/*cursor: -webkit-image-set(url("kvscursor-01-4.png") 1x, url("kvscursor-01-4x2.png") 2x) 0 0, auto;*/
}
html {
font-size: 62.5%; }
body {
font-size: 1.7em;
line-height: 1.5;
letter-spacing: 0.6px;
/* background: #6f6;*/
color: #fff;
background: #111;
/* -webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto; */
}
a {
color: white;
}
.wrapper {
max-width: 100%;
margin: 1em 1em 0 1em;
position: relative; }
.wrapper h1 {
font-family: 'News Gothic W01 Bold';
}
.wrapper a:link, a:visited {
/*color: #fff;*/
text-decoration: none;
}
.post-navigation {
/*display: flex;*/
margin-top: 10em;
max-width: 750px;
}
.post-navigation a, .top a, .back a {
color: rgba(255, 255, 255, 1);
border-bottom: 0px solid #ffffff;
padding-bottom: 0px;
}
.post-navigation a:hover, .top a:hover, .back a:hover {
color: rgb(255, 255, 255);
border-bottom: 1px solid #ffffff;
}
.menu a {
color: white
}
.menu a:hover {
border-bottom: 1px solid white;
/*padding-bottom: 0px;*/
}
.projekte a:link, a:visited {
text-decoration: none; }
.projekte a: {
/*border-bottom: 0px solid white;*/
}
.btn {
margin-top: 7px;
padding-bottom: 1px;
color: white;
}
.btn:hover {
border-bottom: 1px solid white;
padding-bottom: 1px;
cursor: pointer;
}
.projekt-btn {
margin-top: 7px;
padding-bottom: 1px;
color: white;
}
.projekt-btn:hover {
color: white;
border-bottom: 1px solid white;
padding-bottom: 1px;
cursor: pointer;
}
.footer-left {
float: left;
margin-left: 0%;
}
.footer-center {
float: right;
margin-left: 0;
}
.footer-right {
float: right;
margin-right: 0;
}
/* NAVIGATION */
nav.menu .current-menu-parent a:link, nav.menu .current-menu-parent a:visited, nav.menu .current-menu-item a:link, nav.menu .current-menu-item a:visited {
position: relative; }
nav.menu .current-menu-parent a:link:after, nav.menu .current-menu-parent a:visited:after, nav.menu .current-menu-item a:link:after, nav.menu .current-menu-item a:visited:after {
position: absolute;
height: 1px;
background: #fff;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -2px;
}
nav.menu li.menu-item {
margin-right: 0.5em; }
/* nav.menu li.menu-item:hover {
position: relative; }
nav.menu li.menu-item:hover:after {
position: absolute;
height: 0.5px;
background: #fff;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -2px; } */
nav.menu .menu-main_menu-container .menu li.menu-item {
display: inline; }
nav.menu .menu-main_menu-container .menu li.home {
display: block; }
nav.menu .menu-main_menu-container .menu li.home a:link {
font-family: 'News Gothic W01 Bold'; }
nav.menu .menu-main_menu-container .menu .sub-menu {
display: none; }
nav.menu .sub-item li {
display: inline; }
/* PAGE + BLOG*/
/*.content a {
color: #fff;}*/
.content {
margin-top: 1.5em; }
.content h2 {
font-family: 'News Gothic W01 Bold';
margin-bottom: 1.5em; }
.content h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.content p {
margin-bottom: 1.5em;
max-width: 700px; }
.content ul.page-list {
list-style: disc;
margin-left: 1em; }
.content .post {
width: 100%; }
.content .post img.wp-post-image {
margin-bottom: 1.5em; }
.content .post p img.alignnone {
max-width: 55vw;
height: auto;
margin-bottom: 0.5em; }
.content .post .wp-caption {
font-family: 'LetterGothicW01-Regular';
margin: 1.5em 0; }
.content .page {
position: relative; }
.content .page .alignnone {
position: relative;
width: 100% !important; }
.content .page .alignnone img {
width: 100%;
max-width: 1000px;
height: auto; }
/* STUDIERENDE */
.wrapper-studierende {
margin: 0 0em; }
.wrapper-studierende .button-group {
margin: 0 0 1.5em 0; }
.wrapper-studierende .button-group button {
background: none;
margin-right: 1.5em;
border-bottom: 1px solid black;
}
.wrapper-studierende .button-group button:hover {
position: relative;
border-bottom: 1px solid white;
}
.wrapper-studierende .button-group button:hover:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-studierende .button-group button:focus {
outline: 0;
text-decoration: none;
}
.wrapper-studierende .button-group button.active {
position: relative;
border-bottom: 1px solid white;
text-decoration: none;
}
.wrapper-studierende .button-group button.active:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px;
text-decoration: none;
}
.wrapper-studierende .post {
width: 23.25%;
float: left;
margin-right: 2.3%;
margin-bottom: 2.3%; }
.wrapper-studierende .post h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.wrapper-studierende .post:hover h2 a:link, .wrapper-projekte .post:hover h2 a:visited {
position: relative; }
.wrapper-studierende .post:hover h2 a:link:after, .wrapper-projekte .post:hover h2 a:visited:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-studierende .post:nth-child(4n+1) {
margin-right: 0; }
.wrapper-studierende .post img {
width: 100%;
height: auto;
transition: all 400ms;
}
.wrapper-studierende .post img:hover {
/*opacity: 0.8;*/
}
.wrapper-studierende .post .meta {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-studierende .post .meta a:link {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-studierende .navigation {
display: none; }
.content-studierende {
margin-top: 1em;
}
.content-studierende a:hover {
border-bottom: 1px solid white;
}
.content-studierende h2 {
margin-bottom: 1.5em;
}
/* .content-studierende h2 a:link {
font-family: 'News Gothic W01 Bold';
}*/
.content-studierende .columns {
margin-bottom: 1.5em;
}
.content-studierende .columns p a:link:after {
content: '\0020\2192';
}
.content-studierende img {
margin-bottom: 1.5em;
}
/* PROJEKTE */
.wrapper-offset-fix {
/*margin: 0 1em;*/
transform: translate(1em, 0);
}
.wrapper-projekte {
margin: 0 0em; }
.wrapper-projekte .button-group {
margin: 0 0 1.5em 0; }
.wrapper-projekte .button-group button {
background: none;
margin-right: 1.5em;
border-bottom: 1px solid black;
}
.wrapper-projekte .button-group button:hover {
position: relative;
border-bottom: 1px solid white;
}
.wrapper-projekte .button-group button:hover:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-projekte .button-group button:focus {
outline: 0;
text-decoration: none;
}
.wrapper-projekte .button-group button.active {
position: relative;
border-bottom: 1px solid white;
text-decoration: none;
}
.wrapper-projekte .button-group button.active:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px;
text-decoration: none;
}
.wrapper-projekte .post {
width: 23.25%;
float: left;
margin-right: 2.3%;
margin-bottom: 2.3%; }
.wrapper-projekte .post h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.wrapper-projekte .post:hover h2 a:link, .wrapper-projekte .post:hover h2 a:visited {
position: relative; }
.wrapper-projekte .post:hover h2 a:link:after, .wrapper-projekte .post:hover h2 a:visited:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-projekte .post:nth-child(4n+1) {
margin-right: 0; }
.wrapper-projekte .post img {
width: 100%;
height: auto;
transition: all 400ms;
}
.wrapper-projekte .post img:hover {
opacity: 0.8;
}
.wrapper-projekte .post .meta {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-projekte .post .meta a:link {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-projekte .navigation {
display: none; }
.post-link {
margin-bottom: 1%;
}
.post-link p:hover {
text-decoration: underline;
}
/* ----------------------------------------------------- smartphonish screens */
#media only screen and (max-width: 767px) {
.wrapper {
margin: 0.5em 0.5em 0 0.5em; }
.wrapper p, .wrapper .post {
width: 100%; }
.wrapper p img, .wrapper .post img {
width: 100%;
height: auto; }
.content p img.alignnone {
max-width: 100% !important; }
.wrapper-projekte {
margin: 0 0.5em 0.5em 0.5em; }
.wrapper-projekte .post {
float: none;
width: 100%;
margin-bottom: 1.5em; }
.wp-caption {
width: 100% !important; }
.wp-caption p.wp-caption-text {
font-family: 'LetterGothicW01-Regular'; }
.wp-caption img {
width: 100%;
height: auto; }
.page img {
max-width: 100% !important; } }
/* ----------------------------------------------------- desktopish screens */
#media only screen and (min-width: 1024px) {
.content-studierende h2 {
margin-bottom: 1.5em; }
.content-studierende h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.content-studierende .columns {
margin-bottom: 1.5em;
max-width: 700px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.content-studierende .columns p {
margin-bottom: 1.5em; }
.content-studierende img {
margin-bottom: 1.5em; }
.content p img.aligncenter {
max-width: 55vw !important;
height: auto; } }
/* -------------------------------- Browser specific CSS */
/* apply only on JavaScript enabled browsers */
/* apply only on Internet Explorer 8 */
/* apply only on Internet Explorer 9 */
/*# sourceMappingURL=style.css.map */
I'm aware that this is a very project-specific question but I simply can't make out what is causing this. Huge thanks to anyone who can help me out.
This fixed it for me in Chrome.
.wrapper-projekte .post img {
width: 100%;
height: auto;
transition: all 400ms;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
This is happening because browser is doing antialiasing. Setting backface-visibility: hidden; to .wrapper-projekte .post img will solve this.
.wrapper-projekte .post img {
width: 100%;
height: auto;
transition: all 400ms;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
For days Ive been trying to correct an error in my CSS for this website. Everything is fine except for the footer area. It looks fine on desktop but as soon as its seen on small screen the footer area doesn't respond, the background colour disappears and and it gets very messy. If someone could help me id greatly appreciate it. Im no expert on CSS and am shooting in the dark.... the site is a test # http://test.apinchofsalt.ie/wp/
All i need is the simplest solution to fix it. thanks very much. Below is the relevant CSS (it includes footer widgets, site footer and media queries)
/* Footer Widgets
---------------------------------------------------------------------------------------------------- */
.footer-widgets {
background-color: #222;
color: #c8c8c8;
clear: both;
font-size: 14px;
font-size: 1.4rem;
}
.footer-widgets .wrap {
overflow: hidden;
padding: 60px 30px 30px;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
padding: 0 2.8%;
width: 33.3333333333%;
}
.footer-widgets-1,
.footer-widgets-2 {
float: left;
}
.footer-widgets-3 {
float: right;
}
.footer-widgets .widget {
margin-bottom: 30px;
word-wrap: break-word;
}
.footer-widgets a:focus {
color: currentColor;
}
.footer-widgets li {
background: url(images/icon-li-footer.png) no-repeat 0 7px;
background-size: 8px 8px;
}
.footer-widgets .search-form {
width: 100%;
}
/* Site Footer
---------------------------------------------------------------------------------------------------- */
.site-footer {
color: #222;
font-size: 12px;
font-size: 1.2rem;
padding: 40px 0;
text-align: center;
text-transform: uppercase;
}
.site-footer a {
color: #222;
}
.site-footer p {
margin: 0;
}
/* Media Queries
---------------------------------------------------------------------------------------------------- */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.search-form input[type="search"] {
background-image: url(images/icon-search#2x.png);
}
.sidebar li {
background-image: url(images/icon-li#2x.png);
}
.footer-widgets li {
background-image: url(images/icon-li-footer#2x.png);
}
.content #genesis-responsive-slider .flex-direction-nav li a {
background-image: url(images/icon-direction-nav#2x.png);
}
.content #genesis-responsive-slider .flex-control-nav li a {
background-image: url(images/icon-control-nav#2x.png);
}
.genesis-nav-menu > .rss > a {
background-image: url(images/icon-rss#2x.png);
}
.genesis-nav-menu > .twitter > a {
background-image: url(images/icon-twitter-nav#2x.png);
}
}
#media only screen and (max-width: 1200px) {
.site-container {
max-width: 960px;
}
.site-header .widget-area {
width: 700px;
}
.content {
width: 660px;
}
.sidebar-primary {
width: 300px;
}
.title-area {
width: 260px;
}
.breadcrumb {
margin: -30px -40px 30px;
}
.content {
padding: 30px 40px 10px;
}
.site-header .genesis-nav-menu a {
padding: 38px 14px 40px;
}
.content #genesis-responsive-slider .flex-control-nav,
.content #genesis-responsive-slider .flex-direction-nav li a,
.content #genesis-responsive-slider .flex-direction-nav li a.prev {
display: none;
}
}
#media only screen and (max-width: 1023px) {
.site-container {
max-width: 768px;
}
.content,
.sidebar-primary,
.sidebar-secondary,
.site-header .widget-area,
.title-area,
.wrap {
width: 100%;
}
.header-image .title-area,
.header-image .site-title,
.header-image .site-title a {
background-position: center !important;
float: none;
margin: 0 auto;
}
.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: none;
}
.genesis-nav-menu,
.site-header .search-form,
.site-header hgroup,
.site-title {
text-align: center;
}
.genesis-nav-menu a,
.genesis-nav-menu > .first > a,
.genesis-nav-menu > .last > a,
.site-header .genesis-nav-menu a {
padding: 16px;
}
.site-header .search-form {
margin: 16px auto ;
}
.genesis-nav-menu li.right {
display: none;
}
.content #genesis-responsive-slider .slide-excerpt {
display: none;
}
.sidebar .widget {
padding: 30px;
}
.comment-list li.depth-1,
.ping-list li.depth-1 {
margin: 30px 0;
}
.footer-widgets .widget-area {
padding: 0;
}
.site-footer p {
padding-left: 30px;
padding-right: 30px;
}
}
#media only screen and (max-width: 800px) {
.site-container {
max-width: 630px;
}
.five-sixths,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.four-sixths,
.home-middle .widget,
.home-top .widget,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.executive-pro-portfolio .portfolio,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.site-title {
margin-bottom: 20px;
}
/* Genesis Responsive Menus */
.js .site-header nav .wrap {
padding: 0;
}
nav.genesis-responsive-menu {
background: #fff;
display: none;
position: relative;
}
.genesis-skip-link .skip-link-hidden {
display: none;
visibility: hidden;
}
.menu-toggle,
.sub-menu-toggle {
border-radius: 0;
border-width: 0;
color: #64c9ea;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
visibility: visible;
}
.menu-toggle:focus,
.menu-toggle:hover,
.sub-menu-toggle:focus,
.sub-menu-toggle:hover {
background-color: #fff;
color: #222;
border-width: 0;
}
.menu-toggle:focus,
.sub-menu-toggle:focus {
outline: 1px solid #ccc;
outline-offset: -1px;
}
.menu-toggle {
background-color: #fff;
line-height: 20px;
margin-bottom: 1px;
position: relative;
z-index: 1000;
width: 100%;
}
.menu-toggle::before {
margin-right: 10px;
text-rendering: auto;
}
.sub-menu-toggle {
background-color: transparent;
float: right;
padding: 14px 10px 13px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.sub-menu .sub-menu-toggle {
padding: 9px 10px;
}
.sub-menu-toggle::before {
display: inline-block;
margin-top: 5px;
text-rendering: auto;
-webkit-transform: rotate( 0 );
-ms-transform: rotate( 0 );
transform: rotate( 0 );
-webkit-transition: transform .25s ease-in-out;
-ms-transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out;
}
.sub-menu-toggle.activated::before {
-webkit-transform: rotate( 180deg );
-ms-transform: rotate( 180deg );
transform: rotate( 180deg );
}
.genesis-responsive-menu ul {
border-bottom: 2px solid #f2f2f2;
}
.genesis-responsive-menu .genesis-nav-menu .menu-item {
display: block;
float: none;
position: relative;
text-align: left;
}
.genesis-responsive-menu .genesis-nav-menu .menu-item:focus,
.genesis-responsive-menu .genesis-nav-menu .menu-item:hover {
background: transparent;
position: relative;
}
.genesis-responsive-menu .genesis-nav-menu a:focus,
.genesis-responsive-menu .genesis-nav-menu a:hover {
color: #64c9ea;
}
.genesis-responsive-menu .genesis-nav-menu .menu-item a {
background: transparent;
border: none;
color: #222;
margin-bottom: 1px;
padding: 15px 20px;
width: 100%;
}
.genesis-responsive-menu .genesis-nav-menu .sub-menu {
border: none;
}
.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
.genesis-responsive-menu .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
left: 0;
margin-left: 0;
}
.genesis-responsive-menu .genesis-nav-menu > .menu-item-has-children > a::after {
content: none;
}
.genesis-responsive-menu .genesis-nav-menu .sub-menu {
clear: both;
display: none;
margin: 0;
opacity: 1;
padding-left: 15px;
position: static;
width: 100%;
}
.genesis-responsive-menu .genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}
.home-middle,
.home-top,
.genesis-pro-portfolio .pro-portfolio.entry .entry-header .entry-title {
text-align: center;
}
.home-cta .button.alignright {
float: none;
margin: 16px 0 0;
}
.footer-widgets-1 {
margin: 0;
}
}
#media only screen and (max-width: 500px) {
.entry-title {
font-size: 24px;
font-size: 2.4rem;
}
.content .entry-header .entry-meta .entry-comments-link {
display: none;
}
}
#media only screen and (max-width: 270px) {
.header-image .site-title a {
background-size: contain !important;
}
.site-title {
font-size: 26px;
font-size: 2.6rem;
}
}
In your media queries pls include the following code. The footer widgets are floated and thus need clearing for the background to wrap around properly.
.footer-widgets .wrap:after {
content: "";
display: table;
clear: both;}
So here's what I should be getting
But this is what I'm getting
As you can see the yellow section is missing. Here's my working example http://jsfiddle.net/Qk543/ but for some weird reason I cannot replicate it. Here's my code for the defective page.
<div class="wrap">
<div class="foot">
<ul class="styl">
<a id="html" href="#">
<li style="background: #F16529">
WORD
</li>
</a>
<a id="css" href="#">
<li style="background: #2AA9E0">
WORD
</li>
</a>
<a id="php" href="#">
<li style="background: #8892BF">
WORD
</li>
</a>
<a id="js" href="#">
<li style="background: #F0DB4F">
WORD
</li>
</a>
</ul>
</div>
</div>
And the CSS to it...
h1 {
padding: 80px 0 40px;
font-size: 40px;
line-height: 48px;
color: #505762;
}
.search h1 {
padding: 60px 0;
}
.slidey {
overflow: hidden;
padding: 30px 0;
background: #f3f5f8;
border-bottom: 1px solid #e5e8ed;
}
.js-enabled .slidey {
-webkit-transition: margin-top .2s;
-moz-transition: margin-top .2s;
transition: margin-top .2s;
}
.slidey b, .slidey label {
display: block;
font-weight: 500;
padding-bottom: 15px;
font-size: 15px;
font-weight: 500;
}
.slidey form, .slidey aside {
float: left;
width: 50%;
}
.slidey form input {
padding: 20px;
width: 75%;
}
.slidey li {
list-style: none;
}
.slidey a {
display: block;
text-decoration: none;
color: #717985;
}
.slidey a:hover {
color: #414b59;
}
.slidey li span {
float: right;
opacity: .6;
}
#top {
overflow: hidden;
padding: 20px 35px;
background: #fff;
border-bottom: 1px solid rgba(22,36,54,.1);
}
#top a {
float: left;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #8895a7;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover {
color: #4171b1;
}
#top ul {
list-style: none;
float: right;
}
#top ul li {
float: left;
padding-left: 40px;
}
#top ul a {
display: inline-block;
color: #555f6d;
}
#top ul img {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
width: 16px;
height: 16px;
opacity: .4;
}
#top ul a:hover img {
opacity: .7;
}
#top ul a.active img {
opacity: 1;
}
/**
* Index page listing, category listing, search page results
*/
.items {
list-style: none;
}
.items > li {
padding: 70px 0 60px;
color: #97aec9;
background: #3c4552;
}
.posts .items > li:first-child {
background: #fff !important;
padding: 110px 0;
}
.items li h1 a, .posts .items > li:first-child h2 a {
color: #3d4551;
}
.items h1 {
padding: 0 0 8px;
}
.items h1 a {
text-decoration: none;
}
.items h2 {
font-size: 32px;
line-height: 41px;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: rgba(176,200,236,.8);
text-decoration: none;
}
.items h2 a:hover {
color: #fff;
}
.items .content {
padding: 10px 0 0;
}
.items .content p {
padding-bottom: 15px;
}
/**
* Pagination
*/
.pagination {
overflow: hidden;
padding: 30px 0;
margin-bottom: 50px;
border-top: 1px solid rgba(22,36,54,.1);
border-bottom: 1px solid rgba(22,36,54,.1);
}
.pagination:empty {
display: none;
}
.pagination a {
float: left;
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: #6f7b8b;
}
.pagination a:hover {
color: #3c4857;
}
.pagination a.next {
float: right;
}
/**
* Give some extra space to single-page wrappers
*/
.content.wrap {
padding-bottom: 50px;
}
.content.wrap ul, .content.wrap ol, .items li ul {
padding: 20px 30px;
}
.content.wrap ul ul, .content.wrap ol ol, .items li ul ul {
padding: 0 20px;
}
/**
* Footnotes and straplines
*/
.footnote, .commentlist time, .items footer {
display: block;
padding: 5px 0 15px;
color: #98a2b1;
font-size: 14px;
font-style: italic;
white-space: nowrap;
}
.footnote {
padding: 20px 0 40px;
}
/**
* Comment form
*/
ul.commentlist {
margin-bottom: 40px;
list-style: none;
border-top: 1px solid rgba(22,36,54,.1);
}
ul.commentlist .wrap {
position: relative;
}
ul.commentlist li {
padding: 40px 0;
border-bottom: 1px solid rgba(22,36,54,.1);
}
ul.commentlist time {
font-size: 13px;
}
ul.commentlist h2 {
font-size: 25px;
line-height: 33px;
}
ul.commentlist .counter {
position: absolute;
right: 0;
top: 0;
font-size: 25px;
font-weight: 300;
color: #cdd2da;
}
#comment {
overflow: hidden;
}
#comment label[for] {
display: none;
}
#comment p {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 10px;
text-indent: 0;
}
#comment p + p {
margin-right: 0;
}
#comment p.textarea {
float: none;
width: 100%;
}
#comment input, #comment textarea {
width: 100%;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
border: 1px solid rgba(22,36,54,.2);
border-radius: 4px;
}
#comment input:focus, #comment textarea:focus {
outline: none;
background: #f7f9fc;
}
#comment textarea {
min-height: 150px;
max-height: 800px;
resize: vertical;
}
#comment button {
display: inline-block;
padding: 9px 18px;
background: #4e82ce;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
#comment button:hover {
background: #3c6eb7;
}
*{padding:0;margin:0;}
body {
text-align: center;
padding-top: 50px;
font-family: "Helvetica Neue", sans-serif;
}
.foot{
bottom: 0px;
position: fixed;
width:100%;
margin: 0px;
font-weight: 400;
}
.foot li{
opacity: 0.95;
position: relative;
float: left;
list-style: none;
width: 25%;
height: 60px;
text-align: center;
}
.foot a{
font-size: 1.5em;
color: #fff;
height: 75px;
position: relative;
text-indent: 0;
text-decoration: none;
line-height: 60px;
}
.foot li:nth-child(1){
background: #B36C4E;
}
.foot li:nth-child(2){
background: #2AA9E0;
}
.foot li:nth-child(3){
background: #8892BF;
}
.foot li:nth-child(4){
background: #F0DB4F;
}
a:link{text-decoration: none}
a:hover{text-decoration: none}
a:visited{text-decoration: none}
a:active{text-decoration: none}
.content {
padding-right: 5%;
padding-left: 5%;
}
Any ideas?
You're using floats, so there's a good chance your last element is a pixel or so too wide for the container it's in and it's floating to the next line.
Try changing the width to 24% on each element and you'll probably see all four.
If you don't want to play with the width, try adding this to your css:
* {
box-sizing: border-box;
}
That includes any padding/margin in the width so that 25% width will be the true width instead of 25% plus padding/margin.
I am using a joomla template with a built-in dropdown menu wich doesn't have many options.
This is how i want my menu to look like:
http://i.stack.imgur.com/GMdIc.png
I tried many tricks like making 2-3 or 4 columns but if a "continent" has less countries to be shown then the next item appears in the same continent. How do i make it to be like a table from the 1st image? Thanks
This is the css code in my menu: http://jsfiddle.net/AUCGy/
.gf-menu {
// Menu positioning margin: 0px auto 0;
list-style: none;
// Clears &:after {
display: table;
content:'';
clear: both;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
hover {
background:#000;
}
// Basic font stuff .item {
font-size: #menuFontSize;
line-height: #menuLineHeight;
color: #000000;
padding: 10px 15px;
text-align: left;
text-shadow: 1px 1px 0 #menuTextShadow;
text-decoration: none;
display: block;
outline1: 0;
cursor: pointer;
.transition(background 0.2s ease-out, border 0.2s ease-out);
// Subtext styling &.subtext {
> em {
bottom: -42px;
height: 42px;
font-size: #menuFontSize + 2;
color: #000000;
font-style: normal;
}
}
// Menu icon tweaks &.icon {
[class^="icon-"], [class*=" icon-"] {
background-image: none !important;
width: auto;
&:before {
text-indent: 0;
margin-right: 5px;
}
}
}
// Menu Image tweaks .menu-image {
max-width: inherit;
vertical-align: text-top;
margin-top: 0px;
margin-left: -2px;
}
}
// Level 1 Style Overrides &.l1 {
> li.active {
}
> li > .item {
font-size: #menuFontSize + 3;
line-height: #menuLineHeight + 2;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 1px;
padding-right: 1px;
position: relative;
&.subtext {
padding-top:1px;
padding-bottom: 4px;
}
.menu-image {
margin-top: -1px;
}
}
}
// Default items li {
float: left;
display: block;
text-align: center;
position: relative;
padding: 0;
border: none;
border: none;
margin-right: 10px;
}
// Parent items li.parent {
> .item {
position: relative;
&:after {
color: #menuArrowColor;
position: absolute;
right: 6px;
top: 50%;
margin-top: -12px;
font-family: FontAwesome;
// content:"\f0d7";
// icon-caret-down content: none;
// icon-chevron-down font-size: 25px;
}
}
}
// Dropdown styling .dropdown {
margin: 0 auto;
margin-left: 1px;
padding: 0px 0;
position: absolute;
opacity: 0;
left: -999em;
text-align: left;
border: none;
background: #FAEFAA;
.transition(opacity 0.2s ease-out);
.border-radius(0 !important);
.box-shadow(#menuFullShadow);
z-index: 1000;
.flyout {
display: block;
}
ul {
li {
display:block;
float:none;
font-size: 20px;
margin-right: 0;
padding: 0 0px;
border: 0;
border-bottom: 1px solid #menuDropdownborderbottom;
&.active {
> .item {
color: #menuTextHover;
background:#fff url(templates/insightfx/images/icons/afri.png) no-repeat 0 -20px;
}
}
.item {
color: #000000 !important;
text-shadow1: 1px 1px 0 #menuTextShadow1 !important;
font-size: 12px;
}
&.parent {
> .item:after {
margin-top: -10px;
font-family: FontAwesome;
// content:"\f0da";
// icon-caret-right content:"\f054";
// icon-chevron-right font-size: 25px;
}
}
}
}
// Grouped styling .grouped {
&.parent {
> .item {
.border-fixer {
display:none;
}
&:after {
font-family: FontAwesome;
// content:"\f0d7";
// icon-caret-down content:"\f078";
// icon-chevron-down font-size: 11px;
}
}
}
ol {
background: #menuActiveBack;
border: 1px solid #menuActiveBorder;
.box-shadow(#menuActiveShadow);
margin: 0px 0px;
padding: 0px 0;
> li {
> .item {
font-size: #menuFontSize - 1;
padding-top: 3px;
padding-bottom: 3px;
}
}
}
}
// Module styling .modules {
text-align: left;
color: #moduleTextColor;
.module-content {
padding: 5px 10px;
h1, h2, h3, h4, h5 {
color: #moduleHeaderColor;
}
a {
color: #moduleLinkColor;
}
p {
margin: 0 0 10px 0;
font-size: #menuFontSize - 1;
line-height: #menuLineHeight - 3;
}
}
}
}
// Flyout Dropdown (3rd Level +) .flyout {
border-top: 1px solid #menuBorder;
}
// Columns .column {
float: left;
position: relative;
}
// Alignment Helpers .position-left {
float: left;
margin-right: 15px;
}
.position-right {
float: right;
margin-left: 15px;
}
// Splitmenu specific fixes &.gf-splitmenu {
li.parent {
&:hover {
.border-radius(#menuItemRadius);
}
}
}
}
Firstly you want to work in rows instead of columns as then you won't need to worry about that
Here is the css I would use:
.row-item {
display: block;
float: left;
padding: 5px;
border-left: solid 1px black;
border-right: solid 1px black;
}
.row {
position: relative;
display: block;
float: left;
clear: left;
}
.continent {
background: maroon;
color: wheat;
}
.country {
background: wheat;
color: maroon;
}
HTML:
<div class='row'>
<div class='continent row-item'>
Continent
</div>
<div class='row-item country'>
Country
</div>
</div>
<div class='row'>
<div class='continent row-item'>
Continent
</div>
<div class='row-item country'>
Country
</div>
</div>
Here is a fiddle demo
http://jsfiddle.net/Hive7/vMu8e/