been trying to do a Nav bar, though through live stream it the #.media command does not effect my coding, no idea why. it should just keep a home sign in mobile state, though it does not effect it all. using chrome browsers, Brackets.
help me please.
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
u/media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
Seems to work fine for me. Try this code and you should also include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
#media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
Related
I wanted to create a navigation menu, but last item after zooming out, for example at 90% zoom goes down. "Five" is located under "Four" item. Navigation should be static in size and span one line, not two. All items should occupy the entire size of the div#page (960px, 192px*5) in one bar.
body {
background-color: blue;
margin: 0;
}
.wrapper {
width: 960px;
margin: 20px auto 0 auto;
}
#page {
background-color: #777272;
width: 100%;
height: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
}
nav ul li a {
text-decoration: none;
display: block;
background-color: purple;
width: 170px;
height: 20px;
line-height: 20px;
padding: 10px;
border: 1px solid black;
text-align: center;
margin: 5px 0px 20px 0;
}
a:visited {
color: white;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="page">
<nav>
<ul>
<li>One "1" One</li>
<li>Two "2" Two</li>
<li>Three "3" Three</li>
<li>Four "4" Four</li>
<li>Five "5" Five</li>
</ul>
</nav>
<ul class="clear">
<li>Tomato</li>
<li>Cucumber</li>
<li>Carrot</li>
</ul>
</div>
</div>
</body>
</html>
Simply remove this style:
nav ul li {
float: left;
} // not needed
and add this style:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; // this has been added
}
JSFiddle:
https://jsfiddle.net/1c2gsn34/
EDIT: In 33% UI is breaking, due to width:170px. Please remove the width from a instead of width use
nav ul li {
flex: 1;
}
Here you go this is what you want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Source : W3school
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
I'm trying to make the navigation bar for my personal site. I'm using flexbox because it's the only (pure CSS) solution I've found so far where the dropdown plays nicely with the link background color.
I'm trying to position the dropdown so that it floats over the content when opened. I tried setting the main nav li elements to have position: relative, then setting position: absolute and z-index: 1 for .dropdown ul , which technically works, but it breaks the grey background color for the link. I also tried using blocks, but it still looks bad either way. Does anyone know a pure CSS solution for this?
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: flex;
flex-direction: column;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
jsfiddle: http://jsfiddle.net/eq6o3yp5/8/
When you position it as absolute, the relative element do not get 'stretched' or resized, and so, that is why the background of the relative element do not reflect on the absolute positioned element.
Position it as absolute and give it a width, perhaps a min-width... and set a desired background-color or set it background-color: inherit;
.dropdown:hover ul, .dropdown ul:hover {
...
background-color: grey;
min-width: 100%;
position: absolute;
}
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: block;
position: absolute;
background-color: grey;
left: 0;
min-width: 100%;
position: absolute;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
color: red;
padding-right: 20px;
}
li {
display: inline-block;
padding-right: 30px;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
I have tried to padding/margins in both the anchor and li but nothing happens.
How do I add spacing in between each menu option?
My HTML, am I assigning it to the wrong place?:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"><h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Assuming you aren't targetting edge or IE, display: flex is a better way of doing what you're doing.
#menu {
display:flex;
justify-content: space-between;
}
Would result in each list item being evenly spaced. For practicing basic css skills using flex, I would take a look at this website. They have a lot of great tutorials for basic flex usage.
Have you tried this? you don't have to give width but will manage equal width for each element.
ul {
width: 100%;
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ul > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
ul > li > a {
display:block;
padding:50px;
}
Answer Solved. Followed
.body-color {
background: rgb(27,39,57)
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
margin-left: 0;
padding-left: 0;
}
li {
display: inline-block;
padding-left: 15px;
padding-right: 15px;
}
a {
text-decoration: none;
color: red;
}
<ul id="menu">
<li>Home</li>
<li>Portrait</li>
<li>Product</li>
<li>Showcase</li>
<li>Contact</li>
</ul>
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
transition: .3s;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
#menu ul li {
display: inline-block;
}
#menu ul li + li {
margin-left: 30px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
color: #f10;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"></h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
If it doesn't need to support IE 9 or lower. I recommand flex:
* { margin: 0; padding: 0; }
#menu {
position: relative;
display: flex;
justify-content: space-evenly; /* 'space-around' for just filled space */
width: 100%;
/* list nav normalization */
list-style: none;
margin: 0;
padding: 0;
/* Additional Options */
align-items: center;
align-content: center;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
#menu li {
display: inherit;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
#menu a {
padding: 10px;
text-decoration: none;
color: red;
/* For clarity in this example, remove this when your done */
background-color: rgba(0,0,0,.1);
}
<nav id="menu">
<li>Home</li>
<li>Portrait</li>
<li>Product Showcase</li>
<li>Contact</li>
</nav>
I think that adding display: inline-block; to the menu item might work.
Check this link, you can add padding to any direction.
https://codepen.io/jackstride/pen/JLpPgZ
li a { padding: 50px;
}
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>