Hauteur d'un formulaire par Valmax - page 1

Bonjour,

J'ai un formulaire avec environ 800lignes j'aimerai limiter la hauteur à 600px et une largeur de 130px mais vue le nombre de ligne je suis obliger de mettre une scroll.

je mon code:

<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8" />
 
 
 
  <style type="text/css">

body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;background: #000;
}
nav {
	margin-top:80px;
    width: 400px;
/*    height: 50px;   */
}
nav a {
	width: 170px;
	line-height: 20px;
	font-size:12px;
	display: block;
	text-align: left;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}

nav a:hover {
	background-color: red;
	color: #fff;
}
div a.smenu{ 
    display: list-item; 
    margin-left: 3.3em; 
    list-style-type: disc; 
} 
    
  </style>
    
 	<script>
		function afficheMenu(obj){	
			var idMenu     = obj.id;
			var idSousMenu = 'sous' + idMenu;
			var sousMenu   = document.getElementById(idSousMenu);
			for(var i = 1; i <= 4; i++){
				if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
					document.getElementById('sousmenu' + i).style.display = "none";
				}
			}	
			if(sousMenu){
				//alert(sousMenu.style.display);
				if(sousMenu.style.display == "block"){
					sousMenu.style.display = "none";
				}
				else{
					sousMenu.style.display = "block";
				}  
			}	
		}
	</script>
</head><body>

<nav>

                <div id="menu">
    
        <div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Afghanistan</a></div>
    	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Afrique du Sud</a></div>
    	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Albanie</a></div>
        <div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Algérie</a></div>
    	<div class="menu" id="menu5" onclick="afficheMenu(this)">
		<a href="#">Allemagne</a></div>
    	<div class="menu" id="menu6" onclick="afficheMenu(this)">
		<a href="#">Andorre</a></div>
        <div class="menu" id="menu7" onclick="afficheMenu(this)">
		<a href="#">Angola</a></div>
    	<div class="menu" id="menu8" onclick="afficheMenu(this)">
		<a href="#">Anguilla</a></div>
    	<div class="menu" id="menu9" onclick="afficheMenu(this)">
		<a href="#">Bahamas</a></div>
        <div class="menu" id="menu10" onclick="afficheMenu(this)">
		<a href="#">Antigua-et-Barbuda</a></div>
        <div class="menu" id="menu11" onclick="afficheMenu(this)">
		<a href="#">Arabie saoudite</a></div>
   
   	<div class="menu" id="menu12" onclick="afficheMenu(this)">
		<a href="#">Argentine&nbsp; +</a></div>
	<div id="sousmenu12" style="display:none">
		<div class="sousmenu1">
			<a href="#" class="smenu">Buenos Aires</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Catamarca</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Chaco</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Chubut</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Ciudad de Buenos Aires</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Córdoba</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Corrientes</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Entre Rios</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Formosa</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Jujuy</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">La Pampa</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">La Rioja</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Mendoza</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Misiones</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Neuquén</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Río Negro</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Salta</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">San Juan</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">San Luis</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Santa Cruz</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Santa Fe</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Santiago del Estero</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Terre de Feu</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Tucumán</a></div>
	</div> 
        <div class="menu" id="menu13" onclick="afficheMenu(this)">
		<a href="#">Arménie</a></div>
        <div class="menu" id="menu14" onclick="afficheMenu(this)">
		<a href="#">Aruba</a></div>
        <div class="menu" id="menu15" onclick="afficheMenu(this)">
		<a href="#">Atoll Johnston &nbsp;(États-Unis)</a></div>
    
    	<div class="menu" id="menu16" onclick="afficheMenu(this)">
		<a href="#">Australie&nbsp; +</a></div>
	    <div id="sousmenu16" style="display:none">
		<div class="sousmenu">
			<a href="#" class="smenu">Australie-Méridionale</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Australie-Occidentale</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Australie-Occidentale (exception)</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Île Lord Howe</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Nouvelle-Galles du Sud</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Nouvelle-Galles du Sud (exception)</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Queensland</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Tasmanie</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Territoire de la capitale australienne</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Territoire du Nord</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Victoria</a></div>
        
	</div>
    
        <div class="menu" id="menu17" onclick="afficheMenu(this)">
		<a href="#">Autriche</a></div>
    	<div class="menu" id="menu18" onclick="afficheMenu(this)">
		<a href="#">Azerbaïdjan</a></div>
    	<div class="menu" id="menu19" onclick="afficheMenu(this)">
		<a href="#">Bahamas</a></div>
    	<div class="menu" id="menu20" onclick="afficheMenu(this)">
		<a href="#">Bahreïn</a></div>
    	<div class="menu" id="menu21" onclick="afficheMenu(this)">
		<a href="#">Bangladesh</a></div>
    	<div class="menu" id="menu22" onclick="afficheMenu(this)">
		<a href="#">Barbade</a></div>
    	<div class="menu" id="menu23" onclick="afficheMenu(this)">
		<a href="#">Bélarus</a></div>
    	<div class="menu" id="menu24" onclick="afficheMenu(this)">
		<a href="#">Belgique</a></div>
    	<div class="menu" id="menu25" onclick="afficheMenu(this)">
		<a href="#">Belize</a></div>
    	<div class="menu" id="menu26" onclick="afficheMenu(this)">
		<a href="#">Bénin</a></div>
    	<div class="menu" id="menu27" onclick="afficheMenu(this)">
		<a href="#">Bermudes</a></div>
    	<div class="menu" id="menu28" onclick="afficheMenu(this)">
		<a href="#">Bhoutan</a></div>
    	<div class="menu" id="menu29" onclick="afficheMenu(this)">
		<a href="#">Bolivie</a></div>
    	<div class="menu" id="menu30" onclick="afficheMenu(this)">
		<a href="#">Bonaire, Saint Eustache et Saba</a></div>
    	<div class="menu" id="menu31" onclick="afficheMenu(this)">
		<a href="#">Bosnie-Herzégovine</a></div>
    	<div class="menu" id="menu32" onclick="afficheMenu(this)">
		<a href="#">Botswana</a></div>
    
    
	<div class="menu" id="menu33" onclick="afficheMenu(this)">
		<a href="#">Etats-Unis&nbsp; +</a></div>
	<div id="sousmenu33" style="display:none">
		<div class="sousmenu">
			<a href="#" class="smenu">Alabama</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Alaska</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Arizona</a></div>
		<div class="sousmenu">
			<a href="#" class="smenu">Sous-Menu 1.4</a></div>
	</div>
		<div class="menu" id="menu17" onclick="afficheMenu(this)">
		<a href="#">Grenade</a></div>
    	<div class="menu" id="menu18" onclick="afficheMenu(this)">
		<a href="#">Guatemala</a></div>
    	<div class="menu" id="menu19" onclick="afficheMenu(this)">
		<a href="#">Guyana</a></div>
    

</div>
    </nav>

    </p>
    
</body>
</html>

Je vous remercie d'avance

Max

Valmax

13 décembre 2018 à 8:17:47

Cordialement

Chikuma Koshiro

13 décembre 2018 à 8:31:20

Salut,

heu ... c'est moi ou tu n'as pas poser de question ?!

13 décembre 2018 à 9:09:21

Salut Chikuma Koshiro

Oui je voudrais arriver à régler la hauteur de mon menu à 600px et une largeur de 130px:

13 décembre 2018 à 9:26:45

En gros, tu voudrais un nav avec width: 600px et height: 130px ?

13 décembre 2018 à 9:31:46

Oui

13 décembre 2018 à 9:39:17

Et ça ne marche pas ça :

nav {
    width: 600px;
    height: 130px;
}

Cobs

13 décembre 2018 à 9:42:06

Chikuma Koshiro a écrit:

Et ça ne marche pas ça :
nav {
    width: 600px;
    height: 130px;
}
?

Ajoute un overflow:auto

13 décembre 2018 à 9:42:19

le seul truck qui fonctionne c'est cela

#menu{width: 250px; height: 650px; overflow: auto;}

mais pas avec nav

13 décembre 2018 à 9:52:52

Ca fonctionne très bien chez moi

13 décembre 2018 à 9:58:40

Salut Cobs

Oui Nickel merci

Hauteur d'un formulaire

Hauteur d'un formulaire

Supprimer

Modérer

Signaler le message aux modérateurs