VIVEZ LE
FOOTBALL !

Posez votre question Signaler

Insérez une image dans un Cadre CSS + Texte

miketeg 7Messages postés 29 mars 2010Date d'inscription 5 mai 2010Dernière intervention - Dernière réponse le 6 avril 2010 à 17:28
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.
Lire la suite 

Insérez une image dans un Cadre CSS + Texte »

6 réponses
Réponse
+1
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
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
notobe- 6 avril 2010 à 17:28
C'est normal qu'elle ne s'allonge pas. Au pire, elle peut se répéter... mais pas s'allonger.
Pour qu'elle se répète en hauteur, mettre repeat:repeat-y à la place de no-repeat.
Ajouter un commentaire
Ce document intitulé « Insérez une image dans un Cadre CSS + Texte » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?