Une fenête avec une bande noire [Résolu]

[fireworks]

Bonjour,

Ce que je veux réaliser c'est la fenêtre avec une bande noire appelée: Final product, voir: http://vector.tutsplus.com/tutorials...e-illustrator/


Le code html:

Code :

1
2
3
4
5
6
<div class="final_image">
  <h4>Final Product <span>What You'll Be Creating</span></h4>
  <div class="final_image_inner">
      <img src="/tuts/635/filmcountdown_1.gif" alt="<?=$row_data['tuts_name']?>" title="<?=$row_data['tuts_name']?>" width="144" height="125"/>
        </div>
</div>

Le CSS:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.final_image h4 {
    background: url("images/global/final_image.jpg") no-repeat scroll left center #2D2D2D;
    color: #FFFFFF;
    font-size: 20px;
    letter-spacing: 0;
    margin: 0;
    padding: 15px 0 13px 20px !important;
    text-align: left;
    text-shadow: none;
}
 
 
.final_image h4 span {
    color: #828282;
    font-family: Arial;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
}
 
 
.final_image_inner img {
    border: 1px solid #898989;
    display: block;
    margin: 0 auto;
    max-width: 640px;
}

Mon essai de transposition sur mon site, voir: http://www.fireworkszone.com/gif-ani...tdown_635.html


A la différence du modèle il n'y a pas de bande noire et le bloc n'est pas entouré d'un trait

Pourtant on a bien : background: #2D2D2D; et border: 1px solid #898989;?

Merci de votre aide

[ornitho13]

Salut,

si tu regarde le code CSS appliqué via des outils comme firebug ou les outils de développement de chrome, tu verras que les instructions CSS que tu as mises ne sont pas présentes.

Es tu sûr d'avoir bien répercuter ta css?

Edit : de plus il existe dans ta css #tutorial h4 qui va prendre le pas sur .final_image h4 en terme de priorité...

[fireworks]

Envoyé par ornitho13

Salut,

si tu regarde le code CSS appliqué via des outils comme firebug ou les outils de développement de chrome, tu verras que les instructions CSS que tu as mises ne sont pas présentes.

Es tu sûr d'avoir bien répercuter ta css?

Edit : de plus il existe dans ta css #tutorial h4 qui va prendre le pas sur .final_image h4 en terme de priorité...

Bonjour,

La css est bien là dans la feuille tutorial.css.

La bande noire de la fenêtre apparait maintenant: http://www.fireworkszone.com/gif-ani...tdown_635.html


Ce qui est bizarre c'est cette classe:

Code :

1
2
3
4
5
6
.final_image_inner img {
    border: 1px solid #898989;
    display: block;
    margin: 0 auto;
    max-width: 640px;
}

qui n'est pas du tout répercutée

[fireworks]

Je viens de m'apercevoir que la classe ci dessous est bien répercutée:

Code :

1
2
3
4
5
6
.final_image_inner img {
    border: 5px solid red;
    display: block;
    margin: 0 auto;
    max-width: 640px;
}

Vous pouvez voir le trait rouge qui entoure l'image. Voir:
http://www.fireworkszone.com/gif-ani...tdown_635.html

Moi ce que je voudrais c'est:
http://vector.tutsplus.com/tutorials...e-illustrator/

La pomme rouge est entourée d'un trait tout autour avec une bande noire au niveau du titre.

[fireworks]

Envoyé par fireworks

Est ce que quelqu'un peut m'aider pour réaliser une fenêtre avec une bande noire supérieure comme sur ce site:

http://vector.tutsplus.com/tutorials...e-illustrator/

J'ai essayé de chercher sur google mais je n'ai rien trouvé.

La fenêtre est presque complète, voir:

http://www.fireworkszone.com/gif-ani...tdown_635.html


Il manque la bordure qui entoure la fenêtre.


Merci de votre aide

Grâce à Firebug j'ai presque réussit: http://www.fireworkszone.com/gif-ani...tdown_635.html

Le seul problème qui subsiste c'est un espace entre la bande noire et la partie inférieure. Quelqu'un pourrait me dire comment supprimer cet écart.


Merci

[Kouala]

Essaie de mettre margin-bottom à 0 sur ton <h4>.

[fireworks]

Envoyé par Kouala

Essaie de mettre margin-bottom à 0 sur ton <h4>.

Merci Kouala ça marche impec.