Can't evenly distribute spans inside div - css

I set .inside with width:100% and the span to have width:25% but the fourth span keeps getting pushed down.
http://jsfiddle.net/at8g6n0r/

.nav_list {
width: 100%;
max-width: 800px;
display: block;
}
ul {
list-style: none;
overflow: hidden;
/*as we will give its child element FLOAT property*/
}
.inside {
width: 100%;
}
.inside > li {
width: 25%;
float: left;
/* Inline-block has a browser issue, it leaves some margin*/
text-align: center;
display: inline-block;
list-style-type: none;
}
.button-dropdown > a {
text-decoration: none;
color: #000;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover,
.nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span,
.nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<div class="nav_list">
<ul class="nav inside">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
→ Resume (PDF)
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
About
</a>
</li>
</ul>
</div>
The easiest way is to add float:left to your child elements.
or You can also give the parent element- font-size:0 and its child element the font-size:needed font-size property, this way you don't need to give FLOAT:LEFT property and fourth element will stay inline.
Your HTML structure is bit wrong - following some bad practices, which won't get validated. for example: there shouldn't be any DIV inside UL as direct child.
Read more about inline-block issues here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

didn't really added anything in your code just have removed the bad practices like div and span direct inside ul this looks good for now . if you want it to be in certain way and not like this please let us know for now this will work.
.nav_list {
width: 100%;
max-width: 800px;
display: block;
}
ul {
list-style: none;
}
.button-dropdown > a {
text-decoration: none;
color: #000;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover,
.nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span,
.nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<div class="nav_list">
<ul class="nav">
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
Projects
</a>
</li>
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
→ Resume (PDF)
</a>
</li>
<li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
About
</a>
</li>
</div>
</ul>
</div>

It's because inline-block keeps spaces between the elements if they are present.
you could:
open the next span right after the closing of the previous one
use display:block;float:left; and clear the float (e.g. by overflow:hidden on .inside)

Related

How to do margin-top only in Firefox browser

I have menu bar which need to be margin-top: 150px;
But visually in Firefox looking different as on Chrome.
Header code: https://codepen.io/bugerman21/pen/rNxvyOv
Chrome:
Correct display
Firefox:
Incorrect display
HTML:
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li>Qwerty 1</li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
CSS:
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
How to do margin-top only for the Firefox browser?
Unsuccessful attempt:
#-moz-document url-prefix() {
.nav li ul {
margin-top: 150px;
}
}
Here ya go buddy, sorry I left for the day yesterday but see the changes made and I left outlines on the elements to give a better visual reference. As it is now it will display as expected on all browsers even old internet explorer. Although you could accomplish the same thing cleaner overall, this at least gets you back on track. Cheers and welcome to StackOverflow! :)
PS : since the nav menu items don't have a fixed height you might want to consider making that something static so you can change the top: 56px to a value that places the drop down consistently no matter the width of the screen. If you make the example full screen you'll see what I mean.
header {
display: flex;
margin: 0;
padding: 0 20px;
justify-content: space-between;
align-items: center;
background-color: silver;
}
.header {
grid-area: header;
background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
font-family: 'Gentium Book Basic', serif;
font-size: 2.5em;
color: #808080;
}
/*---------- Nav menu ----------*/
.nav {
list-style-type: none;
display: flex;
justify-content: flex-start;
margin: 0;
}
.nav > li {
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
transition: background-color .25s ease;
}
.nav a {
display: block;
padding: 20px;
color: #ffffff;
font-size: 1em;
}
.category {
padding: 0 20px;
display: flex;
align-items: center;
position: relative;
overflow: visible;
border: red 1px solid;
}
/*---------- Sub menu ----------*/
.nav li ul {
position: absolute;
top: 56px;
left: 0;
min-width: 150px;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
border: green 1px solid;
}
.nav li > ul li {
border-bottom: 1px solid #ffffff;
background-color: #1f1f1f;
}
.nav li > ul li a {
text-transform: none;
}
.nav li:hover > ul {
display: block;
}
.nav > li:hover {
background-color: #404040;
/* box-shadow: -5px 5px #1f1f1f; */
}
.nav li ul > li:hover {
background-color: #404040;
}
/*---------- Search & Profile----------*/
.search_and_profile {
display: flex;
align-items: center;
}
.search_and_profile > p {
margin: 0;
color: #ffffff;
}
.search-container button {
float: right;
padding: 6px 10px;
background: #e0e0e0;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
<header class="header">
<span class="logo">Qwerty</span>
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li><a href=#>Qwerty 1</a></li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
</nav><!-- .nav -->
<div class="search_and_profile">
<div class="search-container">
<form action="#">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div><!-- .search-container -->
</div><!-- .search_and_profile -->
</header>
It will work for me, additionally i included color too to make sure.
Also you try this option too
#media screen and (-moz-images-in-menus:0) {
/* your style */
}
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
/* Added */
#-moz-document url-prefix('') {
.nav li ul {
margin-top: 150px;
color: orange;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Some text</li>
<li>Some more text</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

Unable to make A fill out li tag

Been trying to get this to work for a while now. I'm trying to create the menu for my new site, Ive set up the nav, ul, and li tags. Naturally, I have the actual buttons slightly larger than the text displaying, and I wish to have the A fill out the LI tag.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
padding: 0 50px 0 50px;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
I feel like ive tried everything in:
How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
Stretching <a> tag to fill entire <li>
Expand an <a> tag to fill the space
and I really feel like my code should give the same result. Can someone please point out what mistake I've made?
You had the right idea by adding display:block on the anchors, however the padding on your list item was affecting the result. Move that padding onto the anchors and you're all set.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
height: 100%;
width: 100%;
display: block;
padding: 0 50px 0 50px;
box-sizing:border-box;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
Remove the padding from the ul li:
nav ul li {padding:0px;}
If necessary add it to the nav ul li a:
nav ul li a {padding:0px 50px;}

css anchor fill entire list element

I have this menu that I have been working on for a while. I am using the CSS table displays to accomplish it. When the text inside of my links take up two lines, the ones that are only one line will not fill the parent li on hover. Is there any way I am missing that can accomplish this?
http://jsfiddle.net/g7jmh567/
css
.menu {
background-color: #687c9e;
display: table;
}
.menu-list {
display: table-row;
}
.menu-list > li {
display: table-cell;
height: 100%;
overflow: hidden;
line-height: 1.125rem;
overflow: auto;
}
.menu-list > li > a {
display: block;
color: #fff;
text-decoration: none;
padding: 1.25rem 1.25rem 1.25rem 0;
box-sizing: border-box;
height: 100%;
min-height: 2.25rem;
}
.menu-list > li > a:hover {
background-color: #7889a8;
}
.dropdown-list {
display: none;
}
.hidden {
display: none;
}
html
<nav class="content menu">
<ul class="menu-list">
<li>Home</li>
<li>A really long</li>
<li>Some really long word</li>
<li>Special Events</li>
<li>Newsletter</li>
<li>Photo Gallery</li>
</ul>
</nav>
Simply remove the padding from your li, and add it to your menu-list, check out the link below;
Nav
the reason why it didn't fill the entire li 'coz you're just filling the anchor
hover the li instead of the anchor
.menu-list > li:hover {
background-color: #7889a8;
}
JSFIDDLE DEMO
See This link: this may help you: https://jsfiddle.net/guruWork/8fwo0r06/2/
<nav class="content menu">
<ul class="menu-list">
<li><span>Home</span></li>
<li><span>A really long</span></li>
<li><span>Some really long word</span></li>
<li><span>Special Events</span></li>
<li><span>Newsletter</span></li>
<li><span>Photo Gallery</span></li>
</ul>
</nav>
And CSS
.menu {
background-color: #687c9e;
}
.menu-list {
display: table;padding:0; margin:0;width:100%;
}
.menu-list > li {
display: table-cell;
height: 100%;
overflow: hidden; vertical-align: top;
overflow: auto;
}
.menu-list > li > a {
display: table;
color: #fff;
text-decoration: none;
padding: 0;
box-sizing: border-box;
height: 100%;
min-height:53px; text-align:center;
}
.menu-list > li > a span{display: table-cell;padding: 5% .5rem;vertical-align: middle;}
.menu-list > li > a:hover {
background-color: #7889a8;
}
.dropdown-list {
display: none;
}
.hidden {
display: none;
}

Cant get "nth-last-child" to work

Trying to apply styles to all of the elements except the last one. But it doesn't work. Tried all this:
ul li:not(ul li:nth-last-child)
ul li:not(nth-last-child)
ul li:not(:nth-last-child)
ul {
list-style: none;
margin: 0;
float: left;
width: 100%;
text-align: center;
}
ul li {
height: 54px;
width: 54px;
border-radius: 60px;
}
/* /// THIS PART IS NOT WORKING PROPERLY
RIGHT NOW IT REMOVES MARGIN FOR ALL THE ELEMENTS/// */
ul li:not(ul li:nth-last-child) {
margin-left: 10px;
}
.red {background: #fc4c4f;}
.blue {background: #4fa3fc;}
.yellow {background: #ECD13F;}
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
try the following. I assume that you dont want to apply the css to the last ul li element.
ul > li:not(:last-child){
margin-left: 15px;
}
:nth-last-child actually expects a parameter which to look for.
CSS3 :nth-last-child() Selector
Trying to apply styles to all of the elements except the last one.
Why not use last-child?
ul {
list-style: none;
margin: 0;
float: left;
width: 100%;
text-align: center;
}
ul li {
height: 54px;
width: 54px;
border-radius: 60px;
}
ul li:not(:last-child) {
margin-left: 10px;
}
.red {
background: #fc4c4f;
}
.blue {
background: #4fa3fc;
}
.yellow {
background: #ECD13F;
}
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>

css: ul li ul li height

I want to set the height for the Games menu like all the other menus, but it is not working. What is wrong?
This is my code:
<ul class="menu">
<li class="item-474 current active">News</li>
<li class="item-482 deeper parent">
<span class="separator">Applications</span>
<ul>
<li class="item-483">Games</li>
</ul>
</li>
<li class="item-484"><span class="separator">Appearence</span></li>
</ul>
#left-menu ul.menu {
display: block;
list-style-type: none;
margin-left: -40px;
}
#left-menu ul.menu li {
display: block;
text-align: center;
background: url("img/menu1.png");
width: 208px;
height: 31px;
text-align: center;
list-style-type: none;
padding: 0px;
margin: 0px;
}
#left-menu ul.menu li ul li {
display: block;
text-align: center;
background: url("img/menu2.png");
width: 208px;
height: 31px;
text-align: center;
list-style-type: none;
}
This is the result:
Problem is that li's have fixed height. So when you add second level list there is no space for them.
Change height to min-height and everything will works.
Example: http://jsfiddle.net/FJV8b/

Resources