Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

création cadre xhtml/css


7th Sky

Messages recommandés

bonsoir à tous,

voila je veux créer un cadre rectangulaire bleu avec les angles arrondis et si possible avec du style (genre ki reflete qui donne un look plutot design) j'espère écrire dans ce cadre.

je travaille sur du xhtml et du css.

pouvez vous m'indiquez comment faire svp ?

merci d'avance

Lien vers le commentaire
Partager sur d’autres sites

Pour les bords arrondis, je ne sais pas si c'est possible par du CSS, mais même si ça l'est, il ne vaut mieux pas l'utiliser car ce n'est pas compatible IE...

Donc => une image de même couleur que le fond bleu pour chaque bord (utiliser les float:left; float:right; pour les bords du haut).

Et pour le fond bleu, une image en background d'un bloc.

 

Donc :

Un bloc avec une image en fond. Dans ce bloc, 2 images (l'une en float: left; l'autre en float:right;) qui forment les bords arrondis.

 

Voila :P

Modifié par alex.hitman
Lien vers le commentaire
Partager sur d’autres sites

Principe :

- un "cadre" en position relative (pour pouvoir y positionner les coins de manière absolue)

- ledit "cadre" avec un padding de 30px (pour y caser des coins de 30px sans que ça bouffe sur le texte contenu dans le cadre)

- quatre images à l'intérieur du "cadre" positionnées absolument pour avoir [ top + left : 0px ] ou [ bottom + left : 0px ] etc.

- préférentiellement un z-index du "cadre" inférieur à celui des images des coins

 

Tiens, rien que pour toi :

Exemple de "cadre" avec des images comme coins (à noter qu'il est possible d'adapter pour changer, pas uniquement les coins, mais les bords...

 

 

Comme ça, pas de float (que IE a du mal à positionner) !

 

-- edit --

Il est également possible d'avoir, à l'intérieur du cadre, un DIV également positionné absolument et avec un z-index supérieur à celui des coins, ce qui permet de mettre du contenu "par-dessus" les images des coins et s'affranchir ainsi du padding du "cadre" (ça permet de gagner un peu de place pour afficher le contenu utile)...

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...