modifications html

Version imprimable

26/01/2012, 12h20
Rivington

modifications html

Bonjour à tous,
Je cherche quelqu'un qui pourrais m'aider pour modifier le texte dans les boutons d'un kit graphique HTML que j'ai acheté.
Le développement web n'est pas vraiment mon domaine, mais je suis étudiant et je dois finir un site pour mon association, je n'ai pas les moyens de payer un webmaster. Si quelqu'un aurais la gentillesse de me filer un petit coup de main pour ce petit truc qui je pans end doit pas être bien compliqué, je lui en serait très reconnaissant.
Vous pouvez me contacter par mail ou google talk : illusion.rf@gmail.com
ou sur iChat : raphaelfardeau@me.com.
Bien à vous.
Merci d'avance.
29/01/2012, 23h25
michel.di

pourquoi ne pas plutôt mettre du code ici avec les soucis que tu rencontres?
tu auras sans doute plus de réponses...

Bonjour,
Alors faisons comme cela...
Voila, mon soucis N°1 est que le menu (la page d'accueil) de mon site se présente comme ça (voir screenshot joint) :
http://farm8.staticflickr.com/7157/6...ef75eb86_b.jpg

Et comme vous pouvez le constater, l'orsque l'ont passe la souris sur les boutons bleus, pour se rendre sur d'autres pages, cela affiche : 01, 02, 03, 04.
Cela n'étant pas très compréhensible pour le visiteur, je souhaiterais remplacer ces chiffres par "Qui Sommes Nous", "Prestations", "WebGallery" et "Contact".

Ne connaissant pas grand chose aux codes, mais ayant quand même réussi à modifier pas mal de trucs sur mon kit graphique, j'ai essayé de modifier ces '01, 02, ..." par ces titres, mais cela ne s'affiche pas correctement (voir deuxième screenshot) :
http://farm8.staticflickr.com/7005/6...a94593b8_b.jpg

Donc voici les bouts de code qui je pense, ont concernés par ce problème

HTML de ma page d'accueil :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Illusion Pictures - Association De Cinéma Et d'Audiovisuel</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">    
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/cufon-replace.js" type="text/javascript"></script>
    <script src="js/Lato_400.font.js" type="text/javascript"></script>
    <script src="js/Lato_700.font.js" type="text/javascript"></script>   
	<!--[if lt IE 8]> 
		<div style=' clear: both; text-align:center; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a></div>  
	<![endif]-->
    <!--[if lt IE 9]>
   		<script type="text/javascript" src="js/html5.js"></script>
		<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">   
	<![endif]-->
</head>
<body id="page1">
<div class="extra">
<!--==============================header=================================-->
<!--==============================content================================-->
<div class="main">
    <section id="content"><h1><a class="logo" href="index.html">logo</a></h1>
    	<nav>
        	<ul class="menu">
            	<li><a href="index-1.html">01</a></li>
                <li><a href="index-2.html">02</a></li>
                <li><a href="index-3.html">03</a></li>
                <li><a href="index-4.html">04</a></li>
            </ul>
        </nav>
    </section>
</div>
    <div class="block"></div>
</div>
<!--==============================footer=================================-->
    <footer>
        <!-- {%FOOTER_LINK} --><div class="main"><span>Illusion Pictures &copy; 2011  <a href="index-5.html">Nous Rejondre</a></span></div>
    </footer>
 
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

Et CSS de mon fichier "Style" (partie que je pense concernée. Si vous voulez en voir plus, n'hésitez pas à me demander ;) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*********************************header*************************************/
header {height:516px; width:100%;}
 
h1 {position:absolute; top:133px; left:46px; z-index:222;}
.logo {display:block; width:327px; height:203px; text-indent:-5000px; background:url(../images/replace/logo2.png) 0 0 no-repeat;}
 
.menu { position:absolute; top:438px; right:222px;}
.menu li {float:left; font-size:25px; line-height:58px; width:68px; height:62px; font-weight:condensed medium; font-family:"Futura", Times, serif;s}
.menu li a {display:block; color:#fff; text-indent:-5000px; background:url(../images/bg-menu-li.png) 0 0 no-repeat; position:relative; z-index:222;} 
.menu li .active, .menu li a:hover {color:#fff; text-indent:22px;} 
.menu .item {padding:0;}
 
/*********************************content*************************************/
#content {width:100%; padding:100px 0px 60px 0px; position:relative; z-index:1;}
 
.points { color:#a4a4a4; text-decoration:none;}
.points:hover { color:#fff; text-decoration:none;}
 
.padding-top { padding-top:2px;}
 
.spacer-1 {width:100%; background:url(../images/pic-1.gif) 217px 0 repeat-y;}
.spacer-2 {width:100%; background:url(../images/pic-1.gif) 460px 0 repeat-y;}
 
time {color:#18acff; font-size:16px; line-height:1.2px; font-weight:100; margin-bottom:10px; display:inline-block;}
 
h3 {font-size:30px; line-height:1.2em; margin:0px 0 30px;}
 
.scroll {overflow:auto; height:180px; position:relative;}
.scroll .padding-right {height:1%; padding-right:50px;}
 
.border-bot {width:100%; padding-bottom:20px; background:url(../images/pic-1.gif) 0 bottom repeat-x;}

Merci d'avance pour votre aide, qui me sera bien utile ;)

Bonsoir,
Tu n'as pas mis le screenshot ;)

Essaie ça :

Code:

1
2
3
4
5
 
<li><a href="index-1.html" alt="Qui Sommes Nous">Qui Sommes Nous</a></li>
<li><a href="index-2.html" alt="Perstations">Prestations</a></li>
<li><a href="index-3.html" alt="WebGallery">WebGallery</a></li>
<li><a href="index-4.html" alt="Contact">Contact</a></li>

30/01/2012, 20h54
Rivington

Désolé, je viens de voir que je ne les avais pas mis, en effet. Maintenant ça y est.
Pour ta soluce, j'aurais aimé que ça marche, malheureusement, ça n'est pas le cas, le problème du texte mal aligné reste...
Merci pour ton aide en tout cas :)
30/01/2012, 21h06
michel.di

Tu veux le placer comment dans ton texte par rapport à tes 4 ronds bleus?
31/01/2012, 07h30
Rivington

Je dirais peu importe... de manière qu'il soit lisible et que ce soit propre...
Au dessus, ou en dessous du bouton, ça pourrait bien le faire je pense...
31/01/2012, 07h43
hariman

Bonjour,

Je te conseille d'aligner les boutons verticalement afin que les textes soient bien lisible.

Pour commencer, enlève la propriété "float:left" dans le css.
02/02/2012, 19h12
Rivington

Bonsoir et merci pour vos réponses.
J'ai enlevé mes balises float:left, je constate que maintenant mes boutons sont à la verticale. L'orsque je change mon "01" par "Qui Sommes Nous", le texte s'affiche mieux, mais passe en dessous du bouton suivant...
Que puis-je faire ensuite ?

c'est le comportement normal pour une liste, il te faut mettre les LI en display:inline;.

exemple visuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
ul.horizontal li{
  display:inline;
}
</style>
</head>
<body>
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
  <ul class="horizontal">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</body>
</html>

07/02/2012, 14h47
Rivington

Malgré ton exemple, je ne comprends pas très bien ce que je dois garder, enlever, ou remplacer sur mon .html :?
Dans mon html je n'ai pas du tout le mêmes balises que celles que tu met dans ton exemple, du coup je ne comprends pas très bien où est ce que je doit mettre ce "display:inline"...
Si je remplace ma partie de code concerné par le tiens, ca ne fonctionne pas, les boutons disparaissent, et du code en texte s'affiche en haut a droite de la page.
Veuillez pardonner mon ignorance en codes, je comprend très bien que vous n'êtes pas non plus pour m'apprendre le html...
Merci.

Petite mise a jour de ma page html actuelle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Illusion Pictures - Association De Cinéma Et Audiovisuel</title>
    <meta charset="utf-8">
<meta name="Content-Language" content="fr">
<meta name="Description" content="Illusion Pictures, association de cinema et d'audiovisuel basée sur Lyon. Prestations audiovisuelles sur Lyon et dans la France entière. Films d'entreprise, institutionnels, films de mariages, fiction, documentaires...
Rejoignez Illusion Pictures et réalisez les projets de vos rêves.">
<meta name="Keywords" content="illusion pictures cinéma association lyon audiovisuel audiovisuelle prestations prestation france prix devis raphael fardeau services arfis films son audio cinema production realisation réalisation photos photo photographie camera cadreur cameraman">
<meta name="Subject" content="Association De Cinéma Et Audiovisuel">
<meta name="Copyright" content="Illusion Pictures">
<meta name="Author" content="Raphael Fardeau">
<meta name="Publisher" content="Raphael Fardeau">
<meta name="Identifier-Url" content="www.illusionpictures.fr">
<meta name="Reply-To" content="contact@illusionpictures.fr">
<meta name="Revisit-After" content="4 days">
<meta name="Robots" content="all">
<meta name="Rating" content="general">
<meta name="Distribution" content="global">
<meta name="Geography" content="lyon, france, 69007">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">    
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/cufon-replace.js" type="text/javascript"></script>
    <script src="js/Lato_400.font.js" type="text/javascript"></script>
    <script src="js/Lato_700.font.js" type="text/javascript"></script>   
	<!--[if lt IE 8]> 
		<div style=' clear: both; text-align:center; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a></div>  
	<![endif]-->
    <!--[if lt IE 9]>
   		<script type="text/javascript" src="js/html5.js"></script>
		<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">   
	<![endif]-->
</head>
<body id="page1">
<div class="extra">
<!--==============================header=================================-->
<!--==============================content================================-->
<div class="main">
    <section id="content"><h1><a class="logo" href="index.html">logo</a></h1>
    	<nav>
        	<ul class="menu">
                <li><a href="index-1.html">Qui Sommes Nous</a></li>
                <li><a href="index-2.html">02</a></li>
                <li><a href="index-3.html">03</a></li>
                <li><a href="index-4.html">04</a></li>
 
            </ul>
        </nav>
    </section>
</div>
    <div class="block"></div>
</div>
<!--==============================footer=================================-->
    <footer>
        <!-- {%FOOTER_LINK} --><div class="main"><span>Illusion Pictures &copy; 2011  <a href="index-5.html">Nous Rejondre</a></span></div>
    </footer>
 
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

il te suffit de comparer le code ci dessous

Code:

1
2
3
4
5
  <ul class="horizontal">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>

avec le CSS qui va avec

Code:

1
2
3
ul.horizontal li{
  display:inline;
}

avec ton morceau de code, pour voir ce qui doit correspondre

Code:

1
2
3
4
5
6
<ul class="menu">
  <li><a href="index-1.html">Qui Sommes Nous</a></li>
  <li><a href="index-2.html">02</a></li>
  <li><a href="index-3.html">03</a></li>
  <li><a href="index-4.html">04</a></li>
</ul>