simple disposition div ouvert

J'essaie de faire une mise en page simpliste pour mon site Web.
Je souhaite que cette barre de navigation remplisse horizontalement l'écran mais que le contenu de la page soit centré.
J'ai réussi à atteindre cet objectif, mais il casse lorsque le contenu dépasse sa largeur prédéfinie.
Je n'ai que quelques pages où les rapports et les tableaux poussent la conception plus large que sa valeur par défaut, de sorte que ces pages se développent bien.
Actuellement le moment où mon contenu est trop large, il embrasse la gauche de son conteneur mais repousse la marge de droite.
Je voudrais que cela pousse les marges gauche et droite de la même manière et reste au centre.
Comment puis-je y parvenir? Voici mon html actuel:simple disposition div ouvert

<!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" xml:lang="en" lang="en"> 
<head> 
    <style> 
    body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;} 
    #main{width: 100%; margin: auto auto;min-height:100%;} 
    #header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');} 
    #nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;} 
    #content{width: 740px;position:relative;margin: auto auto; padding-top: 10px;} 
    #footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;} 
    </style> 
</head> 
<body> 
    <div id="main"> 
    <div id="header">LOGO</div> 
    <div id="nav">LINK | LINK | LINK</div> 
    <div id="content"> 
    here is some contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
    </div> 
    <div id="footer">footer content</div> 
    </div> 
</body> 
</html>

J'ai simulé le contenu en devenant plus large en faisant un mot vraiment très long.
Sur mon site, il s'agit généralement d'un rapport dans un tableau HTML.

Toute aide sera grandement appréciée. Merci!

modifier:

ce n'est pas seulement sur le texte qui peut être enroulé ou cassé.
remplacer le « contentcontentcontent » ci-dessus avec une table qui est plus large que la div parent:

<table border="1" width="800px"><tr><td>here is some content</td></tr></table>

Ce tableau touche maintenant la bordure gauche de la div de contenu, mais pousse la bordure droite de la div contenu. Je veux pousser sur les frontières aussi et restent au centre

Source

2010-09-07 WebDude

Quelqu'un qui n'est pas membre sur ce site a réussi à résoudre ce problème pour moi.
Ce que nous avons est fixé le div de contenu à 100%, puis placez un div dans ce qui entoure le contenu avec align = "center"

<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>

La solution complète:

<!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" xml:lang="en" lang="en"> 
    <head> 
     <style> 
      body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;} 
      #main{width: 100%; margin: auto auto;min-height:100%;} 
      #header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');} 
      #nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;} 
      #content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;} 
      #footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;} 
     </style> 
    </head> 
<body> 
    <div id="main"> 
     <div id="header"><br/>LOGO<br/></div> 
     <div id="nav">LINK | LINK | LINK</div> 
     <div id="content"> 
      <div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div> 
     </div> 
     <div id="footer">footer content</div> 
    </div> 
</body>

Source

2010-09-08 08:27:47 WebDude

..J'allais juste suggérer cela. Sérieusement: D –

Qu'est-il arrivé au scénario des mots longs? Tapez un mot très très long (plus de 1000 px), puis regardez ce qui se passe. – Vikash

@vikash cela fonctionne toujours parfaitement. Échanger le div centré avec le suivant et il reste toujours dans le centre comme je voulais: "

here is sooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooome content

" – WebDude

Voici comment le faire (Faites défiler jusqu'à la poste MidiMagic): http://www.daniweb.com/forums/thread57605.html

Source

2010-09-07 19:36:24

cela semble expliquer comment centrer les objets dans un div que j'ai déjà réussi à faire. Je suis inquiet au sujet du cas où mon contenu devient plus grand que son div parent et semble préférer développer le droit de la div parent plutôt que proportionnellement – WebDude

Vous devez envelopper des mots dans le contenu div #.

Vous pouvez utiliser quelque chose comme ceci:

div#content { 
white-space: -moz-pre-wrap; /* Mozilla */ 
white-space: -pre-wrap; /* Opera 4 - 6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap; /* CSS3 */ 
word-wrap: break-word; /* IE 5.5+ */ 
}

Source

2010-09-07 19:38:49 Vikash

comment cela affecte-t-il les tables? – WebDude

Vous devez envelopper les mots dans "td". vous devriez aussi utiliser 'table-layout: fixed' – Vikash

mais ce n'est pas seulement du texte, c'est de la largeur de la table. Je mettrai à jour mon article, mais remplacez le contenu par une table de 800px et voyez comment il touche la bordure gauche du contenu div mais repousse la bordure droite – WebDude

simple disposition div ouvert

Répondre

Questions connexes