Sujet Précédent Sujet Suivant

Placer les cadres entre eux - margin

Résolu/Fermé
Utilisateur anonyme - 18 janv. 2013 à 20:45
 Utilisateur anonyme - 18 janv. 2013 à 23:08
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.

3 réponses

Réponse 1 / 3
Utilisateur anonyme
18 janv. 2013 à 21:58
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
0
Utilisateur anonyme
18 janv. 2013 à 22:05
Merci.
Voilà ce que sa fait....
http://passionama.alwaysdata.net/test/site/page.html

J'ai du oublier quelque chose :/
0
Réponse 2 / 3
Utilisateur anonyme
Modifié par lobotoFix le 18/01/2013 à 22:26
<!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
0
Utilisateur anonyme
18 janv. 2013 à 22:28
Donc si l'écran est plus petit, sa fait comment ?
Mais merci :)
0
Utilisateur anonyme
18 janv. 2013 à 22:29
comme il y a un cadre a gauche toute la page part sur la droite mais au moin tout les bloc reste fixe
0
Utilisateur anonyme
18 janv. 2013 à 22:31
D'accord, merci. Sinon pendant qu'on y est, comment pense-tu que je peux embellir la page ? Car c'est un peu basic :P
0
Réponse 3 / 3
Utilisateur anonyme
18 janv. 2013 à 22:36
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
0
Utilisateur anonyme
18 janv. 2013 à 23:08
D'accord :)
0

Discussions similaires

Symbole spécial dans nom d'utilisateur
camille78 -
Sanspseudo -

1 réponse
Impossible de placer des éléments dans la corbeille
c4milllee_ -
trotte-menu -

1 réponse
Les meilleurs places bercy / accor hotel arena
sisi -
baladur13 -

8 réponses
Impossible de placer des fichiers dans la corbeille
BettyCC -
dede74000 -

1 réponse
Devi
kamalmare64@gmail.com -
MPMP10 -

1 réponse