Discussion :

[Lenilo]

Bonjour, je commence à créer mon site. J'ai créé visuellement le corps et le menu de mon site. Ca donne ça :

centre : http://nsa33.casimages.com/img/2014/...0127573681.png
menu : http://nsa34.casimages.com/img/2014/...0039522966.png

J'ai réussi à centrer le "centre" horizontalement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#centre
{   
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
 
}

Maintenant, comment toujours placer mon menu à 0,5 cm de mon centre quelque soit la résolution ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#menu
{   
 
 
    ???
    margin-top: 100px;
 
}

Et la question la plus dur, comment je fais pour avoir tout ce que j'écris dans mon centre quelque que soit la résolution ? En gros j'écris sur une image... d'où le titre du topic, est-ce la bonne solution ? Je m'y prend mal ?

Je vous remercie de votre aide.

[Pifon]

Bonjour

A ta place je créerais une div "#conteneur" qui contiendrait une div "#menu" et une div "#centre". Avec conteneur en position relative et centre et menu en position absolute. Puis je placerais les différents élément à l'aide de marges.

Un conseil : mettre,au départ, une bordure sur chaque élément pour bien le repérer.

voici un exemple de code peut etre que ca pourra t'aider
html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="conteneur">
	<div class="centre"></div>
	<div class="menu"></div>
</div>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#conteneur{
	position:relative;
	border:solid 2px;
	 width:50%;
	 height:500px;
}
.centre{
	margin-top:25px;
	position:absolute;
	border:solid 1px red;
	width:60%;
	 height:400px;
	 margin-left :150px;
}
.menu{
	position:absolute;
	margin-top:25px;
	margin-left:25px;
	border:solid 1px blue;
	 width:10%;
	 height:350px;
}

et pour centrer le texte utilises text-align:center dans ton css;

[Invité]

Bonjour,
contrairement à Pifon, je pense qu'il faut éviter, tant que faire se peut, les position:absolute; !
(ça a bien d'autres utilités, mais pas dans ce cas)

Et oublie les "0.5cm"... ce n'est pas une unité "web"
En "responsive design", on utilisera surtout les pourcentages.

Tu peux t'en sortir en mettant les 2 div en float:left; et respectivement width:20%;, width:80%; (à adapter, bien sûr)
Pour ajouter des marges (en %, aussi), en déduire la largeur :
ex. :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
float:left;
width: 18%;
margin:0 1%;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
float:left;
width: 76%;
margin:0 2%;

• 18+1+1 = 20%
• 76+2+2 = 80%
• 20% + 80% = 100%

[Pifon]

Merci pour le conseil !

Il vaut mieux éviter les positions relatives/ absolute dans ce cas pour que le site s'adapte à toutes les résolutions d'écran ?

Dans quel cas conseilleriez vous les positions relatives / absolutes ?

[Invité]

@Lenilo :

• Div et CSS : une mise en page rapide et facile
• Les fondamentaux du Responsive Web Design
• Redécouvrez la mise en page avec Flexbox

@Pifon :
Dans ce cas, par exemple.