Sujet Précédent Sujet Suivant

Problème d'aligement

Résolu/Fermé
Utilisateur anonyme - 25 mars 2011 à 18:48
 Utilisateur anonyme - 27 mars 2011 à 20:41
Bonjour,

Je dois faire un site web comme projet personnel et j'ai un souçis. Je veux coller deux <div> ensemble mais je n'y arrive pas. Comment faire ?

Voici mes codes:
La page où je veux faire le collage. 
<?php session_start(); ?>
<!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">
	<!-- En-tête -->
	<head>
		<title>Modern-Warfare2.net</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="../includes/inc.design.css" />
		<link rel="icon" type="image/png" href="../images/modern_warfare_2_icone.png" />
		<?php include("../includes/inc.js_head.php"); include("../includes/inc.connexion_bdd.php"); ?>
	</head>
	<!-- Corps -->
	<body>
		
		<div id="tete">
		
			<div id="inscription">
		
				<a href="../formulaires/form_inscription.php"><img src="../images/bouton_inscription.png" alt="Inscription" /></a><br />
				<a href="../formulaires/form_connexion.php"><img src="../images/bouton_connexion.png" alt="Connexion" /></a>
				
			</div>
		
			<?php include("../includes/inc.header.php"); ?>
			
		</div>
		
		<div id="menu">
			
			<?php include("../includes/inc.menu.php"); ?>
			
		</div>
		
		<div id="menu_video" >
		
			<?php

				$reponse = $bdd->query('SELECT * FROM tb_sk_videos ORDER BY id_video');

				while ($donnees = $reponse->fetch())
				{
			?>
		
					<a href="#episode<?php echo $donnees['titre_video']; ?>" ><img src="../images/swisskiller/episode_<?php echo $donnees['titre_video']; ?>.png" /></a><br />
				
			<?php
			
				}
				
			?>
			
		</div>
		
		<div id="video">
		
			<h2>Chaine SwissKiller</h2>
			
			<?php

				$reponse = $bdd->query('SELECT * FROM tb_sk_videos ORDER BY id_video');

				while ($donnees = $reponse->fetch())
				{
			?>
				
				<div style="display:inline-block;">
					<script type="text/javascript" src="../includes/inc.js_video.js" ></script>
					<h3 id="episode<?php echo $donnees['titre_video']; ?>" >Episode <?php echo $donnees['titre_video']; ?></h3>
					<div id="lecteur_<?php echo $donnees['id_video']; ?>" style="display:inline-block;">
					</div>
					<script type="text/javascript">
						//<!--
						var flashvars_<?php echo $donnees['id_video']; ?> = {};
						var params_<?php echo $donnees['id_video']; ?> = 
						{
							quality: "high",
							bgcolor: "#000000",
							allowScriptAccess: "always",
							allowFullScreen: "true",
							wmode: "transparent",				flashvars: "fichier=../team_sk/videos/<?php echo $donnees['lien_video']; ?>&apercu=../team_sk/videos/<?php echo $donnees['image_video']; ?>"
						};
						var attributes_<?php echo $donnees['id_video']; ?> = {};
						flashObject("../includes/player_videos.swf", "lecteur_<?php echo $donnees['id_video']; ?>", "740", "", "8", false, flashvars_<?php echo $donnees['id_video']; ?>, params_<?php echo $donnees['id_video']; ?>, attributes_<?php echo $donnees['id_video']; ?>);
						//-->
					</script>
				</div>
			<?php
				}
				$reponse->closeCursor();
			?>
				
		</div>
		
		<div id="pied">
			
			<?php include("../includes/inc.footer.php"); ?>
			
		</div>
		
	</body>
</html>


Et le CSS 
body /* tout le corps de chaque page */
{
	background-image: url("../images/fond_site.png"); /* image de fond */
	background-repeat: repeat-x ; /* répéter l'image horizontalement */
	color: #EFEFEF; /* le texte est gris */
}

#tete /* style du header */
{
	padding: 20px; /* marge intérieure */
	width: 800px; /* largeur */
	margin: 0 auto 0 auto; /* marge automatique des deux cotés */
	margin-top: 20px; /* marge de 20 px au entre l'element au-dessus */
	background-color: #000000; /* couleur de fond */
}



/* ************ menu *********** */
#menu, #menu ul /* Liste */     
{
	padding : 0; /* marge intérieure */
	margin : 0; /* marge extérieure */
	list-style : none; /* supprime le style */
	line-height : 20px; /* hauteur de chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu  /* Ensemble du menu */
{
	overflow:hidden; /*pour corriger le bug IE 6.0 au niveau du menu*/
	display: block; /* créer un block */
	margin: 0 auto; /* marge automatique */
	width: 1290px; /* largeur */
	max-height: 55px; /* hauteur max */
	background-color: #000000; /* couleur de fond */
}

#menu a /* Contenu des listes */
{
	display : block; /* balises de type block */
	background : #000000; /* couleur de fond */        
	color : #EFEFEF; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
}

#menu li /* Elements des listes */      
{ 
	float: left; /* flotement à gauche */
}

#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolue */
	left: -999em; /* décale une partie pour pas qu'on la voie */
}

#menu li ul ul  /* sous-sous-liste */
{
	margin: -84px 0 0 225px ; /* décale les sous-sous-listes */    
}

#menu img /* images du menu */
{
	border: none; /* bordures des images */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* config pour le menu déroulant */
{
	left: auto; /* repositionnement normal */
	min-height: 0; /* corrige un bug sous IE */
}

ul ul {display: none;} /* config pour le menu déroulant */
li:hover ul.niveau2, li li:hover ul.niveau3 {display:block;} /* ordre de deroulement */

.niveau2 /* id de niveau 2 */
{
	display: block; /* change comportement des balises */
	margin-right: 100px; /* marge de droite */
	width: 150px; /* largeur */
}
.niveau3  /* id de niveau 3 */
{
	margin-right: 100px; /* marge de droite */
	width: 150px; /* largeur */
}

#menu_video  /* menu dans la page video de la team sk */
{
	background: #000000; /* couleur de font */
	text-align: center; /* alignement */
	position: fixed; /* le div descend avec le scroll */
	border: 2px double #EFEFEF; /* bordure/type de bordure/couleur */
}
/* ************ menu ************ */



#corps /* style du corps */
{	
	padding: 20px; /* marge intérieure */
	width: 807px; /* largeur */
	margin: 0 auto 0 auto; /* marge automatique des deux cotés */
	margin-top: 5px; /* marge de 5px entre l'element au-dessus */
	background-color: #000000; /* couleur de fond */
	text-align: justify; /* le texte prends toute la place */
	min-height: 470px; /* hauteur minimum */
}

#corps_2 /* style de l'index */
{	
	padding: 20px; /* marge intérieure */
	width: 807px; /* largeur */
	margin: 0 auto 0 auto; /* marge automatique des deux cotés */
	margin-top: 5px; /* marge de 5px entre l'element au-dessus */
	background-color: #000000; /* couleur de fond */
	text-align: justify; /* le texte prends toute la place */
	min-height: 500px; /* hauteur minimum */
}

#index /* style de l'index */
{	
	padding: 20px; /* marge intérieure */
	width: 807px; /* largeur */
	margin: 0 auto 0 auto; /* marge automatique des deux cotés */
	margin-top: 5px; /* marge de 5px entre l'element au-dessus */
	background-color: #000000; /* couleur de fond */
	text-align: justify; /* le texte prends toute la place */
	min-height: 500px; /* hauteur minimum */
}

#pied  /*style du footer */
{	
	padding: 20px; /* marge intérieure */
	width: 807px; /* largeur */
	margin: 0 auto 0 auto; /* marge automatique des deux cotés */
	margin-top: 5px; /* marge de 5px entre l'element au-dessus */
	background-color: #000000; /* couleur de fond */
	text-align: center; /* le texte est centré */
}

#video /* corps de la page video de sk */
{
	padding: 20px; /* marge intérieure */
	width: 807px; /* largeur */
	margin: 0 auto 0 auto; /* marge automatique des deux cotés */
	margin-top: 5px; /* marge de 5px entre l'element au-dessus */
	background-color: #000000; /* couleur de fond */
	text-align: center; /* le texte prends toute la place */
}

#erreur /* conf pour le msg d'erreur */
{
	color: #FE0101; /* couleur */
}

/* ************ correctifs ************ */

#inscription img /* proprieté images */ 
{
	border: none; /* pas de bordures */
}

#inscription /* proprieté image */
{
	float: right; /* flotemment à droit */
	margin-right:-200px; /* marge de droite */
}


/* ************ lien *********** */
a:link 
{
    color: #1DFE52; /* couleur du lien */
    text-decoration: none; /* aucun souligement */
}
a:visited 
{
    color: #1DFE52; /* lien visités */
    text-decoration: none; /* aucun souligement */
}
a:hover 
{
    color: #012BFE; /* au survole */
    text-decoration: none; /* aucun souligement */
}

a:active 
{
    color: #000000; /* clique sur le lien */
    text-decoration: none; /* aucun souligement */
}
/* ************ lien *********** */



/* ************ correctifs ************ */





4 réponses

Réponse 1 / 4
Thordendall Messages postés 2453 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 3 mars 2024 752
25 mars 2011 à 20:04
Bonjour,
Quelle sont les div que tu souhaite coller ensembles!?
0
Réponse 2 / 4
Utilisateur anonyme
26 mars 2011 à 19:41
C'est les div "video" et "menu_video"
0
Réponse 3 / 4
Thordendall Messages postés 2453 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 3 mars 2024 752
27 mars 2011 à 16:57
Ok, alors ce qu'il faut que tu essaye de jouer avec le flottement des div pour qu'elles se collent ensemble... j'ai essayé de visualiser ton schéma de div sous Dreamweaver mais c'est pas évident, tes div sont super longues... et comme j'ai pas les images ça rend sûrement pas comme chez toi.

Mais essaye de faire flotter la div menu vidéo à gauche et d'inverser l'ordre dans le code...

Cordialement!
0
Réponse 4 / 4
Utilisateur anonyme
27 mars 2011 à 20:41
Merci beaucoup ça marche !!! :) C'est vraiment cool !

Salutations

ST3F4N0
0