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>
Related
I am styling a ul so that I can make a menu that sits on the left side. They will basically be square boxes with icons (using ionicons). The only problem I run into is, I can't get a perfect square and cannot center the icons. Here is what I have now.
.menu_simple ul {
margin: 0;
padding: 100px 0 0 0;
width:185px;
list-style-type: none;
position: fixed;
font-size: 60px;
}
.menu_simple ul li a {
text-decoration: none;
color: white;
padding: 10.5px 60px;
background-color: #F0541E;
display:block; width: 120px; height: 120px;
vertical-align: middle;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #d84b1b
;
}
Also, the html I am currently using looks is this:
<div class="menu_simple">
<ul>
<li><i class="ion-ios-person-outline" style="color:#FFFFFF;" href="#"></i></li>
<li><a class="ion-ios-baseball-outline" style="color:#FFFFFF;" href="#"></a></li>
<li><a class="ion-ios-calendar-outline" style="color:#FFFFFF;" href="#"></a></li>
<li><a class="ion-ios-plus" style="color:#FFFFFF;" href="#"></a></li>
<li><a class="ion-log-out" style="color:#FFFFFF;" href="#">a</a></li>
</ul>
</div>
It currently looks like this:
Thanks everyone. After a little research, this ended up working for me:
.menu_simple ul {
margin: 0;
padding: 100px 0 0 0;
width:185px;
list-style-type: none;
position: fixed;
font-size: 60px;
}
.menu_simple ul li a {
color: #FFF;
padding: 0px;
margin: 0px;
background-color: #F0541E;
display: block;
width: 120px;
height: 120px;
vertical-align: middle;
display: table-cell;
text-align: center;
}
Unless you have removed it with a normalize.css reset or something similar you will need to set padding and margin to zero for your li's in your css. By default li elements in an unordered or ordered list get some left margin to set them apart from their parent ul.
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;
}
hey guys I am having a few issues with my menu, theres a weird padding that pushes my menu to the right a few pixels but I managed to fix it on the main parents, originally they were both pushing out the same amount.
Pic
and heres a better view
I am running through my css and adding padding-left:0px;
Heres my code if anyone can assist me.
<div class="css_menu_two_line">
<ul class="two_line_menu">
<li>Menu 1</li><li>
Menu 2</li><li class="current">Menu 3 SHOW
<ul>
<li>Submenu 3-1</li>
<li>Submenu 3-2</li>
<li>Submenu 3-3</li>
<li>Submenu 3-4</li>
<li>Submenu 3-5</li>
</ul>
</li><li>Menu 4</li><li>Menu 5</li>
</ul>
</div>
css:
.css_menu_two_line {
width:100%;
overflow:hidden;
}
.two_line_menu {
padding-left: 0;
position: relative;
margin-bottom: 40px;
background:#77f url('img_bg.gif') repeat-x;
}
.two_line_menu a {
display: block;
color: #fff;
text-decoration: none;
padding:10px;
}
.two_line_menu li:hover a {
color: #fff;
background: #aaf;
}
.current a {
color: #fff;
background: #aaf;
}
.two_line_menu li { display: inline-block; }
.two_line_menu li ul { display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px; }
.two_line_menu li:hover ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
}
.two_line_menu li ul li:hover a { color: #000; }
fiddle: http://jsfiddle.net/uf2cnakc/
You need to take away the padding from .two_line_menu li ul. To do this we can add the following style padding: 0;.
A lot of HTML elements have default styles, so beware of this.
Your CSS for this class should now look something like this:
.two_line_menu li ul {
display: block;
position: absolute;
left: 0;
width: 100%;
background: #aaf;
top: 38px;
padding: 0; /* Just added */
}
Demo Here
Your CSS contained display:inline which has block child element and position absolute as well. Try this CSS property.
.two_line_menu li { display: block; float:left; }
.two_line_menu li ul{ position:absolute; left:0; padding:0; width:100%; background: #aaf; top:38px; }
.two_line_menu li ul li{ float:left;}
First of all let me apologize for asking such a newbie question. I have tried to search on the site for similar questions/answers but none of the fixes have worked. So here goes:
I have created a horizontal navigation bar from a popular YouTube tutorial and have got everything working just fine with the exception of one problem: I would really like to center this navigation bar which is within the navigation containing div. I know there must be an easy solution, but for the life of the edges Figured out.
I also had another question about the CSS: why did the author make CSS rules that included the ul tag before the id tag. For example, why did he write ul#navMenu instead of #navMenu ul?
Here's the HTML:
<body>
<div id="wrapper">
<div id="header"> <h1>The New Site
</h1></div>
<div id="navigation">
<ul id="navMenu">
<li>Home</li>
<li>hyperlink 2
<ul class="sub1">
<li>hyperlink 2.1</li>
<li>hyperlink 2.2
<ul class="sub2">
<li>hyperlink 2.2.1</li>
<li>hyperlink 2.2.2</li>
<li>hyperlink 2.2.3</li>
</ul>
</li>
<li>hyper link 2.3</li>
</ul>
</li><!--close hyperlink 2 -->
<li>hyperlink 3</li>
<li>hyperlink 4</li>
<li>hyperlink 5</li>
<li>hyperlink 6</li>
</ul><!--close main ul – navMenu -->
</div><!--close of navigation -->
<div id="main-text"> Etc........
And here's CSS: *Note: I had to put a . Before all of the ul#mainNave rules so that they would show up.
.* {
margin: 0px;
padding: 0px;
}
.body {
background-color:#FF9;
}
#wrapper {
width: 1000px;
margin: 0px auto;
padding: 0px;
background-color:#FCC;
}
#header {
margin: 0px;
padding: 0;
width: 100%;
height: 100px;
float: left;
background-color:#FEA601;
}
#navigation {
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
float: left;
vertical-align: middle;
background-color:#7979FF;
}
/*CSS for navigation hyperlinks*/
#navigation {
margin: 0 auto;
}
.ul#navMenu {
list-style-type: none;
}
.ul#navMenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 10pt;
}
.ul#navMenu li {
width: 135px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
.ul#navMenu a {
text-decoration: none;
display: block;
width: 135px;
height: 25;
line-height: 25px;
background-color: #000;
border: 1px solid #FFF;
border-radius: 0px;
color:#FFF;
}
.ul#navMenu .sub1 a {
margin-top: 0px;
}
.ul#navMenu .sub1 li {
}
.ul#navMenu .sub2 a {
margin-left: 0px;
}
.ul#navMenu li:hover > a {
background-color:#666;
}
.ul#navMenu li:hover a:hover {
background-color: #666;
}
.ul#navMenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
.ul#navMenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 137px;
}
.ul#navMenu li:hover .sub1 {
display: block;
}
.ul#navMenu .sub1 li:hover .sub2 {
display: block;
}
/*end of navigation rules*/
/*Body rules*/
#main-text {
background-color:#FEC94B;
width: 970px;
Padding: 15px;
Height: auto;
float: left;
}
#footer {
width: 100%;
float: left;
height: 50px;
line-height: 50px;
background-color: #000;
color: #FFF;
text-align: center;
font-size: 10px;
}
#wrapper #navigation #navMenu {
text-align: center;
}
Thank you so much in advance and I greatly look forward to solving this problem.
Doug
Edit: I'm not sure what wrong but a lot of the CSS code did not show up – it all started with ul#navMenu.... Which happen to be part of my question as to why the author was writing CCS code like this.
JSFIDDLE
The reason it isn't centered at the moment is in your css, here:
ul#navMenu li {
...
float: left;
}
Change it to inline-block, like so:
ul#navMenu li {
display: inline-block;
/* old IE hack to get inline-block to work */
zoom: 1;
*display: inline;
}
Add text-align to the container:
ul#navMenu {
...
text-align: center;
}
And that will allow them to center, instead of forcing them left. Ensure the parent container(s) have text-align: center; on them.
See the updated jsFiddle
Finally, css selectors:
ul#navMenu - selects the ul that has the ID of navMenu
#navMenu ul - selects the ul that is the child of an element with the id of navMenu
ul#navMenu - ensures it only addresses any ul elements with id of navMenu, but could also be written simply #navMenu
ul#navMenu li - selects all the li elements that are the child of the ul with the id of navMenu - could also be written #navMenu li, since an ID should only occur once on a page.
Here's the HTML :
<nav>
<ul class="menu">
<li class="li_pc">PC</li>
<li class="li_one">ONE</li>
<li class="li_ps3">PS4</li>
<li class="li_360">360</li>
<li class="li_ps3">PS3</li>
<li class="li_wiiu">WiiU</li>
</ul>
</nav>
and here's the CSS :
nav {
padding: 0;
margin: 0;
widht: 1200px;
height: 100px;
}
ul li {
display: inline;
font-family: Verdana, Geneva, sans-serif;
float: left; /* IE */
list-style-type: none;
}
ul li a {
display: block;
float: left;
width: 190px;
height: 60px;
padding: 0;
background-color: transparent;
color: white;
text-decoration: none;
text-align: center;
}
.li_pc a:hover {
background-color: #cc9a34;
}
.li_one a:hover {
background-color: #149a14;
}
.li_ps4 a:hover {
background-color: #040264;
}
.li_360 a:hover {
background-color: #9cce04;
}
.li_ps3 a:hover {
background-color: #0406b4;
}
.li_wiiu a:hover {
background-color: #5c12ac;
}
My goal is to vertically center the text in the cells. I'm using text-align:center; to center it horizontally, but when I use vertical-align:middle; it doesn't even move a pixel. I tried a lot of different ways but it always destroys the thing and makes the design look like my face on sunday morning.
How can I center these vertically please ?
Thanks in advance :)
If you anchor links are 60px tall
line-height:60px
should do it.
JSFiddle