affichage texte site [Résolu]

cedric44600 · 14/03/2011, 15h49

Bonjour a tous j'ai une petite question concernant l affichage de mon site,j ai réalisé un menu déroulant vertical et onglets horizontaux
le soucis est quand je veux mettre par exemple du texte en dessous a droite au centre comme a gauche le texte est toujours décalé vers la droite il n'est pas au niveau de la marge du bord du bord de la page.
merci de m'aider

bob633 · 14/03/2011, 16h14

J'ai un peu de mal à visualiser, tu pourrais faire une capture d'écran du soucis stp ?

cedric44600 · 14/03/2011, 16h26

http://www.casimages.com/img.php?i=1...2724205632.jpgla voici tout ce qui a en bleu (les liens je voudrai les mettre a l extreme gauche en dessous du menu sous forme de colonne mais le menu s interpose sans lui je n ai pas de soucis.

bob633 · 14/03/2011, 17h12

Citation:

Envoyé par cedric44600

http://www.casimages.com/img.php?i=1...2724205632.jpgla voici tout ce qui a en bleu (les liens je voudrai les mettre a l extreme gauche en dessous du menu sous forme de colonne mais le menu s interpose sans lui je n ai pas de soucis.

Tu peux poster ton code actuel ?

Car tu peux jouer avec les balises div et les propriétés float:left; ou tu peux aussi forcer le retour à la ligne ... Mais avec le code ça sera plus simple

cedric44600 · 14/03/2011, 18h35

oui mais avant cela c est normal que ca fasse ca?
ou faut il avoir une balise qui sert de separation je fini par </div> le menu et renchaine par <p> pour les liens.coté css j ai verifié et c'est ok.

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<ul id="menu">
 
        <li>
                <a href="#">accueil</a>
        </li>
 
        <li>
                <a href="#">membres</a>
                <ul>
                        <li><a href="#">connexion</a></li>
                        <li><a href="#">inscription</a></li>
                </ul>
        </li>
 
        <li>
                <a href="#">images</a>
                <ul>
                        <li>
                                <a href="#">photos</a>
                                <ul>
                                        <li><a href="#">catégorie 1</a></li>
                                        <li><a href="#">catégorie 2</a></li>
                                </ul>
 
                        </li>
                        <li>
                                <a href="#">vidéos</a>
                        </li>
                </ul>
        </li>
 
        <li>
                <a href="#">téléchargements</a>
                <ul>
                        <li><a href="#">vidéos</a></li>
                        <li><a href="#">musiques</a></li>
                </ul>
        </li>
 
        <li>
                <a href="#">plus</a>
                <ul>
                        <li><a href="#">forum</a></li>
                        <li><a href="#">liens</a></li>
                        <li><a href="#">nous contacter</a></li>
                        <li><a href="#">team</a></li>
                        <li><a href="#">recherche</a></li>
                </ul>
        </li>
 
</ul>
    <p>
 
    <a href="/nav/Musique_CD">CD</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Jazz">Jazz</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Musique+classique">Musique classique</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Musiques+du+monde">Musique du monde</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Pop">Pop</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Rock">Rock</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Vari%E9t%E9s+internationales">Variétés internationales</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Non+pr%E9cis%E9">Musique en vrac</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle">Vinyles</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Jazz">Vinyle jazz</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/musique-electronique">Vinyle musique électronique</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Pop+rock">Vinyle pop rock</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Rock">Vinyle rock</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Soul">Vinyle soul</a>&nbsp;-
 
    <a href="/nav/Musique_Instruments-de-Musique">Instruments de musique</a>&nbsp;-
 
    <a href="/nav/Musique_Instruments-de-Musique/f2/Guitare+%E9lectrique">Guitare électrique</a>&nbsp;-
 
    <a href="/nav/Musique_Partitions-Song-books">Partitions</a>...
 
  </p>
 
</div>
 
   </body>

Code css :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}
 
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}
body { 
width:900px;/*ou la largeur que tu veut */ margin:auto; 
}

cedric44600 · 14/03/2011, 20h12

la c'est la meilleur j ai trouvé pourquoi ca faisait ca mais y a rien de logique il faut que mette deux fois la phrase pour que ca marche!

je m explique en xhtml je mettre par exemple
<p>letexte</p>(celui ci va mal s afficher comme la capture)
<p>letexte</p>(celui ci s affiche bien sur la gauche en sautant une ligne)
Mais si je vire le premier l autre s'efface!
la ca commence a saouler

bob633 · 14/03/2011, 22h51

Remplace ta balise <p> par un div que tu met en position relative et float:left comme ceci :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<ul id="menu">
 
        <li>
                <a href="#">accueil</a>
        </li>
 
        <li>
                <a href="#">membres</a>
                <ul>
                        <li><a href="#">connexion</a></li>
                        <li><a href="#">inscription</a></li>
                </ul>
        </li>
 
        <li>
                <a href="#">images</a>
                <ul>
                        <li>
                                <a href="#">photos</a>
                                <ul>
                                        <li><a href="#">catégorie 1</a></li>
                                        <li><a href="#">catégorie 2</a></li>
                                </ul>
 
                        </li>
                        <li>
                                <a href="#">vidéos</a>
                        </li>
                </ul>
        </li>
 
        <li>
                <a href="#">téléchargements</a>
                <ul>
                        <li><a href="#">vidéos</a></li>
                        <li><a href="#">musiques</a></li>
                </ul>
        </li>
 
        <li>
                <a href="#">plus</a>
                <ul>
                        <li><a href="#">forum</a></li>
                        <li><a href="#">liens</a></li>
                        <li><a href="#">nous contacter</a></li>
                        <li><a href="#">team</a></li>
                        <li><a href="#">recherche</a></li>
                </ul>
        </li>
 
</ul>
 <div style="position:relative;float:left;">
    <a href="/nav/Musique_CD">CD</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Jazz">Jazz</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Musique+classique">Musique classique</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Musiques+du+monde">Musique du monde</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Pop">Pop</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Rock">Rock</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Vari%E9t%E9s+internationales">Variétés internationales</a>&nbsp;-
 
    <a href="/nav/Musique_CD/f3/Non+pr%E9cis%E9">Musique en vrac</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle">Vinyles</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Jazz">Vinyle jazz</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/musique-electronique">Vinyle musique électronique</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Pop+rock">Vinyle pop rock</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Rock">Vinyle rock</a>&nbsp;-
 
    <a href="/nav/Musique_Vinyle/f2/Soul">Vinyle soul</a>&nbsp;-
 
    <a href="/nav/Musique_Instruments-de-Musique">Instruments de musique</a>&nbsp;-
 
    <a href="/nav/Musique_Instruments-de-Musique/f2/Guitare+%E9lectrique">Guitare électrique</a>&nbsp;-
 
    <a href="/nav/Musique_Partitions-Song-books">Partitions</a>...
 
</div>

Ca devrait fonctionner

cedric44600 · 14/03/2011, 23h00

oui en effet ca a marché ca me la pas mis a gauche mais au moins il est en dessous centré
je pense qu'après je peux modifié en utilisant la balise div dans le css?
en tout cas merci:

donc pour le modifier en css forme couleur etc...
c'est

Code :

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

1
2
3
div { 
...
 }

bob633 · 15/03/2011, 08h41

Il faut que tu donnes un id à ton code, par exemple :

Code :

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

<div id="toto"></div>

Dans ton css tu l'appelles simplement :

Code :

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

#toto { ... }

cedric44600 · 15/03/2011, 16h13

j ai mis ca:

Code css :

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

1
2
3
4
5
a{
 
text-decoration: none;
color : orange;
}

maintenant j espere que si je mets des liens plus loin apres d autres balises <div>...</div> ils seront pas orane eux aussi.

sinon pour maintenant les mettre a gauche les lien en colonnes je rajoute quel code en css?

Bovino · 16/03/2011, 08h41

Citation:

Envoyé par cedric44600

j ai mis ca:

Code css :

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

1
2
3
4
5
a{
 
text-decoration: none;
color : orange;
}

maintenant j espere que si je mets des liens plus loin apres d autres balises <div>...</div> ils seront pas orange eux aussi.

Ben si tu définis un style pour une balise, il sera appliqué à toutes les balises.
Ceci dit, j'ai entendu parler d'une tribu en Amazonie qui a développé un navigateur capable de lire dans la pensée du développeur au chargement de la page pour déterminer si le code écrit est à appliquer ou non, mais je me souviens plus de l'adresse

Citation:

sinon pour maintenant les mettre a gauche les lien en colonnes je rajoute quel code en css?

Code css :

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

display: block;

par exemple, mais le mieux est de le mettre dans une liste ul.

cedric44600 · 16/03/2011, 12h05

entre temps j'ai trouvé en me creusant les meninges

j ai mis comme tu as dis
pour les liens

Code :

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

1
2
3
a{text-decoration: none;
color : orange;
}

et pour le menu de "gauche "de facon basique pour l instant juste pour ca mise en place j'ai mis:

Code :

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

<div id="badge"></div>

Code :

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

1
2
3
4
5
6
7
8
#badge p{
 
margin-top: 100px;
text-align: left;
color: black;
font-size : 20px
 
}

et ca donne ca:

un grand merci pour votre aide en tout cas

cedric44600 · 16/03/2011, 22h33

Bonsoir j ai juste une petite question j'ai un lien clignotant que je viens de rajouter le probleme c'est qu il est souligné je voudrai juste enlever le soulignement mais par contre laisser son clignotement je pensai a ca mais comme son nom l indique nada

Code :

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

text-decoration: none;

cedric44600 · 17/03/2011, 08h00

oui

j'ai rectifié j'ai mis un id a mon code et pour le lien clignotant j'ai trouvé merci!

14/03/2011, 15h49	#1
cedric44600 Invité de passage cedric Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Nom : cedric Localisation : France Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	affichage texte site Bonjour a tous j'ai une petite question concernant l affichage de mon site,j ai réalisé un menu déroulant vertical et onglets horizontaux le soucis est quand je veux mettre par exemple du texte en dessous a droite au centre comme a gauche le texte est toujours décalé vers la droite il n'est pas au niveau de la marge du bord du bord de la page. merci de m'aider
	00

14/03/2011, 16h26	#3
cedric44600 Invité de passage cedric Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Nom : cedric Localisation : France Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	affichage site http://www.casimages.com/img.php?i=1...2724205632.jpgla voici tout ce qui a en bleu (les liens je voudrai les mettre a l extreme gauche en dessous du menu sous forme de colonne mais le menu s interpose sans lui je n ai pas de soucis.
	00

14/03/2011, 20h12	#6
cedric44600 Invité de passage cedric Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Nom : cedric Localisation : France Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	liste la c'est la meilleur j ai trouvé pourquoi ca faisait ca mais y a rien de logique il faut que mette deux fois la phrase pour que ca marche! je m explique en xhtml je mettre par exemple <p>letexte</p>(celui ci va mal s afficher comme la capture) <p>letexte</p>(celui ci s affiche bien sur la gauche en sautant une ligne) Mais si je vire le premier l autre s'efface! la ca commence a saouler
	00

16/03/2011, 22h33	#13
cedric44600 Invité de passage cedric Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Nom : cedric Localisation : France Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	balise Bonsoir j ai juste une petite question j'ai un lien clignotant que je viens de rajouter le probleme c'est qu il est souligné je voudrai juste enlever le soulignement mais par contre laisser son clignotement je pensai a ca mais comme son nom l indique nada Code : Sélectionner tout - Visualiser dans une fenêtre à part text-decoration: none;
	00

14/03/2011, 16h14	#2
bob633 Membre éclairé Développeur Sharepoint/Biztalk Inscription : octobre 2008 Messages : 500 Détails du profil Informations personnelles : Sexe : Localisation : France, Pyrénées Atlantiques (Aquitaine) Informations professionnelles : Activité : Développeur Sharepoint/Biztalk Informations forums : Inscription : octobre 2008 Messages : 500 Points : 398 Points : 398	J'ai un peu de mal à visualiser, tu pourrais faire une capture d'écran du soucis stp ?
	00

15/03/2011, 08h41	#9
bob633 Membre éclairé Développeur Sharepoint/Biztalk Inscription : octobre 2008 Messages : 500 Détails du profil Informations personnelles : Sexe : Localisation : France, Pyrénées Atlantiques (Aquitaine) Informations professionnelles : Activité : Développeur Sharepoint/Biztalk Informations forums : Inscription : octobre 2008 Messages : 500 Points : 398 Points : 398	Il faut que tu donnes un id à ton code, par exemple : Code : Sélectionner tout - Visualiser dans une fenêtre à part <div id="toto"></div> Dans ton css tu l'appelles simplement : Code : Sélectionner tout - Visualiser dans une fenêtre à part #toto { ... }
	00

17/03/2011, 08h00	#14
cedric44600 Invité de passage cedric Inscription : mars 2011 Messages : 12 Détails du profil Informations personnelles : Nom : cedric Localisation : France Informations forums : Inscription : mars 2011 Messages : 12 Points : 0 Points : 0	oui j'ai rectifié j'ai mis un id a mon code et pour le lien clignotant j'ai trouvé merci!
	00

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