Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
#menu1 a {
display: block;
background-color: #0066FF;
text-decoration: none;
font-family: calibri;
font-size: 20px;
color: #FFFFFF;
padding: 5px 5px;
}
#menu1 a:hover {
background-color: #0088FF;
}
#menu1 li {
display: inline-block;
}
#menu1 ul {
list-style: none;
text-align: center;
margin: 0 auto;
padding:0px;
}
Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview. Does anybody know how to do this? Maybe something with positioning? My question is: How do i get the a, a:hover, li and ul properties under one #menu1?
Thanks for your help!
Update:
I've had a lot of answers that refer to LESS or SASS. I'm not familiar with those languages. Could anybody explain to me what this is and how to use this? A link to a clear tutorial is fine.
Presumably you want to do something like this:
#menu1 {
a { /* ... */ }
li { /* ... */ }
ul { /* ... */ }
}
This is not possible with CSS and there is no workaround to enable this type of structure; you have to write out each selector in full and rely on logical grouping and/or formatting in the source to provide structure.
You can, however, use a CSS preprocessor such as LESS or SASS which will allow you to write code like the above and translate it to your original "dumb" CSS version automatically.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I'm having a problem with my css nav styling. The code works on every other page, just not my first page in my drop down. When I open the page, the nav bar changes to a deep purple instead of my chosen color #E7DDDC.
Link to the page that isn't working
Ps. Sorry I'm new at coding and on here as well. Can't seem to find out how to post the code in my question.
This is because the default visited link colour has not been specified in your projects_style.css file. To add it you must use,
a:visited {
color: #E7DDDC;
}
To disable it, you need to replace,
a:link {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
with the one below,
a {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
To specify different colours for different link states, you need to use
a:link
a:visited
a:hover
a:active
You can change in your css,
Add the following styles,
#nav ul li a {
color: #E7DDDC;
}
It might solve your issue.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I have a <ul> with five <li> tags nested with in. I want to style them all differently and have been experimenting with :nth-child to try and target each <li> element instead of adding any classes etc.
My .scss file looks like this:
ul {
display: inline-block;
li:nth-child(1) {
list-style-type: none;
list-style: none;
display: inline-block;
background: blue;
}
li:nth-child(2) {
list-style-type: none;
list-style: none;
display: inline-block;
background: red;
}
li:nth-child(3) {
list-style-type: none;
list-style: none;
display: inline-block;
background: white;
}
li:nth-child(4) {
list-style-type: none;
list-style: none;
display: inline-block;
background: pink;
}
}
I've only added in colours to try and notice my style changes pick up easier
However, i'm not targeting each <li> element and changing the colour but only a few and only getting the colour blue to show. What have I misunderstood? Any help?
What you have done is working, however, yuo first should try to target your selectors differently, for example:
ul{
li{
&:nth-child(2){
/* Your code here */
}
}
}
Also, note the :first-child and :last-child pseudo-selectors exist.
In the end, what I would advice you to do is, if possible, add the color or background color programatically as it seems to be more content-specific than a theme constraint. And, if you cannot use your server to do that, maybe try to look into sass lists and #for directives. It could help you have a maintanable code.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I made a site and just did the navbar. On Google its good only the underline is there but on Firefox the bullet points are still there how do I fix this. Also how do I get ride of the underlines?
Try this:
Let say: your nav has container: #nav, then:
#nav a {
list-style-type:none;
text-decoration:none;
}
You should use as CSS reset sheet: CSS Reset
And then for your nav bar:
list-style: none;
text-decoration: none;
You probably need something like text-decoration: none; list-style: none; inside your nav ul tag
Try doing the following:
list-style-type: none;
It would help if we had your code though.
Try the following in your navbar's css:
list-style-type:none;
text-decoration:none;
Here is a reference from MDN. It has everything about list styling.
on css:
*{
text-decoration: none;
list-style: none;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have the following CSS I need to convert to SASS:
#menu li:hover > a {
color: #fafafa;
}
How would this be translated?
edit: looking at it, i will try:
menu{
li{
&:hover{
a{
color: #fafafa;
}
}
}
}
Try this:
#menu
li
&:hover
> a
color: #fafafa
Or
#menu{
li{
&:hover{
> a{
color: #fafafa;
}
}
}
}
I have only used .less but tried in http://sassmeister.com/ and SASS result is:
#menu li:hover > a
color: #fafafa
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Has anybody tried making or seen a drop-down menu with only CSS, no javascript.
So clicking a toggle will show the drop-down (not hovering), and then the drop-down will hide on mouseleave.
I thought it may be possible using combinations of :hover and :active sates but I was unable to make it work.
I know this can easily be achieved with javascript, but I would like it to work with purely CSS.
Thanks
Edit: There are many examples of dropdowns triggered by :hover, I have yet to see an example of a css dropdown triggered by a CLICK.
I have it working! I'm not sure if this is the best solution possible, but it seems to work pretty well.
I used an :active handler to show the hidden menu, which is positioned on top of the button, allowing you to continue showing the menu with a :hover handler.
Here's the fiddle: http://jsfiddle.net/alsweeet/ycYg7/
HTML:
<div id="dd">
Select Language
<ul>
<li>English</li>
<li>French</li>
<li>German</li>
<li>Spanish</li>
</ul>
</div>
CSS:
ul{
display: none;
position: relative;
top: -55px;
padding: 55px 0 0 0;
margin: 0;
}
ul:hover{
display: block;
}
li{
background: #ddd;
padding: 10px;
list-style: none;.
}
li:hover{
background: #eee;
cursor: pointer;
}
#button{
display: inline-block;
padding: 10px;
background: #ccc;
color: white;
}
#dd{
display: inline-block;
}
#dd:active ul{
display: block;
}
#dd:aactive ul:hover{
display: block;
}
#dd:active #button{
display: inline-block;
padding: 10px;
background: #ccc;
color: white;
}
Here is a great fiddle I have from a previous SO question.
The real magic is behind this line of css,
[type=radio]:checked ~ .content {
z-index: 1;
}
This is adding a z-index of 1 when the corresponding radio button is clicked. Since the body underneath is gaining a z-index over the others it makes the section active.
This is not a drop-down, I am providing a working example and it is up to you to make your situation. :}
JSFIDDLE
Here is the JSFIDDLE I modified to show how you can show/hide on click with only css.
[type=radio]:checked ~ .content {
display: block;
}