[CSS] Plein de décalages

[Kroezensjtern]

Salut à tous,

je me charge du design actuel de http://antre-jv.dyndns.org/ .

Comme vous pouvez le constater, c'est moche.

Liste des problèmes : sous Opera comme sous FX (pas testé sous IE), il se forme un epsace de 1px à gauche (FX) ou à droite (Opera) de chaque menu (AJV et JV.com). Bien sûr, cet espace créé un vilain décalage.

Pareil avec le tableau "NEWS" sur la page d'accueil, il y a un espace de 6 pixels.

Pour finir, bug spécifique à FX, la bordure haut des menus n'apparait pas. Apparemment, elle passe sous l'image. :copain:

J'ai bien fouillé le topic sur les CSS plus bas, il ne m'a malheureusement pas aidé.

Merci pour vos aides tous.

[wicked]

En gros tu fais un design css avec plein de <table>

efface tout et recommence

[Quarky]

Tout d'abord il faudrait aérer ton css, tu pourrais même l'externaliser dans un fichier pour que ce soit plus clair. En gros, pour aérer :

body{font-family:arial,verdana;font-size:13px;text-decoration:none;color:#000000;}

devient :

body {
font-family : arial,verdana;
font-size : 13px;
text-decoration : none;
color : #000;
}

Note que tu peux simplifier les codes couleurs du style AABBCC en ABC !

Sinon je suis sur Firefox 1.0.7 et je ne vois pas de gros problèmes ! A part le décalage de 1px des menus ...

[Cubic-Design]

C'est un peu coder à l'ancienne. Le mieux ça serait de tout refaire sans table en utilisant le css pour le layout, c'est plus propre. Sinon le css aussi évites de le mettre dans ta page, importes le depuis un fichiers externe

[Kroezensjtern]

Bon ben je vais passer aux CSS puisque personne ne connait la réponse.

Rassurez-moi : on peut contrôler l'emplacement de chaque objet au pixel près avec les CSS?

[Quarky]

Oh question de ca aucun problèmes

Mais je maitiens ce que je disais je ne vois qu'un petit problème sur ta page ....

- edit -

Ca marcherait peut être en agrandissant la largeur d'1 px sur l'image suivante :

- edit 2 -

Et pour le problème de droite, essaies de diminuer d'1px la colonne de ton menu ..

[Kroezensjtern]

Au secours!

Après avoir fini la bannière, j'ai bloqué quelques heures sur les menus et le contenu, que je n'arrive pas à mettre en forme. En attendnat j'ai utilisé des tableaux (c'est dans mes veines ces machins-là ).

Y'a pas moyen de mettre plusieurs <div> l'un a côté de l'autre en se passant des tableaux? J'ai bien cherché, mais je ne trouve rien à ce propos.

De plus, mes pages sont extrêmement larges, pourtant y'a rien qui prend l'espace. Vous savez d'où ça peut provenir?

Merci pour tout. Vraiment.

[Quarky]

Les div sont des éléments de block donc ils prennent toute la place sur un ligne même si tu y mets qu'un seul mot.

Mais il y a moyen de les mettre cote à cote avec l'instruction "float".

En gros :

HTML
<div class="a">blabla</div>
<div class="b">blabla2</div>
<div class="clearer"> </div>

CSS
.a {
float : left;
width : 45%;
}

.b {
float : right;
width : 45%;
}

.clearer {
clear : both;
}

Explication

Cela va faire "floater" ( ) les deux div les mettant donc a coté l'une de l'autre.

On peut ajouter comme ca plusieurs div en float mais attention au width. Il faut toujours l'indiquer. Tu remarqueras que 45+45 = 90 et pas 100 pour garder une marge de manoeuvre ...

Le float s'arrêtera jusqu'a rencontrer une div de classe clearer. A ce moment là, on revient à la ligne.

Je suis sympa ce soir !

PS: la route est parfois longue (pour certains) pour se défaire des tableaux mais je pense que tu te rendras vite compte de la puissance du css ! ...