I have a navigation bar with CSS & HTML but a little problem.
I want to make all the area of the text (Homepage f.e.) darker, not only the text.
CSS:
#navi {
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no- repeat;
background-position: 1272px -14px;
margin-left: -8px;
margin-right: -8px;
height: 43px;
}
a {
text-decoration: none;
color: white;
font-size: 16px;
}
ul {
list-style-type: none;
margin-top: -8px;
padding: 10px;
padding-left: 5px;
margin-left: -15px;
}
li {
display: inline;
margin-left: 15px;
font-size: 14px;
}
li:hover {
background-color: black;
}
How i can make the complety area of the text darker?
-> http://i.imgur.com/exd9eNR.png
Thanks in advance.
Refine your css a little bit, add height to li element, change it to inline-block and add line-height to a :)
* {
margin: 0px;
}
#navi {
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no-repeat;
background-position: 1272px -14px;
height: 43px;
}
a {
text-decoration: none;
color: white;
font-size: 16px;
line-height: 43px;
padding: 0px 10px;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
li {
display: inline-block;
margin-left: 15px;
font-size: 14px;
height: 43px;
}
li:hover {
background-color: black;
}
<div id="navi">
<ul>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</div>
Related
The navbar I created overlaps when I switch my site to a mobile view.
I tried making it fit-content, but it still overlaps. The part that overlaps is the listed items
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline;
padding-top: 23px;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I expect the navbar items to be side by side but the actual result in them overlapping.
You can use inline-flex for that
change
#navBar ul {
padding: 0;
margin: 0; /* reset margin */
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex; /* change to inline-flex and remove the padding */
position: relative;
}
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
margin: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body {
margin: 0;
}
nav {
background-color: #333;
display: flex;
justify-content: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
align-items: center;
}
li {
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<body>
<nav>
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</nav>
</body>
You can add position: relative; and a value for bottom or top- in my snippet bottom: 4px;:
This reserves the space originally taken by the element (without position: relative;), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
position: relative;
bottom: 4px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
When hovering over the links in drop2 div, the entire drop2 div moves upward a few pixels. Same problem with drop3.
Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.
#nav {
background-color: #373737;
float: left;
height: 30px;
padding: 0px 0px 0px 0px;
width: 970px;
}
.nav a {
display: block;
}
.nav ul li a {
position: relative;
}
a {
text-decoration: none;
}
a.item {
color: white;
}
.item {
position: relative;
}
a.item:hover {
background-color: #dcd0c0;
height: 30px;
color: #373737;
font-weight: bold;
}
.menu {
list-style-type: none;
margin: auto;
width: 970px;
text-align: center;
}
.nav .items {
display: inline;
float: left;
margin: 0px 100px 0px 100px;
padding: 0;
text-align: center;
width: 82px;
}
.drop2 {
display: none;
text-align: left;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.items:hover .drop2 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop3 {
display: none;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 150px;
}
.items:hover .drop3 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop2 > a {
color: #373737;
}
.drop3 > a {
color: #373737;
}
.drop2 > a:hover {
font-weight: bold;
}
.drop3 > a:hover {
font-weight: bold;
}
<div id="nav">
<div class="nav">
<ul class="menu">
<li class="items">
Photos
</li>
<li class="items">
Locations
<div class="drop2">
Bays
Lakes
Pacific Ocean
</div>
</li>
<li class="items">
Catches
<div class="drop3">
Bass
Other
</div>
</li>
</ul>
</div>
</div>
Add line-height: 30px; to your #nav tag in css.
jsfiddle
I'm trying to build a website. But for some reason I am not able to reposition my dropdown list(CSS). Need some help. I need to move that dropdown list to the center.
HTML Code:
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
<a class="dropbtn" style="margin-left: -40px; z-index: -1">Rent</a>
<div class="dropdown-content">
Mountain Bikes
Hybrid Bikes
Road Bikes
City Bikes
</div>
</li>
<li>
FAQ's
</li>
<li>
About
</li>
</ul>
</header>
CSS Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 1;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #6ab47b;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
margin-top: 25px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
Thank you in advance.
You can keep your menu floated to right. In order to center your drop down menu you should do the followings
remove the "margin-left: -40px; inline style from all <a> elements.
insert the following two lines to your .dropdown-content class
right: 50%;
transform: translate(50%,0);
In your CSS the dropdown is floated to right. Just remove it, Dropdown will be in the center.
#main_navbar {
text-align: center;
margin: 0 auto;
/*float: right;*/
margin-top: 25px;
}
accepted
replace this css with what you have for #main_navbar > li > a:
#main_navbar > li > a {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#main_navbar > li > {
text-align:center;
}
try with this below code it may help you.
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
.dropdown-content {
position: absolute;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0 -50px;
font-size: 14px;
text-align: center;
list-style: none;
background-color: #6ab47b;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#main_navbar{
float : right;
}
#main_navbar>li {
float: left;
padding : 10px;
list-style-type : none;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
.dropdown>.dropdown-content {
list-style-type : none;
}
.dropdown>.dropdown-content>li {
padding : 5px;
border-bottom : 1px solid #fff;
}
.dropdown>.dropdown-content>li:last-child {
border-bottom : none;
}
.dropdown>.dropdown-content>li:hover {
background : white;
color : #6ab47b !important;
}
.dropdown:hover .dropdown-content{
display : block
}
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
Rent <span class="caret"></span>
<ul class="dropdown-content">
<li>Mountain Bikes</li>
<li>Hybrid Bikes</li>
<li>Something else here</li>
<li>Road Bikes</li>
<li>City Bikes</li>
</ul>
</li>
<li><a href="faq.html" >FAQ's</a></li>
<li><a href="about.html" >About</a>
</li>
</ul>
</header>
I'm having trouble with the header div of this website I'm making. There is padding or something appearing underneath my horizontal menu bar even though my padding is set to 0. I know that similar posts have been made about the but I have read quite a few and none of the answers seemed to do the trick for me. I have changed the background of the header div to yellow to make it more visible. There is also a pixel or two on either side of the menu bar which are unwanted. I'll put my css and html code below. screenshot
<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
<li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
<li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
<li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
<li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
</ul>
</ul>
And here is the relevant CSS. (The 'Big' class is what I'm using for all the major elements on the page.)
body {
background-image:url("Images/background.png");
background:tile;
}
.header img {
width: 100%;
}
.header {
background-color: yellow;
height: auto;
padding-top: 30px;
padding-left: 0px;
padding-bottom: 0px;
margin-top: 10px;
}
.big {
width: 80%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px #C5C5C5;
}
Here is the css for my navbar.
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
I have added an example to show http://codepen.io/simondavies/pen/jWjoBy
It working please check out the css, html etc
I have guestimated some stuff... Hope it will be a help
<div class="big header">
<div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<li><!--<ul class="logo"></ul>--></li>
</ul>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background-color: yellow;
height: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 150px;
padding: 30px 0 15px 0;
margin: 0;
}
.header-img img {
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.big {
margin: 0 auto;
padding: 0;
margin-top: 10px;
width: 80%;
box-shadow: 0px 0px 20px #C5C5C5;
}
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin: 0;
padding: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"] {
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float: right;
list-style-type: none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
You have an error in your HTML:
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
The only descendants of either <ul> or <ol> should be <li>. It is possible that this could be the issue.
I corrected the markup in two ways, without reproducing your issue:
By wrapping <ul class="logo"> inside of an <li> (essentially assuming it was a sublist in your list
By closing your first <ul>, and then letting the second list sit adjacent to it
But I also could not reproduce your issue by leaving the markup alone
So, the issue may be:
You need to use a CSS reset to remove default margins and paddings that the browser is providing
There is another ruleset that is adding padding to your .header
That other ruleset may have a higher specificity
That other ruleset may have an !important declaration