Présentation CSS

[Misdre]

Bonjour

Je commence depuis peu à me mettre de façon plus sérieuse aux feuilles de style, malheureusement j'a iquelques problèmes auxquels je n'arrive pas à apporter de solutions

Par exemple, à cette adresse :

http://happinet.happicoin.org/sitarnaud/

(feuille de style : http://happinet.happicoin.org/sitarnaud/st...ss/cssgene.css)

Ne vous arrêtez pas aux couleurs ou encore à l'erreur mysql, c'est simplement parce que je n'ai pas finalisé ces points, je préfère terminer la CSS avant de continuer...

Vous pouvez voir que la div de la colonne de gauche et celle de la colonne de droite (respectivement "leftbox" et "rightbox") dépassent allégrement la div qui englobe toutes les autres : la div "main". Voilà, je souhaiterais faire disparaître ce problème, c'est à dire faire en sorte que la div "main" s'adapte automatiquement, histoire de ne pas se faire "massacrer" par les div "leftbox" et "rightbox".

C'est le problème principal.

Un autre problème se situe tout en haut de la page : comme vous pouvez le constater, il y a une sorte de bande blanche en dessus de "Nom du site". Je ne vois vraiment pas pourquoi elle n'apparaît pas de la même couleur ?

J'ai encore deux autres problèmes mais pour ces derniers je n'ai pas encore pris le temps de chercher d'où ils pouvaient venir. Donc je ne vous embête pas avec ceux-là...

Merci d'avance

[Yangzebul]

Alors, sans fioriture parce qu'il est presque 1h du mat, deux solutions pour le prix d'un post!

Pour ton titre, rajoute ca dans ta feuille css:

h1 {margin : 0;}

Pour tes colonnes, comme tu utilise la propriétée css float tes div sont retirés du flux courant et ne sont donc plus pris en compte pour le calcul des tailles. C'est pour ca que tes colonnes dépassent du cadre dans lequel elles sont imbriquées.

La solution ici :

http://www.pompage.net/pompe/colonnesfactices/

ps : je te conseille de lire la plupart des articles de ce site, c'est vraiment de la haute qualitée. Un site de référence

[Misdre]

Merci pour le lien !

Pour les colonnes factices, ça me semble un peu "barbare", mais on ne peut pas vraiment faire autremement apparement, et l'astuce donnée semble fonctionner.

Par contre - et pour continuer avec les problèmes sur la même page -, lorsque l'on passe la souris sur un lien de la colonne de gauche, on remarque un "élargissement" de la div. C'est bizarre

[Yangzebul]

Bah le truc, c'est que si tu nettoyait déjà un peu ta source on y verrais un peu plus clair:

- met les tabulations de manière plus logiques de manière à faciliter la lecture

- enlève les informations de mise en page de ta page xhtml, elles sont censées toutes être dans ta feuille css (bgcolor, <font>, ect...)

- pour ta colonne de droite tu utilise un tableau, alors que pourtant dans la colonne de gauche tu obtient le même résultat avec des <ul>/<li> (retire tes tableaux)

- tes javascripts sont parsemés un peu partout dans la source, ca aussi c'est génant pour la compréhension et contraire à l'esprit xhtml, comme pour les informations de mise en page met les dans un fichier externe (*.js)

Déjà si tu fais ca, on y verras nettement plus clair.

Sinon pour ton problème d'élargissement il n'apparaît pas sur Opera... Essaye de retirer la classe a:hover pour voir si ca vient pas de là.

ps : pour ta feuille de style tu n'est pas obligé de préciser la balise devant la classe, au contraire ca rends ta feuille moins flexible.

N'hésite pas à utiliser des id pour les éléments uniques (par ex : tes colonnes et ton header qui n'apparaissent logiquement qu'une fois par page).

Utilise les formes réduites et fait attention tu répète beaucoup de fois des choses inutiles... un petit exemple:

div.leftbox {
   width: 150px; 
   float: left; 
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 566px;
   padding-top: 0px;pa
   background-color: #FFFFFF;
   margin-bottom: 10px;
   margin-right: 0px;
   overflow: hidden;
}

#leftbox {
   width: 150px; 
   float: left; 
   padding: 0 5px 566px 5px;
   background: #FFF;
   margin: 0 0 10px 0;
   overflow: hidden;
}

pps : padding-bottom 566px

[Misdre]

Merci

Je vais réviser ma feuille de style et ma page pour les rendre plus "propres".

J'ai enlevé la classe a:hover, et il n'y a plus le problème, ça vient donc de là...

EDIT:

Voilà, j'ai légèrement nettoyé ma page et la feuille de style.

Pour le padding-bottom: 566px, c'était pour tester mon problème justement, si ça sortait de la div main ou pas.

Je suis allé à l'adresse du site Pompage plus haut, mais malgré ce qu'ils disent ça ne fonctionne pas... Ca doit venir de moi, et surtout du fait que j'utilise des positions relatives. Il y a un avantage à tout mettre en absolute ?

Bon, je vais en profiter pour réapprendre mieux les CSS, j'ai d'énormes lacunes...