i am working on a site with this fieldset with ul. It is a joomla template where I am logged in as a publisher. This is the menu where you are able to change your articles.
What I would like to happen is that the first a and the last two a's are not visible. (like with a display:none). But I don't know how to call the lines in css. I know :nth-child() exists but It did not work the way I tried it.
<fieldset>
<ul class="nav nav-tabs">
::before
<li class>
Content
</li>
<li class="active">
Publishing
</li>
<li class>
Language
</li>
<li class>
Metadata
</li>
::after
</ul>
Is there anyone who knows how to call them in css? I am sorry if this question is not really expert level. Thanks
You can do it with simple CSS
.nav li:first-child,
.nav li:nth-child(3),
.nav li:nth-child(4) {
display: none;
}
But this is not a clean way. The edit form should be redesigned by an override. If you haven't the privilege to do that, ask the template developer.
Hide all and show the active one.
.nav-tabs li {display: none;}
.nav-tabs li.active {display: list-item} /* or block, if LIs are floated or you want them block */
Put the same class to the li's you want to hide and call them on your css.
Example:
<li class="hide-me"></li>
li.hide-me { display: none;}
BTW if you plan on changing the display value later on to show them separately id suggest you to use an id instead of a class.
Related
I have this structure:
<div id="sidebar">
<ul>
<li>
"Main item"
<ul>
<li class="cat-item cat-item-21">
"Child item"
</li>
</ul>
</li>
It's generated and I cannot modify it. But, using CSS, I want to make the "Main Item" unclickable, using:
pointer-events:none
How can I acces the first "li" in the "ul" and modifiy his CSS without touch the rest ?
You need to use the > identifier to only specify to go one level deep per element you're looking at such as...
#sidebar > ul > li > a{ pointer-events:none }
This will select only the first a of the first li of the first ul inside #sidebar
I am using HTML Tidy to output pretty HTML source and as a final encoding check.
However it is taking a very simple list such as:
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
and converting it to this monstrosity:
<ul id="navigation">
<li style="list-style: none">
</li>
<li id="active">Summary
</li>
<li style="list-style: none">
</li>
<li>Upload
</li>
<li style="list-style: none">
</li>
<li>Accounts
</li>
</ul>
How do I gracefully tell it to leave my list alone?
I have searched these configuration options, however I often find they are not named intuitively or explained properly.
It's actually trying to correct your markup to make it conform to standards, your <li> tags should be around the <a> tags, not the other way around, maybe if you fix up that then it won't try to add extra items to the list.
You can remove the style part though, just modify your css to have:
ul.navigation li
{
list-style: none;
}
The only answer: give it valid markup to start with. The only legal child element of a ul is an li. An a element cannot be a child of a ul.
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
If you want the whole li to be clickable, style the a element as display: block:
#navigation li a {
display: block;
}
Your list is invalid markup; an ul element may only contain li elements. Tidy is actually applying the most sensible general approach to fixing such broken markup: it turns any non-li content to an li element for which the list bullter is suppressed.
So manually change markup like
<li>Summary</li>
to
<li>Summary</li>
which is probably what you want. This may require changes to CSS or JavaScript code, if they expect the current markup.
Move your <a> tags into <li>-s:
<li>Summary</li>
Consider my html as follows:
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</li>
</ul>
My lists are styled as tabs, and I have my anchors as their parents so that when a user hovers over a tab it becomes selectable
My issue is that I was hoping to use a:hover, or the other anchor properties to change the background colour of my list item...is this possible using CSS?
I can't get it to work so I'm thinking I may have to use some JavsScript?
Wrapping the <li>'s in <a> is improper HTML and may not render properly in all browsers. A better solution would be to set the display property of the anchor to display:inline-block. Then you will be able to set the width and height of the anchor to the width and height of the li's. This way you can also use the hover property of the anchors.
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</ul>
#menu li a
{
display: inline-block;
width: 100%;
height: 100%;
}
#menu li a:hover
{
background-color:red;
}
The direct children of a ul element should only ever be list items elements, not an a.
You could either use :hover on the li element it's self, this works in browsers that aren't IE, maybe even IE8 and up..
Or you could style the a to take up the entire space area of the li, and style the li to be inline, so not to display as a typical list.
You can use :hover on other elements, not just anchors.
How do i make that effect with the tabs (i.e. the tabbed 'active', 'featured', 'hot', 'week', 'month') using just html and css? i tried copying the css but it didn't work. can anyone help or lead me to a tutorial just like this? thanks!
This is what you need:
5 divs, with .tab class.
.tab-container, a css class for the container div, that needs a botoom border, this will contain tabs.
.tab css class, that contains basic block features, some color:, padding:, and margin:, also it needs to float: left, so all the divs with that class float to the left of the container.
.active css class, that have a left, top and right border, and maybe some different color, if you want so.
since .tab elements will be links, and <a> elements are inline by default, you need to specify display: block css for .tab as well.
Now the layout:
a container div.tab-container
child a.tab elements.
Try with that here: http://jsfiddle.net/ click save and comment with the saved link you have, or edit your question with the css/html you wrote based on the mini-tutorial above.
I will prefer to do the tabs with ul and li inside a div container with id #tabcontainer
and in your css you will have some:
CSS:
#tabcontainer ul li {
// properties to items
}
#tabcontainer ul li a {
// properties for links
}
#tabcontainer ul li a:hover {
// properties for hover links
}
#tabcontainer ul li .active {
// properties for active item
}
HTML:
<div id="tabcontainer">
<ul>
<li class="active"><a id="item" href="#">Link 1</a></li>
<li><a id="item" href="#">Link 2</a></li>
<li><a id="item" href="#">Link 3</a></li>
<li><a id="item" href="#">Link 4</a></li>
</ul>
</div>
In the li tags in your server side language you will set a variable to which link is already active as you see the address in the address bar changes to ?tab=hot when you click hot
I have a style for styling <a> elements in list items in a #navigation container. This is working fine.
#navigation li a {
text-decoration:none;
background:#bfe5ff;
color:#045e9f;
width:125px;
height:35px;
padding-top:11px;
display:block;
float:left;
margin-left:2px;
text-align:center;
font-size:18px;
font-weight:bold;
}
Now in some <li>s I am inserting <div>s. In these I am again using a list again, but it should be different in style or have no style.
When I put in <li>s, their style matches the outer <li> elements, but it should not.
I am trying to use this:
#newnavigation li a {
font-size:12px;
margin-left:20px;
}
but it's not working - it applies the "outer" styles.
This is my markup:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="browse">
Browse
<div id="browsecontainer">
<h3>Browse By Category</h3>
<li></li>
</div>
</li>
</ul>
It will continue to apply the outer styles - that's the "C" in CSS, cascading. Your new styles are being picked up correctly, but if I am reading the question right you are trying to eliminate the other "inherited" styles like the background colour?
If you want the outer styles to not be applied, then you either need to be using an element that doesn't match the outer pattern (i.e. not an li, not practical here), or to be overriding the styles you don't want applied. If you really only want these styles applied to the outer set of li elements, then consider as an alternative using a CSS class on the outer li elements and applying the formatting you don't want inherited to that class directly.
Your css is targetting the #id newnavigation but your ul #id is navigation
Try the following:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="browse">
Browse
<div id="browsecontainer">
<h3>Browse By Category</h3>
<ul id="newnavigation">
<li>First category</li>
</ul>
</div>
</li>
</ul>
To select the inner-items, just nest them:
/** Matches outer *AND* inner LIs */
#navigation li {
}
/** Matches inner LIs only (li within li within #navigation) */
#navigation li li {
}
Or, to match the anchors:
#navigation li a {}
#navigation li li a {}
In the inner styles, you will start with a styleset inherited from the outer styles, so you might want to 'undo' some settings by overriding them to fit your needs.
Note that your markup is invalid. To insert new items you should also insert new lists, i.e.:
<ul id="newnavigation>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
It's always a good thing to validate your markup when you have problems with your style, Javascript, etc.
Having said that, to match only inner LIs, the CSS rule you need is:
#newnavigation li ul li{
// stuff here
}
I'm guessing it's something like this?
<ul id="navigation">
<li>link</li>
<li><ul id="newnavigation"><li>link</li></ul></li>
</ul>
I copy and pasted your styles and it's working fine. What is it exactly that is not working?
Update:
My guess wasn't quite right. In the code you show there is no id="newnavigation" to match the #newnavigation css selector.
You can also use a child selector like : #navigation > li
So only the outer li is styled.
Note that IE6 and below does no support child selectors.