I have a horizontal navbar in the form of an unordered list, where the list items are all floated left, and the list has overflow:hidden; for consistency. I want the "active" tab to be taller, without changing the layout of the list element.
The navbar is 60px tall with each list item 50px tall, and I want the active tab to be 55px. The question is, how do I get the list items to "stick" to the bottom of the navbar, without changing their horizontal positioning?
Things I've tried: (this list will grow)
ul#nav{position:relative;} and ul#nav li{position:absolute;bottom:0;} stacks all elements on top of each other; I refuse to hard-code each tab's position
ul#nav li.active {position:relative;bottom:/* difference in heights */;} leaves the block where the tab originally was empty, effectively acting as an unwanted margin
The solution was simple (and I'd already been using it for styling of list items). Rather than style the list items themselves, I styled their contents, which are each anchor tags. So the default anchor tag has
height:50px;margin-top:10px;
while the .active tag is styled
height:55px;margin-top:5px;
A less difficult problem than I imagined.
example with vertical-align : http://dabblet.com/gist/5333194
ul {
line-height:60px;
}
li {
display:inline-block;
vertical-align:bottom;
height:50px;
}
li:hover {
height:55px;
}
Related
I have an Product listing Page designed using ul li grid layout.The width of li is 171*367px.When the user hovers over the each li i need to 10px margin to all the sides of li and a box shadow as well.While adding the margin of 10px to each side the height of li increases and as a result the li while it expands pushes its adjacent elements.
I would need to achieve this without affecting the layout
Is there any way to accomplish this
Instead of margin use translate(x,y) property here x and y refers to coordinates of respective axis.
Background:
I have created a ul menu that contains 2 divs -> one div for the icon, second div for the text. Reason for the divs is that I want the text to be neatly vertically aligned, which otherwise wouldn't be the case.
Problem:
I managed to make the whole second div clickable with display: block; but I struggle to expand the link beyond the div so that it stretches over the entire li, i.e. also covers the first div.
Attempts:
I already tried using Bootstrap's .stretched-link on the href tag (see first link) and setting position: relative; to all divs and li. However, this didn't work.
Question:
Is it somehow possible to expand the link across the entire li, while keeping the divs to neatly align?
Note:
(a) I'm aware that one work-around would be to place the href tag around the li, but I understand this isn't good practice anymore.
(b) Just to show the alignment problem, I have created a second JSfiddle, when the divs are removed.
JSfiddle
(1) divs included, but icon div not clickable: https://jsfiddle.net/AlphaX/z5f60m23/11/
(2) divs removed and whole li is clickable, but text isn't vertically aligned because font awesome icons have different widths by default: https://jsfiddle.net/AlphaX/89a1x7gs/2/
Just do your second approach, with the <a> wrapping the <i> and the span, and add some additional style rules:
li i {
width: 20%;
display: inline-block;
}
I edited your Fiddle too: https://jsfiddle.net/uxnfvzyc/1/
I have a map on my web page at http://fattyres-co-uk.stackstaging.com/routes/lake-district/borrowdale-bash/.
It contains a copyright attribution in the bottom right corner which is a unordered list.
I want to remove the left and bottom margin from it but, if I change the margin for ul in my style sheet, it affects every ul on my site and I don't want that.
How do I remove the margin only for for this attribution text?
You can use the class of parent element whose child is the ul element.
.ol-uncollapsible ul {
margin: 0;
}
This is in reference to a nav menu on a site I am working on:
I have applied a hover style to these particular anchors (subnav buttons):
ul#css3menu ul li:hover>a {
Now I want to further style any of these anchors that have a child span element. How could I code that?
I have it somewhat working by applying the style to the span element:
ul#css3menu ul span:hover{
The problem with this is the style is only applied when hovering over the span element's space rather than while hovering over the anchor that is parent to the span (the entire subnav button including its padding)
CSS currently doesn't have a way to check for children (or, what would essentially be a 'parent selctor', something that often comes up as a wishful thought in discussions about css. Read more: http://css-tricks.com/parent-selectors-in-css/)
In order to style something like that, you'd have to use jQuery (or, javascript...)
$('ul').each(function () {
if ($(this).find('span').length) {
$(this).css({your style here});
}
}
If what you do is not dynamic, it would always be easiest to give a class to those lists beforehand and style them.
I just figured out a nifty solution without JS!!
The padding on the anchor is 8px and the padding on the span was set to 0 so I changed the padding on the span to 8 and set the margin to -8 and now the style works when hovering the entire button and I was still able to maintain the size of the button! Stoked!
ul#css3menu span{
display:block;
padding:8px;
margin:-8px 0 -8px -8px;
}
I had to leave the right margin alone to maintain the width of the button and the positioning of the next level subnav.
I want to show the content of my Mega-menu also within the page. I duplicated the CSS styles but it seems that I still miss a rule because the border of the UL with id="wrongBorder_because_of_no_Height" does not show around the whole UL, probably because the UL height is 0
sample page - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm
[compare the border of the floating menu of family 2, and the border of the UL in the page]
What is setting the height of horizontal ul to zero?
How can I show the border properly?
Add overflow:hidden or overflow:auto to your class
#wrongBorder_because_of_no_Height
{
overflow:hidden;
}
The reason why this works is because by setting the overflow property to a value which is not visible - this triggers a block formatting context.
Check out this post for a full explanation.
Add this to your CSS:
.menuInPage ul
{
height: 200px;
}
You are floating the li elements left. Parent elements, the ul, are never to expand to contain floated children.
Haven't checked to see if this is what you want but either remove the float or try overflow:auto.