28218 sujets

CSS et mise en forme, CSS3

Bonjours à tous !

alors voilà mon problème, vous pouvez visualiser le site ici : ***

Enfaite j'aimerai simplement pouvoir déscendre le contenu (Le titre de la rubrique et le contenu, plus le bas de page) sans le menu à gauche. Donc je rejoute dans le css de la <div id="title"> un "margin-top:160px;" et voici le résultat : ***
Smiley decu je vois pas d'où peut venir le problème.

Voici le code quand même :

XHTML

	<!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>Ca Cartonne !</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<link href="style_fr.css" rel="stylesheet" type="text/css"/>
		<meta http-equiv="Content-Language" content="fr" />
	</head>
	<body bgcolor=black>
		<div id="conteneur">
			<div id="menu">
				<img src="images/bp_acceuil_ag.jpg" alt="Acceuil"/>
				<a href="catalogue.html"><img src="images/b_catalogue_ag.jpg" alt="Catalogue"/></a>
				<a href="cours.html"><img src="images/b_cours_ag.jpg" alt="Cours"/></a>
				<a href="evenements.html"><img src="images/b_evenements_ag.jpg" alt="Evènements"/></a>
				<a href="presse.html"><img src="images/b_presse_ag.jpg" alt="Presse"/></a>
				<a href="decoration.html"><img src="images/b_decoration_ag.jpg" alt="Décoration"/></a>
				<a href="partenariat.html"><img src="images/b_partenariat_ag.jpg" alt="Partenariat"/></a>
				<a href="lestaff.html"><img src="images/b_lestaff_ag.jpg" alt="Le staff"/></a>
			</div>			
			<div id="title">
			</div>
			<div id="contenu">
					<img src="images/st_lecarton_presentation.jpg" alt="Présentation"/>
					<p>
					Le mobilier en carton est un artisanat original. Les meubles sont résistants, lavables (ils sont vitrifiés) et écologiques car réalisés avec du carton, pur produit du recyclage.
Le carton est un matériau noble puisqu'il est issu du bois mais bien plus pratique que ce dernier à travailler et manipuler.
Il s'adapte à tous les espaces, se façonne à tous les goûts et est facilement transportable.
					</p>
					<img src="images/DSC00726.jpg" alt="DSC00726.jpg"/><img src="images/DSC00727.jpg" alt="DSC00727.jpg"/><img src="images/DSC00734.jpg" alt="DSC00734"/><img src="images/DSC00735.jpg" alt="DSC00735"/><br/><br/>
					<img src="images/st_lecarton_technique.jpg" alt="Technique"/>
					<p>
						Les meubles en carton sont construits à partir d'un concept inspiré de la fabrication des coques de bateaux (nid d'abeilles) : la structure croisée faite de traverses enchâssées.
Ils peuvent être peints ou recouverts de papier de décoration, sont ensuite enduits de vernis pour parquet qui isole des taches, ne donne pas prise à l'humidité et permet un entretien facile. Tous ces procédés permettent une solidité à long terme.
(Poids supportable : 100 kg au cm2).
On peut aussi les couvrir de différents revêtements (cuir, tissu, etc.).
Une structure est d'abord réalisée en entrecroisant des plaques de carton simple, double et triple cannelure, découpées selon le dessin du meuble. Elle constitue l'ossature portante du meuble, comme l'armature d'un bateau.On l'habille ensuite avec du carton que l'on " roule " sur les formes. Cette technique permet une très grande liberté dans le choix des formes et des matières de revêtement.
					</p>
			</div>
			<div id="baspage">
				<img src="images/barre_direction.jpg" alt="Direction" usemap="#Map"/>
			</div>
		</div>
	<map name="Map"> 
		<area shape="rect" coords="135,0,166,33" href="catalogue.html" alt="Catalogue"/>
		<area shape="rect" coords="280,0,320,24" href=".html" alt=".html"/>
		<area shape="rect" coords="435,0,465,33" href="evenements.html" alt="Evenements"/>
	</map>
	</body>
</html>


CSS

body
{
	padding:0px;
	margin-top:40px;
}

img
{
	border:0px;
}

#conteneur
{
	margin-left:40px;
}

#menu
{
	background-image:url('images/logo.jpg');
	background-repeat:no-repeat;
	width:171px;
	height:336px;
	padding-top:180px;
	line-height:50px;
	font-size:16px;
	float:left;
	/*border:1px solid white;*/
}

#menu a img:hover
{
	padding-left:30px;
	background-image:url('images/cactus_tit.jpg');
}

#title
{
	margin-top:160px;
	margin-left:191px;
	/*border:1px solid white;*/
	background-image:url('images/t_lecarton.jpg');
	background-repeat:no-repeat;
	height:30px;
	width:600px;
}

#contenu
{
	margin-left:191px;
	/*border:1px solid white;*/
	color:white;
	padding-top:30px;
	width:600px;
}

#contenu p
{
	text-indent: 1em ;
	text-align: justify ;
	font-family:verdana, "Times New Roman", serif, sans-serif;
	font-size:12px;
	line-height:20px;
}

#contenu img
{
	padding-right:37px;
}

#baspage
{
	background-image:url('images/barre_direction.jpg');
	background-repeat:no-repeat;
	height:52px;
	width:600px;
	margin-left:191px;
	/*border:1px solid white;*/
}



Merci de vos futurs réponses Smiley cligne
Modifié par GanoX (11 Oct 2005 - 09:29)
Le résultat du margin-top est le fonctionnement normal.

Pour faire ce que tu souhaites sans trop modifier ta structure html, applique plutôt un padding-top à ton #title et positionne ton image de fond en bas ce qui donnerait à rajouter :


padding-top: 160px ;
background-position: left bottom ;
GanoX a écrit :
Bonjours à tous !

alors voilà mon problème, vous pouvez visualiser le site ici : ***

Enfaite j'aimerai simplement pouvoir déscendre le contenu (Le titre de la rubrique et le contenu, plus le bas de page) sans le menu à gauche. Donc je rejoute dans le css de la <div id="title"> un "margin-top:160px;" et voici le résultat : ***
Smiley decu je vois pas d'où peut venir le problème.

Voici le code quand même :

XHTML

	<!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>Ca Cartonne !</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<link href="style_fr.css" rel="stylesheet" type="text/css"/>
		<meta http-equiv="Content-Language" content="fr" />
	</head>
	<body bgcolor=black>
		<div id="conteneur">
			<div id="menu">
				<img src="images/bp_acceuil_ag.jpg" alt="Acceuil"/>
				<a href="catalogue.html"><img src="images/b_catalogue_ag.jpg" alt="Catalogue"/></a>
				<a href="cours.html"><img src="images/b_cours_ag.jpg" alt="Cours"/></a>
				<a href="evenements.html"><img src="images/b_evenements_ag.jpg" alt="Evènements"/></a>
				<a href="presse.html"><img src="images/b_presse_ag.jpg" alt="Presse"/></a>
				<a href="decoration.html"><img src="images/b_decoration_ag.jpg" alt="Décoration"/></a>
				<a href="partenariat.html"><img src="images/b_partenariat_ag.jpg" alt="Partenariat"/></a>
				<a href="lestaff.html"><img src="images/b_lestaff_ag.jpg" alt="Le staff"/></a>
			</div>			
			<div id="title">
			</div>
			<div id="contenu">
					<img src="images/st_lecarton_presentation.jpg" alt="Présentation"/>
					<p>
					Le mobilier en carton est un artisanat original. Les meubles sont résistants, lavables (ils sont vitrifiés) et écologiques car réalisés avec du carton, pur produit du recyclage.
Le carton est un matériau noble puisqu'il est issu du bois mais bien plus pratique que ce dernier à travailler et manipuler.
Il s'adapte à tous les espaces, se façonne à tous les goûts et est facilement transportable.
					</p>
					<img src="images/DSC00726.jpg" alt="DSC00726.jpg"/><img src="images/DSC00727.jpg" alt="DSC00727.jpg"/><img src="images/DSC00734.jpg" alt="DSC00734"/><img src="images/DSC00735.jpg" alt="DSC00735"/><br/><br/>
					<img src="images/st_lecarton_technique.jpg" alt="Technique"/>
					<p>
						Les meubles en carton sont construits à partir d'un concept inspiré de la fabrication des coques de bateaux (nid d'abeilles) : la structure croisée faite de traverses enchâssées.
Ils peuvent être peints ou recouverts de papier de décoration, sont ensuite enduits de vernis pour parquet qui isole des taches, ne donne pas prise à l'humidité et permet un entretien facile. Tous ces procédés permettent une solidité à long terme.
(Poids supportable : 100 kg au cm2).
On peut aussi les couvrir de différents revêtements (cuir, tissu, etc.).
Une structure est d'abord réalisée en entrecroisant des plaques de carton simple, double et triple cannelure, découpées selon le dessin du meuble. Elle constitue l'ossature portante du meuble, comme l'armature d'un bateau.On l'habille ensuite avec du carton que l'on " roule " sur les formes. Cette technique permet une très grande liberté dans le choix des formes et des matières de revêtement.
					</p>
			</div>
			<div id="baspage">
				<img src="images/barre_direction.jpg" alt="Direction" usemap="#Map"/>
			</div>
		</div>
	<map name="Map"> 
		<area shape="rect" coords="135,0,166,33" href="catalogue.html" alt="Catalogue"/>
		<area shape="rect" coords="280,0,320,24" href=".html" alt=".html"/>
		<area shape="rect" coords="435,0,465,33" href="evenements.html" alt="Evenements"/>
	</map>
	</body>
</html>


CSS

body
{
	padding:0px;
	margin-top:40px;
}

img
{
	border:0px;
}

#conteneur
{
	margin-left:40px;
}

#menu
{
	background-image:url('images/logo.jpg');
	background-repeat:no-repeat;
	width:171px;
	height:336px;
	padding-top:180px;
	line-height:50px;
	font-size:16px;
	float:left;
	/*border:1px solid white;*/
}

#menu a img:hover
{
	padding-left:30px;
	background-image:url('images/cactus_tit.jpg');
}

#title
{
	margin-top:160px;
	margin-left:191px;
	/*border:1px solid white;*/
	background-image:url('images/t_lecarton.jpg');
	background-repeat:no-repeat;
	height:30px;
	width:600px;
}

#contenu
{
	margin-left:191px;
	/*border:1px solid white;*/
	color:white;
	padding-top:30px;
	width:600px;
}

#contenu p
{
	text-indent: 1em ;
	text-align: justify ;
	font-family:verdana, "Times New Roman", serif, sans-serif;
	font-size:12px;
	line-height:20px;
}

#contenu img
{
	padding-right:37px;
}

#baspage
{
	background-image:url('images/barre_direction.jpg');
	background-repeat:no-repeat;
	height:52px;
	width:600px;
	margin-left:191px;
	/*border:1px solid white;*/
}



Merci de vos futurs réponses Smiley cligne