this is my very first post on this site, so excuse me if I'm not clear enough.
I'm currently working on a website built using wordpress, and I have an issue with CSS.
My menu bar is made with an ul, and, when I increase text size in my navigator (with ctrl+scroll for example), li items overflow from the div, like in this image.
In this case, I would like the li to be splitted in two part, and fit in the div, but I did not find how to realize that. I've already tried the "word-break" solution, but I guess I was doing it wrong.
Because my site is hosted by Wordpress, there are two different CSS sheets used for the design, which is a bit messy.
Here is a part of my sheet :
#access {
display:inline-block;
width:27%;
font-size:100%;
margin:2.5% auto 6px;
border:none;
padding-top:10px;
padding-bottom:10px;
overflow:hidden;}
#access a {
display:inline-block;
max-width:100%;
color:rgb(0,102,138);
font-size:22px;
padding:none;
line-height:30px;}
#access li {
display:block;
padding:4px;
float:none;}
#access ul {
list-style:none;
font-size:100%;
margin:0;}
I can't post the theme's CSS link because, as a new member, I'm limited to 2 hyperlinks by post.
Thank you for your help.
These menu items contain non-breaking spaces.:
Coaching professionnel
Coaching parental
Coaching professionnel
Coaching parental
This means when text increases in size they will all remain on one line.
Also, your #access has overflow:hidden; Remove that, and remove the non-breaking spaces - (" ") and your words should wrap correctly
Related
I am trying to get the submenu in Bootstrap's navbar to open horizontally, instead of vertically.
I hoped this would be something as simple as adding an extra style, e.g.
ul.dropdown-menu li {
display:inline;
}
or
.navbar-nav li.dropdown li {
display:inline;
}
but nothing changes.
I couldn't find anything useful after quite a bit of searching either. Hope to get some help here.
a{
text-decoration:none;
color:#666;
border-left:2px solid grey;
padding-left:10px;
}
li{
display:inline;
margin-left:10px;
color:grey;
}
i have written this code in "style tag" but the same code is applying on all links, i aslo made separate divs and classes and please tell me some way to use this code for different classes with different value like in one links div i want that code, but in other links div i don't want the border left and color= grey,,,but if i chnage it then the change will also occur at other places please tell me something better?
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.
At this site and within the navigation are nav titles. As you can see there is an unnecessary space between each nav title and I am stumped as to why this is. Check out "classes," nav to get a good view of too much space.
I've been at this for a bit and to the point where I thought I'd ask around for a suggestion or tip.
li {
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}
And for another <li> vertical spacing adjustment option:
li {
line-height:1.2em;
}
Look for anything involving height (i.e. line 324):
li, li a{
height:32px;
}
Note: I'm not sure what your xmargin or xheight in your CSS is for
I have built a CSS navigation header, and it's working exactly the way I want in regards to positioning, stylization, all that. This is the CSS that stylizes it:
#header ul {
padding:72px 0 0 0;
text-align:center;
}
#header ul, #header ul li {
margin:0;
list-style:none;
}
#header ul li {
display:inline;
}
#header ul li a {
font-size:17px; color:#69C; text-decoration:none;
display:inline-block;
height:44px;
line-height:44px;
margin:3px 6px;
padding:0 26px;
}
#header ul li a:hover {
background:#69C;
color:#FFF;
}
And this is the list:
<div id="#header">
<ul>
<li>HOME</li>
<li>WHAT WE DO</li>
<li>ABOUT US</li>
<li>GET STARTED TODAY!</li>
</ul>
</div>
Pretty simple stuff (and currently viewable at http://www.pmind.com/staging, but I included the code here for potential future readers).
You may notice in the list, the final li has an ID assigned to it. When I add this rule to the CSS:
#get_started {
color:#3C0;
}
Nothing happens. It was my understanding that A. CSS rules that come later in the CSS document have priority over rules that come earlier, and B. CSS rules used with the ID selector had the highest priority no matter what. But clearly the blue colourization that comes from the earlier CSS rules is still taking priority over colouring the final li green. I tried to make sure I did my due diligence Googling for the solution, but everything I find says that IDs get the highest priority (and this has also been my understanding in practice for everything I've coded before this one issue).
If you were trying to override a selector that didn't have an ID with one that did, your confusion would be spot on.
In this case, though, you're using #get_started (which has an ID) to override #header ul li a which also has an ID in it.
Surely you're thinking that your ID is more specific than the #header ID — and you're not entirely wrong — but that's not how CSS works. It only cares about the number of IDs used in the selector, not which elements those IDs happen to target.
To figure out which of two selectors takes precedence, first count the IDs in each. If one has more IDs than the other, it wins and you're done.
If it's the same number (in this case both have one) move on to the number of classes. Again, if one has more classes than the other, it wins and you're done. In this case, both have zero classes.
So we move on to the number of tag names. Once again, if one has more tag names it wins. And here #header ul li a has three tags in it (ul, li, and a) whereas #get_started has none. You lose. The existing selector wins.
You could work around this with just #header #get_started which now has two IDs, but my preference would be to more clearly describe it as:
#header ul li a#get_started
#header ul li a has a higher specificity than #get_started
You should read the w3c specs on specificity.
EDIT to add:
Just remember that although specificity is commonly written in short-hand as powers of 10, 10 elements will never be more specific than one class, and 10 classes will never be more specific than one id.
E.X.
html body div table tbody tr td ul li a is less specific than .some-link-class
Checkout the excellent video:
Understanding CSS Specificity
can you try this
#get_started {
color:#3C0!important; // this will take the priority
}
Did you try?
#get_started:link {
color:#3C0;
}