28172 sujets

CSS et mise en forme, CSS3

Mise en page et Noeud !

Bonjour à tous,

Aujourd'hui c'est un problème de CSS que j'ai.
upload/50375-Capture.PNG
Vous voyez, sur cette image, j'ai mis en valeur mes plus grosses div. Celle qui est en rose me pose problème, j'aimerais qu'elle soit alignée à gauche sur mon bleu.
					/* BODY */
body{/*background dégradé*/background-image:linear-gradient(to right,#38277F,white); border: solid 5px red;}
					
					/* CONTENEUR */
#conteneur{background-color:#fff;width:70%;max-width:1000px;margin:auto;height:auto;border: solid 5px blue;position:relative;}

					/* BANNIERE */
#banniere { /* tout le header */
height:200px;
width: 100%;
margin-bottom: 10px;
background: url(design/logo.png) no-repeat;
border: solid 5px red;
}	

					/* CONTENU */
#contenu_accueil {
border: solid 5px green;
margin-left:220px;
padding: 5px;
margin-right: 0px;
font-family : arial, verdana,tahoma, Times New Roman, Times, serif;
font-size : 12px;
line-height:25px; 
height:auto;
width:auto;
vertical-align:middle;
}

					/* MENU */
#menu {
border: solid 5px pink;
float:left;
position: absolute;
}

Qu'est-ce qu'il faudrait rajouter, modifier ou supprimer dans mon code ?


Maintenant mon deuxième souci est cette div bleue en plein milieu du site.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>
<div id="conteneur">
<div id="menu">
<?php
include 'connexion.php';
    echo '<div class="pagesMenu">' ; 
	
    // Menu accessible à tous
if (isset($_SESSION['droit']) && $_SESSION['droit'] == 1)
{
	$req="Select NumPageFixe as NumPage, NomMenu, NomSSMenu, NomPhpPF , NumOrdreM, NumOrdreSS, visibleAdherents, 'f' as typepage
		  From menu M, ss_menu SS, page_fixe PF
		  Where M.NumMenu=SS.NumMenu and SS.NumMenu=PF.NumMenu and SS.NumSSMenu=PF.NumSSMenu and visibleAdherents is false
		  	union 
		  		Select NumPageLibre as NumPage, NomMenu, NomSSMenu, 'affich_page_libre.php' as NomPhpPF, NumOrdreM, NumOrdreSS, visibleAdherents, 'l' as typepage
		  		From menu M, ss_menu SS, page_libre PL
		  		Where M.NumMenu=SS.NumMenu and SS.NumMenu=PL.NumMenu and SS.NumSSMenu=PL.NumSSMenu and visibleAdherents is false
		  		Order by NumOrdreM asc, NumOrdreSS asc";
}
else {
					$req="Select NumPageFixe as NumPage, NomMenu, NomSSMenu, NomPhpPF , NumOrdreM, NumOrdreSS, visibleAdherents, 'f' as typepage
		  From menu M, ss_menu SS, page_fixe PF
		  Where M.NumMenu=SS.NumMenu and SS.NumMenu=PF.NumMenu and SS.NumSSMenu=PF.NumSSMenu 
		  	union 
		  		Select NumPageLibre as NumPage
				, NomMenu, NomSSMenu, 'affich_page_libre.php' as NomPhpPF, NumOrdreM, NumOrdreSS, visibleAdherents, 'l' as typepage
		  		From menu M, ss_menu SS, page_libre PL
		  		Where M.NumMenu=SS.NumMenu and SS.NumMenu=PL.NumMenu and SS.NumSSMenu=PL.NumSSMenu
		  		Order by NumOrdreM asc, NumOrdreSS asc";
}

	$exec=mysql_query($req);
	$ligne=mysql_fetch_array($exec) ;
	$i = 0;
	while ($ligne)
	{
		echo '<br /><div id="titresMenus">&nbsp;&nbsp;'.$ligne['NomMenu'].'</div>' ;
		echo '<ul>' ;
		$nom=$ligne['NomMenu'];	
			while ($ligne && ($nom==$ligne['NomMenu']))
			{					
				if ($ligne['typepage']=='f')
				{
				echo '<a href="'.$ligne['NomPhpPF'].'" onmouseover="MM_swapImage(\'neutre'.$i.'\',\'\',\'images/curseur_orange.gif\',1)" onmouseout="MM_swapImgRestore()" >
				<img src="images/curseur_neutre.gif" border=0 name="neutre'.$i.'" width="2" height="9" id="neutre'.$i.'" />&nbsp;&nbsp;'.$ligne['NomSSMenu'].'</a><br />';
				}
				else
				{
				echo '<a href="'.$ligne['NomPhpPF'].'?NumPage='.$ligne ['NumPage'].'" onmouseover="MM_swapImage(\'neutre'.$i.'\',\'\',\'images/curseur_orange.gif\',1)" onmouseout="MM_swapImgRestore()">
				<img src="images/curseur_neutre.gif" border=0 name="neutre'.$i.'" width="2" height="9" id="neutre'.$i.'" />&nbsp;&nbsp;'.$ligne['NomSSMenu'].'</a><br />';
				}	
			$i++;
			$ligne=mysql_fetch_array($exec) ;
			}
		echo '</ul>';		
	}	
	echo '<br /><br />';
	echo '<ul><a href="admin.php"><img src="design/admin.png"/> <br><div id="administration">Administration</div></a></ul>';

	echo '</div>' ; /* pages menu */
?>
</div>
</div>

</body>
</html>

Pourquoi cette div s'affiche ici ?

Merci pour toute aide apportée !

Cordialement,
lizeal
Modifié par lizeal (13 Feb 2014 - 14:16)
Salut !

Pour le div rose, enlève son float left. Ensuite met un position: relative sur son parent puis un position: absolute sur ton div rose. Tu n'as plus qu'à le positionner Smiley smile

Pour ton div bleu je ne sais pas désolé
Je pensais qu'il se mettrait tout seul à gauche avec le float : left.
Du coup : 
#menu {
border: solid 5px pink;
position: absolute;
margin-left:-150px;
}


En créant un footer, le footer apparait en bas (normal) mais il apparait aussi dans cette div bleue en plein milieu O_o
Modifié par lizeal (13 Feb 2014 - 12:19)
Normalement, juste "left" fonctionne. Ca déplace ton div vers la droite.


#menu {
border: solid 5px pink;
position: absolute;
left: 150px;
}
Ok ok très bien je vous remercie. Et pour la div bleue ?
Si ça peut vous aider, j'ai utilisé l'inspecteur de mozilla, j'ai sélectionné la div et j'ai fais supprimé le noeud et elle a disparu .. avec le menu ...
Modifié par lizeal (13 Feb 2014 - 13:02)
Sujet clos
Aller à