1485 sujets

Web Mobile et responsive web design

Css & html, faire en sorte que le menu ne change pas sa largeur.

Bonjour,

Depuis peu je me suis mis au html et css, j'ai réussis à crée un menu grâce à quelques sites.
Le problème c'est que j'ai une page blanche au centre, avec des bordures colorées: L'image à cette adresse :https://s3.gaming-cdn.com/images/products/2665/background/2665.jpg (je l'ai copié pour visualiser mon site).
Je souhaite ensuite glissé mon menu dans la partie blanche. Le problème c'est que je dois définir une largeur "width: x%" avec x étant une valeur précise, arrondit, mais pas juste au millième près, et puis quand je change l'affichage de ma page, progressivement, alors là tous se décale, mon menu se rétracte sur lui même. Je voulais savoir s'il y avait une fonction pour dire au menu de rester à cette largeur là, puis après de mettre @media querries pour supprimé ce menu une fois que la largeur du menu est dépassé, voici mon codage html:
<head>

<link rel="stylesheet" href="Chadoux.css" />
<title> Chadoux </title>

</head>

<body>
	<header><b>	
	<div class="content">
			<h1> Chadoux </h1>
			<img id="er" src="b1e213a3.jpg"/>
		</div>
	</div>
	<div>
		<nav media="screen">	
			<ul class="menu">
				<li class="menu-chat"><a href="#">CHAT</a>
					<ul class="submenu">
						<li><a href="accesoires.html">ALIMENTATION/ NOURRITURE</a></li>
						<li><a href="#">GAMELLE/ DISTRIBUTEUR</a></li>
						<li><a href="#">HABITAT/ MOBILIER</a></li>
						<li><a href="#">COLLIER</a></li>
						<li><a href="#">HYGIÈNE/ SOINS</a></li>
						<li><a href="#">TOILETTE</a></li>
						<li><a href="#">CHATIÈRE</a></li>
						<li><a href="#">JOUET</a></li>
						<li><a href="#">TRANSPORT/ VOYAGE</a></li>
					</ul>
				</li>
				<li class="menu-chien"><a href="#">CHIEN</a>
					<ul class="submenu">
						<li><a href="#">ALIMENTATION/ NOURRITURE</a></li>
						<li><a href="#">GAMELLE/ ACCESSOIRE</a></li>
						<li><a href="#">NICHE/ COUCHAGE</a></li>
						<li><a href="#">COLLIER/ SELLERIE</a></li>
						<li><a href="#">HYGIÈNE/ SOINS</a></li>
						<li><a href="#">TOILETTE</a></li>
						<li><a href="#">JOUET</a></li>
						<li><a href="#">TRANSPORT/ VOYAGE</a></li>
					</ul>
				</li>
				<li class="a"><a href="#">CONTACTEZ-NOUS</a></li>
				</li>
				<li class="a"><a href="#">NOTRE SITE</a></li>
				</li>
				<input type="text" id="input-seek" name="seek" value placeholder="Que cherchez-vous?">
			</ul>
		</nav></b>
		</div>
	</header>
	</body>

Voici mon code css: 
@font-face {
    font-family: 'cac_champagneregular';
    src: url('police/cac_champagne-webfont.eot');
    src: url('police/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/cac_champagne-webfont.woff') format('woff'),
         url('police/cac_champagne-webfont.ttf') format('truetype'),
         url('police/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}

h1
{	
	font-size: 700%;
    font-family: 'cac_champagneregular', Arial, serif;
	text-align:center;
	margin-bottom:20px;
	margin-top:20px;
}

p {
text-align:center;
}

body{

background-image:url('3247.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: 50% 0%;

}

ul, header, html, body, h1 {

margin: 0;
padding: 0;

}

nav > ul > li {
	
float: left;
position: relative;
}

nav li{
list-style-type:none;
}

.submenu{
display: none;
}
.menu{
	
width: 58%;
background-color: black;
}

nav > ul::after{
	
content: "";
display: block;
clear: both;
}

nav a {

display: inline-block;
text-decoration:none;
}

nav > ul > li > a {
	
padding: 20px 35px;
color: #FFBD00;}

nav li:hover .submenu {

display: inline-block;
position:absolute;
z-index:10000;
padding:0px;
left:0;
top:100%;
}

.submenu li{

border: 1px solid black;
}

.submenu li a {
	
padding: 10px 15px;
font-size: 13px;
color: black;
width: 50%;
}	

.menu-chat:hover{
	
border-top: 5px solid #D1D1D1;
background-color: #E6E6E6;
}

.menu-chien:hover{
	
border-top: 5px solid #D1D1D1;
background-color: #E6E6E6;
}

.a:hover{
	
border-top: 5px solid #D1D1D1;
background-color: #E6E6E6;
}

nav > ul > li:hover a {
	
padding: 17px 35px;
}

.menu-chat .submenu{
	
background-color: #E6E6E6;
}

.menu-chien .submenu{
	
background-color: #E6E6E6;
}

.menu-chat .submenu li:hover{
	
background-color: #D1D1D1;
}

.menu-chien .submenu li:hover{
	
background-color: #D1D1D1;
color: white;
}

#er {
width: 200px;
position: absolute;
margin-left: 1%;
top: 4px;
}
.menu {
	position: relative;
	margin:auto;}

#input-seek {
margin-left: 4.5%;
margin-top:2.3%;
background-color: black;
color: #FFBD00;	
border: none;
}

.content{
	background-color:#9D9B9B;
	margin-left: 21.2%;
	margin-right: 21.2%;
}
	@media screen and (max-width: 829px) {
  nav {
    display: none;
  }
}


En espérant avoir été claire, je vous remercie pour une éventuelle réponse, à bientôt
Merci beaucoup, j'ai essayé ta solution et ça m'a aider à rendre ma page beaucoup plus appréciable avec une fenêtre et un affichage plus petit, je te remercie
Sujet clos
Aller à