I am trying to make the list elements of this list full width. They had padding on them and when you hover on them the padding is coloured yellow.
The padding isn't filling up the whole ul block which is what I want it to do.
I have tried using different displays and making the width of the list element 100% but this doesn't work.
.footer-navigation {
list-style: none;
padding-left: 0px;
display: inline-block;
width: 100%;
}
.footer-navigation li {
padding: 10px;
width: 100%;
}
.footer-navigation a {
padding: 10px;
color: #000000;
}
.footer-navigation a:hover {
padding: 10px;
color: #ffffff;
background-color: #fac900;
}
<ul class="footer-navigation">
<li>Terms & Conditions
</li>
<li>Cookie Policy
</li>
<li>Sitemap
</li>
</ul>
Make your anchors block level instead of inline. You can also add box-sizing so that they don't poke out and extend beyond the right edge:
.footer-navigation {
list-style: none;
padding-left: 0px;
display: inline-block;
width: 100%;
}
.footer-navigation li {
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.footer-navigation a {
padding: 10px;
color: #000000;
display: block;
}
.footer-navigation a:hover {
padding: 10px;
color: #ffffff;
background-color: #fac900;
}
<ul class="footer-navigation">
<li>Terms & Conditions
</li>
<li>Cookie Policy
</li>
<li>Sitemap
</li>
</ul>
actualy you padding isn't changing color to yellow on hovw.it is anchor tag. Change it toli:hover to change color of full li item. Here is fiddle
.footer-navigation {
list-style: none;
padding-left: 0px;
display: inline-block;
width: 100%;
}
.footer-navigation li {
padding: 10px;
width: 100%;
}
.footer-navigation a {
padding: 10px;
color: #000000;
}
.footer-navigation li:hover {
padding: 10px;
color: #ffffff;
background-color: #fac900;
}
<ul class="footer-navigation">
<li>Terms & Conditions
</li>
<li>Cookie Policy
</li>
<li>Sitemap
</li>
</ul>
The issue here is that you're yellow background is showing on the a element. Your 'lielement **is** 100% width, but the highlight is showing on thea` element, which is not 100% width.
Add this css:
.footer-navigation li:hover {
color: #ffffff;
background-color: #fac900;
}
and remove this:
.footer-navigation li:hover {
color: #ffffff;
background-color: #fac900;
}
Working example: https://jsfiddle.net/mspinks/vj04zs2g/
The <li>s actually occupy full width of parent <ul>, the problem here is that you're applying the hover effect on the <a> links inside the <li>s not the <li>s themselves. <a>s are inline elements they occupy the width of their text only.
you can solve this by applying display: inline-block; to the <a>s.
.footer-navigation {
list-style: none;
padding-left: 0px;
display: inline-block;
width: 100%;
}
.footer-navigation li {
padding: 10px;
width: 100%;
}
.footer-navigation a {
padding: 10px;
color: #000000;
width: 100%;
display: inline-block;
}
.footer-navigation a:hover {
color: #ffffff;
background-color: #fac900;
}
<ul class="footer-navigation">
<li>Terms & Conditions
</li>
<li>Cookie Policy
</li>
<li>Sitemap
</li>
</ul>
The issue here is that you are styling the anchor element itself, which is by default an inline element. By simply changing your CSS :hover from targeting the element to targeting the element, you achieve the desired result.
Here is the changed CSS class, and a jsfiddle of what I mean:
.footer-navigation li:hover {
padding: 10px;
color: #ffffff;
background-color: #fac900;
}
https://jsfiddle.net/69ywk05b/
There are other improvements that can be made, for example:
padding on both
the color change on hover is lost when targeting
here is a more refactored version of your css:
.footer-navigation {
list-style: none;
padding-left: 0px;
}
.footer-navigation li {
padding: 15px;
}
.footer-navigation a {
color: #000000;
}
.footer-navigation li:hover {
background-color: #fac900;
}
.footer-navigation li:hover a {
color: #ffffff;
}
Related
Can someone explain me how i need to set the css statements to get the navbar one after another, without any free spaces?
Also it would be handy to know, how i can set the navbar over the whole display, that its automaticly working on different screen resolutions.
I tried finding a solution on w3schools.
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.navbar li {
display: inline;
}
.navbar a {
border: none;
padding: 2px;
margin: 0px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.button:active {
background-color: #f0a041;
color: #ffff00;
}
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
tr, th {
border: none;
text-align: right;
}
Add the negative margin and your problem will get solved .
Here is the snippet .
just change the css property of the following class .
.navbar li {
display: inline;
margin-right: -0.26rem;
}
This will definitely solve your problem .
Just add float: left to li.
.navbar li {
display: inline;
float: left;
}
Give ul a display: flex, and the a tags a white-space pre:
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
}
.navbar a {
padding: 2px 5px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
white-space:pre;
}
.button:active,
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
I have a navigation menu link that has extra whitespace at the bottom of the div tag with the id of nav. It is not because margin or padding, but there is some sort of whitespace that is not allowing the ul tag to touch the bottom of the div with the id of nav. How do I get it to do so. Here is the link
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
The gap is reserved space given to descender text elements (e.g. j, y, g). Remove it by adding vertical-align:top to your <ul>
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
vertical-align: top;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
Note that the list items poke out below the div because of the padding you applied to #nav a which can be adjusted.
To fix your problem do this:
Change #nav ul to this:
#nav ul {
padding: 10px 0;
}
Change #nav li to this:
#nav li {
display: inline-block;
list-style: none;
margin-left: 50px;
}
remove margin-left: 50px; from your #nav li.Its creating unwanted white space on your menu.The width of menu will depend on the lenth of text
Something to do with the inline-block it seems. There's no space with inline-flex or display: table;
#nav ul {
padding: 10px 0;
display: inline-flex;
background-color: black;
}
inline-block's biggest problem was it's handling of fonts, it adds a ghost 'padding' of 4 to 5px after each element, depending on browser.
Here's a rewrite that uses the font-size: 0 method to negate the effects.
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
border: 1px solid black;
min-width: 300px;
}
#nav ul {
list-style-type: none;
font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
display: inline-block;
width: 25%; /* control width here */
text-align: center;
}
#nav a {
display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
text-decoration: none;
color: black;
font-size: 15px; /* reset font-size here */
line-height: 30px; /* control element height here */
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
fiddle
https://jsfiddle.net/Hastig/wfrxgxjm/
I have the following html code:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="home2"><a class="active" href="#">Home2</a></li>
<li class="home3">Home3</li>
<li class="home4">Home4</li>
<li class="home5">Home5</li>
</ul>
</div>
<div class="post">
<div id="borders">
<ul>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
</ul>
</div>
</div>
and with that I have a css file:
body {
padding-top: 2rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: rgba(0,0,0,0.6);
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
.nav li {
font-size: 20px;
line-height: 30px;
height: 30px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #919191;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
font-size: 20px;
line-height: 30px;
height: 30px;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
}
ul li { position: relative; border:1px solid red; display: inline-block; text-align: center; }
ul { text-align:center; }
And now when I run it in jsfiddle, I see there's a red border around every element. What I want to achieve is to remove the border from the top elements and just use it on the elements from div id = borders. I'm a little bit confused about CSS, because I tried to use the code .borders ui li , but it didn't work well... I thought that's the way how we should call the classes on the webpage? Anyway, could you help me with removing the red border from the top links and leave it only on the words containing "red border"?
Here's the jsfiddle for that http://jsfiddle.net/gfkPG/451/
Thanks!
Use #borders ul li (as # is an id selector, not . – class selector) instead of ul li.
JSFiddle
Your borders is an ID but you're referring to it as a class in your CSS.
Try #borders instead of .borders.
You could use a class here also:
.borders ul li {
border:1px solid red;
}
<div class="borders">
<ul>
<li>red border</li>
</ul>
</div>
So basically I'm doing a layout with a large image feature, that can move from one picture to another using arrows beneath. Honestly it's quite a lot like the front page of flipboard.com, in regard to the picture feature.
.feature-nav {
width: 234px;
margin: auto;
}
.prev-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.prev-arrow:hover {
color: #428bca;
}
.feature-nav ul {
display: inline;
}
.feature-nav li {
display: inline;
}
.nav-dot a {
font-size: 30px;
color: #B6B6B6;
}
.next-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.next-arrow:hover {
color: #428bca;
}
<div class="feature-nav">
<
<ul>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
</ul>
>
</div>
The output:
Does anyone know why the dots and right arrow are so far shifted from the left arrow? I've tried adjusting padding, margins, the "left: " property, and all of them work accept the make the left arrow not select properly, it only recognizes that you're hovering over it if you hover over a very small certain area. Right now, with the shown code, it doesn't do that, but the positioning is off. Does anyone have any ideas?
Because unordered lists have a default padding that you can get rid of by adding padding:0 to your .feature-nav ul rules:
.feature-nav {
width: 234px;
margin: auto;
}
.prev-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.prev-arrow:hover {
color: #428bca;
}
.feature-nav ul {
display: inline;
padding:0;
}
.feature-nav li {
display: inline;
}
.nav-dot a {
font-size: 30px;
color: #B6B6B6;
}
.next-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.next-arrow:hover {
color: #428bca;
}
<div class="feature-nav">
<
<ul>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
</ul>
>
</div>
Try display: inline-block for the arrows and list items, and give them padding for a larger "hit" area for when hovering. You can also set a right or left margin for the arrows or list items to separate them a bit as well.
As for why they're off-center, remove padding from the ul element.
As for the
.feature-nav {
width: 234px;
margin: auto;
}
.prev-arrow {
display: inline-block;
padding 10px;
margin-right: 20px;
font-size: 30px;
color: #B6B6B6;
}
.prev-arrow:hover {
color: #428bca;
}
.feature-nav ul {
display: inline;
padding: 0;
}
.feature-nav li {
display: inline-block;
margin: 0 5px;
}
.nav-dot a {
font-size: 30px;
color: #B6B6B6;
}
.next-arrow {
display: inline-block;
padding 10px;
margin-left: 20px;
font-size: 30px;
color: #B6B6B6;
}
.next-arrow:hover {
color: #428bca;
}
<div class="feature-nav">
<
<ul>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
</ul>
>
</div>
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.