positionement avec CSS... ?

[J-L]

Salut...

J'ai refait le site de mon association sportive (club de tennis de table) pour qu'il soit "tableless", grace aux CSS. ( :siffle: j'avoue, j'ai pompé le look sur MacG! Promis, je mettrais une référence à Mac G!!! :zen: )

De bidouilles en bidouilles, je suis pas mécontant du résultat, je n'ai plus que deux petits problèmes... Sur la page d'accueil, je voudrais que le logo du club, et les dernières nouvelles, soit toujours séparés, comme si j'avais un tableau avec une colonne "dernières nouvelles" et une colonne dans laquelle j'affiche le logo. Je m'explique, pour l'instant, si j'ai beaucoup de news, en dessous du logo les lignes continuent de la gauche jusqu'à la droite complète de la page, sous le logo.

De plus, dans cette page et les autres pages des équipes, je voudrais que les deux tableaux du haut soient centrés dans leur conteneur, mais l'un à côté de l'autre. Et que le tableau du bas soit centré. Ce qui est étonant, c'est que sous mac, le tableau du bas est à gauche, comme ceux d'en haut, alors que sous PC (que ce soit IE ou Firefox) les deux tableaux du haut sont à gauche, et le tableau d'en dessous est au centre! :eek:

Pour info, ma feuille de styles est là.

Merci de vos conseils. De plus, si vous voyez un truc pas conforme aux normes du HTML, n'hésitez pas à me le signaler, mon but est de faire un truc "clean", si possible!

 

[Niconemo]

Tu devrais commencer par faire une sérieuse relecture de ta CSS et essaie de la présenter comme ça on y voit plus clair: (y'a pas des trucs en contradictoires ou redondants là ?):siffle:

table.equipes { 
    width: 350px; 
    background-color: #888888; 
    padding: 2px; 
    float: left;  
    margin-right: auto; 
    margin-left: auto; 
    margin: 2px; 
    padding: 2px; 
}

Nettoyage de printemps !

table.equipes { 
    width: 350px; 
    background-color: #888888; 
    padding: 2px;  
}

Ensuite crée trois classes différentes pour tables.equipes:

• Une tables.equipes centrée avec un margin-left et right auto
• Une tables.equipes.gauche avec un float left
• Une tables.equipes.droite avec un float right

(ce ne sont que des pistes de travail mais en gros ça devrait marcher)

 

[J-L]

Merci pour ta réponse!

J'ai (en plus d'une ou deux améliorations auxquelles je ne suis pas peu fier, notamment avec les onglets qui changent d'images de fond quand on passe dessus :rateau: ) rendu plus lisible, et un peu nettoyé ma feuille de styles...

Et j'ai tenté une approche de ce que tu me conseillais. Cependant, ça me fait un truc bizarre, maintenant, mais on doit pas être loin de la solution... Là les trois tableaux s'affichent sur la même ligne, avec le tableau en classe "gauche" à gauche, "droite" à droite et "equipes" au centre... :mouais:

 

[Nephou]

Tu souhaiterais que les trois tableaux soient sur des lignes différentes ? Alors il faut interdire la juxtaposition avec l'attribut clear.

pour le tableau gauche spécifier "clear:right;"
pour le tableau de droite spécifier "clear:left;"

je pense que le "clear:both;"pour le tableau centré est superflu mais on ne sait jamais

 

[J-L]

Nephou... Ce que je veux faire, c'est ça:

De plus, dans cette page et les autres pages des équipes, je voudrais que les deux tableaux du haut soient centrés dans leur conteneur, mais l'un à côté de l'autre.

et le troisième talbleau en dessous, centré dans la page...

Ce qui est étonnant, c'est que sur safari, FireFox et Firefox PC, ça bugg, pour l'instant (avec notamment le tableau de droite recouvrant le tableau du milieu, pour les petits écrans), mais que sous IE PC, ça m'affiche presque ce que je veux, avec le troisième tableau, celui centré, qui est en dessous des deux autres... Mais les deux autres sont pas côte à côte dans la page, celui de gauche est tout à gauche et celui de droite tout à droite... Edition: Si je mets "clear: center;" dans le style de mon tableau sensé être centré, ça devrait marcher?

J'ai un autre soucis avec IE PC, c'est que mon cadre blanc, dans lequel j'affiche le contenu de chacune de mes pages (en dessous de mes onglets) sous IE il est pas sur toute la longueur de la page (voir ici par exemple, avec IE PC...). :eek: :hein:

 

[J-L]

Bon, alors on oublie tout ... :rolleyes: J'ai changé le schmilblic... tant pis, je centre pas les tableaux au milieu, et l'avantage de ma technique, c'est que selon la grandeur de l'écran, les gens auront 1, 2 ou les 3 tableaux sur la même ligne, sinon il y aura un retour automatique.

Hop, merci en tout cas, à vous deux! :zen: