28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley smile
Jme présente, Sabot4ge, 19 ans, quasi titulaire d'un DUT Informatique Smiley cligne

Alors voila, ca fait pas mal de temps que je m'interesse de pres au CSS et tout ce qui est design web (en amateur). Je suis notamment en train de lire le bouquin "Transcender CSS" d'Andy Clarke, que je trouve très intéressant.
Mais ca fait pas mal de designs sur lesquels je bloque, c'est un probleme mineur mais j'aimerais bien comprendre le pourquoi du comment.

Le probleme :
L'affichage de ma page se fait bien en plein ecran, mais lorsque je passe la fenetre en plus petite taille, jusqu'à faire apparaitre l'ascenseur horizontale, mes répérteurs horizontaux ne s'affichent plus apres avoir fait glissé le slider.
Petit screen : http://img329.imageshack.us/img329/4864/erreurza8.jpg

Ce que j'ai dans mon code :
#header {background : url(images/r_header.gif) repeat-x;}
#centre {background : url(images/r_centre2.gif) repeat-x; height : 547px;}


Voila, peut etre est-ce juste un bug des navigateurs web ? (meme resultat sous FF et IE6/7)

Encore un autre petite question :
Je souhaite positionner un bloc div à 10px de la droite de la page. Je mets mon bloc en position : absolute et en right : 10px. Là c'est bon.
Mais j'aimerais qu'à partir d'une certaine taille de la fenetre, si elle devient trop petite, le right : 10px s'annule et qu'à la place j'ai un truc du genre margin-left : 500px; (c'est pour que le bloc div ne passe pas au dessus de mon logo, qui est collé à en haut à gauche de ma page).
J'espere avoir été assez clair.

Merci en tout cas si vous savez me répondre (j'ai essayé de chercher vite fait dans le forum, mais c'est pas évident de trouver ce genre de réponses)
Bon week end Smiley lol
Modifié par Sabot4ge (13 Apr 2008 - 12:55)
Bonjour,

Si c'est nécessaire, donner une largeur minimale au site:
div#global {
	min-width: 700px;
}


Quant au comportement constaté (capture d'écran), il me semble normal, et lié aux relations entre tes conteneurs, leur parent qui est sans doute l'élément body, et la largeur du viewport (zone de visualisation du navigateur).
Pas grand chose à faire si ce n'est peut-être placer l'image de fond à répéter en largeur comme fond de l'élément body (fond qui paradoxalement n'est pas limité à la largeur de cet élément), si c'est possible.
Merci pour ta réponse
J'ai appliqué ta méthode de min-width sur mon body, et le probleme persiste sous IE6 mais pas sur Fifrefox (IE7 j'ai pas pu tester)
Par contre, je capte pas vraiment pour l'histoire de l'affichage right: 10px qui s'annule
Tu saurais m'expliquer ca ?
Modifié par Sabot4ge (12 Apr 2008 - 19:21)
Sabot4ge a écrit :
Par contre, je capte pas vraiment pour l'histoire de l'affichage right: 10px qui s'annule

Hmm... je n'ai pas indiqué de méthode pour cela. Si je l'avais fait, j'aurais parlé de Javascript ou à la rigueur des media queries, mais ça me semble peu adapté ici.

L'utilisation de min-width devrait suffire. Par contre, il faudra peut-être placer l'élément positionné en absolu à l'intérieur de div#header, et positionner div#header en relatif, par exemple.

Et papy IE6 ne comprend effectivement pas min-width, contrairement à la version 7.
C'est parfait j'ai réussi à tout faire marcher
J'ai juste placé le div en relative et ajusté le min-width
Merci beaucoup !