Comment éviter le chevauchement de mes couches div lorsque le navigateur est redimensionné?
Je viens de passer les dernières semaines à apprendre à concevoir correctement une mise en page. En gros, je pensais que tout était parfait avec la mise en page de mon site Web et que j'étais prêt à transférer le codage vers Wordpress ... puis j'ai accidentellement redimensionné mon navigateur Web et découvert que toutes mes couches div se chevauchaient.
Voici à quoi ça ressemble: 
Fondamentalement, il semble que ce soit principalement le contenu de mon centre div qui est supprimé, ainsi que mon en-tête image et navigation qui sont dans le même top div. Mon pied de page est également compressé. J'ai cherché sur internet une solution à ce problème et je n'arrive pas à trouver quoi que ce soit.
Comment puis-je résoudre ce problème pour que ma div reste en place lorsque le navigateur est redimensionné?
Je l'ai compris. Il s'avère que la largeur de la marge de mon contenu central était dictée par les marges au lieu d'une largeur directe (c'est-à-dire 500 pixels). Ainsi, chaque fois que la page était redimensionnée, les marges situées sur les côtés du navigateur tentaient de rester telles quelles, ce qui réduisait la colonne entière. Je devais juste me débarrasser des marges et spécifier l'endroit où je voulais que la colonne apparaisse sur la page et justifier simplement une largeur.
comme Walter a dit que votre CSS serait utile. Mais le problème principal est que le contenu de la div est débordant à d'autres divs car la div du contenu ne peut pas contenir tout le contenu.
Dans votre css, essayez de définir la propriété overflow du div sur auto (affiche les barres de défilement) ou cachée (pour masquer simplement le contenu s'il dépasse le div).
overflow:auto;
ou
overflow:hidden;
Exprimez vos largeurs et tailles de police dans ems . Voici une bonne calculatrice: http://riddle.pl/emcalc/
Les pourcentages fonctionneront aussi.
Vérifiez les css dans stackoverflow, et essayez de redimensionner le niveau de zoom de votre navigateur ici - vous verrez que tout redimensionne bien à n'importe quel niveau de zoom.
vous pouvez également essayer le min-width. Je suppose que la division centrale est fluide et que les barres latérales sont à largeur fixe.
Consultez la propriété min-width . Une autre option consiste à appliquer une autre feuille de style lorsque la largeur de la fenêtre d’affichage est inférieure à x pixels avec Requêtes de médias CSS3 like so:
@media all and (max-width: 30em) {
/* Alternative narrow styles */
}
ou alors:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
Les requêtes multimédias CSS3 ne sont toujours pas largement prises en charge, vous pouvez donc envisager une solution qui applique la feuille de style "étroite" avec JavaScript via l'événement window.onresize. Je recommanderais jQuery pour une telle solution.
J'ai eu le même problème si vous avez une largeur et une hauteur dans votre conteneur DIV, cela ne changera pas sauf la largeur, sauf si vous mettez une largeur minimale. Le problème que j’avais, c’est quand je fais la fenêtre du navigateur, les divs aimeraient aller à la ligne suivante
alors ce que j'ai fait, c'est dans le conteneur que j'ai défini une hauteur et une largeur. Avant de ne pas définir de hauteur, je laissais les divs déterminer les hauteurs.
Pouvez-vous poster une partie de votre CSS?
La méthode la plus simple consiste à définir pour toutes vos colonnes des paramètres width relativement sains afin que la taille de la fenêtre du navigateur n’affecte pas la taille de votre présentation. Obtenir le comportement de colonnes de largeur fluide est plus complexe et dépend davantage des spécificités de votre mise en page.