Forums Développement Multimédia

Aller au contenu

Positionnement CSS

CODE HTML CSS

8 réponses à ce sujet

#1 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 26 January 2011 - 11:42 AM

Bonjour,

Tout d'abord, je vous remercie par avance de votre aide. Je vais essayer d'être le plus explicite possible.
J'ai une page HTML vierge dans laquelle j'ai une balise div qui me détermine mon espace de contenu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

body {
        background-color: #f5f5f5;
}
#header {
        border: 1px solid #d3d3d3;
        height: 200px;
        width: 800px;
        background-color: #FFF;
}
Mon problème est que je n'arrive pas à positionner une "étiquette" pour faire l'effet suivant : http://themeforest.n..._preview/126567
Comme "contact me", le "dépassement", comment faire s'il vous plait ?

Je vous remercie encore et vous prie de m'excuser si je me suis mal exprimer, bonne journée, ;-)

#2 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 26 January 2011 - 11:56 AM

Bonjour damien59553,

je n'ai pas compris ta demande, peux-tu préciser un peu plus ^^

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#3 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 26 January 2011 - 12:14 PM

Pas de problème, je te réponds ici même après manger.
Bon appétit et merci,

#4 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 26 January 2011 - 12:35 PM

Ren,

J'ai joint le modèle de ce que je souhaiterai réaliser afin de mieux t'expliquer.

Au départ, j'ai donc une page vierge à laquelle j'insère une balise div pour réaliser ce qui est encadré en rouge.

Ensuite, je voudrais insérer ce qui est entouré en vert mais je ne sais pas comment faire.
Je n'arrive pas à faire "déborder" l'étiquette en dehors de mon cadre défini par ma balise div.

Je voudrais réaliser l'effet relief mais j'ignore comment placer mes images.

Merci de ton aide, ;-)

#5 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 26 January 2011 - 15:09 PM

Bonjour damien59553,

ça y est je crois que j'ai capté ! ;-)

Peux-tu essayer d'ajouter le style suivant à ton div étiquette :

CSS

position : relative;
left:-20px (ou right:-20px en fonction d'où il se trouve)

Sur le site que tu pointes ils utilisent un positionnement absolue pour cette étiquette.
Mais ça n'est pas forcément nécessaire.

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#6 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 26 January 2011 - 15:25 PM

Je suis en train d'essayer, donc j'ai ma première balise div, puis j'en crée une seconde pour ce que nous nommerons l'étiquette.
Pour le moment ça fonctionne à moitié, j'ai bien le décalage, ce que je n'arrivais pas à faire précédemment mais quand j'ajoute l'image en tant que background, elle n'apparait pas ni dans l'affichage en direct, ni sous Firefox, ni sous IE9. Par contre, si j'écris "Damien" dans le cadre du <div>, là elle apparait ?!

J'essaie et si ça ne marche pas, je peux me permettre de te recontacter ?

Merci ;-)

#7 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 26 January 2011 - 15:28 PM

Bonjour damien59553,

tu dois fixer une hauteur et une largeur sur ton div étiquette :

CSS
width:200px;
height:50px;

;-)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#8 damien59553

    Ceinture Jaune

  • Members
  • PipPip
  • 26 messages

Posté 26 January 2011 - 15:35 PM

Effectivement. Vu que j'essaie en direct, je ne l'avais pas précisé, j'aurais pu chercher encore longtemps.

Merci beaucoup Ren, vraiment.

Si j'ai d'autres soucis, je peux continuer à les exposer ?

Bonne fin d'après midi.

Damien ;-)

#9 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 26 January 2011 - 15:41 PM

Bonjour damien59553,

bien entendu ;-)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP