modifications html

Rivington · 26/01/2012, 12h20

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.

michel.di · 29/01/2012, 23h25

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

Rivington · 30/01/2012, 19h10

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) :

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) :

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

HTML de ma page d'accueil :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

michel.di · 30/01/2012, 20h44

Bonsoir,
Tu n'as pas mis le screenshot

Essaie ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Rivington · 30/01/2012, 20h54

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

michel.di · 30/01/2012, 21h06

Tu veux le placer comment dans ton texte par rapport à tes 4 ronds bleus?

Rivington · 31/01/2012, 07h30

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...

hariman · 31/01/2012, 07h43

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.

Rivington · 02/02/2012, 19h12

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 ?

NoSmoking · 03/02/2012, 15h52

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

exemple visuel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Rivington · 07/02/2012, 14h47

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.

Rivington · 07/02/2012, 14h51

Petite mise a jour de ma page html actuelle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

NoSmoking · 08/02/2012, 19h23

il te suffit de comparer le code ci dessous

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

29/01/2012, 23h25	#2
michel.di Rédacteur/Modérateur Michel Dirix Ingénieur de Recherche Inscription : juin 2009 Messages : 663 Détails du profil Informations personnelles : Nom : Michel Dirix Âge : 25 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur de Recherche Secteur : Service public Informations forums : Inscription : juin 2009 Messages : 663 Points : 1 179 Points : 1 179	pourquoi ne pas plutôt mettre du code ici avec les soucis que tu rencontres? tu auras sans doute plus de réponses... __________________ http://midix.fr/ http://michel-dirix.developpez.com/ http://entre-magiciens.fr/ Software is like sex, it’s better when it’s free.
	00

30/01/2012, 21h06	#6
michel.di Rédacteur/Modérateur Michel Dirix Ingénieur de Recherche Inscription : juin 2009 Messages : 663 Détails du profil Informations personnelles : Nom : Michel Dirix Âge : 25 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur de Recherche Secteur : Service public Informations forums : Inscription : juin 2009 Messages : 663 Points : 1 179 Points : 1 179	Tu veux le placer comment dans ton texte par rapport à tes 4 ronds bleus? __________________ http://midix.fr/ http://michel-dirix.developpez.com/ http://entre-magiciens.fr/ Software is like sex, it’s better when it’s free.
	00

31/01/2012, 07h43	#8
hariman Membre éclairé Luc Hariman RANDRIANOMENJANAHARY Développeur Java Inscription : janvier 2008 Messages : 175 Détails du profil Informations personnelles : Nom : Luc Hariman RANDRIANOMENJANAHARY Localisation : Ile Maurice Informations professionnelles : Activité : Développeur Java Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : janvier 2008 Messages : 175 Points : 349 Points : 349	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. __________________ Les boutons et adorent être cliqués, donc ne les oubliez pas
	00

26/01/2012, 12h20	#1
Rivington Invité de passage Raphael Fardeau Étudiant Inscription : janvier 2012 Messages : 11 Détails du profil Informations personnelles : Nom : Raphael Fardeau Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : Associations - ONG Informations forums : Inscription : janvier 2012 Messages : 11 Points : 0 Points : 0	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.
	00

30/01/2012, 20h54	#5
Rivington Invité de passage Raphael Fardeau Étudiant Inscription : janvier 2012 Messages : 11 Détails du profil Informations personnelles : Nom : Raphael Fardeau Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : Associations - ONG Informations forums : Inscription : janvier 2012 Messages : 11 Points : 0 Points : 0	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
	00

31/01/2012, 07h30	#7
Rivington Invité de passage Raphael Fardeau Étudiant Inscription : janvier 2012 Messages : 11 Détails du profil Informations personnelles : Nom : Raphael Fardeau Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : Associations - ONG Informations forums : Inscription : janvier 2012 Messages : 11 Points : 0 Points : 0	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...
	00

02/02/2012, 19h12	#9
Rivington Invité de passage Raphael Fardeau Étudiant Inscription : janvier 2012 Messages : 11 Détails du profil Informations personnelles : Nom : Raphael Fardeau Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : Associations - ONG Informations forums : Inscription : janvier 2012 Messages : 11 Points : 0 Points : 0	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 ?
	00

07/02/2012, 14h47	#11
Rivington Invité de passage Raphael Fardeau Étudiant Inscription : janvier 2012 Messages : 11 Détails du profil Informations personnelles : Nom : Raphael Fardeau Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : Associations - ONG Informations forums : Inscription : janvier 2012 Messages : 11 Points : 0 Points : 0	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email