28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous, je suis nouveau sur ce forum. J'ai suivi la plupart des tutoriaux qui sont d'ailleurs très bien fait sur ce site. J'arrive beaucoup mieux à avancer dans mes projets et j'essai d'avoir un code plus "professionnel", c'est-à-dire faire les choses comme elles se doivent et éviter les ruses et autres bidouilles avec le CSS.
Malheureusement les cas particuliers ne sont pas rares en CSS. Par exemple, je souhaite placer un div en haut à droite de mon écran (c'est un div contenant un input text pour faire une recherche)

div#search {
	position:absolute;
	margin-left:400px;
	top:50px; /*en haut de page*/
	right:1em; /*a droite de la page*/
	width:300px;
	height:30px;
	background:url(pictures/bgsearch.png) no-repeat right top;
	}


Mon div est vraiment bien placé. Tellement bien que quand je rétrecis horizontalement la page, celui-ci s'enfonce dans le vide à gauche du navigateur. Je souhaite qu'il soit à une distance minimum de 400px (d'où le margin left) et qu'une scrollbar horizontale apparaisse en cas de diminution plus importante que celle fixée. Le problème est que le right:1em est trop obéissant Smiley langue . Pour le maintenir à l'écart du bord gauche, j'ai tenté un padding-left mais sans succès. Le "left:400px;" me donne un bon résultat, mais du coup le right:1em n'est plus respecté et le div n'est plus en haut à droite mais bien a 400px du bord gauche.
J'espère que c'est compréhensible. Si vous avez besoin d'une autre partie de mon code ou d'illustrations, demandez-moi.
Bonne journée,
Modifié par poupougnac (13 Jan 2008 - 23:00)
Bonjour,

C'est plutôt ton conteneur global qui aurait besoin d'un min-width: 700px, si je comprends bien.
Justement, j'y ai pensé, une scrollbar horizontale apparait au bon endroit mais le div reste collé au bord droit du navigateur et non de la page, conséquence, il s'enfonce à la gauche quand je retrécis. Je suis dans une impasse. Smiley confus
Que nenni!! Le même problème se pose, merci tout de même pour tes propositions. Je précise que le div est en position absolue, ça doit jouer.
Pour information, j'ai pu arranger ce problème en renoncant à ma position absolue. En position relative, j'ai pu placer mon div à l'endroit souhaité.