Impossible de mettre en %

asc -  
 asc -
Bonjour,



je suis en train de faire un site, et j'ai créer un header avec des div etc, mais je ne peux pas mettre le width et la height en pourcentage, seulement en px... QUelqu'un sait-il d'ou le soucis peut venir ?

9 réponses

Réponse 1 / 9
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Bonjour

Peux-tu montrer ton code stp?

merci
0
Réponse 2 / 9
asc
 
Oui bien sur :

- voici le HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="Test"/>
<meta name="keywords" content="Test"/>
<link rel="stylesheet" href="test.css"/>
<link rel="stylesheet" href="slider/slider.css"/>
<link rel="stylesheet" href="slider/slider2.css"/>
</head>
<body>
<header>
<p>Bienvenue sur le site de blabla</p>
</header>
<div id="menu">
<ul>
<li><a href=""><p>Menu1</p></a></li>
<li><a href=""><p>Menu1</p></a></li>
<li><a href=""><p>Menu1</p></a></li>
<li><a href=""><p>Menu1</p></a></li>
<li><a href=""><p>Menu1</p></a></li>
</ul>
</div>
<div id="slider">
<div id="mask">
<ul id="image_container">
<li><img class="size" src="slider/images/1.jpg" alt=""></li>
<li><img class="size" src="slider/images/2.jpg" alt=""></li>
<li><img class="size" src="slider/images/3.jpg" alt=""></li>
<li><img class="size" src="slider/images/4.jpg" alt=""></li>
<li><img class="size" src="slider/images/5.jpg" alt=""></li>
<li><img class="size" src="slider/images/6.jpg" alt=""></li>
</ul>
</div>
<ul id="dots">
<li class="button1" onClick="changeImage(1)" ></li>
<li class="button2" onClick="changeImage(2)" ></li>
<li class="button3" onClick="changeImage(3)" ></li>
<li class="button4" onClick="changeImage(4)" ></li>
<li class="button5" onClick="changeImage(5)" ></li>
<li class="button6" onClick="changeImage(6)" ></li>
</ul>
<ul id="mini">
<li class="button1" onClick="changeImage(1)" ></li>
<li class="button2" onClick="changeImage(2)" ></li>
<li class="button3" onClick="changeImage(3)" ></li>
<li class="button4" onClick="changeImage(4)" ></li>
<li class="button5" onClick="changeImage(5)" ></li>
<li class="button6" onClick="changeImage(6)" ></li>
</ul>
<img src="slider/resources/2.png" alt="" id="fleche_gauche" class="flecheg" onClick="prevImage()" >
<img src="slider/resources/2.png" alt="" id="fleche_droite" class="fleched" onClick="nextImage()" >
<span id="timeline"></span>
</div>
<div id="info">
</div>
<div id="a">
</div>
<div id="footer">
</div>
<script type="text/javascript" src="slider/slider.js"></script>
</body>
</html>

-et le css :
body{
background-color:#cccccc;
}

header{
height:150px;
text-align:center;
font-size:30px;
color:white;
}

#menu{
height:45px;
background-color:#04609f;
}

#menu ul{
list-style:none;
margin-left:18%;
}

#menu li{
display:inline-block;
width:200px;
height:45px;
font-weight:bold;
text-align:center;
border-radius:0px 0px 20px 0px;
border-right:2px solid white;
}

#menu li:hover{
background:rgba(255,255,255,0.3);
}

p{
margin:10px;
}

#menu a{
text-decoration : none;
color:white;
}

#info{
margin-top:2.3%;
float:left;
margin-left:8%;
height:735px;
width:600px;
background-color:rgba(0,0,0,0.5);
}

#a{
margin-top:25%;
margin-left:5%;
float:none;
height:300px;
width:900px;
background-color:rgba(0,0,0,0.5);
}

#footer{
background-color:#04609f;
margin-top:2%;
height:50px;
width:100%;
position:absolute;
}
0
Réponse 3 / 9
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
euh ! Un conseil entre nous, utilisez des pourcentages en margin n'est pas stable, même déconseillé. Utilisé le pourcentage pour la longueur ou hauteur du bloc.
0
Réponse 4 / 9
asc
 
Merci pour le conseil, donc toutes les margins en pixel ?
ET sinon aucune idées du pourquoi je ne peux pas mettre mes div et autres en pourcentage ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Ah ok ! tu es au courant que quand tu mets margin-top, cela ne prend pas en compte le haut de ta page, mets le bloc juste au dessus? Car la tes blocs partent dans tout les sens. Si tu veux positionner , par exemple ta div info, par rapport à la hauteur de ta page, il faut faire : 
#info{
	position: absolute;
	top: 240px;
	left: 240px;
	float: left;
	height: 735px;
	width: 600px;
	background-color:rgba(0,0,0,0.5);
}


C'est cela que tu veux ?
0
Réponse 6 / 9
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Si tu veux, je peux refaire ton site, car il y a PLEIN d'erreur. Regarde quand tu réduis le zoom, ta page n'est pas centré, tes blocs ne suivent pas...etc ! Bienspur, je t'explique en même temps pourquoi j'ai fais sa !

0
Réponse 7 / 9
asc
 
merci pour ta réponse ! Yep je vois bien que mes bloc partent dans tout les sens lol, j'essaie de m'entraier.
Oui je veux bien que tu le refasse si ca ne te gene pas c est vraiment gentil ! :)
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Tu as pas un shema du site que tu veux faire ? Car je sais pas ou va telle ou telle bloc.
0
asc
 
Oui le voici : http://image.noelshack.com/fichiers/2014/35/1409158584-test.png, est ce suffisant ?
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Niquel
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Le temps que je mange et autre, je te poste le code à 21h ! en attendant, essaye de chercher ! :p
0
asc
 
parfait j'essaie de régler ce qui ne va pas en attendant :)
0
Réponse 8 / 9
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Coucou !

Voici le code, j'ai modifier couleur, tu peux les changer si tu veux. c'était pour me repérer. test le :

FICHIER.HTML 
<!DOCTYPE HTML>
<html>
	<head>
		<title>Title</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="description" content="Test"/>
		<meta name="keywords" content="Test"/>
		<link rel="stylesheet" href="test.css"/>
	</head>
	<body>
		<div id="bloc"><!-- centrer la page -->
			<header>
				<h3 class="titre">Bienvenue sur le site de blabla</h3>
			</header>
			<nav>
				<div class="menu">
					<ul>
						<li><a href="#"><p>Menu1</p></a></li>
						<li><a href="#"><p>Menu1</p></a></li>
						<li><a href="#"><p>Menu1</p></a></li>
						<li><a href="#"><p>Menu1</p></a></li>
						<li><a href="#"><p>Menu1</p></a></li>
					</ul>
				</div>
			</nav>
			<div class="corp"><!-- Fond blanc -->
				<div id="slider">
					<div id="mask">
						<ul id="image_container">
							<li><img class="size" src="slider/images/1.jpg" alt=""></li>
							<li><img class="size" src="slider/images/2.jpg" alt=""></li>
							<li><img class="size" src="slider/images/3.jpg" alt=""></li>
							<li><img class="size" src="slider/images/4.jpg" alt=""></li>
							<li><img class="size" src="slider/images/5.jpg" alt=""></li>
							<li><img class="size" src="slider/images/6.jpg" alt=""></li>
						</ul>
					</div>
					<ul id="dots">
						<li class="button1" onClick="changeImage(1)" ></li>
						<li class="button2" onClick="changeImage(2)" ></li>
						<li class="button3" onClick="changeImage(3)" ></li>
						<li class="button4" onClick="changeImage(4)" ></li>
						<li class="button5" onClick="changeImage(5)" ></li>
						<li class="button6" onClick="changeImage(6)" ></li>
					</ul>
					<ul id="mini">
						<li class="button1" onClick="changeImage(1)" ></li>
						<li class="button2" onClick="changeImage(2)" ></li>
						<li class="button3" onClick="changeImage(3)" ></li>
						<li class="button4" onClick="changeImage(4)" ></li>
						<li class="button5" onClick="changeImage(5)" ></li>
						<li class="button6" onClick="changeImage(6)" ></li>
					</ul>
					<img src="slider/resources/2.png" alt="" id="fleche_gauche" class="flecheg" onClick="prevImage()" >
					<img src="slider/resources/2.png" alt="" id="fleche_droite" class="fleched" onClick="nextImage()" >
					<span id="timeline"></span>
				</div> 
				<div id="info">
				</div>
				<div id="a">
				</div>
				<div id="footer">
				</div>
				<script type="text/javascript" src="slider/slider.js"></script>
			</div>
		</div>
	</body>
</html>


TEST.CSS 
@import url(http://fonts.googleapis.com/css?family=Lobster); /*Importation d'un style écriture */

body{
	background-color: rgba(115, 139, 80, 1);
}

/* Centrer la page web et lui fixer une largeur */
#bloc{
	width: 1300px;
	margin: auto;
}
/* Fond blanc de body */
.corp{
	position: relative;
	top: 0px;
	width: 100%;
	background-color: rgba(255, 240, 255, 0.8);
}


/************************/
/*						*/
/*		MENU CSS		*/
/*						*/
/*	A) Header			*/
/*	B) Navigation  		*/
/*	C) Slider			*/
/*	D) Info				*/
/*	E) Bloc a			*/
/*	F) Footer			*/
/*						*/
/************************/


/* A) Header */
header{
	height:100px;
	text-align:center;
	font-size:30px;
}
.titre{
	font-family: 'Lobster', cursive;
	color: rgba(3, 0, 15, 1);
}

/* B) Navigation */
nav .menu{
	height:45px;
	width: 100%;
	margin: auto;
	background-color:#04609f;

}nav .menu ul{
	position: relative;
	left: 60px;
	list-style:none;
}nav .menu li{
	display:inline-block;
	width:200px;
	height:45px;
	font-weight:bold;
	text-align:center;
	border-radius:0px 0px 20px 0px;
	border-right:2px solid white;
}nav .menu li:hover{
	background:rgba(255,255,255,0.3);
}nav .menu p{
	margin:10px;
}nav .menu a{
	text-decoration : none;
	color:white;
}

/* C) Slider */
#slider{
	position: relative;
	top: 20px;
	left: 20px;
	width: 600px;
	background-color:rgba(0,150,60,0.5);
	display: inline-block;
	vertical-align: top;
}

/* D) Info */
#info{
	position: relative;
	top: 20px;
	left: 60px;
	height:735px;
	width:600px;
	background-color:rgba(0,0,0,0.5);
	display: inline-block;
	vertical-align: top;

}

/* E) bloc a */
#a{
	position: relative;
	top: -200px;
	left: 20px;
	height:300px;
	width:600px;
	background-color:rgba(0,0,0,0.5);
	display: inline-block;
	vertical-align: top;
}

/* F) Footer */
#footer{
	background-color:#04609f;
	height:50px;
	width:100%;
	position:absolute;
}


demande moi, si tu comprends pas ! :p
Tchao
0
Réponse 9 / 9
asc
 
Merci beaucoup c est au top, le code est beaucoup moins salle comme ça ! et le rendu est aussi beaucoup mieux.
Je comprend le code mais j'aurais juste une question concernant la div bloc qui sert à centrer, mettre 1300px est une valeur comme une autre afin de centrer, ou celle-ci est elle vraiment importante ? Désolé si je m'exprime mal, par exemple si a la place de 1300, je met 1000 ou 1500 etc, à part le design cela changera t il quelque chose ?
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Il est obligatoire pour centrer, mais tu peux changer la valeur si tu le souhaites. ;)
0
asc
 
d'acc merci encore pour ton aide :)
0