28172 sujets

CSS et mise en forme, CSS3

DIV qui sort de la page.

Bonjour,

Alors là je me brûle la cervelle a essayait de comprendre pourquoi...

Ce que je veux faire :
C'est que ma DIV "contenu" ne sorte pas de mon viewport.
Ma page ressemble à ça.
__________________________________________________
| | |
| Logo | Header |
| | |
|__________|_______________________________________|
| | |
| | |
| | |
| | |
| | |
| Menu | Contenu |
| | |
| | |
| | |
| | |
|__________|_______________________________________|
| Mon footer |
|__________________________________________________|

Et voici mon CSS :

/*Corps et fond*/
html {
	width: 100%;
	height: 100%;
}
body {
	padding:0;
	margin:0;
	height: 100%;
	width: 100%;
	color:#4A4D4A;
	font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
	font-size:9pt;
	text-align: center;
}
#wrap-body-left{
	height: 100%;
	width: 100%;
	background: #000000 url(/images/fond.png);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-position: bottom center; 
}
#wrap-body-center{
	width: 820;
	height: 100%;
	background: url(/images/fondCentral.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:bottom center; 
}

/*Contenu*/
#main {
	float: left;
	width: 600px;
	height: 100%;
	margin:0 auto;
	display: inline;
	text-align:justify;
	overflow: auto;
}


Mon HTML


<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" lang="fr" content="<?php echo $this->keywords; ?>">
<meta name="description" lang="fr" content="<?php echo $this->description; ?>">
<title><?php echo $this->escape($this->title); ?></title>
<link rel="stylesheet" type="text/css" href="/css/general.css" />
<?php echo $this->header; ?>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<script type="text/javascript" src="/js/autocomplete.js"></script>
<!--[if IE 6]>
<?php echo $this->ie6; ?>
<![endif]-->
</head>
<body>

<div id="wrap-body-left" />

<div id="wrap-body-center" align="center">
	<table width="820" border="1" style="border-style:solid; border-color:#999999" cellpadding="0">
		<tr>
			<td width="150" align="right" valign="bottom">
				<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="150" height="110">
					<param name="movie" value="./animation/logo.swf" />
					<param name="quality" value="high" />
					<param name="wmode" value="transparent" />
					<param name="swfversion" value="6.0.65.0" />
					<object type="application/x-shockwave-flash" data="./animation/logo.swf" width="150" height="110">
						<param name="quality" value="high" />
						<param name="wmode" value="transparent" />
						<param name="swfversion" value="6.0.65.0" />
						<param name="expressinstall" value="Scripts/expressInstall.swf" />
						<param name="SCALE" value="noborder" />
					</object>
				</object>
			</td>
			<td width="670">
				<div id="wrap"> 
					<div id="header-wrap">
						<div id="header"></div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<!--Menu de gauche-->
			<td width="150">
				<div id="sidebar">
					<h1>Menu : </h1>
					<ul class="sidemenu">
						<?php echo $this->menu; ?>
					</ul>					
					<?php echo $this->news; ?>
				</div>
			</td>
			<!--Menu du haut-->
			<td width="670">
				<div id="container">
					<div id="content-wrap">
						<div id="nav1">
							<ul id="menus">
								<li class="current"><a href="/test1">test1</a></li>
								<li><a href="/test2">test2</a></li>
								<li><a href="/test3">test3</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div id="main">				
					<?php echo $this->contenu; ?>
				</div>
			</td>
		</tr>
	</table>
</div>



<div style="clear:both">
</div>
<div id="footer-wrap">
	<div id="footer">
		<a class="footer" href="test1">test1</a>&nbsp;-&nbsp;<a class="footer" href="test2">test2</a>&nbsp;-&nbsp;<a class="footer" href="test3">test3</a>&nbsp;-&nbsp;contact : ..........
		<?php if(isset($this->connection)): ?>
		<i>&nbsp;-&nbsp;<?php echo $this->connection; ?></i> (<a href="/Login/index/logout">Déconnection</a>)
		<?php endif; ?>
	</div>
	<div id="footer-content">
	</div>
</div>
</body>
</html>


Le truc. C'est que quand je fais ça si mon texte est trop grand. Ma DIV s'agrandit en conséquence et du coup mon texte est hors page ce qui fait que tout background par en sucette complet.

Je ne sais pas si je suis clair.... Smiley lol
Sujet clos
Aller à