28220 sujets

CSS et mise en forme, CSS3

Background et centrer design

Bonjour à tous et à toute Smiley cligne

Problème 1
Alors voilà, tout à bord je voudrai bien centrer mon design.
Comme il est expliqué sur plusieurs sites, pour centrer un design il suffit de faire un "margin:auto;" et de précisé la largeur à l'aide de "witdh:???px;"
Mais chez moi le design ne veut pas se centrer. J'ai même essayé cette technique expliqué ici : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Sans succès... Smiley decu

Problème 2
Mon deuxième problème est que j'ai 2 menus à gauche de mon design.
Deux headers menu avec un "background-image:url('???');" et deux contenus menu avec un "background-color:???;"
Mais le problème c'est que aucun des quatres ne s'affiche... À moins que je fasse un "border:1px solid black;"

Voici mon code XHTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=fr dir=ltr xml:lang="fr" 
xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Classe Media</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#C6C6C6">
	<div id="logo">
		
	</div>
	<!--INSERTION DU HEADER AVEC LE USEMAP, VOIR TOUT EN BAS-->
	<div id="header"> 
		<img src="images/design/top_nav_news.jpg" width="425" height="71" usemap="#Map" border="0">
	</div>
	<!--DEBUT MENU GAUCHE-->
	<div id="menu_gauche">
		<div id="menu_menu_head">
			<div id="under_head_blue"
				<div id="menu_menu">
						<a href="index.htm">News</a><br/>
						<a href="photos.htm">Photos</a><br/>
				</div>
			</div>
		</div>

		<div id="menu_communaute_head">
			<div id="menu_communaute">
					<a href="forum.htm">Forum</a><br/>
					<a href="chat.fake">Chat</a><br/>
			</div>	
		</div>
	</div>
	<!--FIN MENU GAUCHE-->
	<!--DEBUT MENU DROIT
	<div id="menu_droit">
		<div id="menu_random_head">
			<div id="menu_random">
			
			</div>
		</div>
		<div id="menu_pubs_head">
			<div id="menu_pubs">
				
			</div>
		</div>
	</div>
	FIN MENU DROIT-->
	<div id="contenu">
      <img src="images/under_construction.jpg" alt="En Construction" width="96" height="96">      
	  	<h5>
			Bienvenue les zoulous !<br/>
		</h5>
		<p>
			Le site est en construction, mais je suis sûr que vous êtes assé perspicace
			pour le deviner tout seul !<br/>
			Bonne visite !
		</p>
</div>
	<!--LE USEMAP DU HEADER-->
	<map name="Map"> 
  		<area shape="rect" coords="100,52,157,70" href="photos.htm">
  		<area shape="rect" coords="186,52,244,70" href="forum.php">
  		<area shape="rect" coords="271,52,325,70" href="pubs.htm">
  		<area shape="rect" coords="358,52,410,70" href="contact.htm">
	</map>
</body>
</html>


Et mon CSS :

/* CSS Document */



body
{
	witdh:760px;
	margin:auto;
	margin-bottom:20px;
	text-decoration:none;
}

a
{
	padding-left:20px;
	text-decoration:none;
	font-family:verdana;
	color:white;
}

a:visited
{
	font-size:14px;
}

a:link
{
	font-family: verdana;
	font-size:14px;
}

a:hover
{
	/*background-color:#330066;*/
	font-size:16px;
	color:#CCCCCC;
	font-family: verdana;
	background-image: url("images/ssuperman.gif");
	background-repeat: no-repeat;
	background-position: left center;
}

img
{
	border:0px;
}


/*<<< DESIGN >>>*/
#header
{
	margin-bottom:10px;
}

#logo
{
	background-image:url("images/design/logo.jpg");
	background-repeat:no-repeat;
	width:335px;
	height:71px;
	float:left;
	margin-bottom:10px;
}

/*DEBUT MENU GAUCHE*/
#menu_gauche
{
	float:left;
	text-decoration:none;
	color:#FFFFFF;
}

/*MENU PRINCIPAL AVEC LE HEADER DU MENU*/
#menu_menu_head
{
	background:url('images/design/white_heading_menu.jpg');
	background-repeat:no-repeat;
	width:168px;
	heigh:21px;
	border:1px solid black;
}
#menu_menu
{
	witdh:168px;
	height:80px;
	background-color:#333366;
	margin-top:21px;
	text-align:center;
	padding-top:8px;
}

/*MENU COMMUNAUTE AVEC LE HEADER DU MENU*/
#menu_communaute_head
{
	background-image:url("images/design/white_heading_communaute.jpg");
	background-repeat:no-repeat;
	width:168px;
	heigh:21px;
	border:1px solid black;
}
#menu_communaute
{
	witdh:168px;
	height:50px;
	background-color:#333366;
	margin-top:21px;
	text-align:center;
	padding-top:8px;
}
/*FIN MENU GAUCHE*/


/*DEBUT MENU DROIT*/

#menu_droit
{
	float:left;
	font-style:oblique;
	margin-left:437px;
}

/*MENU RANDOM AVEC LE HEADER DU MENU*/
#menu_random_head
{
	background-image:url("images/design/blue_heading_random.jpg");
	background-repeat:no-repeat;
	width:151px;
	heigh:auto;
	border:1px solid black;
}
#menu_random
{
	width:151px;
	height:80px;
	background-color:#FFFFFF;
	margin-top:21px;
	text-align:center;
}

/*MENU PUBS AVEC LE HEADER DU MENU*/
#menu_pubs_head
{
	background-image:url("images/design/blue_heading_pubs.jpg");
	background-repeat:no-repeat;
	width:151px;
	heigh:auto;
	border:1px solid black;
}
#menu_pubs
{
	width:151px;
	height:160px;
	background-color:#FFFFFF;
	margin-top:21px;
	text-align:center;
}

#menu_pubs img
{
	padding-top:30px;
}
/*FIN MENU DROIT*/

/*CONTENU CENTRAL*/
#contenu
{
	background-color:#FFFFFF;
	margin-left:180px;
	width:386px;
	height:auto;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:5px;
	padding-top:10px;
	text-align:center;
}


Merci d'avance, a+ Smiley cligne
Modifié par GanoX (19 Sep 2005 - 10:20)
Administrateur
Salut et bienvenue ici Smiley smile

GanoX a écrit :
J'ai même essayé cette technique expliqué ici : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Sans succès... Smiley decu

En fait, en regardant ton code, je ne vois pas du tout où tu as essayé d'appliquer ce que disait le tutoriel Smiley ohwell
- Tu n'as pas de conteneur global (par contre pour le reste tu as de multiples imbrications inutiles de div)
- les blocs n'ont pas de marges auto
- le body n'a pas de text-align center pour éviter le bug IE

Bref, en quoi as-tu suivi le tuto ?
Donne-nous des pistes si tu veux qu'on te dépanne Smiley cligne

PS : un exemple en ligne sera bien plus pratique.

PS2 : en relisant le code je me dis que c'est vraiment très lourd pour pas grand chose : tu imbriques quatre <div> pour deux pauvres liens !
N'as-tu pas une solution plus simple ?
Modifié par Raphael (19 Sep 2005 - 11:03)
Bas pour le "#global" c'est body non ? Ce n'est pas la même chose ?
Pour le bug IE tu "text-align:center" je ne vois pas de quoi parle Smiley confused
Et le div. inutile je ne vois pas de quoi tu parles. Je suis un débutant qui fait son premier site avec du XHTML/CSS, donc si je peux corriger mon code faite moi des remarques intélligente Smiley ravi Smiley cligne

Et surtout merci pour le message de bienvenue Smiley smile
Bonjour,

width au lieu de witdh facilitera le centrage.

En cas de problème avec CSS, toujours commencer par vérifier la validité de celle-ci. Le validateur aurait immédiatement signalé cette erreur....

sinon, petit défaut du centrage direct de <body> : pas de contournement pour centrer dans IE5.x. Voir le tutoriel de Raphaël sur le centrage, ou celui d'Openweb, ou autre.
Modifié par Laurent Denis (19 Sep 2005 - 15:28)
Sujet clos
Aller à