How do I move the little arrow image which is inside <li>?
Here is the code:
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #f1f1f1;
padding: 5px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a img {
max-width: 20px;
height: auto;
margin-left: 4px;
}
nav ul li a {
color: #636363;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
color: #333;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Haircut</title>
</head>
<body>
<header>
<nav>
<ul>
<li>News
</li>
<li>Delivery
</li>
<li>Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
</li>
<li>Guaranties
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
</body>
</html>
If I just add margin-top to the img element it moves all the ul down. That's not what I want. I want to move it a little bit down to align with the li items
vertical-align: middle; Might be what you need.
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #f1f1f1;
padding: 5px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a img {
max-width: 20px;
height: auto;
margin-left: 4px;
vertical-align: middle;
}
nav ul li a {
color: #636363;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
color: #333;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Haircut</title>
</head>
<body>
<header>
<nav>
<ul>
<li>News
</li>
<li>Delivery
</li>
<li>Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
</li>
<li>Guaranties
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
</body>
</html>
You can set the image as position absolute.
nav ul li a img {
position:absolute;
max-width: 20px;
height: auto;
margin-left: 4px;
}
Then you can position it using the top property, not beautiful but works
http://jsbin.com/goyozo/edit?html,css
Related
I want to create a menu bar with a list, but it's all in one place!
If I play with the position of the menu (absolute, fixed, ...), it's good, but I want that the menu will be fixed.
CSS:
img.logo {
max-height: 90px;
width: auto;
position: fixed;
clip: rect(5px, 95px, 90px, 5px);
}
a,
li {
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: fixed;
text-decoration: none;
}
li {
border: 1px solid black;
}
***HTML:***
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li>
<img class="logo" src="img/logo.png" alt="problem">
</li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Run it and you will see what I see...
What is wrong?
PS: Can you say how can I make it all in one line, like a real menu bar
I've made a few changes by simplifying your css content.
You just need to use display: block and float:left to arrange your menu items properly. I've added a few more tweaks to it to suit what you wanted to achieve.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border: 1px solid #000;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<style>
img.logo {
max-height:90px;
width:auto;
position:fixed;
clip: rect(5px,95px,90px,5px);
}
a, li {
list-style: none;
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: relative;
text-decoration: none;
display: inline;
}
li {
border:1px solid black;
}
***HTML:***
</style>
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Just changing display:inline-block to inline worked for me. Preview this on full page as this is not responsive example.
Hope This could help. :)
You should remove position:fixed from img-logo, a, li and add position:fixed or position:sticky to their parent container
.navbar{
float: right;
position: sticky /* use can use position:fixed */
}
img.logo{
max-height:90px;
width:auto;
clip: rect(5px,95px,90px,5px);
}
a, li{
color:inherit;
list-style:none;
text-align:center;
padding-right:10px;
padding-left:5px;
padding-bottom:10px;
font-size:16px;
font-family:Odin rounded;
vertical-align:text-top;
text-decoration:none;
display: inline-block;
}
li {
border:1px solid black;
}
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</div>
</body>
</html>
Using glitch.com and trying to create a simple dropdown menu.
I have used a guide and tried to make the simplest version so that I am not missing anything. However, I just cant get the hover to work for me.
ul {
padding: 0;
margin: 0;
position: absolute;
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
height: 50px;
min-width: 120px;
line-height: 50px;
background-color: black;
text-decoration: none;
text-align: center;
display: block;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
ul li a:hover + .hidden, .hidden:hover {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<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="/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<ul>
<li>HOME</li>
<li>
ABOUT
<ul id="hidden">
<li>Team</li>
<li>Project</li>
<li>News</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</body>
</html>
Feeling pretty defeated by this with no clear idea why its not working.
I have messed around with the hover statement just to get it to work but to no avail.
Css targets ID with # and Class with period .
You have hidden as an ID so you could:
Change your css to
ul li a:hover + #hidden, #hidden:hover {
display:block;
}
or html to:
<ul class="hidden">
ul {
padding: 0;
margin: 0;
position: absolute;
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
height: 50px;
min-width: 120px;
line-height: 50px;
background-color: black;
text-decoration: none;
text-align: center;
display: block;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
ul li a:hover + #hidden, #hidden:hover {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<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="/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<ul>
<li>HOME</li>
<li>
ABOUT
<ul id="hidden">
<li>Team</li>
<li>Project</li>
<li>News</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</body>
</html>
What I want to do
I would like to display the navigation bar inline with the header for the site I am creating.
HTML and CSS
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
#top-nav li a {
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
#top-nav li:hover > a {
background: #111;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li {
float: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<div style="clear:both;"></div>
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">
Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item
<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
What broke the code
Adding padding: 10px; to header seems to have broken the code, as it was working fine previously, as in the nav bar was displaying properly inline with the header. I cannot seem to get my head around the issue, I really do not see what causes it.
Also, I understand that this is not Code Review, but any remarks as to what can be improved upon/formatted differently in the code will be appreciated.
You should remove the <div style="clear:both;"></div> div to display the nav bar inline with the logo.
Also add this to your css to eliminate list styling:
ul {
list-style-type: none;
}
Adding 10px of padding to your header makes it wider than 1000px, it will be 1020px wide. To prevent this, you should use box-sizing: border-box.
More information: https://www.w3schools.com/css/css_boxmodel.asp
EDIT:
That's not the problem here, I misread your question. The div's were not inline, because of the div with inline styling clear: both, since it clears the floating within the parent div.
If you remove it, the #logo and nav will be floating next to each other:
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
You have unwanted <div style="clear:both"></div> the one under logo immediately, remove it and your issue will be fixed, check the snippet below:
header {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
background: blue;
}
#logo, nav {
float: left;
}
#logo {
width: 40%;
background: red;
color: white;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 24px;
}
nav {
width: 60%;
background: #333;
height: 100px;
position: relative;
}
#top-nav {
position: absolute;
bottom: 0;
}
#top-nav li {
float: left;
background: #333;
}
#top-nav li a {
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
#top-nav li:hover > a {
background: #111;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li {
float: none;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div id="logo">
<span>My Site</span>
</div>
<!-- This clear div is making your nav below the logo-->
<!--<div style="clear:both;"></div>-->
<nav>
<ul id="top-nav">
<li>Item</li>
<li class="dropdown">
Item
<ul class="dropdown-content">
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Item</li>
<li>Item
<li>
</ul>
</nav>
<div style="clear:both;"></div>
</header>
</body>
</html>
Update
As #A. Ahmed mentioned, you could also insert this rule:
ul {
list-style-type: none;
}
To beautify the design.
I am trying to make my own website, but I'm having some difficulty with my top bar not changing color on hovor. If you think you can help, please answer.
index.html is working perfectly, just thought it might need to be added.
<!DOCTYPE html>
<html>
<head>
<title> my site </title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<ul>
<li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a>
<li> <a href="aboutme/aboutme.html" >About Me</a></li>
<li> <a href="resume/resume.html" >Résumé</a></li>
</ul>
</header>
</body>
</html>
index.css, stuff only for the header.
header ul { /*selects list of stuff*/
list-style-type: none; /*no bullet points*/
margin: 0;
padding: 0;
background-color: #70deef;
position: fixed;
width: 100%;
height: 50px;
}
header li { /*selects list element*/
float: left; /*move to left*/
}
header li a {
display: block; /*makes a rectangle*/
color: #ffffff; /*white*/
text-align: center;
text-decoration: none;
padding: 20px;
}
header li a.active { /*when hovering??*/
background-color: #d6d6d6; /*grey*/
}
I thought header li a.active would change the color on hover. Why isn't it doing so?
Try to use a:hover. Not a.active or something like this.
For more informations, see CSS :hover Selector, CSS Pseudo-classes or more generally CSS Selector Reference
header ul {
/*selects list of stuff*/
list-style-type: none;
/*no bullet points*/
margin: 0;
padding: 0;
background-color: #70deef;
position: fixed;
width: 100%;
height: 50px;
}
header li {
/*selects list element*/
float: left;
/*move to left*/
}
header li a {
display: block;
/*makes a rectangle*/
color: #ffffff;
/*white*/
text-align: center;
text-decoration: none;
padding: 20px;
}
header li a:hover {
/*when hovering??*/
background-color: #d6d6d6;
/*grey*/
}
<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<ul>
<li> Grade Calculator
<li> About Me
</li>
<li> Résumé
</li>
</ul>
</header>
</body>
</html>
You have to use the css selector :hover
header li a:hover { /*when hovering??*/
background-color: #d6d6d6; /*grey*/
}
Below is a JSFiddle link of some of my code. I was trying to achieve a slick looking pure html/css drop-down menu without the use of bootstrap or other plug-in sorts. However I can't seem to get the 'Creative' drop-down elements to appear below the navigation bar, they instead appear in-line and I have tried to change other parts of the code to make it work but I can't seem to do it without compromising the rest of the nav-bar.
Please if someone could give it a look at get it so when you hover 'Creative' it's children list elements appear below it. Preferably without just styling padding and margins.
https://jsfiddle.net/nytnfvmq/
HTML:
<!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">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
Home
</li>
<li>
Development
</li>
<li>
Creative
<ul>
<li>
Film
</li>
<li>
Design
</li>
<li>
Music
</li>
</ul>
</li>
<li>
Information
</li>
<li>
Contact Me
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li a {
width: 20%;
display: inline;
text-align: center;
float: left;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: relative;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li a {
background-color: red;
color: green;
}
You have a few things wrong. Don't float and assign widths to the anchor tags. Instead float the list items. You'll also need to add position: relative to the li and then add position: absolute; left: 0; top: 100%; to the child ul. That should about do it I think.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li {
width: 20%;
float: left;
position: relative;
}
nav ul li a {
display: block;
text-align: center;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
background-color: red;
color: green;
}
<!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">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
Home
</li>
<li>
Development
</li>
<li>
Creative
<ul>
<li>
Film
</li>
<li>
Design
</li>
<li>
Music
</li>
</ul>
</li>
<li>
Information
</li>
<li>
Contact Me
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>