I encountered this problem when trying to apply styles to the hover state of a link.
I couldn't quite come up with the right phrase to google this problem so apologies if this is a duplicate post. I might also add that I am a complete beginner.
Anyway this is what happens:
The padding is not being applied inside the header, it is instead spilling out into the main page content.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Header 1</h1>
<nav>
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
</header>
</body>
</html>
CSS:
#font-face{
font-family: LobsterTwoBoldItalic;
src: url(../fonts/LobsterTwo-BoldItalic.ttf);
}
* {
box-sizing: border-box;
margin: 0;
font-family: LobsterTwoBoldItalic;
}
header {
height: 100px;
width: 100%;
background: #3399FF;
position: relative;
}
header h1 {
float: left;
padding: 20px;
color: #FFF;
font-size: 48px;
}
header nav {
float: left;
}
header nav ul {
padding: 0;
list-style: none;
position: absolute;
bottom: 0px;
}
header nav ul li {
display: inline-block;
font-size: 32px;
}
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
header nav ul li a:hover{
background: #CCC;
color: #217C7E;
}
What is it that I'm doing wrong?
Change
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
to
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 1px 25px;//this puts it to the bottom of the nav bar in JS fiddle
}
You can try it in jsfiddle here : http://jsfiddle.net/v93mzvvj/
Padding adds space to the inside of the element.
What you want is to change it so the padding on the bottom is only 0px, this way you get the spacing you want around the text, without going past the bottom of the navigation bar.
JSFiddle
Simply change this part of your CSS file:
header nav ul li a{
text-decoration: none;
color: #FFF;
--> padding: 20px 25px 0px 25px;
}
Related
I create a nav-bar but when ever I hover over the links there is this gap between the ul and a:hover. I'm just trying to figure out how to remove the gap and make the hover cover the whole area.
I tried removing the padding for the ul but the hover just breaks its container and makes the ul smaller.
I tried using the inspect tool on google chrome. It showing me that the padding for the ul is 1rem and a is 1rem but I don't understand where the gap is coming from.
I've set the universal selector to include padding and margin be set to 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<title></title>
<style>
:root{
--max-width: 1100px;
--dark-color: #333;
--light-color: #f3f3f3;
--primary-color: #93cb52;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Karla', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
a{
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
img {
width:100%;
}
/*Utility*/
.container {
max-width: var(--max-width);
margin:auto;
padding: 0 2rem;
overflor:hidden;
}
,btn {
display: inline-block;
border: none;
background: var(--dark-color);
color: #fff;
padding: 0.5rem 1.5rem;
}
.bg-dark {
background: var(--dark-color);
}
/*Main-nav*/
#main-nav .container{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
#main-nav .container h1 {
flex:2;
}
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem;
background: white;
}
#main-nav ul li a {
flex:1;
padding:1rem;
color: black;
}
#main-nav ul li a:hover{
background: #333;
color: #fff;
}
</style>
</head>
<body>
<nav id="main-nav" class="bg-dark">
<div class="container">
<h1 class="header-logo">Experience</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I just want to know why there is a gap and how to remove it.
Your line-height attribute is to big for the height of the navbar. As a fix, just remove that attribute from this css tag:
body{
font-family: 'Karla', sans-serif;
/* line-height: 1.5; << Remove this guy */
background: var(--light-color);
}
Here an example JSFiddle from your code with that change.
Remove lineheight from body and padding rightand leftfrom ul like,
#main-nav ul{
display: flex;
justify-content:center;
align-items: center;
padding:1rem 0rem;
background: white;
}
body{
font-family: 'Karla', sans-serif;
background: var(--light-color);
}
I have a navigation bar with a logo inside and I was able to do it, but I was not able to align properly the text and the figure.
I would like to align the text in the center, considering the height of the logo.
Please any ideas? I tried to change many things, but did not work. In my code here, I only put a other logo as an example, my original logo is very big.
Also I do not want a background color in my logo, only in the text.
<html lang="en">
<head>
<title>data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul>
<li><img src="http://news.olemiss.edu/wp-content/uploads/2016/08/MoW-Logo.jpg" width="140"></li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Info</li>
<li>Photos</li>
<li style="float:right">Help</li>
<li class="dropdown" style="float:right">
About
<div class="dropdown-content">
Team
Events
</div> </li>
</ul>
<h1> Text....</h1>
</body>
</html>
My CSS code is:
#nav a:hover {
color: black;
background-color: #FFF;
}
ul {list-style-type: none;
font-family:calibri;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 2px solid #e7e7e7;
height: 90px;
}
body {font-family:Times New Roman;line-height: 1.5em;}
li {float: left;}
li a {display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
a:hover:not(.active) {background-color: #5E9F49;}
.active {background-color:#9DC690;}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #5E9F49;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color:#9DC690;}
.dropdown:hover .dropdown-content {display: block;}
Thanks a lot
The easiest way here is set ul li and ul li a line-height for 90px (as your ul height) and set padding-top and bottom to 0.
li { float: left; line-height: 90px; }
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
But now your drop down list is broken. We fix it by setting line-height and height for .dropdown-content links like that:
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
line-height: normal;
height: auto;
}
Now it looks fine, but your image is not aligned correctly. First of all, we need to set display: inline-block for our list elements.
li { float: left; line-height: 90px; display: inline-block; }
And then add vertical-align: middle for image
li img { vertical-align: middle; }
The last thing you want to know is unwanted hover on the first element. Remember that you can use nth-child, first-child, first-of-type combined with not selector to count elements. Add line:
li:first-child a:hover { background: none; }
And now everything should work just like you want it to. Anyway, few tips for future.
Don't be afraid of using divs. It helps, helps a lot when you need to style and control elements on website. It's nothing more than just a container.
Keep your CSS clean. It's Cascading Style Sheets. You've got in your CSS li a styles and after this li a, .dropbtn styles that override the previous one.
Don't give up and learn on. ;)
Please check this fiddle link for your answer.
I am using margin to align the navbar items in the center.
Why is the logo here having a slight overlap at the bottom portion? The CSS and HTML are given below. I've tried overriding the css properties respective to the logo <li> element. but it didn't work.
working fiddle
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul id="nav">
<li>WORK</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="logo">
<a href="#" style="padding:0;">
<img src="logo.png" />
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: right;
text-align: center;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
Depends on what you're trying to accomplish.
http://jsfiddle.net/66eKE/3/
#nav {
list-style-type: none;
margin: 0;
padding: 0;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
background: #000;
float: left;
width: 100%;
}
#nav li {
margin: 0;
padding: 0;
width: 19%;
text-align: center;
display: inline-block;
float: right;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}
#nav a:link, #nav a:visited {
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
This makes it so you can resize your logo to whatever you want. The menu item may be floating outside the div. In that case you either need to float the parent, hide the parent with overflow, or clear the float.
Refactor
I refactored a few things such as the drop shadow and background color on the parent. This allows the majority of the effect to be dependent on the parent div rather than the individual items. I'm only assuming here though. Do you have a photoshop mockup of what you want? Gives us a better idea of what you need for CSS.
I have searched lots of question in this forum and it doesnt seems to help. I'm trying to center my navigation bar however despite following most of the answers text-align = center; doesn't work for me.
HTML code in ASP.NET:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Login</li>
<li>Report</li>
<li>Recent cases</li>
<li>About</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
CSS Code:
body {
font-family: helvetica, arial, sans-serif;
background: #e3e3e3;
text-align: center;
}
/* MENU */
#nav {
text-align: center;
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
border: 1px solid white;
border-bottom: none;
}
#nav li a, #nav li {
text-align: center;
float: left;
}
#nav li {
text-align: center;
list-style: none;
position: relative;
}
#nav li a {
text-align: center;
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 150px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
#nav li ul
Indeed the most easiest way is to use text-align: center;. The problem you encounter is that <li> tags are block level elements. Thus it is not possible to apply text-align (applies only on inline elements) on the outer <ul> element in order to center the inner <li> elements. Therefore you have to tell the <li> tags first to behave like inline elements by applying the display property:
Markup:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Style:
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block; // or display: inline;
}
Here is my working example on jsfiddle: http://jsfiddle.net/7MKdk/
Try This:
#nav{
position:absolute;
left:30%;
}
you can remove float
Is this the part you mean?
#nav li a, #nav li {
text-align: center;
float: left;
}
By the way, try removing the float: left part. Your code almost drove me crazy. You should add IDs and classes.
Try margin:auto with exact width and remove float:left
jsfiddle link
At first float:left is needed to calculate exact width of ul. And then we need to make float:none to make use of margin:auto;
Try this:
#nav{
margin-left:10px; (Increase the px until the nav reach center)
}
I'm working on a navigation menu, and have created a containing four anchor tags, as below:
<nav>
<ul>
<li>BLOG</li>
<li>ABOUT ME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
I've set a top border of 10px for each link, which I want to sit tight on top of the text. Despite setting padding to 0 in all the right places, I can't get rid of the padding. I've tried changing line height but this just moves the whole nav section up or down the screen, and doesn't affect the gap between the anchor text and the top border.
Here's the CSS (not including CSS resets etc, which I can post if needed, but these mostly came from HTML5BoilerPlate.
nav ul {
padding-right: 24px;
float: right;
}
nav li {
display: inline;
font-family: Oswald;
font-size: 25px;
}
nav a {
color: #7a7a7a;
text-decoration: none;
margin-left: 16px;
}
nav li a {
border-top: 10px solid #7a7a7a;
}
nav a:hover {
color: #555555
}
nav a.active {
color: #555555;
}
nav a.highlight:hover {
color: #1f9c66;
}
a.highlight {
color: #29cf86;
}
Can anyone help? Thanks.
Set an anchor float which will remove the margin & padding in every web-browser.
#container li a {
float:left;
}
You could translate the anchors a few pixels up via relative positioning:
li {
display: inline;
margin-left: 16px;
border-top: 10px solid #7a7a7a;
}
a {
position: relative;
top: -6px;
}
Live demo: http://jsfiddle.net/XQK9h/
I think it helps you.
<style type="text/css">
nav ul {
padding-right: 24px;
float: right;
}
nav div {
border-top: 10px solid green;
display: block;
float: left;
font-family: Oswald;
font-size: 25px;
height: 10px;
margin: 10px;
}
nav a {
color: #7a7a7a;
text-decoration: none;
}
nav a:hover {
color: #555555
}
nav a.active {
color: #555555;
}
nav a.highlight:hover {
color: #1f9c66;
}
a {
position: relative;
top: -3px;
}
a.highlight {
color: #29cf86;
}
</style>
<nav>
<ul>
<div>BLOG</div>
<div>ABOUT ME</div>
<div>PORTFOLIO</div>
<div>CONTACT</div>
</ul>
</nav>