Page 2 sur 4

Publié : 01 mars 2005, 13:54
par PierreFox
calimo a écrit :
Mais l'attribut title à cet endroit sert à quoi car j'en ai un autre dans l'image qui suit et qui prend le dessus ?
title sert à donner une information supplémentaire sur l'élément (en l'occurence le lien). Dans les navigateurs graphiques, c'est représenté sous forme d'une infobulle.
Si tu as un problème, valide, c'est surement une erreur de syntaxe (d'ailleurs il faut toujours valider, même si on ne voit pas de problèmes, car s'il y a des erreurs dans le code ça posera problème dans un autre navigateur.)
C'est valide regardes :

Code : Tout sélectionner

<p class="imgD"><a href="images/mafia/histoire1.jpg" target="_blank" title="Pour voir l'image agrandie dans une nouvelle fenêtre"><img src="images/mafia/histoire1_small.jpg" width="328" height="246" title="Introduction" alt="Histoire"></a></p>
C'est un peu normal il ne peut pas afficher 2 title en même temps :roll: donc je peux en supprimer un ?

Publié : 01 mars 2005, 14:32
par calimo
Ah je n'avais pas compris ça comme ça (je pensais que l'image suivante affichait le texte de celle d'avant :wink: )

Oui, tu peux supprimer un des deux, plutôt celui sur l'img qui ne sert pas à grand chose... c'est une limitation de leur représentation sur les navigateurs graphiques, les non-graphiques pouvant s'en sortir pour utiliser les deux :P

Publié : 01 mars 2005, 16:56
par Mirovinben
PierreFox a écrit :Edit : je n'y arrive pas avec vos méthodes ... j'arrive à mettre les images à gauche, à droite mais le texte reste en dessous :(
:shock: Normal, t'avais pas dit que tu voulais mettre du texte... Je t'ai proposé une méthode pour center l'image dans un bloc... ni plus... ni moins. :wink:
HP a écrit :entin tout çà, c'est mieux de le mettre dans la feuille de style et ça facilite la vie !
:shock: Hé !... je n'ai jamais dit le contraire... le style dans la balise, c'était juste pour l'exemple... :wink:

Publié : 01 mars 2005, 17:02
par HP
Mirovinben a écrit :
HP a écrit :entin tout çà, c'est mieux de le mettre dans la feuille de style et ça facilite la vie !
:shock: Hé !... je n'ai jamais dit le contraire... le style dans la balise, c'était juste pour l'exemple... :wink:
ah ok !
j'avais pas compris ...

enfin, avec un syntaxe de feuille de style, c'est plus clair, ça prête pas à confusion.

Publié : 01 mars 2005, 17:15
par Mirovinben
La feuille de style externe est en effet incontournable : on change à un seul endroit et toutes les pages qui y font référence prennent en compte immédiatement...

Et même que je procède de la même façon avec les javascripts : j'ai construit des "librairies" ou "biblothèques" qui regroupent mes scripts par grandes familles (ouvertures de fenêtres, swap d'images, bulles d'aide et surtout gestion des calques...) Elles se sont étoffées au fil du temps et sont d'une grande robustesse... environ 2 ans que je les utilise ! Juste une mise à jour pour ne pas être compatible qu'avec IE (hé voui !) au moment où j'ai découvert FireFox...

démo en cliquant sur le www en bas de ce post... Y'a des popups mais j'm'en fiche ! (Aïe Calimo, pô taper pô taper !)... d'autant que j'ai appliqué un principe moultes fois évoqué dans ce forum... ça ouvre dans la même fenêtre si les javascripts sont désactivés.

Publié : 01 mars 2005, 17:24
par PierreFox
Ok merci j'aurais surement besoin de quelques autres conseils pour la suite enfin on verra ;-)

Pour les images un :

Code : Tout sélectionner

img {
  border: none;
}
est parfait.


D'ailleurs j'ai un petit problème d'affichage entre Firefox et IE, sur Firefox tout passe bien par contre sur IE j'ai des espaces entres les rubriques de mon menu qui sont plus grands ... je ne vois pas trop d'où cela pourrait venir ^o)

Publié : 03 mars 2005, 01:13
par PierreFox
PierreFox a écrit :D'ailleurs j'ai un petit problème d'affichage entre Firefox et IE, sur Firefox tout passe bien par contre sur IE j'ai des espaces entres les rubriques de mon menu qui sont plus grands ... je ne vois pas trop d'où cela pourrait venir ^o)
Je m'auto cite ... j'ai finalement trouvé, c'était à cause d'un problème d'IE qui définit par défaut et mal :(


Sinon j'ai une autre question, quelle est selon vous la meilleur solution pour intégrer un pied de page (footer) car je ne veux pas qu'il soit fixe, ca depend de la longeur des pages, donc un footer qui apparaisse toujours en dessous du texte de mon contenu. Quel serait le moyen le plus adapté ?


Merci

Publié : 03 mars 2005, 06:50
par Mirovinben
PierreFox a écrit :Sinon j'ai une autre question, quelle est selon vous la meilleur solution pour intégrer un pied de page (footer) car je ne veux pas qu'il soit fixe, ca depend de la longeur des pages, donc un footer qui apparaisse toujours en dessous du texte de mon contenu. Quel serait le moyen le plus adapté ?
Fruit de mon expérience personnel et récente... :

Tout dépend comment sont tes blocs (<div>...etc... : S'ils sont tous en "position: relative;", ils vonts se placer les uns en dessous des autres et si ton footer est le dernier, il sera bien en bas de chaque page.

Par contre si tu as des "position: absolute;", alors ça ce complique !... Il te faut mettre ces blocs dans des blocs "position: relative;" ayant une hauteur ad-hoc.

Si tu utilise des "float", tu risques de rencontrer des "chevauchements", il faut alors placer un <hr>

Code : Tout sélectionner

hr {
  clear: both;
  visibility: hidden;
}
pour reprendre correctement le "flux" comme tu le souhaites... source de l'info (OpenWeb) ici

Attendons validation des experts, mais ça marche !... Exemple perso ici

Publié : 03 mars 2005, 15:00
par PierreFox
Dans mon cas j'ai une bannière, un menu horizontal, un menu de chaque coté, et le corps de la page donc j'ai été obligé de mettre en "position: absolute;" sauf si vous avez une autre astuce ?

Du coup ca complique en effet les choses ...


P.S : j'arrive à le faire apparaitre bien à l'endroit ou je veux avec IE mais pas avec Firefox car firefox se base sur l'image en float, et ie sur le texte qui est autour de l'image, or ce texte va aussi en dessous de l'image donc ca me parait plus logique ... du coup ca merde :roll:

Edit : j'ai résolu mon problème, merci Web Developer !

Publié : 19 mars 2005, 02:08
par PierreFox
Une autre question dans le même style :

j'ai une image avec un float à gauche et donc un texte qui correspond à droite, si le texte est plus long c'est parfait ca va même en dessous de l'image par contre s'il est trop court mon image en float à gauche qui devrait se trouver bien sous la première se retrouve à l'emplacement du texte c'est à dire à droite de la première image :(

Existe-t-il une balise pour résoudre facilement ceci ?


Merci

Publié : 19 mars 2005, 08:54
par calimo
Oui bien entendu que ça existe :lol:
C'est la propriété clear :wink:

Publié : 19 mars 2005, 14:58
par PierreFox
C'est déjà mieux mais c'est pas encore ca ...

Là les images en float left sont bien à gauche les unes sous les autres seulement si le texte qui leur correspond (à leur droite) est plus court (ou que la résolution de l'écran est plus grande), il se retrouve à coté de la première image :s

Publié : 19 mars 2005, 15:03
par calimo
Hum... je vois pas trop, tu as un exemple ?

Publié : 19 mars 2005, 15:07
par PierreFox
calimo a écrit :Hum... je vois pas trop, tu as un exemple ?
Oui, c'est ce que je suis en train de faire :
http://barmafia.free.fr/index.php?page=personnages

Je fais ça pour apprendre un peu le css donc il y a surement beaucoups d'imperfections, (Calimo va me taper dessus :lol: ), je voudrais qu'elle s'affiche dans firefox de la même facon qu'elle s'affiche dans ie ...


merci

Publié : 19 mars 2005, 15:29
par calimo
À première vue c'est pas mal du tout :wink:

Ce qu'il y a c'est que le clear tu l'applique sur l'image suivante. Mais comme tu la sors elle-même du flux, le clear ne s'applique plus au h4 et au p qui vient après. Tu dois donc appliquer un clear aussi sur le h4 :wink: (tu n'aura pas besoin d'en mettre sur le p vu que le h4 n'est pas sorti du flux :P ).

Si tu veux mon avis sur le reste, il me semble que la séparation contenu/style est excellente. Tu peux donc mettre un doctype html 4.01 Strict si tu veux :wink:

La seule chose que je vois à reprocher c'est le texte alternatif de ton logo :(