[HTML/CSS] Contenu décalé : le replacer

Visiteur -  
Bonjour,

Je vous donne tout de site un lien pour un screen de mon problème, ce sera plus simple à comprendre qu'un long texte...

http://img835.imageshack.us/img835/6852/enlever.jpg

Voici mon code HTML : 
<!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>
<title>Think with us sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF" style="leftmargin=0px; topmargin=0px; marginwidth= 0px; marginheight=0px;">
<!-- Save for Web Slices (Think with us sliced.psd) -->
<table style="width= 1000px; height= 1396px;" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
		<td colspan="2" rowspan="6">
			<img src="images/index_01.jpg" width="26" height="1031" alt="" /></td>
		<td colspan="3"><div id="logo"><a href="index.html">WE THINK!</a><br />
	    <span class="slogan">SO THINK WITH US</span></div></td>
<td colspan="2">
			<img src="images/index_03.jpg" width="92" height="117" alt="" /></td>
		<td><div class="menu">
        <ul>
        <li><a href="index.html">HOME</a></li>
        </ul>
		</div></td>
<td colspan="3">
			<div class="menu">
        <ul>
        <li><a href="index.html">ABOUT US</a></li>
        </ul>
		</div></td>
		<td colspan="2">
			<div class="menu">
        <ul>
        <li><a href="index.html">SERVICES</a></li>
        </ul>
		</div></td>
		<td>
			<div class="menu">
        <ul>
        <li><a href="index.html">CONTACT</a></li>
        </ul>
		</div></td>
		<td rowspan="8">
			<img src="images/index_08.jpg" width="35" height="1395" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/index_09.jpg" width="1" height="389" alt="" /></td>
		<td rowspan="3"><div id="header_left">
        <div class="header_left_first">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
        <div class="read_more_button">
        <a href="index.html">READ MORE</a>        </div>
        </div></div></td>
  <td colspan="8" rowspan="3">
			<img src="images/index_11.jpg" width="539" height="347" alt="" /></td>
		<td colspan="2"><div class="header_right">
        <div class="header_right_first">
        WE THINK<br />
		SMART        </div></div></td>
  </tr>
	<tr>
		<td colspan="2">
		<div class="header_right"><div class="header_right_first">
        WE THINK<br />
		TOGETHER
        </div>
		</div></td>
	</tr>
	<tr>
		<td colspan="2">
			<div class="header_right_bottom"><div class="header_right_first">
        WE THINK<br />
		EFFICIENT
        </div>
		</div></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/index_15.jpg" width="938" height="42" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7"><div class="content_center">
        <div class=" content_titel">WELCOME</div>
       <div class=" content_text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<div class=" read_more_button"><a href=" index.html">READ MORE</a></div>
        </div></td>
<td colspan="5"><div class="content_rightcenter">
<div class=" content_titel">NEWS AND EVENTS</div>
<div class=" content_text2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<div class=" read_more_button"><a href=" index.html">READ MORE</a></div>
</div></td>
	</tr>
	<tr>
		<td colspan="13"><div id="footer">
		  <div align="center" class="style2 style3">
		    <p>Copyright 2010 &quot;YOUR SITE&quot;. DESIGN BY <a href="http://www6.barokstoelen.com/?tdfs=1&searchbox=1&showDomain=1" title="Kinderstoelen">Kinderstoelen</a>.</p>
		    <p><br />
	          </p>
              
              
              
              
              
              
		    <div  class="style5"><a href="http://www6.barokstoelen.com/?tdfs=1&searchbox=1&showDomain=1">Kinderstoelen</a></div>
            </div>
		</div></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="25" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="235" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="44" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="40" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="52" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="142" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="71" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="46" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="24" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="120" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="142" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="35" height="1" alt="" /></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="https://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>


Voici mon code CSS : 
#logo {
	background-image: url(images/index_02.jpg);
	height: 117px;
	width: 280px;
	font-size:40px;
	font-weight:bold;
	font-family:"century Gothic";
	text-align:left;
	line-height: 1.5;
}
#logo a{
color:#000000;
text-decoration:none;
}
a{
	color: #666666;
	text-decoration:none;
}
a:hover{
	color: #666666;
	text-decoration:underline;
}
.menu {
	background-image: url(images/index_04.jpg);
	height: 117px;
	width: 142px;
	font-family: "century gothic";
	font-size: 20px;
	font-weight:normal;
	color: #353535;
	text-decoration: none;
	text-align: center;
	text-align: left;
}
.menu ul {
	margin: 0;
	list-style: none;
	padding-left: 0px;
}

.menu li {
	display: inline;
}

.menu a {
	font-family: "century gothic";
	font-size: 20px;
	font-weight:normal;
	color: #353535;
	text-decoration: none;
	text-align: center;
	background-image: url(images/index_04.jpg);
	height: 57px;
	width: 142px;
	float: left;
	padding-top: 60px;
}
.menu a:hover {
	text-decoration: none;
	background:url(images/index_04_hover.jpg);
	width: 142px;
	height: 57px;
	background-repeat: none;
}
.slogan{
	font-weight: bold;
	font-size: 20px;
	line-height: 0.3;
	padding-left: 5px;
}
.header_right {
	font-family: "century Gothic";
	font-size: 20px;
	color: #FFFFFF;
	background-image: url(images/index_12.jpg);
	background-position: center;
	background-repeat:none;
	height: 117px;
	width: 164px;
	text-align: center;
}
.header_right_bottom {
	font-family: "century Gothic";
	font-size: 20px;
	color: #FFFFFF;
	background-image: url(images/index_14.jpg);
	background-position: center;
	background-repeat:none;
	height: 113px;
	width: 164px;
	text-align: center;
}
#header_left {
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	background-image: url(images/index_10.jpg);
	height: 347px;
	width: 235px;
}

.header_right_first {
	font-family: "century Gothic";
	font-size: 20px;
	color: #FFFFFF;
	text-align: center;
	padding-top: 30px;
	font-weight: bold;
}
.header_left_first {
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	text-align: left;
	font-weight: normal;
	padding-top: 20px;
	width: 225px;
	padding-left: 5px;
}
.read_more_button{
	background:url(images/read_more.png);
	width:100px;
	height: 34px;
	background-repeat: none;
	font-family:"century Gothic";
	font-size:12px;
	color: #000000;
	text-align: center;
	margin-top: 20px;
	line-height: 2.3;
}
.content_rightcenter {
	background-image: url(images/index_17.jpg);
	height: 525px;
	width: 354px;
}

.read_more_button a{
	font-family:"century Gothic";
	font-size:12px;
	color: #000000;
	text-align: center;
	text-decoration: none;
	line-height: 2.3;
}
.content_center {
	font-family: "century Gothic";
	font-size: 14px;
	color: #000000;
	background-image: url(images/index_16.jpg);
	height: 525px;
	width: 585px;
}
.content_titel {
	font-family: "century Gothic";
	font-size: 25px;
	color: #9b7f67;
	padding-top: 10px;
}
.content_text {
	font-family: "century Gothic";
	font-size: 14px;
	color: #000000;
	padding-top: 5px;
	width: 550px;
}
.content_text2 {
	font-family: "century Gothic";
	font-size: 14px;
	color: #000000;
	padding-top: 5px;
	width: 350px;
}
#bottom_left {
	background-image: url(images/index_19.jpg);
	height: 266px;
	width: 321px;
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
}
#bottom_right {
	background-image: url(images/index_21.jpg);
	height: 266px;
	width: 308px;
}
#bottom_center {
	background-image: url(images/index_20.jpg);
	height: 266px;
	width: 311px;
}

.read_more_button a:hover{
	text-decoration: none;
	color:#663300
}
.content_bottom {
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	padding-top: 10px;
	padding-left: 10px;
}
.style1 {font-size: 25px}
.style2 {
	font-family: "century Gothic";
	font-size: 12px;
	color: #695F56;
	padding-top: 20px;
	font-weight: bold;
}
.style5 {
	font-size: 10px;
	color: #FFFFE5;
}
.style5 a {
	text-decoration: none;
	color: #FFFFE5;
}
#footer {
	background-image: url(images/index_22.jpg);
	height: 98px;
	width: 940px;
}
.style3 {color: #423C35}


Merci d'avance.

30 réponses

  • Votes
  • Date
  • Date décroissante
Résumé de la discussion

Problème d'affichage et de mise en page d'un site markup mêlant XHTML 1.0 Transitional et tableaux/slices, avec un grand tableau servant de squelette et des images comme fonds. Plusieurs éléments, comme le menu, le bloc logo et les sections contenu et actualités, reposent sur des images de fond, des divs et des règles CSS, ce qui peut compliquer le rendu sous navigateurs modernes. Des éléments CSS utilisent des images comme arrière-plan et des largeurs fixes, ce qui peut limiter la réactivité et rendre l'alignement des colonnes délicat sur différents écrans.

Bobot (l’IA à votre service)
  3. olivierrobins
    Il faut dans ce cas ajouter une 2e classe à chaque div de menu (simplement en mettant un espace entre deux, par exemple class="menu home" pour le premier, etc). Et ensuite spécifier dans le CSS une position pour chacune des classes ainsi créées.
    1. Visiteur
      Salut, merci, ça permet de bouger la position et c'est parfait, seulement j'aimerais appliquer une background-position différente à chaque titre du menu, est-ce possible?
      2. olivierrobins
        c'est index_04.jpg l'image d'arrière-plan des boutons du menu? Si oui, essaye en bidouillant la position du background en rajoutant et modifiant ça au niveau du .menu:

        background-position:0px 0px;

        et si ça change quelque chose, mais que c'est du coup aligné tout à gauche des boutons, alors essayer avec un truc du style

        background-position:center top;
        1. Visiteur
          Code HTML : 
          <!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>
<title>Think with us sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF" style="leftmargin=0px; topmargin=0px; marginwidth= 0px; marginheight=0px;">



<!-- structure sans tableaux -->
<div id="cadre">
	<div id="entete">
		<ul id="navmenu">
			<div class="menu"><li><a href="index.html">Home</a></li></div>
			<div class="menu"><li><a href="about.html">About</a></li></div>
			<div class="menu"><li><a href="contact.html">Contact</a></li></div>
			</ul>
	</div>
	<div id="menu_drapeaux">

		<div id="md_col_gauche">
			<p>
			Slogan
			</p>

		</div>
		<div id="md_bande_transparente_gauche">&nbsp;
		</div>
		<div id="md_illu_centrale">&nbsp;

		</div>
		<div id="md_col_droite">
			<div class="cadre_bouton_drapeau">
				<div class="pre_bouton_drapeau">
				</div>
				<div class="bouton_drapeau">SMART
				</div>
			</div>
			<div class="cadre_bouton_drapeau">

				<div class="pre_bouton_drapeau">
				</div>
				<div class="bouton_drapeau">TOGETHER
				</div>
			</div>
			<div class="cadre_bouton_drapeau">
				<div class="pre_bouton_drapeau">
				</div>
				<div class="bouton_drapeau">EFFICIENT
				</div>

			</div>
		</div>
	</div>
	<div id="contenu">
		<div id="col_gauche">
			<h2>WELCOME</h2>
			<p>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
			</p>			
		</div>

		<div id="col_droite">
			<h2>NEWS AND EVENTS</h2>
			<p>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
			</p>
		</div>
	</div>
	<div id="pieddepage">
	</div>

</div>

<!-- fin structure sans tableaux -->



</body>
</html>


          Code CSS : 
          *{
	padding:0px;
}

img{
	border:none;
	outline:none;
}

a{
	text-decoration:none;
}

div#cadre{
	width:800px;
	margin-left:auto;
	margin-right:auto;
}
div#entete{
	width:100%;
	height:100px;
	padding-left:350px;
	background-image:url('logo.jpg');
	background-repeat:no-repeat;
	background-position:10px 5px;
}
ul#navmenu{
	display:inline;
}
ul#navmenu li{
	float:left;
	text-align:center;
	list-style-type:none;
	margin-left:20px;
	margin-right:20px;
}
div#menu_drapeaux{
	position:relative;
	height:291px;
}
div#md_col_gauche{
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	height:291px;
	background-color:#5776b6;
	font-size:40px;
}
div#readmore{
	clear:left;
}
div#md_bande_transparente_gauche{
	height:291px;
	position:absolute;
	top:0px;
	left:200px;
	width:40px;
	background-color:#5776b6;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	z-index:100;
}
div#md_illu_centrale{
	position:absolute;
	top:0px;
	left:200px;
	background-image:url('illucentre.jpg');
	background-repeat:no-repeat;
	width:460px;
	height:291px;
}
div#md_col_droite{
	position:absolute;
	top:0px;
	left:620px;
}
div#md_col_droite .cadre_bouton_drapeau{
	
}
div#md_col_droite .cadre_bouton_drapeau .pre_bouton_drapeau{
	float:left;
	width:40px;
	height:97px;
	background-image:url('degradegris.gif');
	background-repeat:repeat-x;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	z-index:100;
}
div#md_col_droite .cadre_bouton_drapeau .bouton_drapeau{
	float:left;
	width:130px;
	height:97px;
	background-image:url('degradegris.gif');
	background-repeat:repeat-x;
	border-left:1px solid #ffffff;
}
div#contenu{
	width:800px;
}

div#contenu h2{

}
div#contenu p{

}
div#col_gauche{
	float:left;
	width:55%;
	padding-right:5%;
}
div#col_droite{
	float:left;
	width:40%;
	
}
div#pieddepage{
	clear:left;
}



















filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;

#logo {
	background-image: url(images/index_02.jpg);
	height: 117px;
	width: 280px;
	font-size:40px;
	font-weight:bold;
	font-family:"century Gothic";
	text-align:left;
	line-height: 1.5;
}
#logo a{
color:#000000;
text-decoration:none;
}
a{
	color: #666666;
	text-decoration:none;
}
a:hover{
	color: #666666;
	text-decoration:underline;
}
.menu {
	background-image: url(index_04.jpg);
	font-family: "century gothic";
	font-size: 20px;
	font-weight:normal;
	color: #353535;
	text-decoration: none;
	text-align: center;
}
.menu ul {
	margin: 0;
	list-style: none;
	padding-left: 0px;
}

.menu li {
	display: inline;
}

.menu a {
	font-family: "century gothic";
	font-size: 20px;
	font-weight:normal;
	color: #353535;
	text-decoration: none;
	text-align: center;
	background-image: url(index_04.jpg);
	float: left;
	padding-top: 60px;
}
.menu a:hover {
	text-decoration: none;
	background:url(index_04_hover.jpg);
	background-repeat: none;
}
.slogan{
	font-weight: bold;
	font-size: 20px;
	line-height: 0.3;
	padding-left: 5px;
}
.header_right {
	font-family: "century Gothic";
	font-size: 20px;
	color: #FFFFFF;
	background-image: url(images/index_12.jpg);
	background-position: center;
	background-repeat:none;
	height: 117px;
	width: 164px;
	text-align: center;
}
.header_right_bottom {
	font-family: "century Gothic";
	font-size: 20px;
	color: #FFFFFF;
	background-image: url(images/index_14.jpg);
	background-position: center;
	background-repeat:none;
	height: 113px;
	width: 164px;
	text-align: center;
}
#header_left {
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	background-image: url(images/index_10.jpg);
	height: 347px;
	width: 235px;
}

.header_right_first {
	font-family: "century Gothic";
	font-size: 20px;
	color: #FFFFFF;
	text-align: center;
	padding-top: 30px;
	font-weight: bold;
}
.header_left_first {
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	text-align: left;
	font-weight: normal;
	padding-top: 20px;
	width: 225px;
	padding-left: 5px;
}
.read_more_button{
	background:url(images/read_more.png);
	width:100px;
	height: 34px;
	background-repeat: none;
	font-family:"century Gothic";
	font-size:12px;
	color: #000000;
	text-align: center;
	margin-top: 20px;
	line-height: 2.3;
}
.content_rightcenter {
	background-image: url(images/index_17.jpg);
	height: 525px;
	width: 354px;
}

.read_more_button a{
	font-family:"century Gothic";
	font-size:12px;
	color: #000000;
	text-align: center;
	text-decoration: none;
	line-height: 2.3;
}
.content_center {
	font-family: "century Gothic";
	font-size: 14px;
	color: #000000;
	background-image: url(images/index_16.jpg);
	height: 525px;
	width: 585px;
}
.content_titel {
	font-family: "century Gothic";
	font-size: 25px;
	color: #9b7f67;
	padding-top: 10px;
}
.content_text {
	font-family: "century Gothic";
	font-size: 14px;
	color: #000000;
	padding-top: 5px;
	width: 550px;
}
.content_text2 {
	font-family: "century Gothic";
	font-size: 14px;
	color: #000000;
	padding-top: 5px;
	width: 350px;
}
#bottom_left {
	background-image: url(images/index_19.jpg);
	height: 266px;
	width: 321px;
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
}
#bottom_right {
	background-image: url(images/index_21.jpg);
	height: 266px;
	width: 308px;
}
#bottom_center {
	background-image: url(images/index_20.jpg);
	height: 266px;
	width: 311px;
}

.read_more_button a:hover{
	text-decoration: none;
	color:#663300
}
.content_bottom {
	font-family: "century Gothic";
	font-size: 14px;
	color: #FFFFFF;
	padding-top: 10px;
	padding-left: 10px;
}
.style1 {font-size: 25px}
.style2 {
	font-family: "century Gothic";
	font-size: 12px;
	color: #695F56;
	padding-top: 20px;
	font-weight: bold;
}
.style5 {
	font-size: 10px;
	color: #FFFFE5;
}
.style5 a {
	text-decoration: none;
	color: #FFFFE5;
}
#footer {
	background-image: url(images/index_22.jpg);
	height: 98px;
	width: 940px;
}
.style3 {color: #423C35}


          Merci olivierrobins pour ton aide.
          1. olivierrobins
            ah ok. peut-être que je peux aider mais il faut que je voie le code en question.
            1. Visiteur
              Car quand la souris du visiteur est sur un lien du menu, l'image devrait changer pour une autre pour indiquer que la souris est dessus (hover)...
              1. olivierrobins
                Mais pourquoi avoir modifié ce que j'avais déjà fait pour le menu, le résultat semble pourtant pareil à ce que vous vouliez non?
                1. Visiteur
                  J'ai gardé que le center, mais toujours le même problème.

                  Ça s'affiche comme ça :
                  http://img43.imageshack.us/img43/4892/menubug.jpg

                  Mais je veux que ça s'affiche comme ça :
                  http://img714.imageshack.us/img714/5067/shouldbelike.jpg

                  Merci.
                  1. olivierrobins
                    alors déjà il y a une incohérence dans .menu:

                    text-align: center;
                    text-align: left;

                    soit l'un soit l'autre, mais pas les deux.
                    1. Visiteur
                      J'ai ajouté des div pour chaque titre de menu avec le code CSS suivant : 
                      .menu {
	background-image: url(index_04.jpg);
	font-family: "century gothic";
	font-size: 20px;
	font-weight:normal;
	color: #353535;
	text-decoration: none;
	text-align: center;
	text-align: left;
}

.menu a {
	font-family: "century gothic";
	font-size: 20px;
	font-weight:normal;
	color: #353535;
	text-decoration: none;
	text-align: center;
	background-image: url(index_04.jpg);
	float: left;
	padding-top: 60px;
}
.menu a:hover {
	text-decoration: none;
	background:url(index_04_hover.jpg);
	background-repeat: none;
}


                      Cependant, ça s'affiche comme ça :
                      http://img43.imageshack.us/img43/4892/menubug.jpg

                      Quelqu'un saurait-il comment régler ça?
                      Merci.
                      1. Visiteur
                        Merci énormément, je vais travailler sur le reste.

                        Seulement, j'aurais besoin d'aide pour dans le menu. Quand la souris est sur un titre du menu, j'aimerais que ça fasse comme dans l'ancien template : que les petits carrés changent de couleur. Seulement, je ne sais pas trop comment m'y prendre. Est-ce que quelqu'un pourrait me guider?

                        Merci.
                        1. olivierrobins
                          Hello,

                          Alors j'ai un peu bossé dessus ce matin (pas eu le temps hier soir finalement). J'ai mis la page là temporairement:
                          http://www.robinsolivier.com/tempcrap/commentcamarche/structurediv.html
                          et les images que j'ai utilisé sont
                          http://www.robinsolivier.com/tempcrap/commentcamarche/carregris.gif
                          http://www.robinsolivier.com/tempcrap/commentcamarche/logo.jpg
                          http://www.robinsolivier.com/tempcrap/commentcamarche/degradegris.gif
                          http://www.robinsolivier.com/tempcrap/commentcamarche/illucentre.jpg
                          et le CSS:
                          http://www.robinsolivier.com/tempcrap/commentcamarche/style.css

                          La structure en gros est là, il faut juste finir les ptits détails.
                          Pour le centre, j'ai ajouté des effets CSS de transparence, à priori compatible tous navigateurs. Donc il faut simplement avoir l'image de base pour le fond, et pour les div devant elles ont du bleu ou le dégradé gris et avec 50% de transparence, du coup on voit l'image derrière. Gros avantage avec ça: si l'image d'arrière plan change, pas besoin de refaire toutes les images.

                          Après il reste les polices, couleurs, etc, mais bon, ça je suppose que ce ne sera pas un problème pour toi. J'ai mis des balises h2 et p là où je pensais être nécessaire.

                          Voilou, j'espère que ça te sera utile.

                          Olivier
                          1. Visiteur
                            Merci, c'est vraiment apprécié.

                            Pour tes questions :
                            La page centrale sera sur toutes les pages.
                            Les boutons seront des drapeaux de pays pour changer la langue (cliquables).
                            Quand on clique dessus, ce sera un lien vers la page dans l'autre langue...
                            1. olivierrobins
                              ok j'y travaillerai un peu ce soir si j'ai le temps. Mais j'aurais besoin d'en savoir un peu plus: la partie centrale, qui pose justement problème, elle devient quoi après? Elle est sur les autres pages aussi ou c'est juste la page d'accueil? Les boutons we think smart, we think.. sont cliquables? Et si oui le contenu après avoir cliqué apparaît où? En bas?
                              1. Visiteur
                                Eh bien, ça serait vraiment apprécié, car je crois que seul, je vais avoir de la misère. Merci :)
                                1. olivierrobins
                                  Hello,

                                  A mon avis ce sera plus long d'essayer de rectifier le problème avec les tableaux que de tout refaire avec des div. C'est certainement possible avec les tableaux, mais je ne pense pas que ce soit une bonne idée (car tu risque d'y passer plus de temps, et si une fois tu veux remodifier le code, n'avoir que des div te simplifiera la tâche).
                                  1. olivierrobins
                                    Si t'as besoin d'un coup de main pour reconstruire avec les div, dis-le moi. Je ne veux pas me lancer là dedans inutilement si tu fais déjà le travail de ton côté :)
                                2. Visiteur
                                  J'ai fait une petite modification test :

                                  Avant :
                                  .content_rightcenter {
                                  background-image: url(images/index_17.jpg);
                                  height: 525px;
                                  width: 354px;
                                  }

                                  .content_center {
                                  font-family: "century Gothic";
                                  font-size: 14px;
                                  color: #000000;
                                  background-image: url(images/index_16.jpg);
                                  height: 525px;
                                  width: 585px;
                                  }

                                  Après :
                                  .content_rightcenter {
                                  background-image: url(images/index_17.jpg);
                                  height: 325px;
                                  width: 354px;
                                  }

                                  .content_center {
                                  font-family: "century Gothic";
                                  font-size: 14px;
                                  color: #000000;
                                  background-image: url(images/index_16.jpg);
                                  height: 325px;
                                  width: 585px;
                                  }

                                  Il n'y a plus d'espace blanc, mais quelque chose d'autre a bougé -_-' :

                                  http://img560.imageshack.us/img560/4468/moved.jpg

                                  J'espère un jour réussir.
                                  1. Visiteur
                                    Si c'est impossible, simplement me le dire, au moins, j'aurai ma réponse. Merci.
                                    • 1
                                    • 2

                                    Discussions similaires

                                    Contenue masqué
                                    Hippolyte

                                    6 réponses
                                    mon écran est décalé sur la droite,comment le remettre normal?
                                    minouche

                                    16 réponses
                                    ecran décalé vers la droite
                                    holly21

                                    4 réponses
                                    Enlever le contenu masque
                                    Julie17

                                    2 réponses
                                    mon écran d'accueil google chrome est décalé à droite
                                    89pierrot!

                                    7 réponses