Insérez une image dans un Cadre CSS + Texte

miketeg Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

5 réponses

notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
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
2
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
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
0
miketeg Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
miketeg Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
miketeg Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
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.
0