28218 sujets

CSS et mise en forme, CSS3

Coin de page

Salut

je me prend la tête sur un truc qui doit pas être compliqué pourtant...

J'ai un div que je souhaite positionner en coin de page (en haut à droite) et qu'il réadapte sa position lorsqu'on redimentionne la page.
Ca ça va Smiley smile

Par contre je voudrai lui limiter sa position : qu'il ne puisse pas se rapprocher du bord gauche de la page à moins de 500 pixels.

Et là je galère à trouver...
comment faire ça ?
Bonjour,

Pour positionner le bloc en haut à droite, tu peux opter pour du positionnement flottant ou du positionnement absolu (position: absolute; top: 0; right: 0;).

Pour limiter la largeur, il faut agir sur le conteneur (un conteneur global, voire l'élément BODY) et utiliser la propriété min-width.
j'ai testé, on s'en rapproche mais ça va pas.
Voila ce que ça donne ici

Le coin passe au dessus de la zone des 500px si on réduit la page.

Par contre j'ai réussi à faire l'effet souhaité ici

Sauf que là ce sont des cellules d'un tableau et pas des DIV.

Le coin est toujours calé en haut à droite et bute à 500px du bord gauche si on réduit la fenêtre.
--> Donc est ce déjà possible de faire le même effet avec des DIV ou le tableau est-il la seule solution à votre avis ?
Bonjour,

peut etre avec une 2eme div ? :

<body>
    <div id="bloc"/>
    <div id="coin-wrap"><div id="coin"/></div>
</body>


avec 

#coin {
    background-color:#6633CC;
    height:150px;
    width:150px;
    position:absolute;
    right:0;
}
#coin-wrap{
    min-width:650px;
    width:100%;
    position: absolute;
}

Modifié par siddhy (29 Jun 2009 - 12:32)
C'est la solution en effet.

Merci beaucoup Smiley biggrin

Juste une remarque : les codes de ce type 
<div id="bloc"/>
posent des problèmes sur safari Mac par exemple mais c'est impect si on met 
<div id="bloc"></div>
Sujet clos
Aller à