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 */
}
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 am trying to modify the CSS code for the underlying Worpress theme for this site: https://isspm2021.webs.upv.es/. The theme is this one: https://wordpress.org/themes/escapade/.
What I am trying to do is get a vertically scrollable left menu when the screen size is, say, 1024 × 768.
This is what I get now:
As you can see, the last items of the left menu remain hidden and inaccessible, depending on the screen size. I would like the left-hand-side menu to be vertically scrollable when needed.
I've tried several CSS instructions, like overflow:scroll, without success.
I think it is because of the theme itself; more precisely, because of the way the different div elements are defined to be placed regarding others (position:relative and so on).
Any hint of how to modify the CSS style of this theme to get what I need?
I would suggest these for the menu to be scrollable:
Set a height for the menu part,
Set Overflow-y:auto;
Here's the solution:
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
Also, If you want the scroll to appear when the browser size is less than 1024px, put the code below:
#media all and (max-width:1024px){
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
}
The above are two options.Please don't insert both of them.Only use one at a time to see the changes.
If you can accept the full left navbar scrollable, you may add overflow: auto property in .side-masthead:
.side-masthead {
background-color: #f5f5f5;
overflow: auto; /* Add overflow property */
}
I'm working on this website.
If you open it on Chrome everything is displayed as intended.
At the footer of the website, you will see 8 logos which fit perfectly.
If you open it using Mozilla Firefox, the logo list extends beyond the website container.
Below are the 2 pictures -
Chrome :
1
Firefox :
The logos are inside a ul as list items
and the CSS is like this
.clients ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: table;
}
.clients ul li {
display: table-cell;
}
How should I fix this?
This is actually a difference in how the images' widths are calculated inside of the table, and not the table elements themselves.
Tables make sure that all content is visible, so if it cannot shrink or wrap its contents then it expands past 100%. Chrome figures out that the images can shrink and adjusts the table width thereafter, while Firefox uses the full widths of the images to calculate the width of the table.
Almost ironically, setting width: 100% on the images will force Firefox to behave in the same fashion as Chrome.
Edit: As a footnote, your "table" structure isn't completely right. It doesn't seem to cause any layout issues in this particular case, but you should make sure to always have the proper table > tbody > tr > td hierarchy to prevent weird behaviour.
make table-layout: fixed
.clients ul{
table-layout: fixed
}
if you want all eight logos in the row you could give them a fixed width of 12.5%
otherwise set
.img-responsive{
display: block;
width: 100%;
/*max-width: 100%;*/
height: auto;
}
I am trying to make this Wordpress site responsive, by adding the following custom CSS:
#media (max-width:959px) {
.container, #menu, #featured, .slide .overlay, .slide .overlay2 {
width: 100%;
}
img {
max-width: 100% !important;
height: auto;
}
#menu {
height: auto;
}
}
However, when I move the width of the browser view port to 900px say, #menu (the top navigation menu) will increase in height to accommodate #menu's LI elements which have floated down and left, but #content-full (the parent container of the image slider) will creep up over the bottom half of #menu, hiding the LI elements which have been pushed down and left.
The theme contains:
#content-full {
position: relative;
}
So why does #content-full act like it is position: absolute?
Thanks.
The problem is not with the content but with the header. The #header has an attribute height: 134px. And the #menu inside this header has been given position: absolute. Since absolutely positioned elements are taken out of context before rendering, the parent (in this case #header), would not grow to accommodate the height of #menu as expected. That is the reason why the height has been explicitly specified. The content is not behaving as absolutely positioned. It is the aforementioned behavior of the header that makes it look like that.
One workaround this could be to provide an additional style that changes the height of #header to accommodate the next row of the menu.
Something like this for max-width: 959px
#header {
height: 174px;
}
This would take care of the second row of menu items.
Note: Your background image used for the menu would then break. Because it has been made for that single row of menu. I would suggest replacing that background image, with CSS-gradients and rounded borders.
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.