Responsive, Resizing HTML / CSS

**mikew69** · 13/11/2013, 22h56

Bonjour,

Je suis en train de coder mon site de A à Z en HTML/CSS mais j'ai un soucis je voudrais utiliser mes margin-left et right pour quand on rétrécis la fenêtre c'est les marges qui se rétrécisse.

Mon site en image:

Lien du fichier HTML: http://www.webzoom.fr/test/index.html

Lien du fichier CSS http://www.webzoom.fr/test/css/style.css

J'ai testé d'englober le tout dans une div="global" avec des margin:auto et une width mais j'arrive pas par la suite a mettre mon menu en width:100% et pareil pour le footer.

Je vous remercie d'avance . Mickael

**Muchos** · 14/11/2013, 05h06

j'arrive pas par la suite a mettre mon menu en width:100% et pareil pour le footer.

Il faut penser à l'envers : ne pas toucher aux header/footer, mais à la largeur du contenu.

Ma proposition :

Code html :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <meta charset="UTF-8" />
 <title>Responsive page</title>
 <style type="text/css">
html, body {
 height : 100%;
 margin: 0;
}
.page {
 position: relative;
 height : 100%;
 min-height : 100%; /* La page est toujours pleine */
}
main,
header,
footer {
 text-align: center;
 color: #FFF;
 background: #333;
}
main {
 display: block;
 margin: auto;
 width: 60%;
 height: 80%;
}
header,
footer {
 height: 10%;
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}
 
@media screen and (max-width: 640px), handheld and (max-width: 640px) {
/* Si la fenêtre fait moins de 641 px de large */
main {
 width: 90%;
}
}
 </style>
</head>
<body>
<div class="page">
 <header>HEADER</header>
 <main>MAIN</main>
 <footer>FOOTER</footer>
</div>
</body>
</html>

**mikew69** · 14/11/2013, 12h01

Merci pour ta réponses.

J'ai essayé avec ta méthode effectivement sa fonctionne très bien pour le #main, mais le footer si je le met en absolute je le vois tout le temps il est pas en bas de la page déroulante ..

& second problème les marges du header et footer ne sont pas utilisé en cas de rétrécissement ...

Exemple du menu :

En tout cas merci de prendre de ton temps pour moi

Mickael

**rodolphebrd** · 14/11/2013, 12h53

Bonjour,

si vous cherchez à positionner votre footer en bas de page, c'est par ici : Comment positionner un footer en bas de page ?

**mikew69** · 14/11/2013, 13h30

Merci à toi rodolphebrd, j'ai pu attacher mon footer en bas de page.

Mais j'arrive toujours pas à faire ce que je veux.

Quand on agrandi et rétrécis la page au dessus de 970px sa travaille sur toutes les margins left et right.

Après en dessous de 970px on passe en media queries et sa j'y suis arriver mais impossible de travailler sur mes marges au delà de 970px.

Auriez-vous une solution à m'apporter ?

Merci

**mikew69** · 15/11/2013, 12h04

Prenons l'exemple de facebook...

https://www.facebook.com/

Si on réduit le navigateur les deux marges sur le coté se réduise comment réussir a faire sa en gardant juste les background de header et footer à width:100%

??

Responsive, Resizing HTML / CSS

HTML

Vue hybride

Partager

Partager