This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
Here is the code
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; /*The problem is here*/
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
In the ul style the overflow hidden is being used. Now when overflow hidden is used the background color of the navigation bar turns to black like
But when I delete the overflow:hidden the background color disappears like
Now basically im just confused because overflow: hidden just hides the overflowing stuff in a container so why here its making a background color appear?
I dont want to know the right solution to this. I just want to know why overflow:hidden is behaving like this.
Because your list items are floated, they do not by default influence the height of their ul parent. The effective height of the list element itself stays 0 here, so you don’t actually see the background color anywhere.
overflow set to anything but the default value auto, acts as a clear fix. That means the li will now influence the height of the ul, and now that the ul actually has a height, you also see its background color applied over that height.
More information on what a “clear fix” is, if you’re not familiar with the term, and what other ways there are to achieve it, can be found f.e. here,
SO question: What is a clearfix?
https://css-tricks.com/the-how-and-why-of-clearing-floats/, https://css-tricks.com/snippets/css/clear-fix/
Anything inside that might be floating does not get clipped unless you have the overflow set to either hidden, scroll or auto. The real perpose of the method is that without having given the element a set height and width, when you set overflow to hidden it takes on the height and width of the inner elements : https://codepen.io/Aypro18/pen/ExVVgYa?editors=1000
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto; //The problem is here and the olution itself
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Add display: flex; to ui styles. Now, you can remove overflow:hidden. It is happening because parent element is not acting as container to the children (because of their float property). So, it is not inheriting their height and adjust to it. So, display flex solves that.
Related
"Old" Newbie here. I have not been coding css or html in about 10 years now. Use to be good at it and really like doing it as well. So now during covid and lockdown I decided to get back at it again. Currently just re-learning everything, and trying to build up a website from scratch.
Having some issues with getting menu/navigation links in position on the same line as my h1 title. Have tried about everything, like ex. display: inline-block; and also read a lot of posts here. But nothing seems to be working. So I hope somebody here that have any suggestions?
Thank you so much!
If you inspect the tag h1, you'll see there is a standard margin bottom which the browser applied to h1 tag. You can erase it directly on inspect window, I guess that is your problem. =))
You can try to create a div which contains both your nav items and the header, this should use display:flex and align-items: center, the justify-content will set the horizontal alignment of everything inside this container
Then float the nav to the left, and they should be aligned, from here you can add as much styles as you want
Good luck!
.barContainer {
display: flex;
justify-content: left;
position: fixed;
width: 100%;
align-items: center;
font-family: helvetica;
}
h1 {
font-size: 15px;
}
nav {
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 1rem 1rem;
text-decoration: none;
font-size: 15px;
}
nav li, nav ul {
list-style: none;
}
<div class="barContainer">
<nav>
Item 1
Item 2
Item 3
</nav>
<h1>My Header</h1>
</div>
You can use the float property to float elements within a parent element. Choose right or left to choose which side the element will float to. When this property is used, the display property of the floating elements is ignored when using block, inline, or inline-block.
In the parent element, use the overflow: hidden property, so that it will be at the same height as the largest element contained in it. When a parent element only has floating elements inside it, and does not use the overflow: hidden property, its height will be 0 and the elements below will overlap it.
.content {
overflow: hidden;
font-family: sans-serif;
}
.menu {
float:right;
margin-top: 20px;
}
.menu li {
display: inline;
list-style: none;
margin: 10px;
}
h1 {
float:left;
}
<div class='content'>
<h1>My Title</h1>
<nav class='menu'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</div>
I have a nav containing a list of links. The list has a line-height: 1em. However the links have a height greater than 1em and overlap the preceeding list item, making it hard to click the items.
nav {
height: 100%;
overflow: hidden;
position: absolute;
top: 7.2rem;
left: 0;
right: 0;
font-size: 50px;
line-height: 1em;
}
nav li {
background-color: green;
}
nav a {
background-color: pink;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
This can be seen more easily if I add margin-bottom to the nav li. The links (pink) have greater height than the line-height of the list items (green):
How do I get the links to have the same height as the list items? So that there is no overlapping?
Note. there is no padding on the links, so I don't know why they are larger. It doesn't make any difference if I add height:1em to the nav a. I've tried display:inline-block - which makes the pink background the same height as the green background, but strangely the links are still clickable just above and below the pink background! The clickable area isn't confined to the pink background.
NEW INFO
Links have a greater height than the font-size.
The size of the link is in no way influenced by the line-height.
For example a line of text with font-size: 50px has a height of 50px. Yet the link inside the line of text has a height of 68px (there is no padding or margin on the link).
I presume the clickable area around the link has to take into account all the ascenders and descenders of the typeface. And this is why it has a greater height than the font-size.
Hence if the line-height is set to 1em the links overlap. Using display: inline-block displays the pink background as being the same height as the green background, but, (strangely) the clickable area is still larger than the 50px pink background height.
Unless there is a way to constrain the height of the link to the height of the font-size, then I will have to increase the line-height to account for this difference.
This JS Fiddle shows how the links are bigger than the font-size: https://jsfiddle.net/utqafz61/
... so if the line-height is the same as the font-size (1em) then the links will overlap making it difficult to click the right link. I first noticed this on this website: https://www.hassellstudio.com on the nav menu the links overlap. The mouse pointer can be on one link, but the link below is highlighted!
the weird thing you were doing is to set the font-size of nav which is parent of ul li to 10rem that had made them bigger and also line-height is different from the actual height just se here line-height
example
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
top: 7.2rem;
left: 0;
right: 0;
/* font-size: 10rem;*/
}
nav li {
margin: 10px;
background-color: green;
}
nav a {
background-color: pink;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
Just add display: inline-block to your a elements.
Anchor tags are naturally inlined by user agent stylesheets which is what's causing your overflow.
The problem is with the line-height in your nav, its not giving any space between the lines ()line-height: 1em is only allocating the same as the font-size (50px) so there is no room for the default space around the letters). You can make line-height larger (1.1em will works with your code above):
nav { line-height: 1.1em; }
Or just remove it altogether so it uses the default.
UPDATE:
If you cannot change the line-height from 1em, There are 2 fundamental problems that are causing issues to achieve this:
a tags are inline by default which makes it harder to work with margins & padding etc.
most fonts have extra space above and below so that the ascenders and descenders don't touch - this is down to the font glyphs themselves. Some fonts are "worse" than others.
You could force the link not to overflow outside the li using the following, and it will prevent the effect you see where the mouse looks like its over one link but actually activates another:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
However depending on the font, this could crop a tiny part off the descenders of the letters.
Working snippet:
ul {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
line-height: 1em;
font-size: 3rem;
font-family: "Times New Roman";
}
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
}
nav li:hover a{
background-color: yellow;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
There isn't an easy way around this without changing the line-height (even slightly), but I tried various hacks to see if we could move the link text up a couple of pixels without moving the active link.
If it is possible for you to make the a to be display: block, then this seems to work:
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
display: block;
/* tweak the values below to suit */
margin-top: -2px;
padding-bottom: 2px;
}
Solution: Use overflow:hidden, negative margin and padding as workaround this
The negative margin moves up the top of the link (which has the extra space) and the padding adds a little space for the descender. The òverflow:hidden on the li crops off the extra.
You can see it working below - Note I have greatly exaggerated the margin and padding to ensure that it works with no overlap, and I added a border around the links to make it clear where the link was:
ul {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
line-height: 1em;
font-size: 3rem;
font-family: "Times New Roman";
}
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
display: block;
margin-top: -20px;
padding-bottom: 20px;
border:1px solid blue;
}
nav li:hover a{
background-color: yellow;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
That's as good as I can come up with, hope one of those options is suitable!
I'm doing a work for school and I'm trying to align on center and middle both image and a menu. Here is my code on jsfiddle: LINK I'll post the code here too
HTML
<header>
<img id="logo" src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
<ul id="menutop1">
<li>Loja</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
body{
margin: 0;
}
header{
background-color: #171A21;
width: 100%;
height: 200px;
text-align: center;
}
#logo{
width: 250px;
height: 172px;
}
#menutop1 {
list-style-type: none;
overflow: hidden;
}
#menutop1 li {
float: left;
}
#menutop1 li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menutop1 li a:hover:not(.active) {
background-color: #ddd;
}
The problem is the menu that does under the image and stays on left of the page.
I already tried everything I know and I didn't find a solution, please someone can help me? I realy can't find anything.
Thanks for the help and sorry for my english.
UPDATE
Thanks to the Kamila O the menu is next to the image and now I want center on middle, I added this code:
vertical-align: middle; height: 100%;
on the menu but don't think it is the best soluction becouse when I set a background color on the menu just to test I see this:
LINK
the menu get out of the div. Someone know a better soluction?
If you want to center your menu, you can change #menutop1 li to
#menutop1 li {
position: relative;
display: inline-table;
}
This is because you have added a float: left on the individual list items in the menu.
If you remove that float, make the list items inline-block and add a center text-align to #menutop1, it will align properly.
#menutop1 {
list-style-type: none;
overflow: hidden;
text-align: center;
}
#menutop1 li {
display: inline-block;
}
Updated jsfidle: https://jsfiddle.net/mebxcjwx/4/
I wrote quickly something along the lines of this. I just created containers for your logo + navigation, as this allows for you to control elements a bit better. As well as adding tha tag around your ul element.
<header>
<div class="logo">
<img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
</div>
<nav class="main_nav">
<ul>
<li>Home </li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
https://jsfiddle.net/mebxcjwx/9/
Because they take up the full width of the header by default (If you want you can set this as display: block or width 100%) they will stack under each other, and since they are text elements all that was needed was a simple text align center to get the desired effect.
Im not sure if you wanted the navigation in the black space, if not you could simple remove the padding on the header, and give that navigation a white background or something along those lines to get the effect you desired!
This question already has answers here:
Can't Center My Navigation
(2 answers)
Closed 8 years ago.
I'm trying to center this menu. How come i can't center it with the two types of ways i tried to center it? I tried to center it with html and css as shown with comments. I'm just wondering why, I could probably figure it out but it would take me a long time. I know I can fix it with position: absolute;top: 50%;left: 50%; But even that, how do i use that in a good way? how do i use absolute positioning correctly and in a good way? Also what is relative position? What is that used for and how does that compare to absolute? Plz and thank you.
Here's my CSS:
ul {
text-align: center; /* How come this doesn't center it? */
padding: 4px;
list-style-type: none;
margin: 0;
overflow: hidden;
}
li {
float: left;
}
a.menuItem:link,
a.menuItem:visited {
display: block;
width: 120px;
font-weight: bold;
color: white;
background-color: #800000;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.menuItem:hover,
a.menuItem:active {
background-color: black;
}
Here's my HTML:
<center> <!-- And how come this doesn't center it? -->
<ul background="/victoria/cutiepie2.jpg">
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
</center>
A UL element is a block level element, it therefore cannot be influenced by text-align: center which only works on inline elements such as span, strong, em etc. It can be applied to a block so that any textual or inline elements inside it are centered but it will not center the block. A block level element will expand to fill all of the horizontal space therefore cannot be centered without first defining it's width.
A better solution would be to place a width on the menu and then set the horizontal margins to auto:
ul {
padding: 4px;
list-style-type: none;
overflow: hidden;
width: 960px;
margin: 0 auto;
}
Also center tags are deprecated but in their day, they were also used to center text.
Here is a fiddle showing the centered menu: http://jsfiddle.net/7Hjvc/1/
Remove the float:left from your LI, and add display:inline, e.g
li {
display:inline
}
And remove display:block from your links.
The text-align:center on your UL was not centering your LIs because LI are block elements and you were applying a float to them.
I'm a beginner at CSS and am trying to understand how the text in each li element in a nav menu can be centered, both vertically and horizontally.
As an example, I am looking at this particular nav menu from David Appleyard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
body {
padding: 50px;
}
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
</style>
</head>
<body>
<!-- Grey Menu -->
<div id="menu_wrapper" class="grey">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li class="active">About</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
How is he getting his li text nicely in the middle of the li elements? Is he just playing around with padding and line-heights until he gets it perfect?
Also, on a side note, why does he set his #menu li as to display:block?
Here's the breakdown:
display: block;
He's doing this because you can give block boxes padding. This is nice because padding is included in the 'clickable' area around the link. Users are accustomed to thinking of menu items as 'buttons,' so it's nice to be able to click more than just the text.
View a JSFiddle isolating the padding on an anchor
Note: I only floated the a to keep it from extending the entire width of the iframe
Centering horizontally
The padding of the anchor elements is symmetrical, so they're appearing to be centered horizontally. The line that does this is padding: 0 20px;. Note that the fact that these block boxes don't extend the full width is because their parents are set to float left.
Here's a JSFiddle isolating this centering effect.
Note: The parents being floated left is what causes everything to appear on the same line
Centering vertical
Text is centered, by default, about the center of the line. If you're trying to center a single line within a containing element, a nifty trick is to just set the line-height to be the height of that element. In this case, the parent is set to be height: 40px so he's matching that height. The line that does what I've described here is line-height: 40px;
Here's a JSFiddle isolating the vertical centering.
Other possibilities
You'll see that I centered the a horizontally and vertically in the very first JSFiddle I posted. That's usually the method I use, but of course, there's always more than one way to do things. The best method is probably dependent on the context of your project!
Yes, it's the line-height: 40px that centers vertically. This won't look right if the text were ever to wrap.
Anchors are display: block so that padding is applied to a block-level element, rather than the default inline (try changing it to see how the appearance changes). The anchor will essentially "fill" it's container LI element, which is floated to keep things on the same line (while not "inline").