Jak zrobić żeby elementy na stronie się nie "składały" [css]

Dla specjalistów Webmastering
#1

Mam problem, ponieważ jak zmniejszam okno to moje menu składa się, jest w postaci listy. Chcę żeby jak zmniejszam okno przegląrki to były w jednej linii i jak będzie coraz mniejsze to ew. się skalowały. Bo mi się z listy poziomej robi pionowa

<div class="kontener">
			<nav>
					<ul class="menu">
  						<li class="posmenu"><a href="a.html">a</a></li>
  						<li class="posmenu"><a href="b.html">b</a></li>
  						<li class="posmenu"><a href="c">c</a></li>
					</ul>
			</nav>

.menu .posmenu a{
	display: block;
	color: black;
	text-decoration: none;
	padding: 15px;
	font-size:1.5em;	
	}

html, body {
		       margin:0;
		       padding:0;
		       height: 75%;
		       font-size: 15px;

.menu{
	list-style: none;
	margin: 0 auto;
	width: 45%;
	margin-top: 250px;
}

.kontener{
	max-width:920px;
    margin: 0 auto;
    
   
    
}

Jak jakieś głupoty są proszę o radę. Testuje sobie umiejętności na tej stonce…

#2

Bez JS skalowania nie osiągniesz. Ogólnie pomysł bardzo slaby bo takie menu nie jest usability. Poczytaj o responsive web design, to jest dobry kierunek tworzenia stron dostosowujących się do rozmiaru okna a nawet i typu/rozdzielczości ekranu urządzenia.

#3

http://stackoverflow.com/questions/19612500/scaling-the-navigation-bar-responsive-design

#4

Dobra a jak dać na sztywno chociaż, żeby się nie składały?

#5

Możesz ustawić dla UL width w pikselach na sztywno, ale po aktualizacji menu (dodanie/usunięcie/edycja elementów) możliwe że będziesz musiał zmienić szerokość jeśli będzie zbyt mała. Najlepiej zrobić to w JS obliczyć łączną szerokość dla wszystkich ul li w pikselach i tą sumę ustawić jako szerokość dla ul.

#6

Skoro masz ustawiony kontener na max-width to będzie zawijać. Ustaw kontener na width: 960px i nic nie będzie zawijać.  Samo skalowanie pozycji ul>li jest bez sensu. Teraz robi się menu responsywne ktòre liniowe zamienia na pionowe rozwijane. 

#7

Dzięki, już lepiej ale jednak to responsywne by się przydało :slight_smile:

 

Bootstrapem się pobawić?

#8

Ja bym to zrobił tak.

 

1.) .menu .posmenu a-> tu dałbym display: inline-block;, to sprawi że masz element blokowy a wymiar będzie łatwiejszy do opanowania, jak dla a dasz display:block; to szerokość dopasuje się do całej szerokości kontenera, opcja inline-block zapewnia szybkie tworzenia z a fajnych przycisków.

 

2.) z .menu -> usunął bym width: 45%;