28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je dois représenter une page contenant un logo, une banniere, un menu et un contenu de cette maniere

----------------
logo | banniere
----------------
menu | contenu
----------------

J'ai regardé la FAQ et j'ai donc choisi une des solutions exposé dans ce post :
http://forum.alsacreations.com/topic.php?fid=4&tid=1029&p=1

<html>

<style>
body, html{
margin:0;
padding:0;
height:100%;
}
#conteneur{
height:100%
}
#gauche{
left:0;
position: absolute;
width:150px;
height:100%;
background: cyan;
}
#droite{
margin-left:150px;
height:100%;
background:blue;
}
.entete1{
width:150px;
height:100px;
background: red;
}
.entete2{
height:100px;
background: red;
}
</style>
<script language="javascript">
<!--
	function ajoutTexte(){
		var text = ""; 
		alert('ici');
		for ( i=0; i <1000 ; i++){
			text += "ajout d\'une ligne\n"; 
		}
		var div = document.getElementById('texte'); 
		alert(div);
		div.innerHTML=text; 
	}
	-->
</script>

<body>
<div id="conteneur">

<div id="gauche">
	<div class="entete1">logo</div>
	<div> ban </div>
</div>

<div id ="droite">
	<div class="entete2"></div>
	<div id="texte" onMouseover="javascript:ajoutTexte();"> contenu</div>
</div>
</div>
</body>
</html>


Je l'ai un peut modifié pour que quand je passe sur le div contenu 1000 lignes de texte s'ajoute.
Le problème vient du fait que le texte déborde du div. Y a t'il un moyen (javascript ou css pour éviter cela ? )


Merci