I can't seem to find what I am doing wrong here. The transform:translate property is causing a bad effect when the element is hovered.
Please look at this codepen.
https://codepen.io/kuromicho/pen/LYxrQPv
CSS
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: block;
width:50%;
float: left;
border: 1px solid red;
}
.big-icon {
position: relative;
left: 50%;
transform: translateX(-50%);
transition: scale 0.2s;
}
.big-icon {
font-size: 300%;
color: #e67e22;
}
.big-icon:hover {
transform: scale(1.15);
}
HTML:
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
</head>
<body>
<div class="row">
<div class="col">
<ion-icon name="infinite-sharp" class="big-icon"></ion-icon>
</div>
<div class="col">
<ion-icon name="cart-sharp" class="big-icon"></ion-icon>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/ionicons#5.4.0/dist/ionicons.js"></script>
</html>
I don't know why you defined big-icon class twice in your CSS, but this is my fixes in the bottom of CSS file, take a closer look at those lines of CSS I commented/deleted:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100vh;
}
body {
font-size: 20px;
font-family: "Lato", "Arial", sans-serif;
font-weight: 400;
}
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: flex;
justify-content: center;
width: 50%;
/* float: left; */
border: 1px solid red;
}
.big-icon {
/* position: relative; */
/* left: 50%; */
font-size: 300%;
color: #e67e22;
/* transform: translateX(-50%); */
transition: transform 0.2s ease;
}
.big-icon:hover {
transform: scale(1.15);
}
Related
i use firefox as default browser and i never had problem with animations and css in general everything worked fine, but i noticed that in chrome if i have hover effect that has more than one animation, in chrome animations happen in order instead of simultaneously. how can i fix that problem? also the input slider i tried to make it vertical ( works fine in firefox but in chrome it doesn't work at all.
here is the github pages of the page
* {
box-sizing: border-box;
user-select: none;
}
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #bf42f5;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
canvas {
opacity: 0;
touch-action: none;
animation: fade-in 1s ease 0.5s forwards;
}
.nav{
position: fixed;
opacity: 1;
z-index: 10;
top: 0px;
left: 0px;
min-width: 100%;
}
.nav-list{
list-style: none;
font-size: 1.6rem;
font-family: 'Courier New', Courier, monospace;
color: #f0f0f0;
display: flex;
justify-content: center;
padding: 0;
}
.nav-list>li{
padding-right: 10px;
opacity: 0.8;
}
.nav-list>li:hover{
transition: all 0.4s ease;
opacity: 1;
cursor: pointer;
scale: 1.11;
padding-bottom: 100px;
}
#media (max-width:480px) {
.nav-list{
flex-direction: column;
align-items: flex-end;
/* transform: translateX(1000px); */
}
.nav-list>li{
padding-left: 5px;
}
.nav-list>li:hover{
padding-top:5px;
padding-bottom:5px;
padding-left: 15px;
scale: 1.05;
}
}
/*slider*/
.boring-text{
position: fixed;
left: 5%;
top: 25%;
}
.boring-text>h1{
font-size: clamp(2rem, 10vw, 5rem);
font-family: 'Sono', sans-serif;
color: #ffffff9a;
pointer-events: none;
font-weight: 200;
max-width: 5ch;
}
.boring-text>h3{
font-family: 'Marhey', cursive;
color: #ffffff92;
position: fixed;
right: 10px;
bottom: 5%;
}
.boring-text>h4{
font-family: 'Sono', sans-serif;
color: #ffffffba;
}
.slider-wrapper{
position: fixed;
right: 20px;
bottom: 10%;
}
.slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
-webkit-appearance: none;
width: 5px;
height: 255px;
background: #d3d3d3;
outline: none;
opacity: 0.5;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 0.8;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
/*slider*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Marhey:wght#300;400&family=Sono:wght#200;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>LandingPAGE</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class='nav'>
<div class='nav-wrapper'>
<ul class='nav-list'>
<li>Shop</li>
<li>Work</li>
<li>
apple{/* <FontAwesomeIcon icon="apple" /> */}
</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class='boring-text'>
<h1> boring landing pages</h1>
<h3> phones: {val}</h3>
<h4> React - Three</h4>
<div class='slider-wrapper'>
<input type="range" orient="vertical" min="1" max="50" value='10' class='slider' />
</div>
</div>
</div>
</body>
</html>
About the slider you can check this answer, it may help you.
About the animations I'm waiting for further information as I reproduce it on your snippet I'm seeing it working well and concurrently.
I'm pulling my hair out because this should be really simple
I have a parent class .wrapper with a display of flex
Inside that is a .carousel div with 100% width and a .info div with width of 500px
Inside of the .carousel class is a container class container the carousel slider. I would expect that when the width is set to 100% it would stay within the parameters of the .carousel class but it is overflowing outside this class and i can't figure out why
Can anyone explain why this is happening?
It also is showing part of the next image in the slider which it should be
$(window).on('load', function() {
$('.carousel-main').owlCarousel({
items: 1,
loop: true,
autoplay: false,
autoplayTimeout: 3000,
nav: true,
navText: [""],
dots: false
});
});
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 1rem;
font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
width: 100%;
}
.wrapper {
display: flex;
width: 100%;
}
.carousel {
width: 100%;
}
.info {
width: 500px;
border-left: #000 1px solid;
height: 100vh;
padding: 1rem;
}
h1 {
text-transform: uppercase;
font-size: 1rem;
}
.container {
width: 100%;
}
.owl-carousel {
overflow: hidden;
padding: 2rem;
}
.carousel-main {
position: relative;
}
/* Nav */
.owl-carousel .owl-nav {
margin-top: 0;
/* resetting margins for nav buttons */
}
.owl-carousel .owl-nav button.owl-prev {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: w-resize;
}
.owl-carousel .owl-nav button.owl-next {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: e-resize;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
color: transparent;
background: transparent;
}
.owl-nav button.owl-prev {
left: 0px;
starting position;
}
.owl-nav button.owl-next {
right: 0px;
starting position;
}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<div class="wrapper">
<div class="carousel">
<div class="container">
<div class="owl-carousel owl-theme carousel-main">
<div>
<img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&width=300"></div>
<div><img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"></div>
</div>
</div>
</div>
<!-- End of Carousel -->
<div class="info">
<h1>Contact</h1>
<a herf="mailTo:hello#sashaburger.co.nz">hello#sashaburger.co.nz</a>
</div>
<!-- End of Info -->
</div>
<!-- End of wrapper -->
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"></script>
.container is staying within .carousel as expected. However, .carousel is spanning the full width of .wrapper and pushing .info out of view.
You should change the width of .carousel to be less than 100% to allow .info to move back on screen. If you set width to any integer value and then set flex-basis to 100%, it will use all remaining space.
.carousel {
width: 0;
flex-basis: 100%;
}
$(window).on('load', function() {
$('.carousel-main').owlCarousel({
items: 1,
loop: true,
autoplay: false,
autoplayTimeout: 3000,
nav: true,
navText: [""],
dots: false
});
});
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 1rem;
font-family: 'SuisseIntl-Book', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
width: 100%;
}
.wrapper {
display: flex;
width: 100%;
}
.carousel {
width: 0;
flex-basis: 100%;
}
.info {
width: 500px;
border-left: #000 1px solid;
height: 100vh;
padding: 1rem;
}
h1 {
text-transform: uppercase;
font-size: 1rem;
}
.container {
width: 100%;
}
.owl-carousel {
overflow: hidden;
padding: 2rem;
}
.carousel-main {
position: relative;
}
/* Nav */
.owl-carousel .owl-nav {
margin-top: 0;
/* resetting margins for nav buttons */
}
.owl-carousel .owl-nav button.owl-prev {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: w-resize;
}
.owl-carousel .owl-nav button.owl-next {
width: 50%;
height: 100%;
margin: 0;
/* removes margins around nav buttons */
background: transparent;
border-radius: 0;
cursor: pointer;
position: absolute;
bottom: 0px;
z-index: 999;
cursor: e-resize;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
color: transparent;
background: transparent;
}
.owl-nav button.owl-prev {
left: 0px;
starting position;
}
.owl-nav button.owl-next {
right: 0px;
starting position;
}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<div class="wrapper">
<div class="carousel">
<div class="container">
<div class="owl-carousel owl-theme carousel-main">
<div>
<img src="https://www.scenic.com.au/-/media/scenic/australia/destinations/antarctica/scenic-eclipse-antarctica---paradiseharbor_roger-pimenta-5.jpg?mw=1024&hash=1CF56806C26721A9EE695631E1CC5CF16C68F387?height=500&width=300"></div>
<div><img src="https://cruisepassenger.com.au/wp-content/uploads/2018/07/scenic-eclipse.jpg"></div>
</div>
</div>
</div>
<!-- End of Carousel -->
<div class="info">
<h1>Contact</h1>
<a herf="mailTo:hello#sashaburger.co.nz">hello#sashaburger.co.nz</a>
</div>
<!-- End of Info -->
</div>
<!-- End of wrapper -->
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" type="text/javascript"></script>
I have the following table created in d3 (see image below) which has two columns. However, I am unable to remove the white space on the right hand side of the table. Here is the html and CSS for the table:
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="map">
<svg></svg>
</div>
<div class="box-plot">
<svg></svg>
</div>
<div class="table"></div>
<div class="line-chart">
<svg></svg>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
/* And the css*/
.map {
grid-area: map;
}
.map-path {
/* fill: rgba(0,0,0,0.01); */
/* stroke: rgba(0,0,0,0.2); */
/* stroke-width: 1px; */
}
.map-path.counties {
stroke: black;
stroke-width: 1px;
}
.map-path.catchments {
stroke: black;
stroke-width: 1px;
}
.map-path.aquifer {
/* stroke: rgba(0,200,0,0.5); */
/* stroke-width: 0.5px; */
}
.map-path.gwrockunit {
/* stroke: rgba(200,0,0,0.5); */
/* stroke-width: 0.5px; */
}
.map-path.selected-basemap-polygon {
stroke: black;
stroke-width: 2px;
}
.box-plot {
grid-area: box-plot;
}
.table {
grid-area: table;
overflow-y: scroll;
font-family: Courier;
/* max-width: 400px; */
border-collapse: collapse;
white-space: nowrap;
width: 100%;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
cursor: s-resize;
background-repeat: no-repeat;
background-position: 3% center;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
.line-chart {
grid-area: line-chart;
}
.grid-container {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: grid;
grid-template-areas:
'map map box-plot table'
'map map line-chart table';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container div {
background-color: white;
}
.grid-container div svg {
/* This makes it so the grid does not resize when the SVG is added */
position: absolute;
}
.basemap-selector-widget {
cursor: pointer;
}
.basemap-selector-widget rect {
fill: white;
stroke: black;
stroke-width: 2px;
border-radius: 25px;
}
.basemap-selector-widget text {
font-family: sans;
alignment-baseline: middle;
text-anchor: middle;
}
and I am using a grid-container as the layout.
Second image where I would like to remove everything to the right of the red line. And just have the table fit within the div.
Just replace width: auto with width: 100%. You can also want to specify box-sizing: border-box if you are not setting it document-wide.
It would be more convenient, however, if you add an HTML/CSS/JS runnable code snippet (Ctrl-M in editor).
Without the complete code is hard to tell, but try:
.table {
grid-area: table;
overflow-y: scroll;
font-family: Courier;
border-collapse: collapse;
white-space: nowrap;
width: 100%;
}
Now,complete code I can help..
Just add to your css
.table table {width:100%}
I have some problems with html and css. I want 100% DIV's under each other but everythin i do is not working. It works almost but not on every mobile divece. It is working on my desktop but when i open it on my phone it is not working. Can some one please help me?
window.onload = onLoad;
function onLoad()
{
var teller = 0;
//ONLOAD
$('span').fadeIn(4000);
$('html,body').animate({
scrollTop: $('html').offset().top
}, 1700);
//MENU
$('#menu').on('click', function (e)
{
$("#menuBar").animate({width:'toggle'},350);
$("#menu").toggleClass('rotated');
});
//BUTTON_ONClICK
//BUTTON_1
$('#screen-1-go').on('click', function (e)
{
e.preventDefault();
$('html,body').animate({
scrollTop: $('#screen-2').offset().top
}, 1700);
});
//TO_SCREEN_3
$('.more').on('click', function (e)
{
teller=0;
e.preventDefault();
$('html,body').animate({
scrollTop: $('#screen-3').offset().top
}, 1700);
});
//TO_THE_TOP
$('.top').on('click', function (e)
{
teller=0;
e.preventDefault();
$('html,body').animate({
scrollTop: $('html').offset().top
}, 1700);
});
//VARS_SCROLL_EVENT
var screens = ["html", "#screen-2", "#screen-3"];
$('html').on('wheel', function(event)
{
if (event.originalEvent.deltaY > 0)
{
teller++;
animateToDiv(screens[teller]);
}
else
{
teller--;
animateToDiv(screens[teller]);
}
});
}
function animateToDiv(div)
{
$('html,body').animate({
scrollTop: $(div).offset().top
}, 1700);
}
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
margin: 0;
background: #000;
overflow-x: hidden;
overflow-y: hidden;
}
/* Menu */
#menu
{
position: fixed;
right: 10px;
z-index: 9999;
cursor: pointery
}
#menu > img
{
width: 60px;
height: 60px;
}
#menuBar
{
position: fixed;
right: 0px;
float: right;
height: 100%;
width: 100%;
background-color: black;
box-shadow: -1px 0px 1px 1px black;
display: none;
z-index: 9998;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
.rotated
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Screen_1 */
#screen-1
{
position: fixed;
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
background: url(../Uploads/Video/screen1-video.gif) repeat;
background-size: cover;
color: white;
font-size: 1.2rem;
width: 100%;
height: 100%;
}
#screen-1-tekst
{
margin-left: auto;
margin-right: auto;
margin-top: 16em;
width: 30em;
}
#screen-1-tekst > span
{
font-family: 'Brush Script MT', cursive;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
color: #DBBC90;
font-size: 6em;
display: none;
}
#screen-1-go
{
margin-top: 16%;
}
.button
{
display: block;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
border: 1px solid rgba(255,255,255,0.75);
color: rgba(255,255,255,0.75);
height: 45px;
line-height: 48px;
cursor: pointer;
-webkit-transition: color 0.5s ease,border-color 0.5s ease;
transition: color 0.5s ease,border-color 0.5s ease;
margin-left: auto;
margin-right: auto;
width: 13em;
margin: auto;
position: absolute;
left: 0; bottom: 10%; right: 0;
}
/* Screen2 */
#screen-2
{
position: absolute;
margin-top: 100%;
width: 100%;
height: 100%;
background-color: #d55a49;
}
#screen-2-tekst > h1
{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
color: rgba(99, 35, 35, 0.8);
text-shadow: 1px 4px 6px #D55A49, 0 0 0 #000, 2px 4px 6px #D55A49;
font-size: 5em;
text-align: center;
}
#screen-2-tekst
{
margin-left: auto;
margin-right: auto;
margin-top: 4em;
width: 27em;
}
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
/* Screen2 */
#screen-3
{
position: absolute;
margin-top: 150.5%;
width: 100%;
height: 100%;
background-color: #80a5ba;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Files/CSS/home.css">
<script src="Files/JS/background.js"></script>
<script src="Files/JS/JQBA.js"></script>
<script src="Files/JS/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="menu">
<img src="Files/Uploads/Image/hamburger.png">
</div>
<div id="menuBar">
</div>
<div id="screen-1">
<div id="screen-1-tekst">
<span>Joost de Niet</span>
</div>
<div id="screen-1-go">
<h1 class="button">More about me</h1>
</div>
</div>
<div id="screen-2">
<div id="screen-2-tekst">
<h1>Portfolio</h1>
</div>
<div id="screen-button">
<h1 class="button more">More..</h1>
</div>
</div>
<div id="screen-3">
<div id="screen-button">
<h1 class="button top">To the top</h1>
</div>
</div>
</body>
</html>
You should try using height:100vh for mobile devices
You can use vh for this. Read more here.
So it will be something like
div {
height: 100vh /*100% of device height*/
}
Hope this helps :)
height: 100vh
is the one of solution for responsive designs
or u should use mediaquery
the navigation works fine until a specific width (about 1100px). If the width gets smaller the links are not clickable anymore. And I don't know why. The only thing I found out, is that, when I add some text (for example in line 51 "mediaquery..."), than the navigation works, but the backgroundcolor of it become white instead of original dark grey.
Do you know what I am doing wrong?
Here is the code:
<html lang="de">
<head>
<meta charset="utf -8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!--[if lt IE 8]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Arbeitsgruppe Wolken und globales Klima - Universität Leipzig (Fakultät für Physik und Geowissenschaften)</title>
<style>
*{
font-family: helvetica,arial,sans-serif;
}
#media (max-width: 1300px) and (min-width: 0px) {
#luecke_nav1 {
display: none;
}
}
#media (max-width: 1029px) {
.heading #seitentitel h1 {
font-size: 140%;
}
}
#media (min-width: 1029px) {
.menu {
font-size: 1.2em;
}
}
mediaqueryzerhautklassedanach
.menu {
padding: 0.5em;
background: #414141;
min-height: 3em;
line-height: 1em;
position: fixed;
top: 0;
left: 0;
z-index: -6;
}
.menu > ul {
transition: max-height 0.25s linear;
}
.menu ul {
margin: 0;
padding: 0;
text-align: center;
}
.menu li {
transition: visibility .25s linear;
display: inline-block;
padding: .45em 1.1em;
margin: 0 .3em;
position: relative;
}
#media (min-width: 841px) {
.menu li ul {
display: none;
position: absolute;
top: 100%;
margin-top: 1px;
left: -1px;
right: -1px;
}
.menu li:hover ul {
display: block;
}
.menu li li {
margin: -1px 0 0 0;
box-sizing: border-box;
width: 100%;
}
#logo {
display: none;
}
}
#media (max-width: 841px) {
#nav_kasten {
display: none;
}
.hvr-bounce-in{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
#luecke_nav{
display: none;
}
.menu > ul {
max-height: 0;
overflow: hidden;
margin: 0 3.5em 0 1em;
}
.menu li {
visibility: hidden;
display: block;
padding: 0.5em 0.6em;
border: none;
}
.menu li ul {
margin-top: 0.5em;
border-left: 1px solid #000;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 300px;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: #2098d1;
}
}
.navbar-checkbox {
display: none;
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.66666667em;
border-top: 0.13333333em solid;
color: #2098d1;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333em solid;
}
.navbar-handle:before {
top: 0.37777778em;
}
.navbar-handle:after {
top: 0.88888889em;
}
.menu {
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: fixed;
font-size: 1.2em;
top: 0.7em;
right: 12px;
z-index: 10;
}
/* Overline From Center */
.hvr-overline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-overline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
background: #2098d1;
height: 7px;
top: -20%;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
left: 0;
right: 0;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #2098d1;
}
a:hover {
text-decoration: none;
color: #2098d1;
}
#lim_logo {
width: 50%;
margin-top: 8%;
text-align: center;
z-index: 99;
}
#nav_kasten {
width: 14.7%;
height: 40%;
z-index: 99;
position: absolute;
top: 0;
margin-left: 42%;
}
#base {
position: relative;
display: inline-block;
width: 100%;
text-align: center;
color: white;
background: gray;
text-decoration: none;
padding-bottom:15%;
background-clip:content-box;
overflow:hidden;
}
#base:after {
content: "";
position: absolute;
top:83%;
left: 0;
background-color:inherit;
padding-bottom:50%; width:57.7%;
z-index: -1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
.hvr-bounce-in {
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
}
#logo{
width: 15%;
top: 2%;
left: 1%;
z-index: 4;
position: fixed;
}
.heading {
background: url(https://pixabay.com/static/uploads/photo/2012/10/26/01/38/cold-front-63037_960_720.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
z-index:-7;
padding: 18%;
}
#seitentitel {
background-color:rgba(255,255,255,0.7);
text-align: center;
padding: 2%;
margin: 0.5%;
}
.linie {
border :none;
border-top: 1px solid #0090E0;
background-color:#FFFFFF;
height: 1px;
margin: 0px 80px 0px 80px;
}
</style>
</head>
<body>
<header>
<div id="nav_kasten">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<div id="logo">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<ul>
<li>Home</li>
<li>Team</li>
<li>Veröffentlichungen</li>
<li id="luecke_nav"><div id="luecke_nav1"> </div>
<div id="luecke_nav2"> </div></li>
<li>Projekte</li>
<li>Abschlussarbeiten</li>
<li>Links</li>
</ul>
<label for="navbar-checkbox" class="navbar-handle hvr-bounce-in">
</nav>
</header>
<div class="col-md-12 heading">
<div id="seitentitel">
<hr class="linie">
<h1> Arbeitsgruppe <br> Wolken und globales Klima</h1>
<hr class="linie">
</div>
</div>
<div class="col-md-12 text2">
<h2 style="text-align: center;"></h2>
<br>
<div class="col-md-6">
</div>
<div class="col-md-12">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
So all adding that text does is essentially stop the browser from rendering the rest of the css that follows. What you need to do is;
1) Remove that text you've added in the css.
2) Remove the z-index on both the .menu and .heading. This is the problem. You've applied a lower z-index to the .heading but because it exists in the html at a higher stacking order than the .menu, it isn't working as you've intended it. So .heading is hiding your .menu
That should fix your problem.
Also i noticed:
a) You used a duplicate id on your logo image. #lim_logo use a class instead and then undate your css accordingly.
b) Just before your closing </nav> you are missing a closing </label> tag.
c) Update your media query expressions. Max-width should (in most cases) stop below the breakpoint. for example you might have a breakpoint at 1300px, so the max-width for targeting below that breakpoint would be 1299px. and then the min-width for targeting from that breakpoint and up would be 1300px. And there's no point including the min-width:0px as that would be implied.