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
Related
I have the following template:
<ul>
<li class="show-large-placeholder">
<img ....>
</li>
I am trying to align this list item in the center of the UL, I don't have access to changes of style for the ul, because the class show-large-preview on the li is conditionally added, so seeing display table won't work here.
Any ideas?
Add your own id element to the li, like so:
<ul>
<li id="center-li" class="show-large-placeholder">
<img ...>
</li>
Then, you can apply css to that id, instead of the whole class:
center-li {
/* Add your css here */
}
That should do it.
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 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.
i have a menu:
<li id="current" class="selected parent item556">
Parent
<ul>
<li class="item557">
Child
</li>
<li class="item558">
Child
</li>
</ul>
</li>
And i want to style only the Parent "a" element, but it styles all the Child elements too, since their are under the parent "li".
I tried something like:
li#current a:first-child{
color: #F2F2F2;
}
Didn't work, how do i style only the Parent "a"?
You can use the immediate child operator > to target the link (i.e. only links directly in the li element):
li#current > a
Try: li#current a:first-of-type to get the first a
Or you can try: li#current:nth-child(1) to get the first child
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.