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
Related
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);
}
My site design is very close to finish, but I'm stuck on getting this font to install and work on my site. Do .woff files only show on the web once it connects to a server or what? I'm completely confused? I don't know what I'm doing wrong, I'm following the guide they gave me verbatim.
In my code you can see how I added the code source in my html and tried to add it to my nav.logo file.
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<style type="text/css">
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-
ab917cc454a1&fontids=738462");
#font-face{
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2")
format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
#font-face{
font-family:"MicrogrammaExtDBol W05 Regular";
src:url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2")
format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push(""); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
</head>
Here's an example of how I'm applying the font in css
/* IMPORTS */
/*DADD HOME*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.4s;
}
body {
background-color: white;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
min-height: 100vh;
}
.li {
font-family: 'Michroma', sans-serif;
}
.container {
margin-left: 0%;
margin-right: 1%;
}
/* Navbar section */
.nav div.main_list ul li{
height: 65px;
margin: auto 2rem; /* That will define a equal space between the <li> elements */
}
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
background-color: rgba(0, 0, 0, 0.8);
}
div.logo {
width: 120px;
height: 65px;
position: absolute;
text-align: right;
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
div.logo a {
text-decoration: none;
color: #fff;
font-size: 1.8em;
color: white;
}
.nav div.logo a:hover {
color: #c0c0c0;
}
div.main_list {
width: 600px;
height: 65px;
float: right;
font-size: 14px;
font-family: Michroma;
src: url(Michroma.ttf), url(san-serif.ttf);
text-transform: uppercase;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
justify-content: space-around;
}
.nav div.main_list ul li {
height: 65px;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
text-transform: uppercase;
}
.nav div.main_list ul li a:hover {
color: #c0c0c0;
}
.nav div.media_button {
width: 40px;
height: 40px;
background-color: transparent;
position: absolute;
right: 15px;
top: 12px;
display: none;
}
.nav div.media_button button.main_media_button {
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
border: none;
cursor: pointer;
}
.nav div.media_button button.main_media_button span {
width: 98%;
height: 1px;
display: block;
background-color: #fff;
margin-top: 9px;
margin-bottom: 10px;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(1) {
transform: rotateY(180deg);
transition: all 0.5s;
background-color: #c0c0c0;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(2) {
transform: rotateY(180deg);
transition: all 0.4s;
background-color: #c0c0c0;
}
.nav div.media_button button.main_media_button:hover span:nth-of-type(3) {
transform: rotateY(180deg);
transition: all 0.3s;
background-color: #c0c0c0;
}
.nav div.media_button button.active span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 45deg);
position: absolute;
margin: 0;
}
.nav div.media_button button.active span:nth-of-type(2) {
display: none;
}
.nav div.media_button button.active span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -45deg);
position: absolute;
margin: 0;
}
.nav div.media_button button.active:hover span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 20deg);
}
.nav div.media_button button.active:hover span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -20deg);
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-color: #ddd;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.container {
margin: 0;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
margin-top: 65px;
height: 0px;
overflow: hidden;
}
.nav div.show_list {
height: 200px;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 200px;
top: 80px;
right: 0;
left: 0;
}
.nav div.main_list ul li {
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.8);
}
.nav div.main_list ul li a {
text-align: center;
line-height: 40px;
width: 100%;
height: 40px;
display: table;
}
.nav div.media_button {
display: block;
}
}
.daddcenter {
margin: 0;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
/* Footer */
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 2.5rem;
font-size: 10px;
}
/*DADD HOME*/
/*DADD MEDIA*/
.Socail_MediaLinks{
margin: 0;
font-size: 50px;
position: absolute;
list-style-type: none;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)}
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute,
convert, modify or reverse engineer this font software. Please contact Monotype with any questions
regarding Web Fonts: https://www.linotype.com
*/
<!DOCTYPE html>
<html>
<head>
<title>DADD | Stream Music, Connect, & Merch | DADD </title>
<style type="text/css">
#import url("https://fast.fonts.net/lt/1.css?apiType=css&c=8fd2ccbb-9bc3-4d04-babb-ab917cc454a1&fontids=738462");
#font-face{
font-family:"Microgramma W02 Bold Ex";
src:url("Fonts/738462/c7e724ac-a335-42f3-b210-c0e573c18504.woff2") format("woff2"),
url("Fonts/738462/73ccd7f9-454a-47d7-a355-edcb8c9cd4cc.woff") format("woff");
}
#font-face{
font-family:"MicrogrammaExtDBol W05 Regular";
src:url("Fonts/5121482/ea58eeb8-638f-456c-8376-d46061bcb9ba.woff2") format("woff2"),
url("Fonts/5121482/dbcf51ac-03ab-42bb-a698-bafb9867305c.woff") format("woff");
}
</style>
<script type="text/javascript">
var MTUserId='';
var MTFontIds = new Array();
MTFontIds.push("738462"); // Microgramma™ W02 Extended Bold
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src='mtiFontTrackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<link rel="icon" href="LOGODADD.png" type="image/png">
<link rel="stylesheet" href="dadd1.css">
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<nav class="nav">
<div class="container">
<div class="logo" id="navlogo">
DADD
</div>
<div class="main_list" id="mainListDiv">
<ul>
<li>MUSIC</li>
<li>MEDIA</li>
<li>TOUR</li>
<li>SHOP</li>
</ul>
</div>
<div class="media_button">
<button class="main_media_button" id="mediaButton">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<footer>
<p>D.R.E.A.M. LLC</p>
</footer>
</div>
<!--image-->
</body>
</html>
You need to download the 'Fonts' folder from linotype. Check here
..and remove the 'src' attribute from your div.logo
So I have five different coded pages. What I want to do is combine them all into one html page. I have my home page with a navigation bar that links to the other pages but whenever I try to insert my other pages, the multiple pages overlay one another or appear in a column underneath. What sort of code do I need so the clickable links pull up my other pages without it overlaying. Below is a section of my code that I want linked to another page.
}
.container {
position: relative;
width: 50%;
float: left;
}
.image1 {
display: inline-block;
width: 400px;
height: 290px;
margin-top: -10px;
margin-right: 400px;
background-position: 10px 280px;
}
.overlay {
position: absolute;
top: -10px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 400px;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0);
z-index: -3.0;
}
.container:hover .overlay {
background-color: rgba(0, 0, 0, .7);
height: 290px;
width: 400px;
}
.container:hover .text {
opacity: 1;
}
.text {
font-size: 50px;
position: relative;
width: 330px;
height: 240px;
overflow: scroll;
top: 15%;
left: 48%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
text-align: center;
margin-top: 100px;
display:block;
width:150px;
height: 70px;
border:2px solid #C5E3ED;
color:#ADD7C9;
text-align:center;
text-decoration:none;
}
a { text-decoration: none; color:#C5E3ED }
a:visited { text-decoration: none; color:#C5E3ED; }
a:hover { text-decoration: none; color:#C5E3ED; }
a:focus { text-decoration: none; color:#C5E3ED; }
a:hover, a:active { text-decoration: none; color:#C5E3ED }
<div class="container">
<img src="https://www.pets4homes.co.uk/images/articles/3779/large/how-to-care-for-a-dog-with-a-stomach-upset-58345cd2daf98.jpg" alt="dog" class="image1">
<div class="overlay">
<div class="text">
About
</div>
</div>
</div>
I have used this guide to create a collapsible frame for you.
https://www.w3schools.com/howto/howto_js_collapsible.asp
You can add your html code in div with class="content". Let me know if it is what you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Open Collapsible</button>
<div class="content">
!--- YOUR HTML CODE HERE ---!
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
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.
I want to add links to circularmenu found on https://jsfiddle.net/zv5dr670/4/.
<a href="http://www.google.com" target="_blank">
<li>
<input id='1' type='checkbox'>
<label for='1'>Option 1</label>
</li>
</a>
The link is displayed in browser status bar, but dooesn't react on a click. I don't work CSS in school for now, only HTML. Can you help me?
You could add a custom attribute to li element as follows
<li class='link' data-url='https://jsfiddle.net'>
<input id='c1' type='checkbox'/>
<label for='c1'>Menu 1</label>
</li>
Then with jQuery you can bind the link class' click event like this:
$('li.link').click(function(e) {
window.location=$(this).attr('data-url');
});
If you want to make outer circles just links you don't have to use input tag:
HTML
<div class='selector'>
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
<button>Click</button>
</div>
<button class ="mycbutton">Click2</button>
CSS
html,
body { height: 100%; }
body {
margin: 0;
background: linear-gradient(#eeeeee, #cccccc);
overflow: hidden;
}
.mycbutton {
}
.selector {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 140px;
margin-top: -70px;
margin-left: -70px;
}
.selector,
.selector button {
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
.selector button {
float:right;
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: #428bca;
border-radius: 50%;
border: 0;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
transition: all .1s;
}
.selector button:hover { background: #3071a9; }
.selector button:focus { outline: none; }
.selector ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.selector li {
position: absolute;
width: 0;
height: 100%;
margin: 0 50%;
-webkit-transform: rotate(-360deg);
transition: all 0.8s ease-in-out;
}
.selector li a {
position: absolute;
left: 50%;
bottom: 100%;
width: 0;
height: 0;
line-height: 1px;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
font-size: 1px;
overflow: hidden;
cursor: pointer;
box-shadow: none;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
text-decoration: none;
color: black;
}
.selector li a:hover { background: #f0f0f0; }
.selector.open li a {
width: 80px;
height: 80px;
line-height: 80px;
margin-left: -40px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
JS
var nbOptions = 9;
var angleStart = -360;
// jquery rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('a')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
// show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});
$('.mycbutton').click(function(e) {
toggleOptions($(this).parent());
});
setTimeout(function() { toggleOptions('.selector'); }, 100);
Run it on JSFiddle