28172 sujets

CSS et mise en forme, CSS3

Mise en forme pour responsive design

Hello,

J'ai une structure du type : 


<body>
    <div id="header">
         <div class="wrap">
                <div class="nav">
                </div>
         </div>
    </div>
</div>


Le header est en width 100%
Le wrap est en margin: 0 auto; width :1100px,
Le nav est en width:auto; max-width:780px.

Je voudrais faire un header responsive. Quand je retaille la page, le header wrap, tape sur la gauche du navigateur, et le menu rétrécit avec les onglets qui s'aaligne à la vertical et plus à l'horizontal.

Hors avec cette structure, le header wrap tape sur la gauche, mais le wrap fait qu'il reste à 1100px.
Avez vous une idée ?
Merci par avance
Hello

c'est normal que ça ne descende pas en dessous des 1100PX vu que tu l'as bloqué, ce n'est pas par ce que tu met un max-width à ta nav que ça va jouer sur le width du wrap

=> applique à peu de chose près ce que tu à mis en css pour ta nav à ton wrap et ton soucis est réglé ?
l'idéal dans ce genre de cas (enfin pour moi)

C'est de donner une taille fixe à ton header genre 960px ensuite pour ce qui en découle tu donnes des tailles en %. Il y a des sites pour convertir les px en %.

Ensuite une fois que c'est fait et que tu veux adapter pour une tablette/mobile tu as juste à changer la taille du header en utilisant le CSS Media Queries.

Ensuite si tu veux que tout soit responsive sans passer par JS/Media Queries faut que tout soit en % sinon ça restera bloqué même si tu redimensionnes.
Sujet clos
Aller à