Całe MENU ma zajmować 90% szerokości strony

Question

Witam.

Tak wygląda kod:

https://jsfiddle.net/Krzysiek_35/nj6w75dg/120/

Chciałbym, aby całe MENU zajmowało 90% szerokości strony.

W praktyce ma to wyglądać w następujący sposób:

[5% wolnego miejsca z lewej strony] [całe MENU zajmujące 90%] [5% wolnego miejsca z prawej strony]

Szerokość wszystkich menu ustaliłem w procentach:

1 - wynosi 20% szerokości całego menu

2 - wynosi 10% szerokości całego menu

3 - wynosi 20% szerokości całego menu

4 - wynosi 10% szerokości całego menu

5 - wynosi 10% szerokości całego menu

6 - wynosi 20% szerokości całego menu

Podsumowując:

20% + 10% + 20% + 10% + 10% + 20% = 90% szerokości całego MENU względem szerokości strony.

Zauważcie, że aktualnie jest ponad 20% wolnego miejsca z prawej strony. W rezultacie szerokość całego MENU wynosi ponad 70%, a ma zajmować dokładnie 90%.

Z lewej strony jest 5% wolnego miejsca - tu jest dobrze!

Czy wiecie jak zrobić, aby całe MENU zajmowało 90% szerokości strony (z lewej ma być 5% wolnego miejsca oraz z prawej ma być 5% wolnego miejsca) ?

Będę bardzo wdzięczny za fachową pomoc.

Comments

dobrze rozumiem że menu masz ustawione wg % i tak ma pozostać? tylko ma się znaleźć na środku. tak?

---

Tak, wszystko wg % jest ustawione. Już łatwiej nie da sie tego tematu wytłumaczyć.:)

Answer 1

jeśli o to chodzi to musisz te poszczególne elementy ustawic by w sumie miały 100% nie 90% szerokość masz ustaloną już w menu-container jeśli korzystasz z position absolute musisz dać transform:translate ();

Comments

Po dopisaniu w:

.menu-container
{
	transform: translate(5%);
}

...ani z lewej ani z prawej nie ma 5% wolnego miejsca.

Trzeba coś innego poprawić w CSS, aby prawidłowo zadziałało.

---

napisałem też że te poszczególne elementy trzeba ustawić żeby w sumie dawało 100% nie 90% wtedy powinno ci wyśrodkować

---

w menu ul masz to samo że 90% a ma być 100% i wtedy wszystko działa

---

tą szerokość ,że to jest 90% ustawiasz w jednym divie i tyle a nie w kazdym kolejnym 90%

---

To już mój drugi temat w jakim sie udzielasz i te twoje rady nie przyniosły żadnego efektu!

Moja prośba do ciebie!

Czy możesz już więcej nie udzielać sie na moim założonym temacie?

Nie obraź sie, ale zaczyna mnie irytować twoja nadgorliwość!

Twoje rady odnośnie tego tematu:

.menu-container
{
	position: absolute;
	left: 5%;
	transform: translate(5%); lub bez tego transform!
	bottom: 0;
	width: 90%; lub width: 100%;
}

.menu ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	width: 90%; lub width: 100%;
}

...nie zadziałały!

Takie warianty już testowałem przed założeniem tego tematu!