Discussion :

[pas30]

Bonjour,

Voilà j'ai créé un div de 468*60 pour obtenir l'équivalent d'une bannière publicitaire en div mais j'aimerais afficher dedans non pas une bannière mais du texte. Et mon problème c'est que j'ai besoin que le texte repasse à la ligne si il est trop long pour les 468 de largeurdu genre :
"Venez découvrir ce site exceptionnel sur internet, une simple visite de ce site
vous permettra de comprendre en quoi notre site est exceptionnel"
Dans mon texte, vous voyez bien que le texte est coupé après "visite de ce site et la suite repasse logiquement sur la ligne du dessous.
Comment peut-on faire celà de manière simple?

[pop_up]

Parce que ton texte ne retourne pas a la ligne tout seul ?

Normalement, par défaut, le texte va a la ligne il me semble.

(en mettant text-align:justify; le texte s'alignera a droite et a gauche par exemple tu peux essayer)

[Invité]

essaye ceci :

dans ton css:

Code css :

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

1
2
3
4
5
6
 
.maClasse {
  overflow:auto; 
width:468;
height:60;
}

et dans ta page

Code html :

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

1
2
3
4
5
 
 <div class="maClasse" >
Venez découvrir ce site exceptionnel sur internet, une simple visite de ce site
vous permettra de comprendre en quoi notre site est exceptionnel
</div>

[pas30]

En fait mon texte s'affiche bien en passant à la ligne. Par contre est-il possible de mettre un scroll quand celà dépasse mais juste pour la hauteur donc en fait en largeur çà passe à la ligne dès que celà dépasse 468 et en hauteur dès que celà dépasse un scroll s'affiche permettant de lire la suite.
L'idée étant d'afficher une bannière publicitaire textuelle mais je ne sais pas trop quoi faire avec le surplus en hauteur donc si la personne affiche plus d'informations que la zone de 468*60 permet d'afficher.
Enfin j'aimerais mettre des liens de couleurs différentes pour chaque bloc de texte, le premier bloc est un court résumé avec lien de couleur bleu, le second texte est noir sans lien et enfin le troisième doit avoir un lien de couleur verte.
Voici mon code actuel :
Comme vous le voyez j'intègre le css directement au div et j'aimerais faire pareil pour la couleur des liens est-ce possible ???

Code :

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

1
2
3
4
5
<div style="width:468px;height:60px;overflow:hidden;background:#FFFFFF" align="center">
        <div style="background:#BBE9FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a href="clicban.php?idpub='.$datapub[idpub].'" target="_blank">'.$datapub[lientexte].'</a></b></font></b></div>
        <b><font face="Geneva, Arial, Helvetica, san-serif" size="2">'.$datapub[html].'</font></b><br>
          <font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a href="clicban.php?idpub='.$datapub[idpub].'" target="_blank">'.$datapub[lien].'</a></b></font>
      </div>

[Invité]

Pour les scrollbars ceci devrait fonctionner:
style="overflow:auto;"

Pour ce qui est de la couleur du texte et des liens;
ajoute ceci dans tes balises <a> ou <font>
style="color:#99FF00;"

Ce qui au final pour toi doit ressembler à çà:

Code html :

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

1
2
3
4
5
6
 
<div style="width:468px;height:60px;overflow:auto;background:#FFFFFF" align="center">
        <div style="background:#BBE9FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a href="clicban.php?idpub='.$datapub[idpub].'" target="_blank" style="color:#0099FF;">'.$datapub[lientexte].'</a></b></font></b></div>
        <b><font style="color:#000000;" face="Geneva, Arial, Helvetica, san-serif" size="2">'.$datapub[html].'</font></b><br>
          <font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a  style="color:#99FF00;" href="clicban.php?idpub='.$datapub[idpub].'" target="_blank">'.$datapub[lien].'</a></b></font>
</div>

Enfin,personnellement je te conseillerai de séparér html et css pour une meilleure lisibilité.

[pas30]

Merci celà fonctionne j'ai revu un peu les couleurs pour que çà fasse joli mais j'obtiens le résultat voulu.
La seule chose qui bloque c'est pour centrer le div dans la page car là il est mit à gauche.
Je viens de voir qu'en faisant avant juste un <div align="center"> çà marchait mais ce n'est peut-être pas très "propre"

[GoN49]

Bonjour,

C'est normal que cela ne fonctionne pas ton alignement aux centre . Puisque une div n'a pas d'attribut align . Y a que IE qui interprete cela (enfin bon il respecte aucune norme ce navigateur) , pour que cela marche partout il faut faire autrement.

Donc si tu veux aligné ta div voila comment tu peux faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<style type="text/css">
body{
text-align:center;
}
</style>
 
<div style="width:468px;height:60px;overflow:auto;background:#FFFFFF;margin:0px auto;">
        <div style="background:#BBE9FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a href="clicban.php?idpub='.$datapub[idpub].'" target="_blank" style="color:#0099FF;">'.$datapub[lientexte].'</a></b></font></b></div>
        <b><font style="color:#000000;" face="Geneva, Arial, Helvetica, san-serif" size="2">'.$datapub[html].'</font></b><br>
          <font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a  style="color:#99FF00;" href="clicban.php?idpub='.$datapub[idpub].'" target="_blank">'.$datapub[lien].'</a></b></font>
</div>

En faite tu indique que tout on contenu de ta page (enfin tout ce qui se trouve dans la balise body) devra se retrouvé au centre .
Le petit truc c'est que ca marche bien tout seul pour IE mais pas pour Firefox , opera ... Donc pour que ca marche partout tu doit indique dans ta Div a centré :
1 : la taille de ta div
2 : mettre un margin auto

Et ca marche

A oui un petit truc , n'oublie pas que l'attribut text-align que l'on a appliqué a la balise body sera hérité a toute les balise fils. Il faudra donc si tu ne veux pas que ton texte soit centré que tu contre en faisant un text-align:left par exemple .

Voici le bout de code avec la div centré et le text-align a gauche

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<style type="text/css">
body{
text-align:center;
}
</style>
 
<div style="width:468px;height:60px;overflow:auto;background:#FFFFFF;margin:0px auto;text-align:left">
        <div style="background:#BBE9FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a href="clicban.php?idpub='.$datapub[idpub].'" target="_blank" style="color:#0099FF;">'.$datapub[lientexte].'</a></b></font></b></div>
        <b><font style="color:#000000;" face="Geneva, Arial, Helvetica, san-serif" size="2">'.$datapub[html].'</font></b><br>
          <font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a  style="color:#99FF00;" href="clicban.php?idpub='.$datapub[idpub].'" target="_blank">'.$datapub[lien].'</a></b></font>
</div>

En éspérant que ca t'aide

[pas30]

Je veux en fait centrer le texte dans le tableau et centrer le tableau dans la page.
Quand tu insères une image tu la centres en faisant <div align="center"><img scr...></div>, celle-ci sera centré horizontalement dans la page.
Je veux faire la même chose avec mon tableau div de 468*60 il doit être centré dans la page.

[GoN49]

Je veux en fait centrer le texte dans le tableau et centrer le tableau dans la page.
Quand tu insères une image tu la centres en faisant <div align="center"><img scr...></div>, celle-ci sera centré horizontalement dans la page.
Je veux faire la même chose avec mon tableau div de 468*60 il doit être centré dans la page.

Bon je pige pas trop avec tes tableau et tes div.
Donc déja un tableau se declare <table> , et un une div ou aussi appelé calque se déclare comme ceci <div>.
Un tableau <table> posséde effectivement un attribut align mais un <div> n'en possede pas .
Si tu met

Code :

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

<div align="center"><img src="....."/> </div>

Ton code marchera que pour Internet explorer (je sais meme pas si ca marcherais sur toute les version) , parceque une balise <div> ne possede pas d'attribut align selon la norme du W3C .
Si t'est toujour sceptique regarde ici : http://giminik.developpez.com/xhtml/div.html

Deuxiemement le code que je t'ai donné fonctionne sur tout les navigateurs WEB car il respecte les W3C , et il fait bien ce que tu a demandé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<style type="text/css">
body{
text-align:center;
}
</style>
 
<div style="width:468px;height:60px;overflow:auto;background:#FFFFFF;margin:0px auto;">
        <div style="background:#BBE9FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a href="clicban.php?idpub='.$datapub[idpub].'" target="_blank" style="color:#0099FF;">'.$datapub[lientexte].'</a></b></font></b></div>
        <b><font style="color:#000000;" face="Geneva, Arial, Helvetica, san-serif" size="2">'.$datapub[html].'</font></b><br>
          <font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><a  style="color:#99FF00;" href="clicban.php?idpub='.$datapub[idpub].'" target="_blank">'.$datapub[lien].'</a></b></font>
</div>

Je réexplique pas mon code , tu pourra relire mon précédent post.
Mon code centre ton div et centre ton texte

Et si tu comprend toujours pas renseigne toi sur les balises <div> , si tu trouve ca trop compliqué tu peux utilisé la balise <table> qui est plus simple a utilisé pour les débutants (mais je ne te la conseille pas a moins de vouloir vraiment faire un tableau avec des colonnes ligne ,par exemple pour une grille de calcul).

Voila en éspérant avoir été clair.

[Invité]

tu peut également essayer ceci :
FAQ Comment centrer horizontalement n'importe quel élément en CSS
ça suis l'idée de Gon49 , puisque le traitement est légerement différent sous Internet explorer.

[pas30]

J'ai toujours mis des div align="center"
Bizarre ...
C'est à cause de Dreamweaver tout çà grr
En effet sur dream il met des div align="center" partout dès qu'on lui demande de centrer.
Du coup j'en ai mis partout dans mes codes. Il va falloir que je revois çà.
margin:0px auto; c'est çà qui centre ???
Et sinon pour aligner le texte, si tu attribues le centrage au body tout le texte du site va être centrer et j'aimerais appliquer l'alignement à chaque ligne.
Sinon les div pour faire des tableaux c'est bien mieux, les tableaux (table) c'est naze

[GoN49]

margin:0px auto; c'est çà qui centre ???

Oui

Et sinon pour aligner le texte, si tu attribues le centrage au body tout le texte du site va être centrer et j'aimerais appliquer l'alignement à chaque ligne.

Il suffit de corriger l'alignement dans la div ou l'element ou tu veut pas que cela soit centrer en faisant un style "text-align:left" (relis un de mes posts plus haut j'explique et j'ai mis une exemple). Puisque le style text-align hérite de l'element parent.

Sinon les div pour faire des tableaux c'est bien mieux, les tableaux (table) c'est naze

C'est vrai que les tableau c'est pas super , mais lorsqu'il faut faire des tableaux (style une grille de comparaison de forfait FAI avec plusieur colonne et lignes) autant les utilisés. Pour moi un tableau (table) c'est fait pour faire des tableaux et pas autre choses , utilisé des DIV pour faire un tableau (exemple tableau de FAI) je trouve que ca fait tres bricolage. Chaque balise a sont utilité il faut juste ne pas trop l'utilisé a tort et a travers comme cela pu etre fait sur certain site avec les <table>

Bonne continuation