Responsive, Resizing HTML / CSS

Version imprimable

13/11/2013, 22h56
mikew69

Responsive, Resizing HTML / CSS

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:
http://img15.hostingpics.net/thumbs/...1106164223.png

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

Citation:

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:

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>

14/11/2013, 12h01
mikew69

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 :

http://img4.hostingpics.net/thumbs/m...1114115830.png

http://img4.hostingpics.net/thumbs/m...1114120355.png

En tout cas merci de prendre de ton temps pour moi ;)

Mickael
14/11/2013, 12h53
rodolphebrd

Bonjour,

si vous cherchez à positionner votre footer en bas de page, c'est par ici : Comment positionner un footer en bas de page ?
14/11/2013, 13h30
mikew69

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
15/11/2013, 12h04
mikew69

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%

??
17/11/2013, 19h45
rodolphebrd

Votre lien est mort !