I have a list with multiple sections. I try to make it look like a kind of tree. It started quite well but I can't fix the last bits.
The code can be found at:
http://jsfiddle.net/Kwfpm/
Here is how it should work
The first "Datorer", "Mjukvara" and
"Microsoft" should be connected to
the tree with a horisontal line.
"Mjukvara" at the bottom left should
be connected to "Kategorier".
There are some repeated problems but these should be solved if the two above is solved.
Here is a link what it should look like (without the collapsing things):
Open and close to see the tree:
http://jquery.bassistance.de/treeview/demo/prerendered.html
Info
I don't know how many levels there are.
The HTML can't be changed because its generated by Wordpress
Use backgrounds or borders to show what you got.
If JSfiddle don't work you can use this:
CSS
* {
margin: 0;
padding: 0;
}
.sidebar > ul > li {
background: none;
}
li {
padding-left: 20px;
list-style: none;
background: url('http://www.jenst.se/images/normal.png') repeat-y 10px 0;
color: #333;
font-family: Arial;
font-size: 13px;
line-height: 22px;
}
li a {
color: #555;
}
li:last-child {
background: url('http://www.jenst.se/images/lastchild.png') no-repeat 10px 0px;
}
HTML
<div class="sidebar default">
<ul>
<li id="categories-10" class="widget widget_categories">
<h4 class="title">Kategorier</h4>
<ul>
<li class="cat-item cat-item-7">Datorer
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="categories-10" class="widget widget_categories">
<ul>
<li class="cat-item cat-item-7">Datorer
</li>
<li class="cat-item cat-item-3">Mjukvara
<ul class='children'>
<li class="cat-item cat-item-4">Hårdvara
<ul class='children'>
<li class="cat-item cat-item-6">Microsoft
</li>
<li class="cat-item cat-item-9">Office-paket
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Have a look at this javascript treeview: http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/
It does have a same structure as you prefer with li's and ul's. Maybe you could take a look at it with firebug.
I figured it out. Here is a working code:
http://jsfiddle.net/Kwfpm/3/
The red borders can be changed to a background image horizontal lines.
Related
For a filetree that is dynamically generated, I set the width to 360px and a scroll on the x.
I know, the syntax is not correct, (nested ul should be in li ) but I am still wondering why the hhhhh in code below is not at the right side of the |- but under it. And the iiiii and further also...
.tree {
width: 360px;
overflow-x: scroll;
}
.li-tree {
list-style: none;
}
<div class="tree">
<ul class="ul-tree">
<li class="li-tree">|-<span>aaaaa</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>bbbbb</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ccccc</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ddddd</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>eeeee</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>fffff</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ggggg</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>hhhhh</span></li>
<ul class="ul-tree">
<li class="li-tree">|<span>iiiii</span></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
You can see in the fiddle that hhhhh is not right of the |- anymore, but under it: https://jsfiddle.net/a9fudsb6/5/
Its because of your width there is no space for your tree.
If you change it e.g. to
width = 400;
it appears inside.
If you want to keep your width, add the following:
.tree {
width: 360px;
overflow-x: scroll;
white-space:nowrap; // that one here
}
I want to hide this bit: <li class="categories">Kατηγορίες<ul> as seen in the code below (also see here https://poiimata.com/poets/):
<li class="categories">Kατηγορίες<ul>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
I tried using
.categories {
display:none;
}
but the result was to hide all items below that one (the whole list).
That happen because you've an invalid HTML code in :
<li class="categories">Kατηγορίες<ul>
_________________________________^^^^
The browser will evaluate your code to the below format, that why all your li's become hidden :
<ul>
<li class="categories">Kατηγορίες
<ul>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
</li>
</ul>
Instead it should be :
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
Snippet:
.categories {
display: none;
}
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
It appears you just have an error in your HTML. You use an incorrect closing tag and therefore hide the entire thing.
<li class="categories">Kατηγορίες<ul> <!--- closed <li> with <ul> --->
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
Try instead:
<ul class="categories">
<li >Kατηγορίες<li>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
</ul>
and change CSS to
.categories:first-child {
display:none;
}
That's just one way of accomplishing it. There are quite a few different angles you can take.
Since li contains tags that you do not need to hide, you need to masked the hidden text. for example like this:
.categories {
font-size: .1%;
}
.categories ul {
font-size: 100000%;
}
if only child elements is not a bug...
I want to remove the bullet point for this code. tried many ways but no luck. any help?
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
.widget ul li{ list-style-type: none;}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.
.wpcw-widget-contact ul {
list-style: none;
}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
You also might be interested to look up more details about the CSS property used on this answer.
I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!
No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle
Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>
i´m having some difficulty applying style override to all widgets in my wordpress theme. I created the theme from scratch, so I have absolutely NO IDEA how they got these bullets got there.
I want to remove the bullets from items in the lists. The html is:
<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Categories</h2>
<ul>
<li class="cat-item cat-item-4">Big Notch Updates (20)
</li>
<li class="cat-item cat-item-5">Music News (50)
</li>
<li class="cat-item cat-item-6">Ramblings (43)
</li>
<li class="cat-item cat-item-7">Site News (14)
</li>
<li class="cat-item cat-item-8">Stuff I Like (25)
</li>
</ul>
</li>
</div>
This is the code I came up with so far that doesn't seem to be working:
li#categoryposts-3 li.cat-item {list-style: none;}
I have no idea what to do at this point.
It has to be
li#categories-3 {background-image: none; list-style: none;}
li#categories-3 li.cat-item {background-image: none; list-style: none;}
There is a wrong id
You need two styles
li.widget ul,
li.widget li { list-style: none; }
#categoryposts-3 ul {
background-image: none; list-style: none;
}
Use the !important keyword in your css, like this:
li{
list-style:none !important;
}
The code below removes the bullets from a list.
<li style="list-style: none;" class="cat-item cat-item-4">Big Notch Updates (20)
</li>
<li style="list-style: none;" class="cat-item cat-item-5">Music News (50)
</li>
<li style="list-style: none;" class="cat-item cat-item-6">Ramblings (43)
</li>
<li style="list-style: none;" class="cat-item cat-item-7">Site News (14)
</li>
<li style="list-style: none;" class="cat-item cat-item-8">Stuff I Like (25)
</li>