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>
Related
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>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I cant seem to change the font color in my navbar, the other elements in my navbar css works but not the font color for some reason. I have tried to change the class but then my other elements in the css wont work. I cant seem to find the problem, though this is my first time using bootstrap.
CSS
.navbar {
background-color: white;
border: none;
color: #0000;
}
.navbar-brand {
font-size: 50px;
}
HTML
<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar=header">
<a class="navbar-brand" href="#">TRAVELLING</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
.navbar {
background-color: white;
border: none;
color: #000;
}
.navbar .navbar-nav li > a{
color: orange !important;
}
.navbar .navbar-brand {
font-size: 50px;
color: blue !important;
}
<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TRAVELLING</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
Code
.navbar {
background-color: white;
border: none;
color: black;
}
.navbar-brand {
font-size: 50px;
}
.navbar a{
color:red;
}
.navbar li a{
color:red;
}
You have assigned a wrong value to color property. It should be 3 or 6 digits like color: #000 or color: #000000
CSS
.navbar {
background-color: white;
border: none;
/*color: #0000;*/ color: #000;
}
.navbar ul li > a{
color: #f00;
}
You can also use inline css in your navbar where you want to change. Try something like this
<nav class="navbar navbar-default" style="background-color:white;border:none;color:#000;">
Try something like:
.navbar {
background-color: white !important;
border: none;
}
.navbar-brand {
font-size: 50px;
}
.navbar *{
color: #000 !important; // should set font color for element contain text
}
.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
I'm trying to make a navigation bar for my site using Notepad++ but my CSS code for the navigation bar won't link to my HTML file. I've tried linking the files together using this method:
<link rel="stylesheet" type="text/css" href="main.css" />
But it doesn't seem to make any changes to my HTML file.
Here is the HTML code that I would like the CSS code to link to:
<ul id="nav">
<li>Home</li>
<li>Popular Stories</li>
<li>Q&A Page</li>
<li>Popular Stitch Sessions</li>
<li>Video Stories</li>
<li>Secrets Section</li>
</ul>
Here is the CSS code that I would like to be linked to the HTML code:
/*CSS Document*/
* {margin:0px; padding:0px;}
body {
width: 600px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif:
font-size: 86x;
}
/*NAVIGATION*/
*nav {
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
*nav li {
display:inline;
margin-left:-3px;
margin-right:-3px;
}
*nav a {
text-decoration: none;
background-color:#999;
padding: 10px;
margin-bottom:10px;
}
*nav a:link{
}
*nav a:hover {
background-color:#FFF
}
#nav a:visited {
}
You're using an asterisk for your ID selector. It should be a hash tag (#nav, not *nav).
Here is what the rest of the HTML should look like assuming your CSS file is in the same folder:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Stylesheet Linking</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
</body>
</html>
Keep file in same directory than in your htmml file type below code
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
</body>
</html>