5568 sujets

Sémantique web et HTML

Pour changer encore un problème de height=100 %

Salut à tous.

Je suis au bord du pétage de plomb.

Voilà mon pb, je veus faire en sorte que mon conteneur ai une hauteur = 100%.
J'y arrive mais le problème et que quand le texte dépasse la fenetre, le conteneur reste à la hauteur de la fenetre.
Donc mon texte dépasse.

Enfin sous IE le résultat est conforme a mon attente, mais sous Firefox non...

Pour voir : http://www.les-sites-internet.com/clients/jemi/pages/notre-organisation.php

le CSS :
html {
	height:100%;
}

body {
	height:100%;
}

#conteneur {
	width:782px;
	min-height:100%;
	margin:auto;
	background-image: url("images/fond_conteneur.png");
	background-repeat:repeat-y;
}

#header_ {
	width:782px;
	height:130px;
	background-image: url("images/header.jpg");
}

#banner_ {
	width:782px;
	height:87px;
}

#gauche_ {
	float:left;
	width:215px;
	height:250px;
	height:100%;
	overflow:hidden;
	border-left-width:1px;
	border-left-style:solid;
	border-left-color:#CCCCCC;
}

#chemin-de-fer_ {
	width:438px;
	height:24px;
	background-color:#e4f2ff;
	color:#666666;
	font: bold 11px Verdana ;
}

#menu-droite_ {
	float:left;
	width:128px;
	height:351px;
	background-color:#d3e9ff;
	height:100%;
}


#menu-droite_  ul{
	margin-left:0px;
	padding-left:0px;
}

#menu-droite_  li{
	background-image: url("images/menu.png");
	height:40px;
	width:119px;
	list-style-type:none;
	margin:0px;
	padding:0px;
	color:#333333;
	font: bold 12px Verdana ;
}

#menu-droite_  li a{
	color:#333333;
	font: bold 12px Verdana ;
	text-decoration:none;
		padding-left:5px;
	padding-top:5px;
}

#menu-droite_  li:hover{
	background-image: url("images/menu_hover.png");
}



#content_ {
	float:left;
	width:438px;
	height:100%;
	background-color:#e4f2ff;
	color:#333333;
	font: normal 11px Verdana ;
}

#gauche-bas_ {
	width:216px;
	height:101px;
	background-color:#f1f1f1;
	height:100%;
}

#gauche-bas_ p {
margin:0;
padding:0;
}

#footer_conteneur
{
	width:782px;
	height:54px;
	margin:auto;
}

#footer_ {
	float:left;
	width:782px;
	height:54px;
	background-image: url("images/footer.jpg");
	background-repeat:no-repeat;
	color:#333333;
	font: normal 10px Verdana ;
	text-align:center;
	padding-top:15px;
}


le xhtml : 
<?php

if(!defined('WB_URL')) {
	header('Location: ../index.php');
	exit(0);
}
?>
<!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>
<title><?php page_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />
<?php
// this allows to include the optional module files (frontend.css, frontend.js) into the head section
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>
<?php 
// this allows to add custom information to the head section of your template (WB-->Settings-->Website Header)
echo WEBSITE_HEADER; 
?>
</head>
<body>
<!-- ImageReady Slices (jemi_pour_integration.psd) -->
<div id="conteneur">
	<div id="header_">

	</div>
	<div id="banner_">
	<img src="<?php echo TEMPLATE_DIR; ?>/images/banner.jpg" alt="Jemi, import export"/>
	</div>
	<div id="gauche_">
		<img src="<?php echo TEMPLATE_DIR; ?>/images/gauche.jpg" width="215" height="250" alt="" />
			<div id="gauche-bas_">
<?php page_content(2); ?>
	</div>
	</div>

	<div id="content_">
	<div id="chemin-de-fer_">
	<?php show_menu2(0, SM2_ROOT, SM2_CURR, SM2_CRUMB, '<span class="[class]"> > [a][menu_title]</a>', '</span>', '', '', '<b>Navigation:</b> <span class="[class]">[a][menu_title]</a>'); ?>
	</div>
			<?php page_content(1); ?>
	</div>
		<div id="menu-droite_">
				<?php
	// Only show menu items if we are supposed to
	if(SHOW_MENU) {
	?>	
	<div class="menu">
		<?php 
		show_menu();
		
		if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
		?>
		<form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table">
			<h1><?php echo $TEXT['LOGIN']; ?></h1>
			<?php echo $TEXT['USERNAME']; ?>:
			<input type="text" name="username" style="text-transform: lowercase;" />
			<?php echo $TEXT['PASSWORD']; ?>:
			<input type="password" name="password" />
			<input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; text-transform: uppercase;" />
			<a href="<?php echo FORGOT_URL; ?>"><?php echo $TEXT['FORGOT_DETAILS']; ?></a>
				<?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
					<a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
				<?php } ?>
		</form>
		<?php
		} elseif(FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
		?>
		<form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post" class="login_table">
			<h1><?php echo $TEXT['LOGGED_IN']; ?></h1>
			<?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
			<br />
			<input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
			<br />
			<a href="<?php echo PREFERENCES_URL; ?>"><?php echo $MENU['PREFERENCES']; ?></a>
			<a href="<?php echo ADMIN_URL; ?>/index.php"><?php echo $TEXT['ADMINISTRATION']; ?></a>
		</form>
		<?php
		}
		?>
	</div>
	<?php } ?>
	</div>
	</div>
</div>
<div id="footer_conteneur">
<div id="footer_">
	<?php page_footer(); ?>
	</div>
	</div>
</body>
</html>


Si quelqu'un pourrai me venir en aide !

J'ai lu plusieurs articles sur le height=100% mais j'ai pas réussi à trouver une solution pour mon cas.
Modifié par Shooye (14 May 2008 - 14:41)
Mais euh, pourquoi ne pas utiliser un clear : left ou clear : both ? Smiley sweatdrop

C'est beaucoup plus simple et ça évite toutes ces manip' louches...
Eh bien, je sais que ça peut paraitre crade, mais n'ayant pas trouvé de solution plus adéquate, j'utilise toujours celle-ci. Si tu veux que ton conteneur s'adapte à ton bloc de texte, il faut que tu rajoutes une balise de ce type en dessous du bloc texte :

<div style="clear:both;"></div>


Si tout se passe bien, ton texte ne dépassera plus du conteneur et tu verras la vie autrement. Toutefois, je le répète au risque de me faire taper sur les doigts, il y a peut-être une solution plus adéquate et plus conforme aux standards mais là comme ça, il n'y a rien qui me vient à l'esprit. Smiley cligne

Bon courage.
Administrateur
Bonjour à tous les deux et bienvenue à Nookeboo, Smiley smile

Tant que les flottants devront être détournés de leur utilisation première, ce ne sera pas si crade que ça Smiley smile
Je reprend régulièrement ce code de Raphaël dont le principe est strictement le même avec 2 instructions en plus:

.qqch {
background:none;
clear:both;
font-size:0.01em;
}

<div class="qqch"></div>
Sujet clos
Aller à