just doing a simple header with a nav element, and I am getting a strange flickering effect on the font when I mouse over the header. Here is the code and and a gif. The links have a :hover rule that changes the color when you mouse over them but that is not the issue as I have tried removing that rule and the flickering still happens. Any help much appreciated. Thank you for your time
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
width: 100vw;
height: 10vh;
background-color: #666;
opacity: 1;
z-index: 6;
}
#menu {
line-height: 10vh;
float: right;
margin-right: 5vw;
}
#title {
margin-left: 10vw;
line-height: 10vh;
float: left;
}
li,
ul {
padding: 0;
margin: 0;
list-style: none;
float: right;
}
li a {
display: block;
line-height: 10vh;
padding: 0 1em;
font-size: 1.3em;
color: rgb(255, 255, 255);
text-decoration: none;
}
ul {
margin-right: 2em;
}
nav {}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFBB3F
}
<div id="header">
<div id="title">
<h1>Title <span id="subtitle">subtitle</span></h1>
</div>
<nav class="cf" id="menu">
<ul>
<li>about</li>
<li>gallery</li>
<li>contact</li>
<li>shop</li>
</ul>
</nav>
</div>
Related
I'm coding a menu in french but I need to move all the buttons (Home, About us...) to the right.
I tried with float: right; but it doesn't work.
Here is my Result :
My Result
The <a> Home, Informations, etc.. are in a div. It's this div that i want to push right !
My Objective :
My Objective
My Code:
/*
==============================
NAVBAR
==============================
*/
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
/*padding: 10px 0;*/
}
nav {
float: right;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Thanks
Float won't work because your container is a flex-container.
Just use:justify-content:space-between`
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
justify-content: space-between;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Bootstrap's "Container" class has a max-width of something like 1800px(not certain of exact px count).
Try using "container-fluid". This should allow the nav items to move to the far right but will probably move your logo to the far left because of your .logo float-left css.
You can give the logo a margin-left that works for you.
Edit: I just noticed you've defined your own .container class in the css. And margin set to 0 auto. This is going to center your content within the container class and give you max width of 80% so your content won't reach the far right side of the browser unless you set this items to "position:absolute" and then give them the necessary margins.
Try changing your nav class from:
nav{
floaf: right;
}
to:
nav{
position: absolute;
right: 20px;
top: 0px;
}
This should force your nav element to position it's right 20px left of the parent elements right. Tested in chrome.
remove the float: right from your .nav and add float:left from .logo
Now add display:flex to your .logo and for your container add:
.container{
justify-content: space-between;
}
I have not tested this. Let me know if this is what you wanted.
I'm trying to create a navbar whith white bars on top of the options, but the position: absolute is not responding as I expect, even if I place it after a position: relative, the white bars are wider than the width of the options:As you can see here
This is the code I'm following from the tutorial, I would appreciate your help.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Another way to achieve the same:
Instead of using the pseudo element, you can use the property border-top along with padding-top to achieve the same, if what you need is the border width to be equal with the length of the option.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
border-top:5px solid #fff;
padding-top:10px;
}
nav a:hover {
color: black;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Here is another way, in-case you need the width of all borders be same. You must give a fixed width to the pseudo element, instead of 100%.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
/*width: 100%;*/
width: 100px;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Your line item element is wider than your link element which means that your white bar will copy the relatively positioned line item's width. If you look in inspector you can see this clearly.
The width
Use the border-top property instead on your links.
nav a{
color: white;
text-decoration: none;
border-top: solid 3px #fff;
padding-top: 35px
}
nav a:hover {
color: black;
}
nav a::before {
}
On nav a:before :
If you want to create it the same width as your text - substract the padding:
width: calc(100% - 80px);
or you want to place it the same size as your li item use:
left: 0;
You have to account for the 40px * 2 = 80 px of padding you have added to the li element.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: calc(100% - 80px);
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
/*delete padding */
margin-left: 70px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
/*add this */
padding: 40px 0;
display: inline-block;
border-top: 5px solid transparent;
}
nav a:hover {
color: black;
/*and this*/
border-top: 5px solid white;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100px;
}
*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
The nav a::before pseudo-element is a child of a::before. Pseudo-elements like ::before or ::hover are always children of the elements whose selectors preface them. You need to put the position:relative property on the rule for nav a. Currently, you have the position:relative property on the li element, which is wider than the a element.
You'll also need to add some other property to raise the line. I've added padding-top to solve that problem.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
position: relative;
padding-top: 20px;
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
I'm having issues with my dropdown navigation for just this page. The response times on the navigation are extremely slow, and the dropdown menu will show momentarily on hover, but quickly disappears. I'm unsure if it has to do with the main element below, or not. If you have any insight or help, it would be great. I'm a graphic major, not web, so this isn't my forte.
body{
background-color: white;
}
#page-wrapper{
margin-left: auto;
margin-right: auto;
width: 960px;
height: auto;
background-image: url(Images/brick-wall-2209991.jpg);
background-repeat: repeat-y;
}
li {
text-align: center;
display: inline;
}
a {
text-decoration: none;
}
.span01,.span02,.span03,.span04,.span05,.span06,.span07,.span08,.span09,.span10,.span11,.span12
{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first-child{
margin-left: 0;
}
.last-child{
margin-right: 0;
}
.span01 {
width: 60px;
}
.span02 {
width: 140px;
}
.span03 {
width: 220px;
}
.span04 {
width: 300px;
}
.span05 {
width: 380px;
}
.span06 {
width: 460px;
}
.span07 {
width: 540px;
}
.span08 {
width: 620px;
}
.span09 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
.reset{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0px;
}
.header {height: 115px;
background-color: #1e241b;
width: 960px;
}
/********Navigation********/
ul { margin-right: 20px;}
li {text-align: center;
display: inline;
font-family: 'Josefin Sans', sans-serif;
font-size: 14pt;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
color: #d98a79;
}
li a:link {color: #d98a79;}
li a:visited {
color: #d98a79;
}
li a:hover {
text-decoration-color: white;
color: white;
}
li a:active {
color: white;
}
nav {text-align: center;
padding-left: 110px;
margin-top: 30px;
float: right;
margin-right: 70px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
text-align: left;
}
nav ul ul li a {
padding-top: 15px;
margin-top: 0px;
padding-bottom: 15px;
margin-left: -10px;
margin-right: 15px;
text-align: left;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #1e241b;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a{
display: block;
padding: 10px 8px;
}
.bar {height: 190px;
background-color: rgba(0,0,0,0.75);
position: relative;
margin-top: 20px;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
text-align: right;
text-transform: uppercase;
color: white;
font-size: 90pt;
position: relative;
top:-140px;
left: -40px;
margin-bottom: -140px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Sous Vide - About</title>
<link href="secondary.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed');
</style>
</head>
<body>
<div id="page-wrapper">
<header class="span12 header first-child last-child">
<nav class="span12">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>About Us</li>
<li>FAQ</li>
</ul>
</li>
<li>Menus
<ul>
<li>Seasonal Menu</li>
<li>Breakfast Menu</li>
<li>Lunch Menu</li>
</ul>
</li>
<li>Catering</li>
<li>Gallery</li>
<li>Locations</li>
</ul>
</nav>
</header>
<div class="reset"></div>
<main class="bar span12"></main>
<h1>About Us</h1>
<div class="reset"></div>
You should put the h1 element to a div container and style it with CSS.
Example:
<div id="DIVNAME">
<h1>About Us</h1>
</div>
in css:
#DIVNAME { height: 100px; width 100px; }
hi try this: it will work
h1{
clear:both;
}
I want to create a transition effect when hovering over my list element (or alternatively my anchor tags within these list elements).
Unfortunately, when I use my created transition the ::before pseudo-element (or the ::after, I'm not sure) are hiding what is technically its sibling content, that being the text within the anchor tags.
I've tried manipulating the z-index on the ul, li and a tags to no avail. The problem likely lies within my use of position: absolute in my transitions but I can't tell what I'm doing wrong.
Here's the HTML and CSS and a JSFiddle link
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}
<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li>RULES</li>
<li>NEWS</li>
<li>STATS</li>
<li>SUBMIT</li>
<li>LOGIN / REGISTER</li>
</div>
</header>
</body>
give the parent li a z-index, then use z-index: -1 on the pseudo element to push it behind the a but on top of the li.
You also need to close your ul
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
transition: color .25s;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
z-index: -1;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}
<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li>RULES</li>
<li>NEWS</li>
<li>STATS</li>
<li>SUBMIT</li>
<li>LOGIN / REGISTER</li>
</ul>
</div>
</header>
</body>
I am stumped on the following. I just added a logo to a site and for some reason, my nav panel links that are to the right of the logo/image are now not clickable. It appears that the image is somehow over-taking them, but I do not see how. In the console/inspect it doesn't show the image over-taking them?
Does anyone see why this is happening?
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
I don't understood whay you have give position:absolute to logo but, add z-index: -1; to .logo will make your link clickable..
.header {
margin: 0;
background-color: rgba(0,0,0,0);
height: 80px;
z-index: 9999;
position: absolute;/*test*/
width: 100%;
}
.header_wrap {
margin: 0 4%;
padding: 2% 0 0 0;
}
.logo {
position: absolute;
margin-top: -15px;
cursor: pointer;
z-index: -1;
}
.logo-img {
/*height: 75px;
width: auto;*/
height: auto;
width: 25%;
}
.logo a {
color: #000;
text-decoration: none;
}
.nav-list {
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav-list > a {
display: inline-block;
padding: 0px 15px;
text-decoration: none;
}
.nav-list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #000;
}
.nav-list > a > li:hover {
color: #3f3f3f;
}
<header class="header">
<div class="header_wrap">
<div class="logo"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></div>
<ul class="nav-list">
<li>WORK</li>
<li>APPROACH</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
Edit:
Other solution is give display: block; to .logo a will work. Fiddle
The image is not overtaking them but the <div> the image is sitting in is. It's full width so you have a transparent div sitting on top of your navbar. Limit the width of your logo container, use a span instead or float it as suggestions.
Check that the z-index of the image is below the z-index of the links.
You don't really need to use position: absolute;. Instead use display:inline or inline-block and avoid overlapping.
You CSS would look like this:
.nav-list {
display:inline; /* Add this */
margin: 0;
/* width:100%; you can remove this */
list-style: none;
text-align: right;
padding: 0;
}
.logo {
display:inline; /* add this*/
margin-top: -15px;
cursor: pointer;
/* z-index: -1; no need for z-index */
}
JsFiddle