.dropdown span:hover .dropdown_content{ display:block } is not working.
What is the reason???
*{ padding:0; margin:0 }
.dropdown_content{ display:none; }
.dropdown span:hover .dropdown_content{ display:block }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown_content">
<p>Hello world</p>
</div>
</div>
</body>
</html>
.dropdown span:hover .dropdown_content{ display:block } is not working, because span does not contain .dropdown_content element. They are siblings.
Use + to select siblings
*{ padding:0; margin:0 }
.dropdown_content{ display:none; }
.dropdown span:hover + .dropdown_content{ display:block }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown_content">
<p>Hello world</p>
</div>
</div>
</body>
</html>
When targeting span than you need to target the next + adjacent sibling selector like:
.dropdown span:hover + .dropdown_content{ display:block }
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
Related
I can apply "color:red" on hover, but not margin
can't figure out what I'm doing wrong
my css
.contact{
color:black;
position:relative;
}
.contact:hover{
color:red;
margin-top:20px;
}
my html
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
It is an inline element. You should set the display for it to block or inline-block to make margin work.
.contact{
display: block;
color:black;
}
.contact:hover{
color:red;
margin-top:20px;
}
You can't set top margin to an inline element. You need to make your element block or inline-block if you want to set top margin in your element.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.contact {
color: black;
position: relative;
display:block;
}
.contact:hover {
color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<div>abc</div>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
Use top instead of margin-top:
.contact:hover{
color:red;
top:-20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.contact{
color:black;
}
li:hover{
color:red;
margin-top: 20px;
}
.contact:hover{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
Here in the below code i am trying to put my contact section to the right in the header section .Also i have tried using float to right but it is not working in this section.
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think it can help you.
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think if you want a colorful themed type you can use this
.header {
padding: 80px;
text-align: left;
background: #1abc9c;
color: white;
}
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
Float is not intended for styling purpose. Its a mis-used hack. float is for floating images within a paragraph.
The modern approach is to use flexbox: .header { display: flex; }
to move the contact element to the right, you have to give it a margin: auto;. this will make it consume all remaining space. You can target the contact element with: .header span:last-of-type.
On a sidenote, do not use spans but take an <ul> for a navbar like the sample below:
nav ul {
display: flex;
list-style: none;
padding: 0;
}
nav ul li {
margin: 5px;
}
nav ul li:last-of-type {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li>Logo</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
I'm mocking up a site as an assignment and my text is appearing behind my nav bar. I need it to be under the nav bar how can I fix this?
so I've tried setting the margin-bottom to 50px and setting it as important.
I've tried setting the nav bar as static.
I've tried messing with a bunch of different settings as well but I can't seem to find something to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<body>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
Because your nav is position: fixed;, it doesn't push the rest of your content down the page. Anything absolutely positioned, be it absolute,sticky, or fixed, is not a part of the DOM in the same way that a normal element is. To non-absolute positioned elements it may as well not exist. What you want to do is add a margin-top to your content like this:
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
body{
margin-top: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
I have written following code. However, i am not getting how to change default blue color of navigation bar. I want the color to be #1E90FF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.row.content {height: 1500px}
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
header {background: #1E90FF;color:white;padding: 35px;}
footer {background: #1E90FF;color:white;padding: 15px;}
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>List Of Forms</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="fetchAmounts()">
<script src="prefilledform.js"> </script>
<br>
<center>
<div class="container-fluid">
<header>
<h1>Employee Reimbursement Forms</h1>
</header>
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Forms</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<br>
<br>
</div>
<div class="col-sm-9">
<h2>Account History </h2>
<div>
<footer>Logged in as: <%out.println(request.getAttribute("name")); %></footer>
</div>
</div>
</center>
</body>
</html>
I am using bootstrap 3. I also want to add effects like hover when i will click on active tab
including this on the page <style></style> tags serves for the per page basis well
and mixing it on two shades gives a brilliant effect like:
<style>
.nav-pills > li.active > a, .nav-pills > li.active > a:focus {
color: black;
background-color: #1E90FF;
}
.nav-pills > li.active > a:hover {
background-color: #efcb00;
color:black;
}
</style>
try this style it will help you...
<style type="text/css">
ul.nav.nav-pills li.active a{
background-color: #1E90FF!important;
}
ul.nav.nav-pills li a:hover{
background-color: #1E90FF!important;
color: #fff;
}
</style>
index.html and style.css are on my local machine to practice coding.
Chrome and Safari are rendering the CSS correctly but FireFox 29 is not. Firefox recognize the css file but it's not rendering it. I've tried on a different machine and still have the same issue.
I've already validated my code and there were no errors. Am I missing any tag that is preventing this from rendering in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="test/css" href="style.css">
<title>Welcome!</title>
</head>
<body>
<div id="pagewrap">
<!-- Top Head of My Page -->
<div id="header">
<nav id="nav">
<div id="socialnetwork">
<img src="./Social_Icons/Linkedin.png" alt="LinkedIn">
<img src="./Social_Icons/facebook.png" alt="FB">
<img src="./Social_Icons/Instagram.png" alt="InstaGram">
<img src="./Social_Icons/Twitter.png" alt="Twitter">
<img src="./Social_Icons/Skype.png" alt="Yelp">
<!-- Icons from Dribble by Dawid Dapszus https://dribbble.com/dashoo-->
</div>
<!-- End of Social Network Links-->
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>About Me</li>
<li>Contact </li>
</ul>
</nav>
</div>
</div>
<!--End of Page Wrap -->
</body>
</html>
body {
font-family:'Century Gothic', sans-serif;
}
a {
text-decoration: none;
}
#pagewrap {
width:950px;
margin: 0 auto;
}
#socialnetwork {
padding-top: 100px;
float:right;
}
#socialnetwork img{
height:30px;
}
#nav ul{
text-align: left;
border-bottom: groove;
}
#nav li{
margin:0 15px 0 0;
display: inline;
}
#nav li a:link{
color:#868686;
}
#nav li a:visited{
color:#868686;
}
#nav li a:hover{
color:#324EDC;
}
#nav li a:active{
color:#324EDC;
}
You are typing the wrong word in Link tag attribute value, you are typing "test/css" instead of "text/css"
Your Tag:
<link rel="stylesheet" type="test/css" href="style.css">
Updated Tag:
<link rel="stylesheet" type="text/css" href="style.css">
type="test/css"
Shouldn't it be: text/css?