28172 sujets

CSS et mise en forme, CSS3

bonjour à tous.

je suis entrain de customiser des MySpace. C'est du vieux code, y intervenir est très alambiqué et relève plutôt de chez Casto que du W3C. Enfin. C'est dans ces moment là qu'un méchant doute existentiel peut vous envahir.

Je cherchais un moyen de décoller du bord supérieur l'ensemble du contenu pour y intercaller une image de fond, à cette manière :

http://www.myspace.com/brisaroche

Attention, vous ne pouvez toucher au html. A ma grande surprise la solution, simplissime, est :


body {
margin-top: 500px;
background-image: monimage.jpg;
}

Smiley lol

Et bien je ne comprend plus. L'image de fond devrait se coller au début de son conteneur, c'est à dire body, qui est lui même décollé de 500px du bord, alors pourquoi cette #%¤§£ satanée image se colle elle au bord du navigateur ?

Bon je constate ça marche, j'ai tord...mais raison pour tout autre conteneur que body. Quelqu'un pour m'expliquer ce miracle ? et un peu d'affection ?
Smiley biggrin

bien à vous.
Modifié par seppele (13 Feb 2008 - 21:56)
Bonsoir,

Du point de vue de CSS, en HTML et en XHTML traité comme du HTML, body est l'élément magique dont le background est enlevé pour être attribué au canevas, c'est à dire la surface sur laquelle le site est dessiné. Cette surface est le plan géométrique dont la fenêtre du navigateur montre une petite section.

Ce comportement particulier de body est donc tout à fait normal. Pour le contrarier, si l'image ne doit pas se répéter, il faut préciser sa position via background-position. Ou jouer sur les marges et un background de l'élément html, sinon.

Sinon, pour l'affection, ma foi, ce n'est pas trop mon truc, mais disons poutou poutou quand même... Smiley ravi
Modifié par Laurent Denis (13 Feb 2008 - 20:01)
Yep merci de ta confirmation Laurent. J'imagine que il y a du DOM la dessous. Je ne suis donc pas complètement zinzin.
Merci aussi pour les poutous. Au fait, chouette photo ! Smiley biggrin
Merci pour ces explications Laurent Denis, et bon courage à toi seppele, Myspace c'est... laid!