28220 sujets

CSS et mise en forme, CSS3

Problème de positionnement des DIV ?

Bonjour,

J'ai le code suivant :

<div id="global">
	<div id="header">a</div>
	<div id="live">
		<div id="LiveDateHeure">b</div>
		<div id="LiveInformation">c</div>
		<div id="LiveStatistique">d</div>
	</div>
	<div id="menu">e</div>
	<div id="body">f</div>
	<div id="footer">g</div>
</div>


Rouge : live
Bleu : LiveDateHeure
Vert : LiveInformation
Orange : LiveStatistique

L'image suivante montre le resultat que j'obtiens dans sa partie supérieure :
http://cjoint.com/data/ihxvF6dlJh_div.PNG

Je voudrais positionner mes DIV les uns à côté des autres, comme expliqué dans la partie inférieure de l'image ci-dessus, mais je ne sais comment faire...

Merci,
Mathieu
Modifié par mrousse (07 Aug 2006 - 23:36)
A froid comme ça, je dirais de les mettre les 3 Live... en float:left; avec les longueurs qui vont bien, et ça devrait rouler.

Pense à ajouter un clear:both à ta div menu ensuite si besoin est.
Bonjour,

Merci pour ta réponse, j'ai effectué les modifications en conséquence.
Le résultat, c'est pas encore ça Smiley smile

A quoi sert le "clear : both;" ?

Merci,
Mathieu
Clear:both imposera un retour à la ligne au contenu en-dessous des éléments flottants.

Détaille un peu si tu veux de l'aide, j'ai pondu ça un peu à l'arrache sans trop réfléchir :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 <title>Test</title>
 <meta http-equiv="content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
<!--
#LiveDateHeure,#LiveInformation,#LiveStatistique{
float:left;
margin-left:1%;
margin-top:1%;
}
#LiveDateHeure{
border:1px solid #00f;
}
#LiveInformation{
border:1px solid #0f0;
}
#LiveStatistique{
border:1px solid #fc0;
}
#LiveDateHeure,#LiveStatistique{
width:20%;
}
#LiveInformation{
width:55%;
}
#live{
border:1px solid #f00;
}
-->
</style>

</head>
<body>
<div id="global">
	<div id="header">a</div>
	<div id="live">

		<div id="LiveDateHeure">b</div>

		<div id="LiveInformation">c</div>

		<div id="LiveStatistique">d</div>

                <hr style="clear:both;visibility:hidden;" />
	</div>
	<div id="menu">e</div>
	<div id="body">f</div>
	<div id="footer">g</div>
</div>
</body>
</html>
Bonsoir,

Je vais travailler ce soir sur le problème où tu m'as aidé, je te tiens informé.

Merci,
Mathieu
Bonjour,

J'ai juste un petit soucis...
Lorsque je rajoute "padding : 2px" à mon #live_informations tout est décalé comme ça :
http://cjoint.com/data/ikvDptMi2U_sc1.PNG

Si je ne le met pas, l'affichage est correct mais le texte est collé à la bordure :
http://cjoint.com/data/ikvD7qliTh_sc2.PNG

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>xxx</title>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<meta http-equiv="content-language" content="fr"/>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/>
		<meta http-equiv="content-style-type" content="text/css"/>
		<script type="text/javascript" src="js/global.js"></script>
	</head>
	<body>
		<div id="global">
			<div id="header">logo + publicite</div>
			<div id="live">
				<div id="live_date">date<br/>heure<br/>saint glinglin</div>
				<div id="live_informations">informations ici...</div>
				<div id="live_statistiques">x connecté(s)</div>
			</div>
			<div id="menu">menu</div>
			<div id="body">yyy<br/>yyyy<br/>yyyyy</div>
			<div id="footer">xxxx</div>
		</div>
	</body>
</html>


Mon CSS :

body
{
	background-color	             : #34628A;
	font-family		: Verdana;
	font-size			: 11px;
}

img
{
	border			: 0;
}

#global
{
	background-color	             : #FFFFFF;
	border			: 3px solid #FFFFFF;
	left			: 50%;
	margin-left		: -380px;
	position			: absolute;
	width			: 760px;
}

#header
{
	background-color	             : #FFAC11;
	border-bottom		: 3px solid #FFFFFF;
}

#live
{
	background-color	             : #FFCE73;
	border-bottom		: 1px solid #000000;
	border-top		: 1px solid #000000;
	height			: 40px;
	padding			: 2px;
}

#live_date
{
	border-right		: 1px dotted #000000;
	float			: left;
	height			: 40px;
	text-align		: center;
	width			: 25%;
}

#live_informations
{
	float			: left;
	height			: 40px;
	width			: 50%;	
}

#live_statistiques
{
	border-left		: 1px dotted #000000;
	float			: left;
	height			: 40px;	
	text-align		: center;
	width			: 25%;	
}

#menu
{
	background-color	             : #A0BED8;
	border-bottom		: 3px solid #FFFFFF;
	border-right		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;	
	left			: 0;
	position			: absolute;
	width			: 200px;
}

#body
{
	background-color	             : #FFFFFF;
	border-bottom		: 3px solid #FFFFFF;
	border-top		: 3px solid #FFFFFF;	
	margin-left		: 203px;
	min-height		: 500px;
	_height			: 500px;
}

#footer
{
	background-color	             : #A0BED8;
	border-top		: 1px solid #000000;
	border-bottom		: 1px solid #000000;
	color			: #000000;
	font-size			: 10px;
	text-align		: center;
}


Comment je dois faire pour arriver à mettre mon padding de 2px sans que ça pose problème ?

Merci d'avance,
Mathieu
Modifié par mrousse (10 Aug 2006 - 21:41)
Bonjour,

J'ai résolu mon problème. Il était causé par une largeur trop grande de mes div qui provoquait un débordement...

J'ai actuellement ça :
http://cjoint.com/data/ikweBHEMF0_sc3.PNG

Par contre, je voudrais centrer verticalement les deux informations entourées en rouge dans mon div. A priori, il faut utiliser : line-height : <hauteur_du_div>

Mais ça me donne le resultat suivant :
http://cjoint.com/data/ikwh7QuVX4_sc4.PNG

Exemple :

#live_date
{
	border-right		: 1px dotted #000000;
	float			: left;
	height			: 42px;
	line-height		: 42px;
	text-align		: center;
	width			: 186px;
}


Que dois-je faire ?
Pourquoi fait-il ça ?

Merci,
Mathieu
Modifié par mrousse (10 Aug 2006 - 22:16)
Bonjour,

Il me semble que tu abordes plusieurs questions différentes dans ce même sujet, le mieux est que tu ouvres un autre sujet pour la dernière question.
Un problème = un sujet Smiley cligne .

Je ferme celui-ci.
Sujet clos
Aller à