Hey guys I'm trying to create a horizontal navigation on the footer of a WordPress theme and was encountering several issues. I tried initially doing it as a display:inline which got it to be horizontal, but i want every element of the list to have a bullet point except for the first element. So I did a little research and came up with the following code
.menu-footer li{
list-style-type:none;
float:left;
margin-right:5px;
margin-left:5px;
}
.menu-footer li:before {
content:'\2022';
}
.menu-footer #menu-footer-navigation li:first-child {
list-style-type:none !important;
}
However the first-child isn't working as I feel like it should be. I've tried moving elements around and such and it hasn't worked. The list is being created dynamically through the WordPress backend and no matter what I try it's not doing what I want it to do, that's why I chose to come this way and ask for some help. Most the solutions that I have found come from this site, and haven't found one that works for my situation. You can see the site at http://goml.xxplosions.com if you are looking for a reference point.
Your second rule creates a pseudo-element containing your bullet point in front of every list item. To remove it from the first element you need to overwrite that exact rule:
.menu-footer li:first-child:before {
content: none;
}
Read more about pseudo elements:
https://developer.mozilla.org/en/CSS/Pseudo-elements
https://developer.mozilla.org/en/CSS/:before
Try adding this to the bottom.
.menu-footer li:first-child:before {
content:'';
}
Related
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 have a CSS problem on this page: http://www.fastclickad.com/ask-for-your-free-seo-analysis/
For some reason, bullets still show although I inserted in the style sheet several instructions so the list styles don't inherit from the theme.
When I "inspect element" with google Chrome everything seems to go smooth, except the bullets still show!
Can you help me?
You have a border specified which, if removed, prevents the arrow:
.aritclecontent ul li::before, .sidebarwidget ul li::before {
border-left: solid #0473B2;
}
So you'll need to do something like:
.gform_body ul li:before {
border-left:none!important;
}
The !important could be frowned upon, so you might wish to analyse your styles and refactor accordingly to remove the need for using it, if indeed it is necessary.
try this ..
list-style-type: none;
There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.
This is really strange. I've got this site where I have a list menu with a simple :hover effect on each item in the menu.
http://w3box.com/mat/
In Firefox it works just fine. But i IE7 atleast there's a lag. I haven't tested it in IE8 but my guess is that it's there as well.
Now, I've been trying out veriations to the code to see what might cause the issue. And I've seen alot of posts about similar scenarios. But none of them seemed to apply to my case.
So just now I noticed that in my css stylesheet, I've got this:
li:hover {
background-image: url(img/TopLine.png);
Height:29px;
}
Strange enough, if I remove the height specifications, there is no lag! What could be causing this? Could it be layers of padding and margins to the parent li class? Or the parent class above that one?
This is the code of these items. The rest of the css you can under /main.css of the site
#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }
.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }
.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px; }
li:hover {
background-image: url(img/TopLine.png);
Height:29px; }
Any ideas on how I can improve this?
I'm not really getting any lag. The first time there is a slight delay though - this is most likely because the background image is loading.
You'd be better off setting a background on the list item proper then changing the background position on hover. (There are plenty of questions on SO about this.)
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)