Cherche un peu d'aide pour css

[PierreFox]

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 donc je peux en supprimer un ?

[calimo]

Ah je n'avais pas compris ça comme ça (je pensais que l'image suivante affichait le texte de celle d'avant )

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

[Mirovinben]

Edit : je n'y arrive pas avec vos méthodes ... j'arrive à mettre les images à gauche, à droite mais le texte reste en dessous

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.

entin tout çà, c'est mieux de le mettre dans la feuille de style et ça facilite la vie !

Hé !... je n'ai jamais dit le contraire... le style dans la balise, c'était juste pour l'exemple...

[HP]

entin tout çà, c'est mieux de le mettre dans la feuille de style et ça facilite la vie !

Hé !... je n'ai jamais dit le contraire... le style dans la balise, c'était juste pour l'exemple...

ah ok !
j'avais pas compris ...

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

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

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

[PierreFox]

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

[Mirovinben]

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

[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

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

[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

[calimo]

Oui bien entendu que ça existe
C'est la propriété clear

[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

[calimo]

Hum... je vois pas trop, tu as un exemple ?

[PierreFox]

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 ), je voudrais qu'elle s'affiche dans firefox de la même facon qu'elle s'affiche dans ie ...


merci

[calimo]

À première vue c'est pas mal du tout

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 (tu n'aura pas besoin d'en mettre sur le p vu que le h4 n'est pas sorti du flux ).

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

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