28220 sujets

CSS et mise en forme, CSS3

Débordement de texte d'un DIV

Bonjour à tous et bonne reprise pour les lycéens chanceux comme moi Smiley smile

Voilà mon petit problème, je vient de me convertir au XHTML et CSS valide W3C (au lieu de HTML+tableau à l'arrache non valide) et j'ai un petit problème

En effet, ma page est composé de 4 DIV (un header, un menu, un corp et un footer). Mais voilà, quand il y a trop de texte dans le DIV corp et bien ca dépasse et vient manger l'espace du footer. Ca a pour conséquence de mettre un affreux scroll vertical Smiley lol

Regardez par vous même : http://alchi76.free.fr/alchy/index.php?page=alchy

Je vous met mes sources au cas ou...

Source de l'index :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="style" href="styles/style1.css" />
   <?php include("alchyconnectdb.php"); ?>
   </head>
   <body>
   <div id="header">
   Bannière 800x150px
   </div>
   <div id="menu">
	<div class="style_menus">
		<h3>Alchy</h3>
		<ul>
			<li><a href="index.php">Accueil</a></li>
			<li><a href="index.php?page=alchy">Présentation</a></li>
			<li><a href="index.php?page=site">Mes sites</a></li>
			<li><a href="index.php?page=contact">Me contacter</a></li>
		</ul>			
	</div>
   </div>
   <div id="corp">
   </div>
   <div id="footer">
	<p>
	<a href="http://validator.w3.org/check?uri=referer"><img style="border:0" src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a>
	<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> 
	</p>
   </div>
   </body>
   </html>

Je vous passe le traitement des pseudo frames!

Et le CSS :

body
{
background-color:#6dc3ff;
}

#header
{
height:150px;
margin-top:10px;
margin-left:10px;
margin-right:10px;
background-color:#00a2ff;
}

#menu
{
height:334px;
float:left;
margin-top:10px;
margin-left:10px;	
width:150px;
border:2px solid #00a2ff;
background-color:#0290e2;
}

div.style_menus
{
margin:5px 5px;
border:2px solid #00a2ff;
background-color:#0076ba;
}

div.style_menus h3
{
text-decoration:underline;
text-align:left;
margin-left:10px;
}

div.style_menus ul
{
list-style-type:none;
}

div.style_menus a, a:visited
{
color:black;
text-decoration:none;
}

div.style_menus a:hover
{
background-color:#6dc3ff;
color:black;
}

#corp
{
border:1px solid black;
height:334px;
margin-right:10px;
margin-left:190px;
margin-top:10px;
}

#footer
{
height:40px;
margin-top:10px;
text-align:center;
}


Je m'excuse d'avance car c'est un peu long mais si quequ'un m'aide je le remercie vraiment vraiment!

En fait l'objectif et bien, c'est de mettre un scroll dans le DIV corp pour pas que ca déborde!!!

Voilà, merci d'avane et bonne nuit à tous
Bonjour.

Pour intervenir sur le comportement de la div 'corp' il faut modifier sa règle css.

#corp
{
border:1px solid black;
height:334px;
margin-right:10px;
margin-left:190px;
margin-top:10px;
}


Comme le height est fixé, et que le contenu dépasse la hauteur, div applique la règle par défaut : overflow:auto qui affiche des scrollbar.
à partir de là, il faut définir le comportement voulu. Pour que le div grandisse en même temps que le contenu, il suffit de suprimer la ligne
height:334px


Autre alternative, conserver height tel quel et rajouter:
overflow:visible;
Je ne sais pas ou tu veux en venir exactement ^^ mais si tu veux que ton corps suive le text, c'est à dire s'aggrendisse selon la taille du texte de ton corps, je te conseillerai d'utiliser un float pour ton corps (un petit float right ferai très bien l'affaire), et un petit 
clear:both;
dans ton footer pour qui se mette systemetiquement sous le dernier float.

j'espère avoir compris ton problème Smiley sweatdrop .
Modifié par SojaParadise (06 Sep 2005 - 09:42)
Salut, merci pour vos réponses, j'ai fini par mettre un overflow:auto; et c'est bon, mais avec firefox quand j'essaye de descendre avec la molette ca ne marche pas alors que sous IE oui et ca m'embête vraiment Smiley sweatdrop
Sujet clos
Aller à