Sujet Précédent Sujet Suivant

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

Fermé
Visiteur - 3 févr. 2011 à 00:28
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 - 6 févr. 2011 à 10:05
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.
A voir également:

30 réponses

  • 1
  • 2
Réponse 1 / 30
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
5 févr. 2011 à 10:27
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
Réponse 2 / 30
spirou0069 Messages postés 141 Date d'inscription dimanche 12 octobre 2008 Statut Membre Dernière intervention 11 décembre 2013 5
3 févr. 2011 à 00:33
Heuuuu

C'est quoi la question?

spirou
0
Réponse 3 / 30
Bennou34 Messages postés 31 Date d'inscription lundi 12 juillet 2010 Statut Membre Dernière intervention 17 novembre 2014 11
3 févr. 2011 à 00:36
Heuuuu

Apprendre à lire ? ^^

Son menu est décalé suffit de regarder le screen et lire le titre :)

Cordialement,
0
Réponse 4 / 30
spirou0069 Messages postés 141 Date d'inscription dimanche 12 octobre 2008 Statut Membre Dernière intervention 11 décembre 2013 5
3 févr. 2011 à 00:42
Ouahhh merci Bennou34 je ne savais pas

Excuse moi mais l'image je l'ai vue oui on vois qu'il y a des décalages ^^

Mais moi je demande juste quel est vraiment la question car un screen et contenu décale pour moi ca veux pas dire grand chose....

Faut il déplacer le menu a gauche ?
Rassembler le contenu pour ne plus qu'il y ai d'espaces....
On peu en citer des demandes dans le même style....

Donc je sais lire mais j'ai pas compris le sens de la question ;-)

Merci
0
Bennou34 Messages postés 31 Date d'inscription lundi 12 juillet 2010 Statut Membre Dernière intervention 17 novembre 2014 11
3 févr. 2011 à 00:58
Ne t'inquiète pas j'avais moi aussi pas vraiment capté :)
0
spirou0069 Messages postés 141 Date d'inscription dimanche 12 octobre 2008 Statut Membre Dernière intervention 11 décembre 2013 5
3 févr. 2011 à 01:00
Merci ca me rassure car un autre gars cette après midi ma un peu fait chi....Et je l'ai tjr mauvaise car tu passe du temps pour essayer d'aider gentillement et quand tu poste et que t'as une réponse qui te gonfle ....
Tu t'y connais en php fonction include?
Merci
0
Bennou34 Messages postés 31 Date d'inscription lundi 12 juillet 2010 Statut Membre Dernière intervention 17 novembre 2014 11
3 févr. 2011 à 01:04
Non, je fais un peu de HTML sans plus, désolé de ne pas pouvoir t'aider.
0
spirou0069 Messages postés 141 Date d'inscription dimanche 12 octobre 2008 Statut Membre Dernière intervention 11 décembre 2013 5
3 févr. 2011 à 01:04
Pas grave
Bonne continuation

Merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 30
spirou0069 Messages postés 141 Date d'inscription dimanche 12 octobre 2008 Statut Membre Dernière intervention 11 décembre 2013 5
3 févr. 2011 à 00:46
Pourquoi utilise tu un tableau ? et ajouter des div dans tes cellules?

Vire ton tableaux utilise les div pour replacer le contenu comme bon te semble

Mais a mon avis le faite d'utiliser un tableau et y insérer des div agrandi l'espace entre tes cellules et le problème viens surement de là....

Spirou
0
Réponse 6 / 30
Visiteur
3 févr. 2011 à 00:52
Vite fait, voici ce que je voudrais que ça ressemble :

http://img13.imageshack.us/img13/277/fixedshouldbelike.jpg
0
Réponse 7 / 30
spirou0069 Messages postés 141 Date d'inscription dimanche 12 octobre 2008 Statut Membre Dernière intervention 11 décembre 2013 5
3 févr. 2011 à 00:56
Comme je l'ai dit ci dessus enlève ton tableau....

Utilise que les div

Les tableaux (Si je me trompe faite moi signe ) ne sont pas l'idéal pour la construction de ton site il faut utilisé les boite 'div' flottante ou fixe et les placées comme tu le sent. Je crois aussi (d'ou l'arrêt si je raconte des conn...) que certain moteur risque de pénaliser ton site si il est codé avec (table).
(J'attends d'ailleurs réponse si je me trompe ;-) )

Bon travail
Spi
0
Réponse 8 / 30
Visiteur
3 févr. 2011 à 03:06
Merci pour le conseil pour quand je ferai mes propres designs, mais pour celui-ci, il a été téléchargé sur un site de templates gratuits alors je n'avais pas le pouvoir de l'avoir en div...

Mais pour revenir au sujet, y a-t-il une façon de réparer le contenu décalé?

Je rajoute que le contenu a été décalé depuis que j'ai enlevé une partie du template que je n'avais pas de besoin, celle-ci : 

	<tr>
		<td rowspan="2">
			<img src="images/index_18.jpg" width="25" height="364" alt="" /></td>
		<td colspan="5"><div id="bottom_left">
        <div class=" content_bottom style1">YOUR ADVANTAE</div>
        <div class=" content_bottom">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>
        </div></td>
		<td colspan="4"><div id="bottom_center">
        <div class=" content_bottom style1">3, 2, 1, GO!</div>
        <div class=" content_bottom">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 esse.</div>
        </div></td>
		<td colspan="4"><div id="bottom_right">
        <div class=" content_bottom style1">THE SOLUTION</div>
        <div class=" content_bottom">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 esse.</div>
        </div></td>
	</tr>


Merci.
0
Réponse 9 / 30
Visiteur
3 févr. 2011 à 03:29
En fait, ce que je demande est, s'il existe une façon de régler mon problème sans devoir tout refaire en div. Merci.
0
Réponse 10 / 30
Visisteur
3 févr. 2011 à 13:25
Personne?
0
Réponse 11 / 30
Visiteur
3 févr. 2011 à 18:18
Up
0
Réponse 12 / 30
Visiteur
4 févr. 2011 à 00:08
Si c'est impossible, simplement me le dire, au moins, j'aurai ma réponse. Merci.
0
Réponse 13 / 30
Visiteur
4 févr. 2011 à 03:43
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.
0
Réponse 14 / 30
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
4 févr. 2011 à 08:28
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).
0
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
4 févr. 2011 à 08:33
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é :)
0
Réponse 15 / 30
Visiteur
4 févr. 2011 à 12:40
Eh bien, ça serait vraiment apprécié, car je crois que seul, je vais avoir de la misère. Merci :)
0
Réponse 16 / 30
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
4 févr. 2011 à 15:14
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?
0
Réponse 17 / 30
Visiteur
4 févr. 2011 à 23:03
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...
0
Réponse 18 / 30
Visiteur
5 févr. 2011 à 15:21
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.
0
Réponse 19 / 30
Visiteur
5 févr. 2011 à 15:47
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.
0
Réponse 20 / 30
olivierrobins Messages postés 225 Date d'inscription lundi 17 janvier 2011 Statut Membre Dernière intervention 26 janvier 2012 49
5 févr. 2011 à 19:51
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.
0

Discussions similaires

Savoir de quel ville à été envoyé le message
pedro1209 -
Pierr10 -

7 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses