CSS la galère

[Rogers]

Bonjour,

Afin de me mettre un peu à jour, j'ai décidé de refaire entièrement un ancien site avec css et autres div... Bien entendu, jusque manitenant j'utilisais un peu le CSS pour les couleurs mais pour la mise en page j'utilisais des tables.

Toutefois, cela fait deux jours que je bosse sur la mise en page et le css est très aléatoire je trouve. Suivant le navigateur, l'on obtient pas la même chose, certaines balises ne sont pas reconnues, enfin bref, pour rien faire il faut trois jours. Certes une fois fini, le résultat est superbe, mais c'est d'un fastidieux...

Je sèche sur un présentation dans ma partie admin. Dans la partie centrale, j'ai mis des icônes (c'est l'interface admin avec chaque outil disponible) et sous chaque icone il y a un mot explicant ce qu'est le bouton : annuaire, news...

Je souhaiterai que chaque icone+texte soit côte à côte à raison de 4 icones par ligne.

J'ai donc fait un div pour chaque ligne avec à l'intérieur chaque bloc (images + texte(sous l'image)) entouré d'un span :

//1ere ligne
<div><span><img><br>TXT</span>......</div>
//2eme ligne
<div><span><img><br>TXT</span>......</div>

Cela ne fonctionne pas.

J'ai essayé avec uniquement des <span> mais aucun résultat.

Enfin bref, c'est très prise de tête alors qu'avec un tableau on a très rapidement le résultat escompté. Autant vous dire que je l'ai très mauvaise, passer une journée pour aligner des images ça fout mal.

Je voudrai savoir si l'un d'entre vous pourrai m'aider à résoudre mon problème. Que dois je mettre dans le CSS et quelle balise je dois utiliser en plus de span ?

De plus si vous pouviez m'indiquer de bons sites ou outils sur les CSS ce serait fabuleux. Je connais alsacreation qui est très bien fait mais reste trop succint sur la manière d'utiliser chaque balise et toutes les options mises à disposition.

Merci d'avance.

 

[luxe-campagne]

le span est une balise en ligne, pas une balise de bloc, il faut l'oublier pour faire simple.
le div est un bloc, le plus standard possible.
pour que les div se placent les uns à côté des autres, il faut leur attribuer float:left ou float:right
quand il n'y aura plus de place, ils passeront à la ligne.

attention : la grosse différence est surtout entre ie et les autres navigateurs : ie ajoute à la largeur d'un bloc le margin le padding et le border ! C'est souvent ça qui tue les webdesigners au début...

 

[MarvinLeRouge]

Salut,

Ton problème ne résulte pas de l'usage de telle ou telle balise : c'est plutôt ta façon d'aborder le problème qui te pose problème.
Tu as apparemment ici une liste d'éléments, chaque élément étant constitué d'une image et d'un texte associé à cette image.

Conseil :
1) représente toute ta liste avec un ul et des li
2) dans chaque li, tu mets un élément img et un élément p
3) tu affectes à ton image un display de type bloc pour qu'elle provoque un retour à la ligne après elle
4) tu rends tes li flottant à gauche, avec une (largeur + marge droite) légèrement inférieure à 25% (légèrement inférieure pour éviter les arrondis qui pourraient te faire dépasser les 100% au total, et donc te renvoyer "à la ligne")

Ce n'est pas la seule méthode, il y en a d'autres. Toutes seront basées sur une bonne compréhension du positionnement en CSS. Je te conseille la lecture du tutoriel d'Openweb sur le sujet.

Sinon, pour aprendre les css, le bouquin de Raphaël Goetter est une bonne source.

 

[Luj]

te casses pas la tête : utilise une table pour faire ta grille de 4 colonnes / 2 lignes. utilises les div pour faire tes lignes et gérer l'ensemble de ta page.

quand tu auras un peu plus d'expérience, tu reviendras virer cette table, mais en attendant c'est déjà bien.

 

[luxe-campagne]

c'est valide w3c de mettre un p dans un li ?

 

[Rogers]

Tout d'abord merci pour vos réponses qui sont toutes intéressantes.

luxe-campagne, ta solution est celle qui m'a presque tout résolu mon problème toutefois il me reste quelques points à éclaircir.

Donc voila comment j'ai fait :

Dans le CSS :

div.icoadmin
{
float:left;
border: 0px;
text-align: center;
width:70px;
}

Dans la page :

echo '<div class="icoadmin"><a href="news.php"><img src="../images/admin/ico_news.gif"><div>News</div></a></div>';
echo '<div class="icoadmin"><a href="fiche_series.php"><img src="../images/admin/ico_identity.gif"><br>Fiche Séries</a></div>';
echo '<div class="icoadmin" ><a href="users.php"><img src="../images/admin/ico_users.gif"><br>Utilisateurs admins</a></div>';
echo '<div class="icoadmin"><a href="account.php"><img src="../images/admin/ico_myaccount.gif"><br>Mon Compte</a></div><br><br><br><br>';

Voila mes 4 icones. Si je veux mettre les 4 autres en dessous je suis obliger de rajouter 4 br sinon je reste sur la même ligne. Je ne comprend pas. Je croyais que les div étaient des blocs non en ligne, comment faire pour les faire passer à la ligne. Je ne suis pas persuadé que les 4 br se soit bien propre.

Merci à vous

 

[Luj]

il faut mettre un <div style="clear:both;"> à la fin de la ligne, sinon il continue pareil !

 

[netsys]

Il est vrai que le css c'est galere car les navigateurs ne l'interprete pas de la meme facon : entre bug de IE et les versions qui ne prennent pas en charge certains elts on a de quoi devenir fou, certe, mais une fois dompté c'est un vrai régale ! alors avant de vouloir refaire ton site en 3 jours forme toi un minimum -> www.alsacreations.com

 

[Rogers]

il faut mettre un <div style="clear:both;"> à la fin de la ligne, sinon il continue pareil !

Je suis idiot, je l'ai utilisé pour le footer mais je n'ai pas pensé à l'utiliser dans ce cas ! Merci.

alors avant de vouloir refaire ton site en 3 jours forme toi un minimum -> www.alsacreations.com

Je n'ai jamais dis que je voulais le refaire en trois jours. J'utilise le CSS pour tout ce qui est font et couleurs depuis 3 ans. Comme je le dis dans mon premier message, le site que tu m'indiques je l'ai déjà consulté mais je n'aime pas perdre mon temps à la théorie. Il n'y a qu'en faisant qu'on y arrive. Lire des tonnes de pages pour ingurgiter des tonnes d'informations sans les retenir, très peu pour moi.

Toutefois, mon seul problème est le placement des blocs et l'utilisation de certaines balises qui suivant le navigateur ou suivant le site sont à utiliser ou éviter. Cela ne rentre pas dans un raisonnement logique et c'est trop aléatoire à mon goût.

J'ai bien compris le pouvoir énorme des CSS mais ça reste toutefois relativement aléatoire voir complexe.

 

[luxe-campagne]

je ne dirai pas le contraire !

c'est un boulot de dingue, entre mac, pc, ie, firefox, opera, safari, ... et la conformité au w3C je crois que les sites avec des tableaux ont encore quelques années à vivre !
ou alors il faut que les navigateurs accordent leurs violons ;-)
c'est très empirique à la fin comme méthode, on a une idée de ce qu'on va faire, on teste partout, il y a toujours quelquechose qui ne marche pas quelque part !

 

[netsys]

Il n'y a qu'en faisant qu'on y arrive. Lire des tonnes de pages pour ingurgiter des tonnes d'informations sans les retenir, très peu pour moi.

Toutefois, mon seul problème est le placement des blocs et l'utilisation de certaines balises qui suivant le navigateur ou suivant le site sont à utiliser ou éviter. Cela ne rentre pas dans un raisonnement logique et c'est trop aléatoire à mon goût.

C'est pourquoi il faut connaitre les trucs des sites de référence. Je ne dis pas de lire tout le site avant de pratiquer mais d'y chercher les solutions car tous tes problèmes sont très courants...

 

[Rogers]

c'est très empirique à la fin comme méthode, on a une idée de ce qu'on va faire, on teste partout, il y a toujours quelquechose qui ne marche pas quelque part !

C'est cela qui me gêne le plus malheureusement.

C'est pourquoi il faut connaitre les trucs des sites de référence. Je ne dis pas de lire tout le site avant de pratiquer mais d'y chercher les solutions car tous tes problèmes sont très courants...

Et bien j'ai lu les principales choses qui m'intéressaient à savoir les positionnement float et position. Mais cela reste encore très confu.

Cette fois-ci mes icônes sont bien par 4 en lignes mais impossible de les centrer.

Voici le schéma :

<div id="2"><div class="1">img+txt</div>...</div>
<div id="3""><div class="1">img+txt</div>...</div>

Chacun de mes div est en align center mais en float:left. Les div 2 et 3 sont de taille 100% et j'ai appliqué un margin auto comme j'ai pu le lire ici et là pour centrer, ça ne fonctionne pas. Est-ce le float:left qui fait barrage ? Je m'y perds un peu.

 

[oli004]

c'est valide w3c de mettre un p dans un li ?

Pour le w3c je ne sais pas, mais moi, ma femme n'apprecierait pas ! :lol: :lol: :lol:

Sorry, j'ai pas pu resister !

 

[criba]

mdr

 

[K-féine]

Bonjour,

J'aimerais rapeller que le css ce n'est pas que un code valide et des div à la place des tableaux. C'est surtout une syntaxe de contenu correcte. Des éléments (titre, texte, menu, formulaires) reconnaissables par des balises adéquates (<hx>, <p>, <ul><li>, <label> etc..)

pour tes images et textes, je te conseille ceci :
http://pompage.net/pompe/cssdezero-5/

tout est expliqué. Non le css n'est pas aléatoire, mais c'est un code fastidieux et de nombreux paramètres sont à prendre en compte, pour ma part je n'utilise les padding left et right (IE et FF ne les gérant pas du tout de la même façon). Moi ça fait 5 mois qui je m'y suis vraiment mis, et j'ai encore beaucoup de choses à apprendre, mais accroche toi, c'est gratifiant de faire un site que l'on sait déjà beaucoup plus accessible.

 

[Rogers]

Salut,

J'aimerais rapeller que le css ce n'est pas que un code valide et des div à la place des tableaux. C'est surtout une syntaxe de contenu correcte. Des éléments (titre, texte, menu, formulaires) reconnaissables par des balises adéquates (<hx>, <p>, <ul><li>, <label> etc..)

Certes.

pour tes images et textes, je te conseille ceci :
http://pompage.net/pompe/cssdezero-5/

Cela parle de listes et non de ce que je souhaite faire. Ce qui est étonnant c'est queje cherche à faire quelquechose de très basique et il faut pinailler des heures pour y arriver. C'est beau le progrès...

tout est expliqué. Non le css n'est pas aléatoire, mais c'est un code fastidieux et de nombreux paramètres

C'est bien pour cela que c'est aléatoire. Il y a trop de paramètres à prendre en compte pour définir une constante. Ainsi, il faut refaire une nouvelle recette à chaque fois.

Moi ça fait 5 mois qui je m'y suis vraiment mis, et j'ai encore beaucoup de choses à apprendre, mais accroche toi, c'est gratifiant de faire un site que l'on sait déjà beaucoup plus accessible.

J'imagine. Je n'ai pas fait cela par obligation ou par choix. Juste parce que j'estime qu'il est temps de me préoccuper de ce langage. Mais je reste sur mon impression. Le CSS c'est extrèmement puissant mais extrêmement aléatoire. Quelle perte de temps pour ne rien faire. C'est d'un désagréable. Le pire c'est qu'on a aucune indication de l'erreur, il faut biduoiller.

Enfin bref, autant vous dire que passer 3 jours pour aligner 8 icônes ça ne m'encourage guère à vouloir continuer d'utiliser totalement ce langage. Si il m'en faut 3 de plus pour centre, dans deux ans j'aurai refait mon site.

Je reste très mitigé et extrêment déçu. Je vais encore passer mon après midi sur mes fameux icônes à centrer. Si cela ne fonctionne pas, ce n'est pas la peine. Un tableau me fera ça en 5 minutes. Dommage toutefois que de en pas pouvoir comprendre et trouver où est le problème.

 

[thierry8]

Et oui ça sera toujours ainsi tant que les navigateurs (ou plutôt leurs dirigeants) seront en guerre commercial !! (donc toujours ! )

Et oui....

 

[Rogers]

Et bien merci pour vos commentaires, réponses et aides.

J'ai réussi à faire ce que je voulais. Pour mieux apprécier les modifs sur les div, j'ai décidé de mettre une bordure le temps de faire chacune des modifications afin de pouvoir apprécier chaque ligne rajoutée. C'est beaucoup plus claire .


Merci à vous.

N'hésitez pas à me laisser vos bonnes adresses de sites pr le CSS, malgré que je n'aime pas la théorie, j'aime bien me documenter

 

[animostab]

voici un site qui te donne des exemple de realisations en CSS (plus de 600 mises en pages diverses mais c'est toujours la meme page html seul le CSS change)
http://www.csszengarden.com/tr/francais/

Voici aussi une page ou sont répértoriés tous les bug de IE pour les css (en anglais) http://www.positioniseverything.net/explorer.html

Enfin un truc qui evite deja de nombreux bug c'est ce code

{margin:0px; padding:0px;} appliqué a l élément que tu veux ca réduit deja les differences entre navigateurs apres tu peux y mettre les valeurs que tu veux

 

[animostab]

un truc que je voulais rajouter le css n' est pas du tout aléatoire (c' est meme tout le contraire) ce serai plutot IE et ms qui le sont (quand le client se transforme en testeur produit)