La taille d'un DIV, aidez moi svp
narutoadel
Messages postés
8
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
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
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
A voir également:
- La taille d'un DIV, aidez moi svp
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Afficher taille dossier windows - Guide
- Reduire taille clavier iphone - Guide
- Div c++ - Télécharger - Langages
4 réponses
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;
}
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.
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)
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