.navbar .menu >li>a {
float: none;
padding: 10px 17px 10px 0px;
color: #fff;
font-weight:bold;
text-transform:uppercase;
text-decoration: none;
text-shadow: 0 0px 0 #fff;
}
.navbar .menu >li>a::before {
content: "";
display: block;
height: 5px;
width: 5px;
background: silver;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin:0px;
padding:0px;
}
once i add the pseudo selectors the entire menu shifts down. Just add more padding to the li>a?
The key is consistency, your selectors should only be formating positioning if they’re expanding or hiding it for some reason and doing that in excess tends to cause conflicts and problems much like this in spades.
No, I’d say change display: block on the pseudo element to display: inline-block. Block display means that it must force the rest of the link down to a new line.
ralph thank you!
genious as always. that worked.
http://cdiwwwtest.cdicorp.com/engineering
was wondering if a bulleted list would be better but for some reason (bootstrap) we didn’t get it. I thought i’d try the pseudo & it may turn out better? I am going to try to lift it up a bit, going to try line-height?
Belsnickle. Thank you for your suggestion as well. thought i found it a bit cryptic.
Also i could use the ::before to add an background image as well…
I’m not quite clear on what you are trying to do. Could you clarify a bit?
Generally you want to assign your positioning elements to an element level that the links are included in (so say .navbar .menu >li) and then only assign attributes that are changing between the the selector states in the child or selector attributes. That basically stops jumping elements in most cases becuase your positioning doesn’t change between states and it keeps your css clean and concise while minimizing potential conflicts.
Specifically inheriting attributes that are default inherited is prefered if you expect you’re going to need state specific modifications to them that way it will apply to all the various iterations.
yes sure. sorry. I want to raise the circle at midpoint. I tried positioning w/relative & absolute & line height.
so far…not there yet.
If you want the bullet points there, rather than use ::before, just use the default UL bullets. You can set their distance from the text easily with CSS. Or you can remove the bullets and place a background image on the LIs to create a custom bullet if you don’t want the regular bullet. Either way, ::before is not needed.
Yep. for whatever reason we didn’t get around some of the settings yet. so i put the ::before as a way around it. I ll go back tomorrow and see if I can find where to enable the bullet bit.
Also regarding your site, you know you can do a position offset for where the background starts now right?
http://tanalin.com/en/blog/2011/09/css3-background-position/
It’s supported in all major modern browsers. That way your background doesn’t start chopped off by the header and end with a bunch of uncovered area near the footer.
I also am not sure what you’re trying to do at this point but as far as my previous comment, if you view the webpage in console you’ll usually be able to get a pretty good idea of what elements are being modified by what css that you may or may not be intending and what elements are being subjected to repeated css assignments of the same type (wordpress, which you’re using, can be particularly bad at that so it’s probably a good second step in diagnosing your problems, the first as always being running a validator.)