Placer les cadres entre eux - margin
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
Et ouais encore moi... Je suis pas très doué x)
Donc j'ai cette page là :
http://passionama.alwaysdata.net/test/site/page.html
Comme vous le voyez sans doute, ça donne cela :
http://hpics.li/d6e0edb
J'ai mis ces dimensions là :
http://hpics.li/b7be6b2
Vous pouvez aller sur cette page pour voir le code CSS :
http://passionama.alwaysdata.net/test/site/fond.css
Et j'ai remarqué en faite que j'ai un écran assez grand, et que quand j'y est été avec un ordinateur avec un plus petit écran, sa donnait sa :
http://hpics.li/b307311
(Je l'ai reconstituer avec Paint donc ce n'est pas exactement sa)
Donc en faite les blocs se mettent en fonction de la largeur de l'écran, ce que je veux pas.
Et quand je veux faire sa :
http://hpics.li/4c42a66
J'ai essayé de faire sa mais sa me donne un tout autre résultat :
http://hpics.li/750def2
Sauf que je voulais que le cadre blanc du milieu soit centré (j'ai mis margin: 0 auto;) et que les cadres noirs se mettent à 50px de lui (à droite et à gauche), hors c'est lui qui bouge...
C'est compliqué mais vous avez compris je pense avec les screen :P
Merci beaucoup de m'aider.
Et ouais encore moi... Je suis pas très doué x)
Donc j'ai cette page là :
http://passionama.alwaysdata.net/test/site/page.html
Comme vous le voyez sans doute, ça donne cela :
http://hpics.li/d6e0edb
J'ai mis ces dimensions là :
http://hpics.li/b7be6b2
Vous pouvez aller sur cette page pour voir le code CSS :
http://passionama.alwaysdata.net/test/site/fond.css
Et j'ai remarqué en faite que j'ai un écran assez grand, et que quand j'y est été avec un ordinateur avec un plus petit écran, sa donnait sa :
http://hpics.li/b307311
(Je l'ai reconstituer avec Paint donc ce n'est pas exactement sa)
Donc en faite les blocs se mettent en fonction de la largeur de l'écran, ce que je veux pas.
Et quand je veux faire sa :
http://hpics.li/4c42a66
J'ai essayé de faire sa mais sa me donne un tout autre résultat :
http://hpics.li/750def2
Sauf que je voulais que le cadre blanc du milieu soit centré (j'ai mis margin: 0 auto;) et que les cadres noirs se mettent à 50px de lui (à droite et à gauche), hors c'est lui qui bouge...
C'est compliqué mais vous avez compris je pense avec les screen :P
Merci beaucoup de m'aider.
A voir également:
- Placer les cadres entre eux - margin
- Placer des points sur une carte - Guide
- Arnaud veut s'adresser directement à son ami marc dans un message sur un réseau social. quel symbole doit-il placer dans son message devant le nom d'utilisateur de marc ? - Forum Mail
- Impossible de placer le fichier dans la corbeille android - Forum MacOS
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
- Impossible de placer des fichiers dans la corbeille - Forum MacOS
3 réponses
Bonjour, essayer tout simplement margin: auto; sans le 0
puis votre conteneur je vous conseille de le faire a 960px ou 900px car ca a l 'avantage d'aller sur les petits écran et c'est divisible par 2,3, 4,5 pratique pour la mise en page
puis votre conteneur je vous conseille de le faire a 960px ou 900px car ca a l 'avantage d'aller sur les petits écran et c'est divisible par 2,3, 4,5 pratique pour la mise en page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Passionama - Menu</title>
<style type="text/css">
/* Ci dessous le menu horizontal en haut */
.menu {
list-style: none;
border: #000000 solid 2px;
background-color: #333333;
width: 90%;
height: 45px;
margin: 0 auto;
margin-bottom: 50px;
border-radius: 10px;
}
.menu li {
float: left;
}
.menu li a {
display: block;
color: #fff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
font-family: arial, verdana, sans-serif;
text-align: center;
margin-top: 0px;
padding: 10px 5px 9px 15px;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
cursor: pointer;
}
.menu li a:hover {
color: #FF0000;
text-decoration: none;
}
.menu li.current a {
background-color: #333333;
}
#conteneur {
width: 960px; /* la largeur que tu veux */
margin: auto; /* pour centrer ton conteneur */
}
/* Le fond ci-dessous */
html {
color: #666768;
font-family: Helvetica, lucida, verdana, arial, sans-serif;
font-size: 100%;
}
body {
margin: auto;
background: #B0B0B0 url(../bg_page.gif) repeat-x scroll left top;
font-size: 0.8em;
}
/* Tout le texte ci-dessous */
p {
background-color: #fff;
text-align: justify;
padding: 12px;
margin: 0 auto;
margin-top: 50px;
color: #000000;
font-size: 17px;
}
#titre {
text-align: justify;
padding: 12px;
margin-top: 50px;
color: #FF0000;
margin: 0 auto;
text-align: center;
}
/* Images ci-dessous */
.maintenance {
width: 700px;
height: 500px;
padding-right: 600px;
}
.logo {
width: 180px;
height: 100px;
padding-right: 1000px;
}
/* Menus ci-dessous */
.cadregauche {
background-color: #848484;
width: 250px;
height: 200px;
border: 2px solid black;
text-align: justify;
padding: 10px;
font-size: 20px;
text-align: center;
border-radius: 10px;
position: relative;
float: left;
margin-left: 201px;
}
#cadrecentre {
background-color: #fff;
width: 800px;
height: 800px;
border: 4px solid black;
text-align: justify;
padding: 12px;
margin-top: 50px;
margin: auto;
font-size: 25px;
text-align: center;
border-radius: 10px;
position: relative;
}
.cadredroite {
background-color: #848484;
width: 200px;
height: 600px;
border: 2px solid black;
text-align: justify;
padding: 10px;
font-size: 20px;
text-align: center;
border-radius: 10px;
position: relative;
float: right;
margin-right: 13%;
}
.footer {
background-color: #333333;
width: 1862px;
height: 170px;
border: 2px solid black;
text-align: justify;
padding: 10px;
font-size: 20px;
text-align: center;
border-radius: 10px;
position: relative;
float: left;
margin-top: 100px;
color: #FF0000;
}
#content {
height: auto;
width: 1862px;
position: relative;
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<div id="conteneur">
<ul class="menu">
<li class="current">
<a href="index.php">Accueil</a>
</li>
<li>
<a href="mes-passions.php">Mes passions</a>
</li>
<li>
<a href="#">Ma page</a>
</li>
<li>
<a href="passionné+.php">Passionné +</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
<li>
<a href="partenaires.php">Partenaires</a>
</li>
</ul>
</div>
<div class="cadregauche"></div>
<div class="cadredroite"></div>
<div id="cadrecentre">
<img class="logo" src="logo.png">
<div id="titre">
Bienvenue à toutes et à tous :D
</div>
<p>
Malheureusement, ce site est encore en construction. Reviens vite :)
</p>
<img class="maintenance" src="maintenance.jpg">
</div>
<div class="footer">
Copyright © 2012-2013 - http://passionama.alwaysdata.net - Tous droits réservés
</div>
</div>
</body>
</html>
comme ca tout reste fixe
linux est le noyaux et Windows les pépins
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Passionama - Menu</title>
<style type="text/css">
/* Ci dessous le menu horizontal en haut */
.menu {
list-style: none;
border: #000000 solid 2px;
background-color: #333333;
width: 90%;
height: 45px;
margin: 0 auto;
margin-bottom: 50px;
border-radius: 10px;
}
.menu li {
float: left;
}
.menu li a {
display: block;
color: #fff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
font-family: arial, verdana, sans-serif;
text-align: center;
margin-top: 0px;
padding: 10px 5px 9px 15px;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
cursor: pointer;
}
.menu li a:hover {
color: #FF0000;
text-decoration: none;
}
.menu li.current a {
background-color: #333333;
}
#conteneur {
width: 960px; /* la largeur que tu veux */
margin: auto; /* pour centrer ton conteneur */
}
/* Le fond ci-dessous */
html {
color: #666768;
font-family: Helvetica, lucida, verdana, arial, sans-serif;
font-size: 100%;
}
body {
margin: auto;
background: #B0B0B0 url(../bg_page.gif) repeat-x scroll left top;
font-size: 0.8em;
}
/* Tout le texte ci-dessous */
p {
background-color: #fff;
text-align: justify;
padding: 12px;
margin: 0 auto;
margin-top: 50px;
color: #000000;
font-size: 17px;
}
#titre {
text-align: justify;
padding: 12px;
margin-top: 50px;
color: #FF0000;
margin: 0 auto;
text-align: center;
}
/* Images ci-dessous */
.maintenance {
width: 700px;
height: 500px;
padding-right: 600px;
}
.logo {
width: 180px;
height: 100px;
padding-right: 1000px;
}
/* Menus ci-dessous */
.cadregauche {
background-color: #848484;
width: 250px;
height: 200px;
border: 2px solid black;
text-align: justify;
padding: 10px;
font-size: 20px;
text-align: center;
border-radius: 10px;
position: relative;
float: left;
margin-left: 201px;
}
#cadrecentre {
background-color: #fff;
width: 800px;
height: 800px;
border: 4px solid black;
text-align: justify;
padding: 12px;
margin-top: 50px;
margin: auto;
font-size: 25px;
text-align: center;
border-radius: 10px;
position: relative;
}
.cadredroite {
background-color: #848484;
width: 200px;
height: 600px;
border: 2px solid black;
text-align: justify;
padding: 10px;
font-size: 20px;
text-align: center;
border-radius: 10px;
position: relative;
float: right;
margin-right: 13%;
}
.footer {
background-color: #333333;
width: 1862px;
height: 170px;
border: 2px solid black;
text-align: justify;
padding: 10px;
font-size: 20px;
text-align: center;
border-radius: 10px;
position: relative;
float: left;
margin-top: 100px;
color: #FF0000;
}
#content {
height: auto;
width: 1862px;
position: relative;
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<div id="conteneur">
<ul class="menu">
<li class="current">
<a href="index.php">Accueil</a>
</li>
<li>
<a href="mes-passions.php">Mes passions</a>
</li>
<li>
<a href="#">Ma page</a>
</li>
<li>
<a href="passionné+.php">Passionné +</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
<li>
<a href="partenaires.php">Partenaires</a>
</li>
</ul>
</div>
<div class="cadregauche"></div>
<div class="cadredroite"></div>
<div id="cadrecentre">
<img class="logo" src="logo.png">
<div id="titre">
Bienvenue à toutes et à tous :D
</div>
<p>
Malheureusement, ce site est encore en construction. Reviens vite :)
</p>
<img class="maintenance" src="maintenance.jpg">
</div>
<div class="footer">
Copyright © 2012-2013 - http://passionama.alwaysdata.net - Tous droits réservés
</div>
</div>
</body>
</html>
comme ca tout reste fixe
linux est le noyaux et Windows les pépins
Pour ne pas se tromper dans les couleur
https://color.adobe.com/#themes/rating?time=30
quelque conseil
http://www.culture-speecom.com/general/e-commerce/creation-charte-graphique/
je fait un deust webmaster et cette semaine j'ai fait une page bidon si tu veux voir
http://travaux_deust.hebergratuit.com/
et quelques exemples
http://detruk.blogspot.com/2009/03/arts-graphiques-19-sites-pour-suivre.html
https://color.adobe.com/#themes/rating?time=30
quelque conseil
http://www.culture-speecom.com/general/e-commerce/creation-charte-graphique/
je fait un deust webmaster et cette semaine j'ai fait une page bidon si tu veux voir
http://travaux_deust.hebergratuit.com/
et quelques exemples
http://detruk.blogspot.com/2009/03/arts-graphiques-19-sites-pour-suivre.html
Voilà ce que sa fait....
http://passionama.alwaysdata.net/test/site/page.html
J'ai du oublier quelque chose :/