I have a fairly basic question.
I have a page with a ul with 7 lis, spanning 100% of the page. I want to make the last three lis float to the right, and I want the very last one to be a different color. I am trying not to recode this more than necessary.
Here is the code, how shall I apply the css? Make another ul, (but would it stay in line with the other) or apply to the li directly? can I make a special class of li to let those last three be positioned in a different place?
<html>
<head>
<style>
ul {
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a {
width:6em;
text-decoration:none;
color:white;
}
</style>
</head>
<body>
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
<li>Link five</li>
<li>Link six</li>
<li>Link seven</li>
</ul>
</body>
</html>
You could use :nth-child() for this. css-tricks.com/how-nth-child-works
li:nth-child(5),
li:nth-child(6),
li:nth-child(7) {
text-align: right;
}
li:nth-child(7) a {
color: red;
}
example:
http://jsfiddle.net/skeurentjes/3RR8D/
You can use this code without adding another list or classes.
li:nth-child(4) ~ li {text-align: right;} /* or float? */
li:last-child a {color: green;}
Try something like this
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
<li><a class="float" href="#">Link five</a></li>
<li><a class="float" href="#">Link six</a></li>
<li><a class="float" id="last" href="#">Link seven</a></li>
css
.float{
float:right;
}
#last{
color:red;
}
you need this
li:nth-child(6) {
text-align: right;
}
li:nth-child(7) a {
color: red;
}
You can use this code:
(the rule would applies regardless of how many "li" will be)
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
text-align: right;
}
li:last-child{
color: red;
}
Related
I am creating a navigation menu with sub-menu items that are split into columns using CSS3. The issue I am running into is that the width is not accommodating the line items to fit on a single line due to the absolute positioning. How can I make it so that the sub-menu width will be wide enough that each line-item fits on one line automatically?
nav {
text-align:center;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
position:relative;
}
nav > ul > li {
display:inline-block;
margin-left:10px;
}
nav > ul > li:first-child {
margin-left:0;
}
.sub-menu {
padding:10px 15px;
position:absolute;
left:50%;
transform:translateX(-50%);
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
-webkit-column-gap:30px;
column-gap:30px;
-moz-column-gap:30px;
display:none;
}
nav > ul > li:hover ul {
display:block;
}
.sub-menu li {
margin-top:20px;
}
.sub-menu li:first-child {
margin-top:0;
}
<nav>
<ul>
<li>Parent One
<ul class="sub-menu">
<li>Child One</li>
<li>Child Two</li>
<li>Longer Child Three</li>
<li>Child Four</li>
<li>Child Five</li>
<li>Longer Child Six</li>
</ul>
</li>
<li>Parent Two</li>
<li>Parent Three</li>
<li>Parent Four</li>
<li>Parent Five</li>
</ul>
</nav>
I created a navigation bar at for my website using an in-line list and then it has been styled. Each <li> is exactly the same but I want the last one to have a different size as i wish to change the width and padding of it.
I have no idea how I am able to do this, I've tried multiple ways but experienced lots of problems along the way. I tried adding styling in the <li> tag on the HTML page, but it changed absolutely nothing, I then tried using the last-child selector which worked to an extent. It allowed me to change the padding of it but not width. But it didn't just change it for the last one but also the first one.
CSS:
.dropdown{
position: relative;
margin: 0 auto;
float: right;
top: 20px;
font-size: 13px;
}
.dropdown li {
float: left;
width: 155px;
background-color:#373737;
position: relative;
border-bottom:1px solid #575757;
border-top:1px solid #797979;
}
.dropdown li a {
display: block;
padding: 10px 8px;
color: #fff;
position: relative;
z-index: 2000;
text-align:center;
}
.dropdown li a:hover,
.dropdown li a.hover{
background: #CF5C3F;
position: relative;
}
.dropdown :last-child li a{
padding: 0px;
width: 40px;
}
HTML
<ul class="dropdown">
<li><a id="page1" href="index.html">Home</a></li>
<li>Internet Architecture
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Four</li>
</ul>
</li>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
</li>
<li>Item One
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</li>
<li><img src="images/contact_white.png" width="30px" height="auto"></li>
</ul>
Does anyone have any idea on how to fix this?
I want the last one to have a different size as i wish to change the width and padding of it.
So if you meant last child of level 1 than use
ul.dropdown > li:last-child {
/* Target */
}
And if you meant each last child of li on 2nd level ul, than use
ul.dropdown > li > ul > li:last-child {
/* Target */
}
Demo
Demo (Just more elements, nothing fancy)
I may be missing something here, but if I understand your question right it's as simple as giving the <li> you want to be the odd one out an id, and then using css to change li#myId..
I want to display a content"--" after every list items but when i use li:after then the content comes below the list items and when i use a:after then the content correctly comes after the list items. However i want the content"--" to be associated with the <li> and not the <a> because when i will be using a:hover then there will be some problem. Here is the code. Can anyone help?
HTML
<ul class="group">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
CSS*
.group:after {
content: "";
display: table;
clear: both;
}
ul {
list-style:none;
background:gray;
}
li {
float:left;
padding-left:30px;
}
a {
text-decoration:none;
display:block;
padding:10px;
color:white;
font-weight:bold;
}
li:after{ content:'--'; }
The problem here is the element :after is rendered after the a tag, since you have this into the a tag:
a {
display:block;
}
The :after content is in the next level pushed by the a block tag. Change this and you see the change:
a {
display:inline-block;
}
The demo http://jsfiddle.net/6YuQ8/3/
I'm currently trying to create a drop-down menu from nested unordered lists. I have the menu working however I'm having some issues with regards to styling. The overall link that triggers the drop-down is clickable and needs to have a blue background with white text however, the drop-down elements need to have a grey background which is inherited from the overall navigation container. All I need to do is modify the text colour however whatever I method I try it always modifies the drop-down text colour as well as the heading link colour.
My CSS can be found below along with an example of the current display and the html used to generate the menu:
/*CSS*/
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#style_me > li > a{
color: #124162 !important;
}
/HTML/
<nav id="navigation" class="navigation">
<ul>
<li class="current">Home</li>
<li>Who Are We?</li>
<li>Why Join Us?</li>
<li>Contact Us</li>
</ul>
/* This is the menu element that needs styling */
<ul id="coolMenu">
/* THis should be blue background white text */
<li>Login / Register
<ul id="style_me">
/* These should be grey background blue text */
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
</ul>
</nav>
Any help would be greatly appreciated. It's been a couple of years since I've had to do any CSS and my memory is a bit flakey!
This should do what you want:
#style_me li a {
color: #124162 !important;
}
(just spaces instead of >) And, perhaps, you won't need that !important.
Update: try even more specific CSS selector if what you posted is being overridden.
#coolMenu li #style_me li a {
color: #124162 !important;
}
In css how would I change on hover the color of test 1 but not color of list 1, 2,3?
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
One way is to specify the "default" color:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}
http://jsfiddle.net/D8dwt/1/
Another (cheat?) is to use more markup to wrap the content you want styled on hover:
li:hover span {
color:#f00;
}
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
This is one way to go:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
Add test1 into a div element so that it is in a separate leaf.
css:
div:hover {
color: blue;
}
Although there may be a way to do this without modifiying the html..
Give it it's own class and define it in your CSS file.
<li class="yourclass">
Or put it in tags and define the link in your CSS
li.yourclass a:hover {
text-decoration: underline ;
}