28173 sujets

CSS et mise en forme, CSS3

Bonjour, J'ai décidé de me mettre au balise <div> et donc à CSS.

J'essaie actuellement de mettre un menu à gauche et le bloc principal (qui doivent se trouver côte à côte..)

Pour une raison qui m'est inconnue, le bloc principal se met tjs en dessous du menu de gauche..
Pour voir ce que cela donne http://www.musicann.com/essai.php

Voici le code php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link rel="STYLESHEET" type="text/css" 
            media="all" href="style.css">
</head>

<body>
	<div id="header"align="center">
		<object width="910" height="141" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase=					  "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
					<param name=movie value="images/banniere.swf">
					<param name=quality value=high>
					<param name=loop value=1>
					<param name=wmode value=window>
					<embed src="images/banniere.swf" width="910" height="141" quality=high TYPE=application/x-shockwave-flash wmode=window pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
					</object>
	</div>
	
	<div id="espace"align="center">
	</div>
	
	<div id="menu"align="center" class="tbcouleur">
		<? include ("menuH.php"); ?>
			
		</div>
		
		<div id="espace1"align="center">
		</div>
	
		<div id="dessousmenu" >
	
				<div id="menugauche" class="tbcouleur" align="center">
          			<? include ("MenuVD.php"); ?>
				</div>



				<div id="menuprincipal" align="center" >
					essai <br /> bla <br /> 
					bla<br /> 
					bla<br /> bla<br /> bla
				</div>
	</div>

</body>
</html>



et la feuille de style css
/* CSS Document */
body
{
	background-color:#3C5D8A;
	SCROLLBAR-FACE-COLOR: #095885;
	SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
	SCROLLBAR-SHADOW-COLOR: #000000;
	SCROLLBAR-3DLIGHT-COLOR: #000000;
	SCROLLBAR-ARROW-COLOR:  #C4FFFF;
	SCROLLBAR-TRACK-COLOR: #006699;
	SCROLLBAR-DARKSHADOW-COLOR: #000000;
	
}

.tbcouleur 
{  
	background-color: #3C5D8A
}

div 
{  
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color: #FFFFFF;
	border: 1px solid orange;
}
.texte2
{  
	color: #CCCC00
}

#header
{
	background-color: #3C5D8A;
	width: 100%;
	height :15em;
}

#espace
{
	background-color: #3C5D8A;
	width: 100%;
	height: 2em;
}
#espace1
{
	background-color: #3C5D8A;
	width: 100%;
	height: 2em;
}

#espaceV
{
	background-color: #3C5D8A;
	width: 2em;
	
	padding:inherit;
}

#menu 
{
	background-image:url(images/menu.jpg);
	width: 100%;
	

}
#menu a:active, #menu a:link, #menu a:visited
{
	color: #C4FFFF; 
  	text-decoration: none
}
#menu a:hover
{
	color: #FF0000; 
	text-decoration: none
}


#dessousmenu
{
	background-color: #FFFFFF;
	width:100%;
	height:100%;
}	

#menugauche
{
	background-color: #43699C;

	width : 12%;
	float:left;
	
	
}	

#menugauche a:active, #menugauche a:link, #menugauche a:visited
{
	color: #C4FFFF; 
  	text-decoration: none
}

#menugauche a:hover
{
	color: #FF0000; 
	text-decoration:none;
}

#menuprincipal
{
	background-color: #43699C;
	float:left;
	width : 87%;
	vertical-align:top;
	margin-left:13%;
	
	
}	





J'ai essayer de faire la feuille de méthodologie (j'ai corriger un ou deux probleme que je n'avais aps vu..) mais je ne suis pas arrivé à faire ce que je voulais... Smiley ohwell .

Si quelqu'un a une idée c'est cool

Merci d'avance
Musicann a écrit :
Bonjour, J'ai décidé de me mettre au balise <div> et donc à CSS.

Alors on va commencer par se débarrasser d'une erreur courante : il n'y a aucun rapport direct entre l'élément HTML div (élément de type bloc n'ayant pas de style par défaut si ce n'est le retour à la ligne des éléments de type bloc) et les feuilles de style en cascade.

Les CSS permettent de styler n'importe quel élément HTML, pas uniquement les éléments div. On peut même créer un site complet sans utiliser un seul élément div, et le styler avec des feuilles de style CSS.

On associe généralement l'utilisation des CSS avec l'abandon des mises en page à base de tableaux de mise en forme. Mais on peut très bien utiliser des CSS pour styler des tableaux de mise en forme, là encore il n'y a aucun rapport direct entre les deux. C'est un peu dommage de n'utiliser qu'une partie des CSS et de faire le positionnement des éléments à base de tableaux, mais rien ne l'interdit.
Modifié par mpop (16 Jul 2006 - 02:56)