I am not able to get this code working properly on IE-8. I am sorry as I am beginner in CSS.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid /ns#">
<head>
<meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type"/>
<link href="/site_media/css-dock-menu/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/site_media/css/new.css"/>
</head>
</body>
<ul class="navbar">
<li style="width:9%;">
Useful Sites
<ul>
<li>Portal</li>
<li>Calender</li>
</ul>
</li>
<li>
[....]
Basically Hovering over "Useful Sites" should display drop down having "Portal" and "Calender".
Here is my new.css -
#wrap {
width: 100%;
height: 30px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 20px;
padding: 0;
width: 100%;
left-margin: 0;
position: absolute;
right: 0;
}
.navbar li {
height: auto;
width: 125px;
float: left;
list-style: none;
}
.navbar a {
padding: 10px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
Thanks in advance !
you need as below
.navbar li a:hover ul
{
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
Related
I'm hacking away at a small website project, trying use HTML and CSS only for now, and am pretty happy with the desktop version but when testing on my iPhone I can expand the hamburger menu with a click but it will not collapse upon clicking it a second time or clicking outside the screen. It seems relatively easy to solve with jquery but I'm really curious now to see if I can do it without?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- for-mobile-apps -->
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Personal Website" />
<!-- //for-mobile-apps -->
</head>
<body>
<header>
<nav>
<ul>
<li>ABOUT</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
CSS:
#media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
For without JS or jQuery solution you have to go for input selectors like checkbox to toggle their siblings on its :checked event.
As shown in snippet below.
Code Snippet
ul {
display: none;
}
input[type="checkbox"]:checked+ul {
display: block;
}
<header>
<nav>
<input id="menu-icon" type="checkbox" />
<ul>
<li>ABOUT</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
This solution doesn't play nice in iOS Safari, but it seems to work everywhere else.
/* The necessities */
.onclick-menu {
position: relative;
display: inline-block;
}
.onclick-menu:before {
content: "Click me!";
}
.onclick-menu:focus {
pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
}
.onclick-menu-content {
pointer-events: auto;
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
-moz-transition: visibility 0.5s;
-webkit-transition: visibility 0.5s;
-o-transition: visibility 0.5s;
}
.onclick-menu.no-pointer-events {
pointer-events: auto !important;
}
.onclick-menu.no-visibility .onclick-menu-content {
visibility: visible !important;
display: none;
}
.onclick-menu.no-visibility:focus .onclick-menu-content {
display: block;
}
.onclick-menu.no-opacity .onclick-menu-content {
opacity: 1 !important;
}
/*
Eye candy
( colors courtesy of https://kuler.adobe.com/try-color-theme-3350110 )
*/
.onclick-menu {
padding: 0;
margin: 0 0 1em 0;
outline: 0;
}
.onclick-menu:before {
padding: 5px 10px;
background-color: #94a4a5;
}
.onclick-menu-content {
background-color: #364656;
width: auto;
margin-top: 19px;
margin-left: 0;
padding: 10px;
}
/* arrow for the expanding part */
.onclick-menu-content:before {
content: "";
width: 0;
height: 0;
border-bottom: 10px solid #364656;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: -10px;
}
.onclick-menu-content li {
color: #f2f5e9;
list-style-type: none;
white-space: nowrap;
}
/* style the buttons */
.onclick-menu-content button {
background: transparent;
border: none;
color: inherit;
cursor: inherit;
outline: 0;
cursor: pointer;
}
.onclick-menu-content button:hover {
color: #ff8c31;
}
<div tabindex="0" class="onclick-menu">
<ul class="onclick-menu-content">
<li><button onclick="alert('click 1')">Look, mom</button></li>
<li><button onclick="alert('click 2')">no JavaScript!</button></li>
<li><button onclick="alert('click 3')">Pretty nice, right?</button></li>
</ul>
</div>
This was originally posted by Koen Kivits. Here's a link to his website.
I am trying to create a new website for my mom, and I am working on the navigation bar right now. I have the dropdown menu etc working, but it is not properly aligned.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style type="text/css">
ul {
list-style: none;
padding-left: 400px;
width: auto;
margin-left: auto;
margin-right: auto;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #878E63
}
li ul {
display: none;
}
ul li a {
display: block;
background: #878E63;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #F1F0D1;
}
ul li a:hover {
background: #111;
}
li:hover ul {
display: block;
position: absolute;
right: -100px;
}
li:hover li {
float: none;
text-align: center;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>
Services
<ul class="hidden">
<li>Threading</li>
<li>Waxing</li>
<li>Mehndi/Henna</li>
<li>Facial</li>
</ul>
</li>
<li>Media</li>
<li>Testimonial</li>
<li>Career</li>
<li>Client</li>
<li>Contact Us</li>
</ul>
</body>
</html>
The dropdown bar for the services is not properly aligned.
You want the dropdown to be aligned with the left end of it's parent container so instead of right:-100, just make the dropdown ul left:0; on hover. Also it's inheriting 40px of padding so set this to 0 and everything looks good.
li:hover ul {
display: block;
position: absolute;
left: 0px;
padding:0px;
}
You can add a new class for your hidden element and set an absolute position:
Something like this:
.hidden{
position:absolute;
left:-54%;
}
Have a look at this
https://jsfiddle.net/9e43Lbx9/
The dropdown ul you have is inheriting the padding-left of the following css :
ul {
list-style: none;
padding-left: 400px;
width: auto;
margin-left: auto;
margin-right: auto;
margin: 0px;
}
So just making that padding go away for the dropdown ul using :
li:hover ul {
display: block;
position: absolute;
padding:0px;
}
Trying to remove the whitespace under my navigation bar, when you inspect element and disable overflow: hidden the whitespace disappears?
https://i.gyazo.com/b2f412e61b09f24348a02fd5b7d4bdf3.png > with overflow
https://i.gyazo.com/cbd9766f50c97a732064133a8a77e25a.png > without
Naturally it also removed the background color so I'd like to find another fix for this problem?
body {
font-family: 'Oxygen', sans-serif;
width: 100%;
height: 100%;
margin: 0;
background-color: #EEEEE7;
}
h1 {
font-family: 'Oxygen', sans-serif;
}
button {
color: #FE5B3C;
background-color: #2B211F;
border: none;
padding: 10px;
text-align: center;
font-size: 24px;
}
/* The dividers */
#wrapper {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
margin: 0;
background: url('images/studying.jpg');
background-size: cover;
background-position: 0;
margin-top: 0;
clear: both;
}
.container h1, p {
color: #FE5B3C;
text-align: center;
padding: .5em;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
margin-bottom: 0;
padding: 0;
overflow: hidden;
white-space: no wrap;
background-color: #2B211F;
width: 100%;
}
.img-topnav {
display: block;
margin: 0;
padding: 1em;
height: 32px;
width: auto;
max-width: 100%;
float: left;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #FE5B3C;
text-align: center;
padding: 22px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
margin: 0;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #EEEEE7;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
and html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>Your Landing Page!</title>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT -->
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- Scripts -->
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<!-- Favicon / How to Edit: Make sure the type="" is the right type. Then change the href="" to the path of the image/.ico file you'd like to use. -->
<link rel="icon" type="image/png" href="images/icons/mortarboard.png">
</head>
<body>
<div id="wrapper">
<ul class="topnav">
<li><img src="images/icons/medal.png" class="img-topnav" alt="Home">Personal Tutors</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">☰</li>
</ul>
<div class="container">
<h1>Welcome to Personal Tutors!</h1>
<button>Find a Tutor!</button>
<p> This is a test to see if the font is working. </p>
<div>
</div>
</body>
</html>
The problem has nothing to do with the overflow property. The whitespace is actually the top margin of the h1 tag.
An easy and quick fix would be to replace the h1 margin top with padding.
Try to add this to you code:
.container h1 {
margin-top: 0;
padding-top: 1em;
}
I can't seem to figure out why but there seems to be a gap around the third li element. It shows up in Chrome but when viewing in FireFox, all is good. Anybody know what's going on here?
Link to view gap...
html,
body,
ul,
li,
a {
margin: 0;
padding: 0;
}
html,
body {
background-image: url('../images/bg.png');
background-repeat: repeat;
height: 100%;
width: 100%;
}
ul {
font-size: 0;
height: 50%;
margin-top: 12.5%;
padding: 0;
position: relative;
width: 100%;
}
ul li {
background-color: #FFFFFF;
/*WHITE*/
display: inline-block;
font-size: 14px;
height: 100%;
opacity: .50;
width: 14%;
}
ul li:hover {
opacity: 1;
}
ul li a {
border-top: 1px solid #000;
bottom: 0;
color: #000;
/*BLACK*/
padding: 10px 0;
position: absolute;
text-align: center;
text-decoration: none;
width: inherit;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
</head>
<body>
<ul>
<li>Assignment 1
</li>
<li>Assignment 2
</li>
<li>Assignment 3
</li>
<li>Assignment 4
</li>
<li>Assignment 5
</li>
<li>Assignment 6
</li>
<li>Assignment 7
</li>
</ul>
</body>
</html>
I have two links that are a part of my navigation bar that have drop downs. What I would like is a background image for each drop down;an image for fairies, a different image for craniums. I'm pretty close, I think, but I'm unsure as to how to set this up. After reading several posts, the post from Ryan Rahif on May 19 at 18:58 is pretty darned close to what I want. Do I need to create another hover div? Do I need to create a hover for each drop down?
thank u
<!Doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairies - Tabbed Dropdown</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>World of Fairies</li>
<li>Fairihabitants
<ul>
<li>Fairies</li>
<li class="cranlink">Craniums</li>
</ul>
</li>
<li>Fairi-bitats
<ul>
<li>Dreams</li>
<li>Tinkling Bells</li>
<li>Rain Drops</li>
</ul>
</li>
<li>Fairy Dust</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* CSS Document - Stylesheet.css */
/* BODY AND CONTAINER
-------------------------------------- */
body {
font-size: 76%;
padding: 0px;
margin: 0px;
}
#container {
width: 650px;
padding: 0px;
margin: 0 auto 0 auto;
}
/* MAIN NAVIGATION
-------------------------------------- */
#nav {
float: left;
width: 650px;
height: 50px;
border-bottom: 2px solid #000;
padding: 0px;
margin: 100px 0 0 0;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
padding: 0px;
margin: 0px;
}
#nav ul li a {
float: left;
width: 150px;
height: 50px;
background-image: url(../images/fairy-gate.jpeg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 0px;
margin: 0 0 0 10px;
}
#nav ul li a:hover {
background-image: url(../images/bg-nav-hover.png);
background-repeat: repeat-x;
}
/* DROPDOWN MENU - MAIN NAVIGATION
-------------------------------------- */
#nav li ul {
display: none;
}
#nav li:hover ul {
width: 150px;
display: block;
visibility: visible;
position: relative;
top: 0px;
clear: both;
z-index: 1;
}
.cranlink {
background-image:url(../images/craniums.jpg);