Problem with UL/LI styling

[Tata]

Please, have a look at http://164xh.cmsimple.sk.
The yellow background is defined just for better view of other stylings. It should cover the whole menulevel1. But it obviusly doesn't and I can't find what attribute to use, to have the UL accepting the height of the green circles (menulevel1 li) and to adjust its height when using narrow screen.

[cmb]

Um, I can't see any yellow and green background there.

[lck]

True, no yellow or green in the template.
I hope I have understood you correctly. Here a proposal.

Code: Select all

ul.menulevel1 {
height: 4rem;
display: inline-block;
background-color: #FF0;
margin: 0;
padding: 0;
}

.menulevel1 li {
width: 200px;
display: block;
padding: 0.5rem;
margin: 0 0.1rem 0.1rem 0;
float: left;
text-align: center;
background: #DDD;
color: #F00;
height: 3rem;
line-height: 3rem;
}

[Tata]

Hm, I don't understand it, but you should see this webpage (the green circles are melevel1 li styled by border-radius:50%)
[ external image ]

[cmb]

Hm, I don't understand it, but you should see this webpage

I'm seeing a similar website, but the menu is above the slider, and there are no circles.

Anyway, from looking at the screenshot it seems to me that the <li>s are floating, and as such will not occupy space in the <ul>, unless a block formatting context is established. See http://3-magi.net/demo/float-clear.html for several alternative solutions.

Alternatively, you could set a height for <ul> as suggested by Ludwig.

[lck]

Ah , i see. In the online-testsite is template "fullscreen" active. It should be "bignavigation". Change please config.php.
Well, anyway, I can select it under the menu item of templates.

[Tata]

Now I solved something.

Code: Select all

.menu ul{
	color: #ffaa00;
	background: yellow;
	display: table-row; /* !!! */
}
.menulevel1 li{
	list-style: none;
	width: 250px;
	height: 250px;
	border-radius:50%;
	vertical-align: center;
	font-size: 2rem;
	background: #009900;
	display: table-cell;      /* !!! */
  	box-sizing:border-box;
  	border: 0.5rem solid #1e1e1e;
  	}

Now it works with the height of the <ul> but the "cells" however behave "responsive" and the text is placed top. Set I

Code: Select all

menulevel1 li{...
float: left;
...}

the "cells" behave responsive instead of moving to a new row and the text still remains on top.

[cmb]

Now it works with the height of the <ul> but the "cells" however behave "responsive" and the text is placed top.

As you already have display:table-cell, just add vertical-align:middle to have the text vertically centered.

[Tata]

As you already have display:table-cell, just add vertical-align:middle to have the text vertically centered.

I have tried this before, but it has no impact.

[cmb]

I have tried this before, but it has no impact.

Works fine here (current Chrome and Firefox).

PS: Ah, you have set vertical-align:center; it has to be vertical-align:middle (I confuse these most of the time, too).