Problème de conception de mise en page CSS

J'ai créé un dessin, mais j'ai des problèmes pour le faire fonctionner comme je le souhaite. Ce serait trop pour poster un pack complet ici, mais voici le problème en bref: J'ai un élément DIV côte à côte avec un autre élément DIV. L'un est une barre latérale et l'autre est le contenu. Quand je mets un fieldset dans mon contenu div, n'importe quoi (comme les autres divs) que je mets à l'intérieur étire fieldset et l'encapsulation div correctement. Mais si je supprime fieldset, "divs invités" juste ne pas étirer l'encapsulation "contenu div". Pourquoi cela arrive-t-il et comment puis-je le réparer?Problème de conception de mise en page CSS

Merci!

Si vous avez besoin de plus d'informations, s'il vous plaît demander.

code

est quelque chose le long de ces lignes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<style type="text/css"> 

#main-container 
{ 
    background-color:gray; 
} 
#header-container 
{ 
    background-color:green; 
    height: 60px; 
} 
#sidebar-container 
{ 
    background-color:maroon; 
    width: 150px; 
    float: left; 
} 
#content-body 
{ 
    background-color:white; 
    position: relative; 
} 
#block-1, #block-2 
{ 
    float:left; 
    width: 50%; 
    background-color: blue; 
    height: 95px; 
} 
#block-3 
{ 
    float: left; 
    width: 100%; 
    background-color:navy; 
    height: 156px; 
} 
#footer 
{ 
    width: 100%; 
    background-color:orange; 
} 

</style> 
</head> 

<body> 
    <div id="main-container"> 
     <div id="header-container"></div> 
     <div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div> 
     <div id="content-body"> 
      <div id="block-1">&nbsp;</div> 
      <div id="block-2">&nbsp;</div> 
      <div id="block-3">&nbsp;</div> 
     </div> 
     <div id="footer">&nbsp;</div> 
    </div> 
</body> 

</html>

Source

2009-08-29 BuzzBubba

Sauf si vous pouvez poster un code représentant ça va être tout à devine quel est le problème. Pouvez-vous lier à la page/code si c'est trop pour poster? Pouvez-vous simplement afficher les éléments importants avec lesquels vous avez des problèmes? –

avez-vous un exemple? faites-vous référence à la hauteur des colonnes n'étant pas égales ou quoi? –

Avez-vous essayé de limiter la largeur du fieldset, en utilisant peut-être une largeur de pixel, pas un pourcentage? –

Vous devez définir overflow: hidden sur votre contenant div, et assurez-vous qu'il a au moins une dimension qui est fluide. Par défaut, les éléments de débordement (c'est-à-dire les éléments flottants, tout ce qui sort du flux de document normal) "débordent leurs limites de blocs contenant" (débordement: visible) sans affecter leur conteneur parent. Lorsque vous définissez overflow sur hidden, vous indiquez au modèle de boîte de développer le div conteneur dans toutes les dimensions qui ne sont pas définies sur une taille fixe de sorte qu'il contienne entièrement ses éléments de contenu.

Selon que vous avez besoin ou non du contenu de la div contenant, vous pouvez utiliser le débordement: auto ou overflow: faites défiler. Le réglage automatique affichera les barres de défilement si nécessaire, le défilement les affichera toujours. Tous les navigateurs prenant en charge le débordement CSS3 offrent des fonctionnalités supplémentaires que vous pouvez rechercher sur W3C.org.

Le premier changement que je voudrais faire à votre code est le suivant:

#content-body 
{ 
    background-color:white; 
    position: relative; 
    overflow: hidden; 
}

Une autre méthode qui est préférée ces jours-ci se trouvent sur le lien ci-dessous. Je ne l'ai pas utilisé moi-même, donc je ne peux pas dire avec autorité à quel point la méthode est compatible. Cependant, il semble être préférable à la solution de débordement pour les navigateurs modernes (Opera, FF 3.x, Safari, Chrome, IE8). Pour les anciennes versions d'IE, ils développent automatiquement les divs de toute façon, donc votre ensemble.

http://www.positioniseverything.net/easyclearing.html

Source

2009-09-01 06:39:30 jrista

Le dernier lien a résolu mon problème de la meilleure façon. Merci beaucoup. – BuzzBubba

Problème de conception de mise en page CSS

Répondre

Questions connexes