Sujet Précédent Sujet Suivant

Impossible de mettre en %

Fermé
asc - 27 août 2014 à 14:38
 asc - 27 août 2014 à 21:48
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 14:56
Bonjour

Peux-tu montrer ton code stp?

merci
0
Réponse 2 / 9
asc
27 août 2014 à 15:09
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 15:29
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
27 août 2014 à 15:33
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 16:53
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 16:55
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
27 août 2014 à 18:33
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
Modifié par Lerendra le 27/08/2014 à 18:39
Tu as pas un shema du site que tu veux faire ? Car je sais pas ou va telle ou telle bloc.
0
asc
27 août 2014 à 18:56
Oui le voici : http://image.noelshack.com/fichiers/2014/35/1409158584-test.png, est ce suffisant ?
0
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 18:58
Niquel
0
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
Modifié par Lerendra le 27/08/2014 à 19:17
Le temps que je mange et autre, je te poste le code à 21h ! en attendant, essaye de chercher ! :p
0
asc
27 août 2014 à 19:26
parfait j'essaie de régler ce qui ne va pas en attendant :)
0
Réponse 8 / 9
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 20:53
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
27 août 2014 à 21:28
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
27 août 2014 à 21:36
Il est obligatoire pour centrer, mais tu peux changer la valeur si tu le souhaites. ;)
0
asc
27 août 2014 à 21:48
d'acc merci encore pour ton aide :)
0