I'm trying to pick up some CSS as I try to make temporary styling for this site while they find their stylesheet: http://faq.travelbelize.org/travel_belize
The priority is to get the menu and sitemap cleaned up (both have the class of "menu"), but I'm having trouble making them display horizontally.
I've tried:
.menu {
display: inline
list-style-type: none
}
Do I need to be more specific with my CSS selector? I've also tried it with .menu ul li without luck.
I've also played with padding, margins, display: list-item, and floats without luck.
Related
I have an imported set of CSS styles. One of those styles is the list-style-type: none; that you can see in the screen-shot.
I'm implementing a component right now where I need numbered list items for an <ol>. No big deal, I just write a CSS style that's more specific than the imported style, right?
Except for some reason, even though the imported style is overridden, it's still effecting the list when I load the page! Once I disable it in dev-tools, the numbers appear just how I want them, but dev-tools shows that the imported style is crossed out and shouldn't have any effect in the first place.
How is it, that a CSS style that's clearly being overridden is still somehow effecting the element it's targeting?
Any ideas or insights would be very much appreciated. Thanks!
The style which sets list-style-type: none is applied to ol elements and li elements.
You are overriding it with a more specific selector for the ol element, but the li element has its defaults overridden so doesn't inherit from the parent ol.
This example shows how that works:
ul,
li {
list-style-type: none;
}
ul {
list-style-type: number;
}
.b {
list-style-type: inherit;
}
<ul class=list>
<li>aaa
<li class="b">bbb
</ul>
I've been following w3schools and this other website to build a navbar in jekyll using frontmatter. I'm having trouble with the block property in CSS. The entire navbar except for the dropdown portion is working.
Here's the jsfiddle. I'm not sure how useful that will be since it has Liquid in it.
Here's a picture of what I'm looking at. I've played around with the "#navbar .ddm a" section of the CSS, so I know I'm in the right spot, but it doesn't matter if I put block. Inline works correctly. It just defaults to inline-block, even if I delete "display: "
This is the css that I think should be the culprit
#navbar .ddm a {
color: green;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
Elements that need to be targeted are the list items (li) of the dropdown menu.
You're focus was on the nested anchor tags (a). So you needed to be looking one level up - at the containing parent elements (li).
In order to achieve your intended result, you need to remove the float declared on only the dropdown list items, e.g:
#navbar .dropdown-menu li {
float: none;
}
As long as you have float rules declared, aligning elements with display rules won't be effective.
Fiddle Demonstration
https://jsfiddle.net/kbuoL6sm/3/ (additional styles included)
I have a horizontal menu built using a <ul> element. I'm trying to get it to evenly spread out each <li> across the width of the menu. Based on several answers here on SO, I used the following CSS:
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
However, no matter what I try, the <li> elements still end up with a calculated display of block, with this contradictory information from the debugger (tested in FF and Chrome):
I didn't know what is going on here, and (more importantly) how do I get my list items to display as table-cell?
In photo is showed that your style.css is really big (min.1835 lines) and because of that styles to ul could be overvritten somewhere.
To make your rule more important than existing rule, use !important keyword after rule like so:
ul {
display: table!important;
width: 100%!important;
}
ul li {
display: table-cell!important;
}
CSS has a trait called importance, it chooses which rules are the most specific and thus should override more loose rules. As you seem to use a CSS framework, your own rules don't override the framework's generic rules. Turns out that you have two options to increase the importance of your rules at main.css:
Add !important after your rules:
ul li {
display: table cell !important;
}
Make your selectors more specific:
#menu ul li.menu-list-item { ... }
Your question also looks very strange and you may be subject to a browser rendering bug, have you tried it out with other browsers?
What I want to do is break up the inline-block <li>s. The code is generated and I have no access to it before it is written to the page. Because the <li> elements have no white space between them, they are not split and won't justify across the page.
I don't mind if the solution is CSS or Javascript based.
I have tried various things in CSS 'content:' and 'after:'.
Please see this fiddle for a demo of the problem: http://jsfiddle.net/2L56N/5/
Edit: The result should like the top example. However, the generated code is like in the bottom example (no space between the tags, causing the inline-block to become one). Drag the width over so only 2 images show to see the justify effect I am looking for.
Unless I'm misunderstanding the question, you can simply add margins to the li elements like so:
ul li {
display: inline-block;
margin:5px;
}
http://jsfiddle.net/B7cL9/
You can use display:flex; with justify-content:space-between; to simulate your text-align:justify when white space are missing in between your inline boxes this will only work for younger browsers
:
ul {
display:flex;
justify-content:space-between;
text-align: justify;/* your code */
}
ul li {
display: inline-block;/* your code */
}
DEMO
I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .
I tried
list-style: none;
but that doesnt work could anyone suggest a workaround this problem..
Thanks any help would be appreciated
Thanks everyone for the effort +1 to all answers
Set padding-left and margin-left on the ul to 0.
Have you reset the default margin and padding styles?
ul,li {
margin:0;
padding:0;
}
You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:
margin: 0;
padding: 5px;
A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).
In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.
http://getfirebug.com/html
Also, just in case you haven't seen it before, look at the box model:
http://www.w3.org/TR/CSS2/box.html
A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.
Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/