Insérez une image dans un Cadre CSS + TexteFermé

Question

Bonjour,

Je débute en CSS. J'ai fait le design de mon site en photoshop (maquette).

Voir l'exemple ici : http://www.mystikweb.org/bassboom/maquette3.jpg

 J'ai réussi à placer mon header. Par contre, je ne suis pas capable d'insérer l'image de ma zone de texte ainsi que les boutons sur celle-ci. Je veux garder le design tel quel (le carré noir aux coins arondi avec la ligne bleu). Lorsque je réussi à joindre mon image dans un cadre, je suis incapable d'écrire dessus et dès que je l'allonge tout décale et ce n'est pas très jolie.

Il est a noter que ce carré sera porté à être allonger dépendent du texte qui y sera présent.

Comment faire donc pour insérer cet élément avec comme possibilité d'ajouter du texte sur celui-ci et mes boutons?

Si je ne suis pas clair, laissez le moi savoir, j'essaierai de l'être davantage.

Merci d'avance.
Configuration: Windows XP / Safari 532.5

notobe · Accepted Answer

Il faut faire un cadre (un div) global centré (si il est de taille fixe, avec un margin:auto ça se fait très facilement) et mettre dans ce div global le menu et le texte.
C'est plutôt basique comme disposition.
Voir ici comme exemple de gabarit à adapter :
http://www.alsacreations.com/static/gabarits/modele03.html

notobe · Answer

Vous parlez bien de votre menu accueil produit etc ?
Voir ici pour le code html + CSS :
http://css.mammouthland.net/menu-horizontal-en-css.php

miketeg · Answer

Bonjour,

La question n'est pas de créer le menu, puisqu'effectivement plusieurs tutoriels sont disponible à cet effet.

La question est surtout d'insérer le "carré" noir au centre de ma page et ensuite de réussir à inscrire du texte dans ce carré. En plus de réussir à mettre mon menu au haut de ce carré.

Il faudrait que je sois capable de faire des calques.

Exemple :

Calque 1 : Carré noir
Calque 2 : texte et menu

Merci

miketeg · Answer

Merci de votre réponse. Je vais testé sa ce soir. C'est peut-être basique, mais mes connaissances sont aussi basique en la matière.

Merci encore.

miketeg · Answer

Bonjour,

J'ai réussi à mettre mon image, par contre, elle ne s'allonge pas automatiquement lorsqu'on écrit du texte.

Exemple, elle à 500px de hauteur, dès qu'on écrit du texte pour plus long que 500px, on écrit directement sur le background, l'image ne s'allonge pas.

J'ai tenté de mettre un "black" devant l'url (background: url(images/contenu.png) no-repeat;) mais je perds le design au bas de mon carré...

Merci

Insérez une image dans un Cadre CSS + Texte

5 réponses

Discussions similaires

Newsletters