Co należy zrobić, by menu się skalowało a nie skakało jedno pod drugie podczas zmniejszania okna przeglądarki ?

pytanie zadane 4 października 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Pytanie jak w temacie :)

<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=Anton|Asap|Baloo+Da" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  
</HEAD>








<BODY>


	<div class="main">
		<div class="sport">Q FORMIE</div>
	
		<div class=""></div>
	
	
	 
	<div class=""></div>
	<div class=""></div>	
	<div class=""></div>	
	
	
	
		

	</div>
	
<!---------CENTRUM---------------->	
	
	<div class="centrum">
	
		<div class="menutable">
			<div class="menu">BIEGANIE</div>
			<div class="menu">FIZJOLOGIA</div>
			<div class="menu">TRENING</div>
			<div class="menu">SPRZĘT</div>
			<div class="menu">MOTYWACJA</div>
			<div class="menu">ENDOMONDO</div>
			<div class="omnie">O MNIE</div>

		</div>

	
	</div>







<!-----------DOWN---------->

<div class="down">

	
</div>




</BODY>


</HTML>

html{
	
	width:100%;
	
}



body{
	
	margin:0vh;
	width:100%;
	
}

.main{
	
   
	width:100%;
	height:10vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	
	
}
.centrum{
	
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;
    
}
.sport{
	position:relative;
	left:3vh;
	width:45vh;
	line-height:10vh;
	color:white;
	font-size:5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	letter-spacing:0.5vh;
	margin:0vh;
	display:none;
	
}

.menu{
	float:left;
	width:28.5vh;
	height:6vh;
	border-right:solid 0.1vh white ;
	background-color:#33ccff;
	background-size:100% 100%;
	position:relative;
	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	margin:0vh;
}

.omnie{
	float:left;
	width:28.61vh;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;
	position:relative;
	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	margin:0vh;
}

.menutable{
	
  width:100%;	
  
	
	
	
}




.down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}

1 odpowiedź

odpowiedź 5 października 2016 przez Alex.Ironside Stary wyjadacz (14,920 p.)

Dodajesz do klasy width w %
.sport{
    position:relative;
    left:3vh;
    width:45vh;
    line-height:10vh;
    color:white;
    font-size:5vh;
    font-family: 'Baloo Da', cursive;
    font-family: 'Anton', sans-serif;
    font-family: 'Asap', sans-serif;
    letter-spacing:0.5vh;
    margin:0vh;
    display:none;
width: 14%;
     
}
 
.menu{
    float:left;
    width:28.5vh;
    height:6vh;
    border-right:solid 0.1vh white ;
    background-color:#33ccff;
    background-size:100% 100%;
    position:relative;
    color:white;
    line-height:6vh;
    text-align:center;
    font-size:2.5vh;
    font-family: 'Baloo Da', cursive;
    font-family: 'Anton', sans-serif;
    font-family: 'Asap', sans-serif;
    margin:0vh;
width: 14%;
}
 
.omnie{
    float:left;
    width:28.61vh;
    height:6vh;
    background-color:#33ccff;
    background-size:100% 100%;
    position:relative;
    color:white;
    line-height:6vh;
    text-align:center;
    font-size:2.5vh;
    font-family: 'Baloo Da', cursive;
    font-family: 'Anton', sans-serif;
    font-family: 'Asap', sans-serif;
    margin:0vh;
width: 14%;
}

komentarz 5 października 2016 przez DariuszH Gaduła (3,100 p.)

Można i tak. W końcu sam rozgryzłem o co chodzi. Mianowicie chodzi o zwykłe liczenie szerokości. Jezeli szerokość przeglądarki to 100% a mam 7 okienek menu, wówczas stosuję 100/7. Ponadto wziąłem też pod uwagę margin-right, gdzie do każdego okienka odejmowałem o wartość szerokości margin :) A to co zrobiłem źle w .sport to to,że nie dałem width ( nie trzeba height) i tyle. Poczytaj o vh. Ja tylko tą jednostkę stosuję. Jest bardzo czuła na zmianę width i height :)

komentarz 5 października 2016 przez DariuszH Gaduła (3,100 p.)
edycja 5 października 2016 przez DariuszH

<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=Anton|Asap|Baloo+Da" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  
</HEAD>








<BODY>


	<div class="main">
		<div class="sport">Q FORMIE</div>
	
		<div class=""></div>
	
	
	 
	<div class=""></div>
	<div class=""></div>	
	<div class=""></div>	
	
	
	
		

	</div>
	
<!---------CENTRUM---------------->	
	
	<div class="centrum">
	
		
			<div class="run">BIEGANIE</div>
			<div class="fizjologia">FIZJOLOGIA</div>
			<div class="trening">TRENING</div>
			<div class="sprzet">SPRZĘT</div>
			<div class="motywacja">MOTYWACJA</div>
			<div class="endomondo">ENDOMONDO</div>
			<div class="omnie">O MNIE</div>
		

	
	
	
	

	</div>

<div class="down">

	
</div>




</BODY>

</HTML>


 html{
	
	width:100%;
	
}



body{
	
	margin:0vh;
	width:100%;
	
}

.main{
	
   
	width:100%;
	height:10vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	
	
}
.centrum{
	
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;
    
}
.sport{
	position:relative;
	left:3vh;
	width:45vh;
	line-height:10vh;
	color:white;
	font-size:5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	letter-spacing:0.5vh;
	margin:0vh;
	display:none;
	
}

.menu{
	
	
	width:100%;
	display:inline;
}






.run{
	float:left;
	width:15.185%;
	height:6vh;
	margin-right:0.05%;
	background-color:#33ccff;
	background-size:100% 100%;

	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	
	
}

.fizjologia{
	float:left;
	width:14.085%;
	margin-right:0.05%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;

	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;

}

.trening{
	float:left;
	width:13.985%;
	margin-right:0.05%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;

	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;

}

.sprzet{
	float:left;
	width:13.885%;
	margin-right:0.1%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;
	
	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	
}

.motywacja{
	float:left;
	width:13.785%;
	margin-right:0.1%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;
	
	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	
}

.motywacja{
	float:left;
	width:13.785%;
	margin-right:0.1%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;
	
	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	
}
.endomondo{
	float:left;
	width:13.685%;
	margin-right:0.1%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;
	
	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;

}

.omnie{
	float:left;
	width:14.93%;
	height:6vh;
	background-color:#33ccff;
	background-size:100% 100%;

	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	
}

  
  
  
  
  
  
  
  
  
  
  


























.down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}