Good evening! Well, the problem here is that I'm trying to make a tooltip appear while hovering a li but if the position where it's supposed to appear is higher or lower than the nav height (where the li is), it dissapears, but if I move the tooltip inside the nav's height/width, it appears perfectly. I need the tooltip to appear even if its size is bigger or goes off the nav's size. Hope I've been clear! Here is my code:
<html>
<head>
<title> Práctica 2 </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header></header>
<nav>
<ul>
<li>
<div class="dropdown">Primero
<div class="dropdown-content">
1.1
1.2
1.3
</div>
</div>
</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto <span class="tooltiptext">Tooltip text</span></li>
<ul>
</nav>
<main>
Línea de texto. </br>
Línea de texto. </br>
Línea de texto. </br>
</main>
</body>
</html>
And the CSS:
* { margin: 0%;
padding: 0%;}
header { margin: auto;
height: 300px;
width: 800px;
background-color: gray;}
nav { margin: auto;
width: 800px;
height: 50px;
position: sticky;
position: -webkit-sticky;
top: 0; }
nav ul { list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: #333;
width: 800px; }
nav ul li { float: left;
width: 25%;
b: 50px 0px 50px 0px;}
nav ul li:hover { background-color: red; }
nav ul li a { display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
.dropdown-content { display: none;
position: absolute;
background-color: #333;
min-width: 25%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 0px 0px 5px 5px;}
.dropdown-content a:hover { background-color: gray; }
.dropdown-content a:last-child { border-radius: 0px 0px 5px 5px; }
.dropdown:hover .dropdown-content { display: block; }
main { width: 800px;
margin: 10px auto; }
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
I think the problem is the nav, but I'm not sure, because, as I said, if the tooltip's position is inside the nav's size, it appears.
Thank you very much!
Related
I'm trying to get a dropdown menu to display on top of everything else. When you hover over subscribe the menu should be on top, but for some reason it falls behind the information line. I've tried setting the z-index on everything and setting the position property to relative or absolute which should allow the z-index to work. But no matter what I do it won't display on top.
Can anybody point out what I'm doing wrong?
Here's the html in question.
<div class="card">
<div class="ttl">
<h3>Title</h3>
<li class='dropdown subscriber_feed'><a> Subscribe</a>
<div class='dropdown-content'>
<ul>
<li>Category1
<div class='subscribe_div'><a class='subscribe'>Add</a></div></li>
<li>Category2
<div class='subscribe_div'><a class='subscribe'>Add</a></div></li>
<li><a>Edit Categories</a></li>
</ul>
</div>
</li>
</div>
<ul id="info">
<li><span class="posted">Information line 1</span></li>
<br>
<li class="tooltip"style="color:#e2804a">Information line 2<span class="tooltiptext"> and additional info</span></li>
<br>
</ul>
And the css
.card{
display: block;
position: relative;
width: 100%;
min-height: 130px;
margin: 0px auto 0px 0px;
overflow: hidden;
padding: 5px 0px 0px 0px;
z-index:1;
}
.ttl{
max-width: 100%;
margin-top: 1px;
margin-left: 4%;
left:0%;
padding: 2px 2% 2px 10px;
overflow: hidden;
min-height: 75px;
position: relative;
display: flex;
align-items: center;
z-index:1000;
}
.ttl > li{
overflow: visible;
position: relative;
display: flex;
margin: auto 25px auto auto;
padding: 4px;
border-radius: 5px;
cursor: pointer;
list-style: none;
border: 1px solid green;
z-index:1000;
}
#info {
position: relative;
display: block;
margin: 6px 2% 3px 27%;
padding: 0px;
padding-right: 15px;
overflow: visible;
z-index: 1;
}
#info span{
position: relative;
bottom: 1px;
}
#info > li, #mini-info > li{
display: inline-block;
text-align: center;
list-style: none;
z-index: 1;
}
.ttl .dropdown-content{
right:0px;
display: none;
z-index:101;
}
.dropdown{
overflow: visible;
position: relative;
z-index: 101;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
overflow: visible;
z-index: 101;
}
.dropdown:hover .dropdown-content {
display: block;
z-index:101;
}
Remove overflow:hidden on .ttl and .card:
.card {
display: block;
position: relative;
width: 100%;
min-height: 130px;
margin: 0px auto 0px 0px;
padding: 5px 0px 0px 0px;
z-index: 1;
}
.ttl {
max-width: 100%;
margin-top: 1px;
margin-left: 4%;
left: 0%;
padding: 2px 2% 2px 10px;
min-height: 75px;
position: relative;
display: flex;
align-items: center;
z-index: 1000;
}
.ttl>li {
overflow: visible;
position: relative;
display: flex;
margin: auto 25px auto auto;
padding: 4px;
border-radius: 5px;
cursor: pointer;
list-style: none;
border: 1px solid green;
z-index: 1000;
}
#info {
position: relative;
display: block;
margin: 6px 2% 3px 27%;
padding: 0px;
padding-right: 15px;
overflow: visible;
z-index: 1;
}
#info span {
position: relative;
bottom: 1px;
}
#info>li,
#mini-info>li {
display: inline-block;
text-align: center;
list-style: none;
z-index: 1;
}
.ttl .dropdown-content {
right: 0px;
display: none;
z-index: 101;
}
.dropdown {
overflow: visible;
position: relative;
z-index: 101;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
overflow: visible;
z-index: 101;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 101;
}
<div class="card">
<div class="ttl">
<h3>Title</h3>
<li class='dropdown subscriber_feed'><a> Subscribe</a>
<div class='dropdown-content'>
<ul>
<li>Category1
<div class='subscribe_div'><a class='subscribe'>Add</a></div>
</li>
<li>Category2
<div class='subscribe_div'><a class='subscribe'>Add</a></div>
</li>
<li><a>Edit Categories</a></li>
</ul>
</div>
</li>
</div>
<ul id="info">
<li><span class="posted">Information line 1</span></li>
<br>
<li class="tooltip" style="color:#e2804a">Information line 2<span class="tooltiptext"> and additional info</span></li>
<br>
</ul>
I`m trying to make this navbar responsive, and have not found a code that works in this example. When I adjust the width of the screen, I want all the links (not the logo) to be gathered in a hamburger icon, so in portrait mode it will only display the logo and the hamburger icon with the links.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown This example is very close to what I would like, but the content in my navbar is centered with a logo in between the links, and I couldn`t make it work. Also I want the third element (the logo) to be displayed instead of the first link (when the width reaches a certain point). Any help would be greatly appreciated
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
position: fixed;
top: 0;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
<nav>
Home
News
<div><img id="logo" src="src/Logo.jpg" alt=""></div>
Sponsors
<div class="dropdown">
<button class="dropbtn">About us</button>
<div class="dropdown-content">
Our employees
About company
Founder
</div>
</div>
</nav>
I just updated your code with few fixes your logo will always on center and hamburger menu also added. I hope it'll help you out. Thanks
nav {
background: black;
font-family: Times New Roman;
font-size: 14px;
height: 94px;
position: fixed;
width: 100%;
z-index: 1;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
height: 94px;
}
nav ul li {
background-color: white;
border: 3px solid #f9c534;
position: relative;
white-space: nowrap;
}
nav ul li:hover {
background-color: #f9c534;
border-color: #fff;
}
nav ul li a {
color: black;
display: block;
margin: 0;
padding: 16px;
text-decoration: none;
}
nav li ul {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
position: absolute;
right: -3px;
top: 50px;
height: auto;
min-width: 150px;
}
nav ul li:hover ul {
display: block;
}
nav #logo {
border-radius: 50%;
background: rgba(0,0,0,0.3);
border: 0;
padding: 0;
width: 100px;
}
#mob-dropChecked {
display: none !important;
}
#media only screen and (max-width: 768px) {
nav {
height: 60px;
}
nav ul {
display: block;
height: 60px;
position: relative;
top: 44px;
}
nav ul li {
display: none;
}
nav #logo {
display: block;
position: absolute;
left: 34%;
top: -29px;
}
#mob-btn {
background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-size: contain;
position: relative;
top: 21px;
height: 40px;
width: 40px;
padding: 13px 20px;
z-index: 2;
}
#mob-dropChecked:checked ~ ul li{
display: block;
}
nav li ul {
position: relative;
right: 0;
top: 16px;
}
}
<nav>
<label for="mob-dropChecked" id="mob-btn"></label>
<input type="checkbox" id="mob-dropChecked" role="button">
<ul>
<li>Home</li>
<li>News</li>
<li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
<li>Sponsors</li>
<li>About us
<ul>
<li>Our employees</li>
<li>About company</li>
<li>Founder</li>
</ul>
</li>
</ul>
</nav>
You can add class to the wrapper div of logo img tag
and add css position: absolute; top: 10px; left: 10px to it for smaller devices using css media queries.
Else (not recommended), you can use two img tags. Hide one on desktop and another on mobile using display: block / display: none.
You could remove the logo from the nav and add a spacer element in its place. Then use absolute position on the logo to get it into place. It's a bit hacky, but would work. https://codepen.io/nickberens360/pen/bZmGWy
header{
position: fixed;
width: 100%;
top: 0;
}
.logo{
display: block;
margin: auto;
position: absolute;
left: 36px;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 99999999;
top: 0;
}
.spacer{
margin: 0 100px;
border: 1px solid red;
}
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
width: 143px;
text-align: center;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
My mobile css hamburger menu isn't working, if I click on it it doesn't stay open, and I have no clue on how to open the dropdown menu inside the hamburger menu. Also my nav title (.logo) is hard to center, does anyone have a solution for that?
JSFidlle for easy viewability (Mobile css & Style.css in are merged here only the background is missing)
Thanks for any help, and sorry if my code looks messy :/
My Code:
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, I'm Sten</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="nav animated slideInDown">
<img src="img/hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>STEN</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<div class="landing animated fadeIn">
<div class="container">
<h1>STEN</h1>
<hr>
<p>I'M A</p>
<h2>-OCCUPATION-</h1>
<button>KNOP</button>
<button>KNOP</button>
</div>
<div class="scroll" onClick="">
</div>
</div>
<div class="about">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="main.js"></script>
</body>
</html>
Style.css (Master css file)
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #F2F2F2;
border-bottom: 1px solid #E4E4E4;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 10%;
}
.nav .logo h1 {
color: #000;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 10%;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #F2F2F2;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
position: absolute;
}
.nav ul a {
color: #000;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 90%;
width: 100%;
background: url('../img/bg.jpg');
background-size: cover;
background-position: center;
position: fixed;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
z-index: 0;
}
.landing:before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.landing .container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
.landing .container h1 {
letter-spacing: 6px;
font-size: 78px;
}
.landing .container p {
font-size: 20px;
font-weight: 100;
}
.landing hr {
width: 300px;
margin: 25px 0 25px 0;
margin-left: calc(50% - 150px);
border-bottom: 3px solid #EF2D56;
}
.landing button {
width: 200px;
padding: 24px;
margin-top: 20px;
position: relative;
color: #FFF;
background-color: transparent;
border: 1px solid #FFF;
}
.landing button:first-child {
margin-right: 1%;
}
.landing button:last-child {
margin-left: 1%;
background-color: #EF2D56;
border: 1px solid #EF2D56;
}
.landing button:hover {
cursor: pointer;
}
.landing button:focus {
outline: none;
}
.scroll {
width: 16px;
height: 16px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
position: absolute;
content: " ";
transform: rotate(45deg);
bottom: 0;
margin-bottom: 30px;
margin-left: calc(50% - 8px);
cursor: pointer;
}
.about {
height: 200%;
width: 100%;
background-color: #FFF;;
z-index: 50;
position: absolute;
margin-top: 100vh;
}
Mobile css file
#media only screen and (max-device-width: 850px){
.nav .hamburger {
height: 6vh;
width: 6vh;
display: inline-block;
float: left;
margin: 2vh 0 0 2vh;
}
.nav .logo {
position: relative;
}
.nav > ul {
display: none;
float: none;
margin-top: 10vh;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.about {
margin-top: 100vh;
}
}
Change the way you wrote media query, Try this way:
#media only screen and (max-width: 850px) {
//Your mobile CSS code
}
See the fiddle: https://jsfiddle.net/7xjyutuf/1/
chnage your media query into this #media only screen and (max-width:850px){}.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
for more info you can visit this http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use
check this fiddle https://jsfiddle.net/ok7hmodo/1/
For making the menu static use Jquery.Please check this https://jsfiddle.net/7xjyutuf/10/.
This is a css only solution.You have to make the ul display block when user hovers on it
https://jsfiddle.net/tucsgohy/1/
I made a navigiation bar that changes photo on hover. It works when I hover on links (first level menu) but when I hover on the dropdown's (second level menu) the photo goes off. How do I make photo to stay when hover on both main menu and submenu (dropdown). The photo should not disappear when I hover on submenu.
I would like to achieve this without using JavaScript, purely with CSS.
nav{
background-color: #fff;
width:150px;
height: 667px;
float:right;
}
nav h1{
padding: 20px;
color: #777;
font: 20px tahoma,times,serif;
}
ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
text-align: right;
}
ul li {
position: relative;
}
li ul {
position: absolute;
right: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
background: #333;
background: url("http://vignette1.wikia.nocookie.net/logopedia/images/6/69/FC-Barcelona-old-logo.png/revision/latest?cb=20120211172615");
background-repeat: no-repeat;
}
.container{
overflow: hidden;
margin-right: 0;
height: 500px;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
width: 800px;
}
.container img{
margin-top: 0px auto;
position: fixed;
top: 0px;
left: 0px;
z-index: -60;
height: 500px;
width: 800px;
}
.container li img {
opacity: 0.5;
margin-top: 0px auto;
position: absolute;
left: 0px;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li:nth-child(1){
padding-top: 0px;
}
li a:hover {
background: #eee;
}
li a:hover + img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<LINK rel=stylesheet type="text/css" href="StyleSheet.css"/>
<title></title>
</head>
<body>
<div class="container">
<nav><h1><b>ברצלונה</b></h1>
<ul>
<li>ברצלונה<img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li>
<li>לה ליגה<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1">
<ul>
<li>ברצלונה</li>
<li>ריאל</li>
<li>אתלטיקו</li>
</ul>
</li>
<li>בונדסליגה<img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1">
<ul>
<li>באיירן</li>
<li>וולפסבורג</li>
<li>הנדובר</li>
<li>דורטמונד</li>
</ul>
</li>
<li>סיירה א<img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1">
<ul>
<li>אינטר</li>
<li>מילאן</li>
<li>יובה</li>
<li>רומא</li>
</ul>
</ul>
</li>
</nav>
</div>
</body>
</html>
See this fiddle
Just do the below slight change in your CSS..
Replace
li a:hover + img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
with
li:hover a +img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
Also, your <li> and <ul> tags are not properly closed at the end. Bring </li> before the </ul>.
I am new to this. On my website, when the window is resized or is viewed on a different computer screen, the navigation bar (which is made up of rectangles and triangles) and text moves around and parts disappear. Do the sizes need to be in percentages? If so I am unsure of which parts I need to change.
To view it, please follow this link to my website on Codecademy and click on the full screen button.
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
#header {
word-wrap: break-word;
border: 1px solid black;
height: 30%;
width: 60%;
position: relative;
bottom: 90px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
border: 1px solid black;
height: 10%;
width: 99%;
position: relative;
bottom: 70px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
text-align: center;
position: relative;
left: 15%;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
display: block;
width: 110%;
color: #000000;
font-size: 20px;
vertical-align: middle;
line-height: 31px;
}
.navigation li a:hover {
margin-top: 2px;
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500; /* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
}
<div id="background">
<div id="header"></div>
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Order</li>
<li>Contact</li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div>
<div class="photocontainer"></div>
Read this article "http://www.w3schools.com/css/css_navbar.asp"
Your code is a bit confused.
Hope this helps.
Here you have a basic example:
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
li {
float: left;
}
a {
background-color: #dddddd;
display: block;
width: 60px;
}
You can find the solution in my fiddle, including absolutely positioned triangles. For simplification purposes I removed your header.
http://jsfiddle.net/L74gdm7j/2/
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
height: 10%;
width: 99%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation {
text-align: center;
margin: 0;
padding: 0;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: inline-block;
margin: 1em;
text-align: center;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
color: #000;
font-size: 20px;
line-height: 31px;
transition-duration: 0.2s;
display: inline-block;
position: relative;
}
.navigation li a:hover {
transform: translateY(10px);
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500;
/* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: 0;
left: -38px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: -38px;
left: -38px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
right: -38px;
top: 0;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: -38px;
right: -38px;
}
<body>
<div id="background">
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Order
</li>
<li>Contact
</li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div>
<div class="photocontainer"></div>
</div>
</body>