La taille d'un DIV, aidez moi svp
Fermé
narutoadel
Messages postés
6
Date d'inscription
mercredi 15 octobre 2014
Statut
Membre
Dernière intervention
5 décembre 2014
-
4 déc. 2014 à 14:46
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 5 déc. 2014 à 15:59
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 5 déc. 2014 à 15:59
A voir également:
- La taille d'un DIV, aidez moi svp
- Comment réduire la taille d'un fichier - Guide
- Comment reduire la taille d'une photo - Guide
- Regle taille reel - Guide
- Taille 32x32 correspondance ✓ - Forum Loisirs / Divertissements
- Indiquez l'unité pour la taille de ces fichiers. type document texte brut taille 8,1 ?? première réponse à trouver longueur 8085 caractères type image jpeg taille 3,0 ?? deuxième réponse à trouver dimension 3776 × 2124 px type vidéo mpeg-4 taille 1,1 ?? troisième réponse à trouver durée 02:01:15 - Forum Google Chrome
4 réponses
DerkoFR
Messages postés
504
Date d'inscription
vendredi 7 novembre 2014
Statut
Membre
Dernière intervention
5 janvier 2017
74
4 déc. 2014 à 14:49
4 déc. 2014 à 14:49
Bonjour,
Sois plus precis s'il te plait.
Sois plus precis s'il te plait.
narutoadel
Messages postés
6
Date d'inscription
mercredi 15 octobre 2014
Statut
Membre
Dernière intervention
5 décembre 2014
4 déc. 2014 à 18:14
4 déc. 2014 à 18:14
En gros, quand je creer un div, je voudrais que sa taille ne change pas quand la taille de fenetre du navigateur devient plus petite
Je vais te montrer avec deux images comme sa c'est plus claire
Taille navigateur agrandi: http://hpics.li/9502e55
Taille navigateur retreci: http://hpics.li/e3684e5
Voila, la partie ou je vend mes produit sur le site, ben quand j'ai la fenetre du navigateur qui est agrrandi, sa reste grand, mais quand je retreci la fenetre navigateur, le DIV se raptici. Et je ne veux pas cet effet la, je veux que les cadres ne bouge pas de taille svp :)
Merci
Mon code html, peutetre que sa peut aider, avec mon code css:
HTML:
<!doctype html>
<html>
<head>
<title>Webshop</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet/style.css">
</head>
<body>
<header>
<h1 class="titel">Multimedia Shop</h1>
<div class="mainmenu">
<ul>
<li><a href="#">Home Pagina</a></li>
<li><a href="#">Winkelmandje</a></li>
<li><a href="#" class="lasta">Bestelpagina</a></li>
</ul>
</div>
</header>
<div class="mainclass">
<h1 class="hoofdtitel">Producten</h1>
<div class="productone">
<img src="images/zalman1.jpg" alt="productone" height="50px" width="50px">
<p>One Piece</p>
</div>
<div class="productone">
<img src="images/z87.jpg" alt="productone" height="50px" width="50px">
<p>Naruto</p>
</div>
<div class="productone">
<img src="images/geforce1.jpg" alt="productone" height="50px" width="50px">
<p>Dragon Ball Z</p>
</div>
<div class="productone">
<img src="images/intel.jpg" alt="productone" height="50px" width="50px">
<p>Detective Conan</p>
</div>
<div class="productone">
<img src="images/gskill.jpg" alt="productone" height="50px" width="50px">
<p>Bleach</p>
</div>
<div class="productone">
<img src="images/corsair1.jpg" alt="productone" height="50px" width="50px">
<p>Hunter x Hunter</p>
</div>
<div class="productone">
<img src="images/western.jpg" alt="productone" height="50px" width="50px">
<p>Inconnu</p>
</div>
<div class="productone">
<img src="images/ssd.jpg" alt="productone" height="50px" width="50px">
<p>Death Note</p>
</div>
<div class="productone">
<img src="images/samsung.jpg" alt="productone" height="50px" width="50px">
<p>Shingegi No Kyoogi</p>
</div>
<div class="productone">
<img src="images/vengance.jpg" alt="productone" height="50px" width="50px">
<p>Kuroko No Basket</p>
</div>
</div>
</body>
</html>
CSS:
body
{
background-color: white;
color: black;
margin: 0;
background-image: url(../images/cool.jpg);
background-size: 100%;
background-repeat: round;
font-family: Arial,Arial, Helvetica, sans-serif;
}
header
{
background-image: url(../images/log.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: #002e78;
}
.titel
{
font-size: 3em;
padding: 2em;
margin: 0;
text-align: center;
}
.mainmenu
{
background-color: #C9C8D7;
margin-bottom: -50px;
}
.mainmenu ul li
{
display: inline-block;
padding: 15px 15px;
margin: -2px;
}
.mainmenu ul li a
{
padding: 13px 25px;
margin: -15px;
text-decoration: none;
color: white;
font-size: 20px;
font-family: sans-serif;
background-color: rgba(0, 0, 0, 0.6);
border-left: solid;
}
.lasta
{
border-right: solid;
}
.mainmenu
{
text-align: center;
border-radius: 5px;
}
.mainmenu ul
{
padding: 0px;
background: rgba(0, 0, 0, 0.6);
}
.mainclass
{
margin: 0;
padding: 0;
}
.mainclass
{
margin: 0px 25px;
padding: 10px 50px;
border-radius: 10px;
}
.hoofdtitel
{
text-decoration: underline;
text-align: center;
border-radius: 10px;
margin: 50px;
}
.productone
{
border: solid 1px;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
}
.productone img
{
float: left;
padding-right: 15px;
}
Je vais te montrer avec deux images comme sa c'est plus claire
Taille navigateur agrandi: http://hpics.li/9502e55
Taille navigateur retreci: http://hpics.li/e3684e5
Voila, la partie ou je vend mes produit sur le site, ben quand j'ai la fenetre du navigateur qui est agrrandi, sa reste grand, mais quand je retreci la fenetre navigateur, le DIV se raptici. Et je ne veux pas cet effet la, je veux que les cadres ne bouge pas de taille svp :)
Merci
Mon code html, peutetre que sa peut aider, avec mon code css:
HTML:
<!doctype html>
<html>
<head>
<title>Webshop</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet/style.css">
</head>
<body>
<header>
<h1 class="titel">Multimedia Shop</h1>
<div class="mainmenu">
<ul>
<li><a href="#">Home Pagina</a></li>
<li><a href="#">Winkelmandje</a></li>
<li><a href="#" class="lasta">Bestelpagina</a></li>
</ul>
</div>
</header>
<div class="mainclass">
<h1 class="hoofdtitel">Producten</h1>
<div class="productone">
<img src="images/zalman1.jpg" alt="productone" height="50px" width="50px">
<p>One Piece</p>
</div>
<div class="productone">
<img src="images/z87.jpg" alt="productone" height="50px" width="50px">
<p>Naruto</p>
</div>
<div class="productone">
<img src="images/geforce1.jpg" alt="productone" height="50px" width="50px">
<p>Dragon Ball Z</p>
</div>
<div class="productone">
<img src="images/intel.jpg" alt="productone" height="50px" width="50px">
<p>Detective Conan</p>
</div>
<div class="productone">
<img src="images/gskill.jpg" alt="productone" height="50px" width="50px">
<p>Bleach</p>
</div>
<div class="productone">
<img src="images/corsair1.jpg" alt="productone" height="50px" width="50px">
<p>Hunter x Hunter</p>
</div>
<div class="productone">
<img src="images/western.jpg" alt="productone" height="50px" width="50px">
<p>Inconnu</p>
</div>
<div class="productone">
<img src="images/ssd.jpg" alt="productone" height="50px" width="50px">
<p>Death Note</p>
</div>
<div class="productone">
<img src="images/samsung.jpg" alt="productone" height="50px" width="50px">
<p>Shingegi No Kyoogi</p>
</div>
<div class="productone">
<img src="images/vengance.jpg" alt="productone" height="50px" width="50px">
<p>Kuroko No Basket</p>
</div>
</div>
</body>
</html>
CSS:
body
{
background-color: white;
color: black;
margin: 0;
background-image: url(../images/cool.jpg);
background-size: 100%;
background-repeat: round;
font-family: Arial,Arial, Helvetica, sans-serif;
}
header
{
background-image: url(../images/log.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: #002e78;
}
.titel
{
font-size: 3em;
padding: 2em;
margin: 0;
text-align: center;
}
.mainmenu
{
background-color: #C9C8D7;
margin-bottom: -50px;
}
.mainmenu ul li
{
display: inline-block;
padding: 15px 15px;
margin: -2px;
}
.mainmenu ul li a
{
padding: 13px 25px;
margin: -15px;
text-decoration: none;
color: white;
font-size: 20px;
font-family: sans-serif;
background-color: rgba(0, 0, 0, 0.6);
border-left: solid;
}
.lasta
{
border-right: solid;
}
.mainmenu
{
text-align: center;
border-radius: 5px;
}
.mainmenu ul
{
padding: 0px;
background: rgba(0, 0, 0, 0.6);
}
.mainclass
{
margin: 0;
padding: 0;
}
.mainclass
{
margin: 0px 25px;
padding: 10px 50px;
border-radius: 10px;
}
.hoofdtitel
{
text-decoration: underline;
text-align: center;
border-radius: 10px;
margin: 50px;
}
.productone
{
border: solid 1px;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
}
.productone img
{
float: left;
padding-right: 15px;
}
Ysabe_l
Messages postés
12456
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
25 avril 2024
274
4 déc. 2014 à 18:30
4 déc. 2014 à 18:30
Bonjour,
Si tu veux que la taille reste fixe il faut la déclarer en px.
Par contre ça fera un ascenseur vertical ce qui est très désagréable, donc à moins que ça ne soit vraiment justifié c'est à éviter.
Si tu veux que la taille reste fixe il faut la déclarer en px.
Par contre ça fera un ascenseur vertical ce qui est très désagréable, donc à moins que ça ne soit vraiment justifié c'est à éviter.
narutoadel
Messages postés
6
Date d'inscription
mercredi 15 octobre 2014
Statut
Membre
Dernière intervention
5 décembre 2014
4 déc. 2014 à 18:33
4 déc. 2014 à 18:33
Bonsoir,
Justement c'est sa le probleme, je ne veux pas que sa fasse un ascenseur vertical, mais que la taille reste fixe.
Ya t'il un moyen ??
Mercii beaucoup pour votre aide
Justement c'est sa le probleme, je ne veux pas que sa fasse un ascenseur vertical, mais que la taille reste fixe.
Ya t'il un moyen ??
Mercii beaucoup pour votre aide
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
5 déc. 2014 à 12:17
5 déc. 2014 à 12:17
Salut
tu mets tout le code dans un div contener
<div id="contener>
tout le code html de la page
</div>
puis tu fais en css
#contener {
width: 1000px;
margin: 0 auto;
}
par contre dès que la largeur de la fenetre sera inférieure à 1000 px tu auras une barre de scroll horizontale.
pour la barre de scroll verticale c'est normal qu'il y en ai une cela dépend du contenu de la page.
Normalement un site doit s'adapter à la largeur d'écran (du smartphone jusqu'au grand écran de PC) donc il faut faire du responsive design avec les mediaqueries et oublier tout ce qui est fixe (une page web n'est pas une affiche print)
tu mets tout le code dans un div contener
<div id="contener>
tout le code html de la page
</div>
puis tu fais en css
#contener {
width: 1000px;
margin: 0 auto;
}
par contre dès que la largeur de la fenetre sera inférieure à 1000 px tu auras une barre de scroll horizontale.
pour la barre de scroll verticale c'est normal qu'il y en ai une cela dépend du contenu de la page.
Normalement un site doit s'adapter à la largeur d'écran (du smartphone jusqu'au grand écran de PC) donc il faut faire du responsive design avec les mediaqueries et oublier tout ce qui est fixe (une page web n'est pas une affiche print)
narutoadel
Messages postés
6
Date d'inscription
mercredi 15 octobre 2014
Statut
Membre
Dernière intervention
5 décembre 2014
Modifié par narutoadel le 5/12/2014 à 13:50
Modifié par narutoadel le 5/12/2014 à 13:50
Merci beaucoup animostab ! :)
Sa ma aider !
Sa ma aider !
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
5 déc. 2014 à 15:59
5 déc. 2014 à 15:59
tu peux mettre le sujet en résolu
4 déc. 2014 à 23:21
Je vais te montrer avec deux images comme sa c'est plus claire
Taille navigateur agrandi: http://hpics.li/9502e55
Taille navigateur retreci: http://hpics.li/e3684e5
Voila, la partie ou je vend mes produit sur le site, ben quand j'ai la fenetre du navigateur qui est agrrandi, sa reste grand, mais quand je retreci la fenetre navigateur, le DIV se raptici. Et je ne veux pas cet effet la, je veux que les cadres ne bouge pas de taille svp :)
Merci
Mon code html, peutetre que sa peut aider, avec mon code css:
HTML:
<!doctype html>
<html>
<head>
<title>Webshop</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet/style.css">
</head>
<body>
<header>
<h1 class="titel">Multimedia Shop</h1>
<div class="mainmenu">
<ul>
<li><a href="#">Home Pagina</a></li>
<li><a href="#">Winkelmandje</a></li>
<li><a href="#" class="lasta">Bestelpagina</a></li>
</ul>
</div>
</header>
<div class="mainclass">
<h1 class="hoofdtitel">Producten</h1>
<div class="productone">
<img src="images/zalman1.jpg" alt="productone" height="50px" width="50px">
<p>One Piece</p>
</div>
<div class="productone">
<img src="images/z87.jpg" alt="productone" height="50px" width="50px">
<p>Naruto</p>
</div>
<div class="productone">
<img src="images/geforce1.jpg" alt="productone" height="50px" width="50px">
<p>Dragon Ball Z</p>
</div>
<div class="productone">
<img src="images/intel.jpg" alt="productone" height="50px" width="50px">
<p>Detective Conan</p>
</div>
<div class="productone">
<img src="images/gskill.jpg" alt="productone" height="50px" width="50px">
<p>Bleach</p>
</div>
<div class="productone">
<img src="images/corsair1.jpg" alt="productone" height="50px" width="50px">
<p>Hunter x Hunter</p>
</div>
<div class="productone">
<img src="images/western.jpg" alt="productone" height="50px" width="50px">
<p>Inconnu</p>
</div>
<div class="productone">
<img src="images/ssd.jpg" alt="productone" height="50px" width="50px">
<p>Death Note</p>
</div>
<div class="productone">
<img src="images/samsung.jpg" alt="productone" height="50px" width="50px">
<p>Shingegi No Kyoogi</p>
</div>
<div class="productone">
<img src="images/vengance.jpg" alt="productone" height="50px" width="50px">
<p>Kuroko No Basket</p>
</div>
</div>
</body>
</html>
CSS:
body
{
background-color: white;
color: black;
margin: 0;
background-image: url(../images/cool.jpg);
background-size: 100%;
background-repeat: round;
font-family: Arial,Arial, Helvetica, sans-serif;
}
header
{
background-image: url(../images/log.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: #002e78;
}
.titel
{
font-size: 3em;
padding: 2em;
margin: 0;
text-align: center;
}
.mainmenu
{
background-color: #C9C8D7;
margin-bottom: -50px;
}
.mainmenu ul li
{
display: inline-block;
padding: 15px 15px;
margin: -2px;
}
.mainmenu ul li a
{
padding: 13px 25px;
margin: -15px;
text-decoration: none;
color: white;
font-size: 20px;
font-family: sans-serif;
background-color: rgba(0, 0, 0, 0.6);
border-left: solid;
}
.lasta
{
border-right: solid;
}
.mainmenu
{
text-align: center;
border-radius: 5px;
}
.mainmenu ul
{
padding: 0px;
background: rgba(0, 0, 0, 0.6);
}
.mainclass
{
margin: 0;
padding: 0;
}
.mainclass
{
margin: 0px 25px;
padding: 10px 50px;
border-radius: 10px;
}
.hoofdtitel
{
text-decoration: underline;
text-align: center;
border-radius: 10px;
margin: 50px;
}
.productone
{
border: solid 1px;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
}
.productone img
{
float: left;
padding-right: 15px;
}
Voila, j'espere que vous pouvez m'aidez