A note ahead: I did look for answers before asking but none of which i found accurately explained how to do this right.
I have some DIVs, somewhere within i have an UL which is supposed to stretch to a 100% of the parent DIV, and within the UL i have a (varying, due to dynamic content) amount of LI-elements which i would like to equally share the space the parent UL provides to them (which obviously should be 100%).
I tried various solutions, such as inline-block on the LIs, as well as float:left and automatic width on the LIs
I created a JSFiddle here.
How can i achieve the desired result (with no use of JS) and at least major cross-browser compatibility?
Use display: table; with width: 100%; on the UL and display: table-cell; on the LIs:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
background: #eee;
}
http://jsfiddle.net/Kyle_Sevenoaks/EfWze/1/
Related
I'm wondering if there's a way to adjust the navbar in MaterializeCSS to prevent the double row when the number of elements exceeds the width of the browser. I was thinking about some scrollable navbar like the tabs:
But I can't find a way to implement it.
Taking inspiration from nav-tabs, which exhibit this behaviour as standard:
Set nowrap, overflow and width on the link container (UL in this case).
nav ul {
white-space:nowrap;
overflow-x: auto;
width: 100%;
}
Set display, and unset the float on links (LI in this case).
nav ul li {
display: inline-block;
float: none;
}
Codepen
I have a page with tab navigation at the top (page here; tabs are 'Production,' 'Story and Development,' etc). I would like to ensure the row of tabs are horizontally centered on the page. How can I accomplish that? If I'm not mistaken, it's currently a tad off center.
By following the instructions on the W3 Schools page on CSS centering, I came close by setting:
display: block;
margin: auto;
width: 99%;
But I'm not sure if that's the proper/best solution. Is there a solution that does not require setting width: 99%?
If it matters, the site has been built with WordPress.
Thanks.
You have two ways you could approach this:
The text-align: center Method
.ut-nav-tabs li {
display: inline-block;
float: none;
vertical-align: top;
}
.ut-nav-tabs li:last-child {
margin-right: 0px;
}
.ut-nav-tabs {
text-align: center;
}
This works only if you declare text-align: center on the containing parent - the parent element must be a block element. The nested children elements must be inline block elements (e.g: display: inline-block) with no float rules declared on them, floats will negate any attempt to horizontally center align elements this way, and most other ways.
The display: flex Method
.ut-nav-tabs {
display: flex;
justify-content: space-around;
}
.ut-nav-tabs li {
float: none;
margin-right: 0px;
}
This is the "new kid" on the block and the "hot fix" for any alignment issue concerning CSS these days, I would hazard to say it is the "jQuery" of CSS now.
Anyway, it is for good reason, flex-box rules allows you to specify general alignment (horizontally and vertically) and lets the browser do all the calculations for precise positioning - this is also why is a popular responsive solution too.
Browser Compatibility: A heads-up though, flex-box has poor or very limited support for legacy browsers, older browsers may give you unexpected results, so you should use this with caution in production code if that will be a concern.
I think this way is better :
.ut-nav-tabs {
width: 100%;
text-align: center;
}
.ut-nav-tabs li {
width: 179px;
float: none;
display: inline-block;
zoom: 1;
vertical-align: middle;
}
What is the best no JS way (most commont browsers friendly) to achieve this?
I have found a few related questions & answers:
width: 100% / number_of_li-s_in_ul;
http://jsfiddle.net/qx4WG/ ("static" calculated size for each li) - unable to use due different sizes of li
li {display: table-cell;}
UPDATE: http://jsfiddle.net/jwJBd/1035/ -> works good, but I'm also using sub-menus and position: relative; doesn't work here to position the sub-menu below current li. When position is set to static it enlarges the parent LI every time it's set to display:block;
display: box;
never used it before, just read a few articles and it looks like the browser support is minimal
If i understood your question correctly, you want to display evenly menu elements like a table would do AND be able to display css sub-menus using absolute and relative positioning.
Your jsfiddle was close, the only thing i had to fix was the positioning of the sub-menu
.sub-menu {
display: none;
/*left: 0;*/ /* i removed this */
position: absolute;
/* PLAY with this */
}
jsFiddled here
[post edit]
It would also be relevant to set your <li> parent with a table-layout:fixed property. This way, <li> will be set to equal width.
#horizontal-style {
display: table;
width: 100%;
table-layout:fixed; /* try this */
}
I have a ul inside of a div, and want the containing div to not be affected by the child ul in terms of height.
Jsfiddle: http://jsfiddle.net/9eCq6/3/
Referring to the jsfiddle, I'd like the yellow div to not be any taller than the blue divs, and for the block of text below the colored divs to not be pushed down by the red ul - that is, I'd like it to overlap the block of text below.
I suspect the answer lies in positioning and is affected by the floats being applied, but I haven't been able to find the solution yet. What should I do, or read, to find the solution?
Edit: I want to not give the parent a fixed height, because I don't know what content might get added to it.
Use absolute positioning to breakaway from parent. Also you will need overflow: visible and a clearfix:
.wrap {
position: relative;
overflow: visible;
}
.wrap::after {
content: "";
display: table;
clear: both;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.right ul {
position: absolute;
top: 100%;
left: 0;
}
This old BrainJar article is a great, thorough reference on CSS positioning. It is absolutely dated, but holds up surprisingly well. You will run into these sorts of issues far less often if you spend the time first to get a solid understanding of the underlying systems you're dealing with.
That said, a (partial) solution to your problem is straightforward. Put the div.under inside the div.wrap, and add clear: left; to the CSS .under selector. See this fiddle.
Give the parent fixed size, and use overflow:hidden.
http://jsfiddle.net/vByVD/9/
This what i have. The menu looks right is horisontal in most browsers. But in IE7 and lower ofcourse it is something else, it is vertical there.
I found out this is because they dont support table, table-cell.
I tried some hacks as you can see in the first lines in the CSS, but it does not quite work, this do only show 3 li horisontal and then it makes new line and show the other li's.
I want it to appear as the other new browsers, so its one line horisontal.
How can i make this work?
There are two ways to accomplish this. The first:
#header-nav{
overflow: hidden;
zoom: 1; /* IE6 and below work around */
}
#header-nav li{
float: left;
margin: 0;
padding: 0;
}
#header-nav li a{
display: block; /* if you want height and width */
}
The second:
#header-nav li{
margin: 0;
padding: 0;
display: inline;
}
Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.