I have this list in HTML and I would like order it by columns. I tried using floats it gives me this:
EDIT :
Height of these <li> is undefined, but I would like C below B, E below E and G below F without change the structure and change the order. I don't want to use position absolute. I'm wondering if there are other solutions.
HTML :
<ul>
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<ul>
OUTPUT (using float: left; width: 240px; border-left: 1px solid #EEE) :
What I want is more like this below, without changing the HTML because I already use this structure to make responsive.
Is it possible ?
You could use column CSS and a margin-bottom on the first LI tag, like this.
ul {
column-count:4;
padding:0;
column-rule: solid lightgray 1px;
}
li {
display:inline-block;
width:100%;
}
li:before {/* demo purpose to set an height to lis */
content:'';
float:left;
padding-top:50%;
}
li:first-of-type {
margin-bottom:50%;
}
You may need a JavaScript prefixer or add vendor-prefix manually.
Related
I've the following navigation at http://www.roydukkey.com. The navigation is designed to have vertical separators between the parent menu and it's child menu. If you look under the 'Contact' menu-item it looks the way it's designed, however have a look under 'Projects'. The are vertical separators shouldn't exist where there aren't child items against the menu.
How can the proper design be achieved through CSS alone?
This cannot currently be achieved through CSS.
Here is the solution I've chosen:
// Naivagation Vertical Separator Counter
$("#main > ul > li > ul .level-has-sub").each(function(){
$(this).find("> ul > li")
.slice(0, $(this).find("~ li").length + 1)
.addClass("vertical-separator")
});
Them simply style those items for the vertical separator.
It's not possible with pure CSS. You would have to count the number of <li>s in the child <ul>. If you restructured the menu, you could put the separators in the child <ul> instead. Then you would either a) show the separator on the left of every <li> in the child <ul>, or use :first-child to only show it on the first.
Your CSS is minified so I cannot give you line numbers.
In you custom.css file replace
#main li li.level-open:after, #main li li.level-open~li:after {rules}
with
#main li li.level-open:after {rules}
You can't do this precisely, as CSS can't (yet) know the children count of another DOM-element.
CSS4 might be able to do this (ascend to the style's parent) in the near future: http://www.w3.org/TR/selectors4/#subject. This looks interesting too, although not pure CSS; http://demo.idered.pl/jQuery.cssParentSelector/. Maybe you can descend back down again after counting the children of the submenu, but that would be very complex to achieve with the low logical selection methods CSS has.
You could probably best do this in SASS, but then it's not native CSS anymore, and then you might as well just fallback to JavaScript.
Here's an example of how style a style of a parent itself based on how many children it "at least" has;
JSfiddle
HTML
<ul>
<li>
<ul class="submenu">
<li>Contact 1.1</li>
<li>Contact 1.2</li>
<li>Contact 1.3</li>
<li>Contact 1.4</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul class="submenu">
<li>Contact 2.1</li>
<li>Contact 2.1</li>
<li>Contact 2.3</li>
</ul>
</li>
</ul>
CSS
li {
list-style: none;
display: inline-block;
border: 1px dotted red;
padding: 15px;
}
.submenu li {
display: block;
padding: 15px;
border: 0px;
border-top: 1px dotted blue;
}
.submenu li:nth-child(1) {
border: 0px;
}
/* This style only happens if the menu has 4 or more children li's */
.submenu li:first-child:nth-last-child(4),
.submenu li:first-child:nth-last-child(4) ~ li {
border-left: 1px dotted blue;
}
Good luck!
The solutions lays somewhere else then you might expect.
You have missed with expectation that on "Contacts" menuis all working well. I have added a new element just to show that the "bug" is in design of the menu.
So the problem is in the design of the drop down menu. To solve this , take a look in your css and look for
#main li li.level-open:after, #main li li.level-open ~ li:after
And delete line:
border-right: 1px dotted #7F7F7F;
Now, in order to achieve adding dotted menu you have to do change a little your php code. You can't do that in CSS. At least to my little research I couldn't find.
Create a new class - for example .dotted-right-border , and in you code, create an algorithm to add that css class to every element that will be printed on the left side of li when there is li element on the left.
Update:
Ok, then. I usually don't like to say that something is impossible, but in this case, and to my opinion here is impossible to do the change with pure CSS. Even current creating of menu items is adding level-open into HTML tag, so it would need something that will be doing around that.
There could be one more approach for this situation, for example:
To modify the class
#main li li.level-open:after, #main li li.level-open ~ li:after
and change mentioned line:
border-right: 1px dotted #7F7F7F;
Into line:
border-right: 1px dotted transparent;
and then to set border-color: #7F7F7F for every new item under sub-menu, but then you couldn't tell apparent if the sub menu has it's match on the left side, so it would then show/not show dotted border. This is just an example approach. If I explained the approach good.
It all ends up into situation - How can you tell apart if the sub menu has a parent item on the left side in order to show dotted border? And that is why I think there is no pure CSS solution. But if someone knows better, then even better.
CSS selector can not refer to children elements, the only class (pseudo) i know :empty. In your case at parent level you need information about number of children. The solution is to provide this info at design time and encode it (e.g. in class attribute).
Based on you code, for projects node you need to add info as follows:
<li class="level-has-sub limit">...</li>
<li class="level-has-sub limit2">...</li>
<li class="level-has-sub limit">...</li>
<li class="level-has-sub">...</li>
And corresponding CSS:
#main li li.level-open~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: none;
z-index: 1;
}
// above is not necessary if you remove this selector from your css
/* main job */
#main li li.level-open:not([class*=limit])~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit2+li:after,
#main li li.level-open.limit3+li:after,
#main li li.level-open.limit4+li:after
{
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit3+li+li:after,
#main li li.level-open.limit4+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit4+li+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
As you can see, there is problem with multiple selectors like:
#main li li.level-open.limit2+li:after,
#main li li.level-open.limit3+li:after,
#main li li.level-open.limit4+li:after
You can workaround it by using coding by attribute substring, eg: limit1, limit11, limit111, and selectors [class*=limit1], [class*=limit11], [class*=limit111].
Note:
I use substring selector [class*=limit] witch is little unpredictable ;) you can change it to pair: [class^="limit"], [class*=" limit"] for better control.
Hope it helps :)
suppose i have a ul li structure and i want to remove last li border which also support in IE 6 by using only CSS(use of css only is compulsory in my project).
<ul>
<li>HI</li>
<li>HI</li>
<li>HI</li>
<li>HI</li>
</ul>'
I want a such type of output which also work in IE6...
Since supporting IE6 is a requirement, you're going to have to get a little kludgy if you don't want to use Javascript or add a class (the preferred method).
It's not clear what look you're going for, but here's a method that preserves the bullets. This assumes the borders are defined and you want to hide one. You can set overflow: hidden on the <ul> and margin-bottom: -1px on the <li>. This works in IE6 just fine.
Demo:
Output:
CSS:
li {
border: 1px solid black;
margin-bottom: -1px;
}
ul {
overflow: hidden;
}
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Here's another method where you simply just don't define the bottom border.
Demo:
CSS:
li {
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Below is the solution (Tested it in IE9's quirks mode, which is equivalent to IE6, but let me know the results, I strongly believe it should work):
<html>
<head>
<style>
ul li{
border:1px solid red;
}
ul li.lastchild{
border-bottom: 0px; // Or use "border: 0px;" if you completely
// want to remove the border
}
</style>
</head>
<body>
<ul>
<li>HI</li>
<li>HI</li>
<li>HI</li>
<li class="lastchild">HI</li>
</ul>
</body>
</html>
You can do this by adding class to the last li there is no other way since it does not support last-selector and +
And the other option which might not be by pure css but I think it will helpful is by jQuery you can use jQuery, since jQuery supports last-child
Try
$(function(){
$("ul li:last-child").css("border","none")
})
and it will support almost all the browsers
Also its not good idea to consider ie6 except there special requirement . rather facebook and many big website doesn't consider ie6 check Browser Statistics ie6 does not even hold .5% so I would recommended to not think about ie6
After a long study i got a result that there is not a single method in CSS that removes last li border which also work in IE6......so U have to add a class on the last li element or you use jquery to remove last li border.......
Result:- only using CSS u can't achieve this goal..........
I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:
Markup:
<ul>
<li class="hover">
<img src="img/content/lighter.png" alt="lighter"/>
<p>Discusing Strategy</p>
</li>
<li class="triangle"></li>
<li class="hover">
<img src="img/content/wrench.png" alt="wrench"/>
<p>Beginig <br/> Designs & Development</p>
</li>
<li class="triangle"></li>
<li>
<img src="img/content/car.png" alt="car"/>
<p>Delivering Product</p>
</li>
</ul>
CSS:
div#bpath ul li.triangle {
width: 0;
height: 0;
border-top: 95px solid #d0dde5;
border-left: 20px solid #c1c1c1;
border-bottom: 95px solid #d0dde5;
}
div#bpath ul li.hover:hover li.triangle {
border-left-color: #5f9999;
}
What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?
Your selector:
div#bpath ul li:hover li.triangle
is trying to match a li element of class 'triangle' within an li. As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.
If you remove the latter li (li.triangle) to give (all, or one, of) the following:
div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
this might work. Assuming your posted-HTML is correct.
If you want all triangle li's to be changed use this:
div#bpath ul:hover li.triangle{
border-left-color: #5f9999;
}
If you want just the next triangle element it's more tricky but you can try this:
div#bpath ul li:hover + li.triangle {
clear:both;
}
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
you should use this way,
div#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/
(or just accept it as the right answer :))
i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/
The Preview, What others are saying tabs are stacked and right-aligned (wrong).
They should be horizontal and left-aligned.
It's displayed correctly in firefox,IE8.
What's the reason for this?
URL: http://www.learncentral.org/resource/view/59896
UPDATE
Related html here:
<div class="ed_tabs">
<ul class="ui-tabs-nav">
<li class="selected ui-tabs-selected">Preview</li>
<li>What others are saying...(0)</li>
</ul>
</div>
css:
.ed_tabs {
border-bottom:3px solid #3F79C2;
float:left;
width:100%;
}
.ed_tabs ul {
float:left;
list-style:none outside none;
margin:0.5em 0 0;
padding:0 0 0 1em;
}
li {
float:left;
padding:0 1px 0 0;
}
Not sure why IE7 is working differently, but I see that your CSS rule for
.ed_tabs ul li a
does a float:right to the anchor (A). Try changing this to float: left instead.
I have a div element which has these css attributes :
HTML
<div class="messageContainer"></div>
CSS
.messageContainer {
margin-left: 2px;
background-color: #F7F5F2;
width: 100%;
min-height: 50px;
border: solid 1px silver;
padding-left: 5px;
margin-top: 3px;
}
When putting this html portion inside the div element :
Please do the things respectively:
<ol>
<li>
Create button control
</li>
<li>
Assign it to the main user
</li>
<li>
Let me know what happened
</li>
</ol>
This is how it shows on the page: (Please look at the numbers)
So the question is why this is happening?Why are the numbers are appearing outside of the div element.
EDIT
I used :
.messageContainer ol
{
list-style-position:inside;
margin-left:5px;
}
which worked just fine but now this is what happened :
Try this in your CSS:
.messageContainer ol
{
list-style-position: inside;
}