I have some nested <ul>s and I want them to be the same height: the height of the tallest one. I cannot specify the height of any <ul> since it depends on the amount of <li>s in it.
I figure I could solve this pretty easy using some js, but I am curious if this could be fixed using CSS.
I created a simple fiddle to demo: http://jsfiddle.net/vnFLK/2/
<nav>
<ul>
<li>Li 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Li 2
<ul class="green">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
</nav>
The <ul> with green borders is supposed to determine the height of the root <ul> and then I want the sibling <ul> to get the same height. The green <ul> is pushed 200% to the right just to be clearer.
This is a simplified representation of a navigation where a <ul> is a submenu that is going to be pulled over the parent one. Therefore they need to be the same height to prevent the parent menu being shown.
/Erik
Absolutely-positioned elements are no longer part of the document flow - they act as a new context. Therefore the parent element has no idea what size the child element is and cannot adjust its own size to match it.
There is no CSS solution for this. You need to use JavaScript.
Related
I am using divi theme with a menu at the top which is aligned center.now I want to align the last two items to the most right side of the bar.
How can I do it?
Thanks for any code or help on this.
You can do this by using the :nth-child() pseudo class selector. Let's say your menu has code which is something like this:
<div class=menu>
<ul>
<li class=menu-item>Menu 1</li>
<li class=menu-item>Menu 2</li>
<li class=menu-item>Menu 3</li>
<li class=menu-item>Menu 4</li>
</ul>
</div>
Now let's say you want to move your 'Menu 3' and 'Menu 4' item to the right, you can target those elements and style them like so:
.menu-item:nth-child(3),.menu-item:nth-child(4) {float:right; /*or margin-left:50px;*/}
By that, only those menus will be targeted and styled. See my pen here
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
I would like to apply styling to list items in ordered list (specifically to the ::after or ::before), based on the classes of the <li>. The code for these lists looks like the following:
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
The lists are generated automatically, and the position of the first class2 item may vary inside the list (it can even be absent in some case, leaving only class1 items in the list).
I would like to add something in the ::before of the first item of each class (like a specific header for each type of item in my list). Ending up with something like this:
Example of expected result
Anyone could help me with the CSS selector to use for this? I tried several things with + or ~ but nothing works seems for now...
Thanks!
David
There is no :first-of-class selector available, but you can use the general sibling combinator to remove the pseudo element for all elements with the same class, that are following the first one:
.class1::before { content:"some header for class 1"; display:block; }
.class2::before { content:"some header for class 2"; display:block; }
.class1 ~ .class1::before, .class2 ~ .class2::before { content: none; }
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
You can use a section tag to define a header for your list.
<section>
<h3>Reference Document</h3>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I'm building a footer navigation with four columns:
<ul>
<li>Top Level 1
<ul>
<li>sub 1a</li>
<li>sub 1b</li>
<li>sub 1c</li>
<li>sub 1d</li>
</ul>
</li>
<li>Top Level 2
<ul>
<li>sub 2a</li>
<li>sub 2b</li>
<li>sub 2c</li>
<li>sub 2d</li>
</ul>
</li>
.... (repreat 2 more times)....
</ul>
I'm having trouble getting the top level item and the sub items left aligned so they are all flush and aligned left. I've got them into 4 columns ok, but they look like this:
Top Level 1 Top Level 2
sub 1a sub 2a
sub 1b sub 2b
sub 1c sub 2c
sub 1d sub 2d
If needs be, I can post the CSS that I have now.
You can use flex for do that, well you can use float as well, but I like use flex, very easy. For add a new column you don´t need to do anything.
Here you have a full example to play:
http://codepen.io/luarmr/pen/waqxmY
the important things are:
1- apply a different style to the first ul and li to the others for that I add a class in the first ul. After I can use a child selector ´>´
2.- Flex require in this case add an element with display: flex. The internal element can be allocated in differents ways, we don't use any special here. This element is the first ul as well.
3.- the magic is, in the first li elements I add the property flex. This property in this context permits auto calc the width in this elements. If you put '1' this mind a single unit, if you put '2' this mind double...
ul.wrapper{
display:flex;
}
ul.wrapper>li{
flex:1;
}
add the prefixed (browser compatibility) and a few decoration.
try resetting padding-left
ul, li{list-style:none; padding-left:0}
div{-webkit-column-count: 2;column-count: 2;}
<div>
<li>Top Level 1
<ul>
<li>sub 1a</li>
<li>sub 1b</li>
<li>sub 1c</li>
<li>sub 1d</li>
</ul>
</li>
<li>Top Level 2
<ul>
<li>sub 2a</li>
<li>sub 2b</li>
<li>sub 2c</li>
<li>sub 2d</li>
</ul>
</li>
</div>
Here is a pen for reference:
http://codepen.io/anon/pen/blwCI
How do I get a nested lists to appear lower in the stacking order compared to its parent?
I tried z-index with no success.
For example, a design calls for "Fourth Level" to appear beneath "Third Level".
Sample code:
<ul class="firstLevel">
<li>First Level
<ul class="secondLevel">
<li>Second Level
<ul class="thirdLevel">
<li>Third Level
<ul class="fourthLevel">
<li>Fourth Level</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You can't. When you increase the z-index of a parent then all the children increase by the same amount. Same thing if you try to position the parent, the children will move with the parent. You could only do this by unnesting the elements but that probably isn't what you want either.
You're probably going to have to add some extra markup to place your visual overlays without altering the parent-child relationships of the lists. eg;
<li>Third Level
<ul class="fourthLevel">
<li>Fourth Level</li>
</ul>
<div style="position:absolute;top:0">I'M ON TOP OF FOUR</div>
</li>