La taille d'un DIV, aidez moi svp

narutoadel -

Bonjour,

Voila je vais vous expliquer mon petit probleme.

Je fais mes exercices d'HTML et je voudrais faire quelque chose dans mon HTML et CSS pour que la taille de mon DIV ne change pas de taille quand la fenetre du navigateur deviens plus petite.

Voila Merci beaucoup pour votre aide

Afficher la suite

4 réponses

Réponse 1 / 4
DerkoFR
Bonjour,

Sois plus precis s'il te plait.
0
1. narutoadel Auteur
  
  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;
  }
  
  Voila, j'espere que vous pouvez m'aidez
  
  0
Réponse 2 / 4
narutoadel Auteur
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;
}
0
Réponse 3 / 4
Ysabe_l Contributeur
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.
0
1. narutoadel Auteur
  
  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
  
  0
Réponse 4 / 4
animostab
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)
0
1. narutoadel Auteur
  
  Merci beaucoup animostab ! :)
  
  Sa ma aider !
  
  0
2. animostab
  
  tu peux mettre le sujet en résolu
  
  0

La taille d'un DIV, aidez moi svp

4 réponses

Discussions similaires

Newsletters