help html pour mon blogRésolu/Fermé

Question

Bonjour,

Je viens de créer un blog et ne réussis pas à installer ma bannière en en-tête.

Voir : http://toxine.hautetfort.com

J'ai reçu ce tuto :

http://leblog.hautetfort.com/archive/2008/07/02/inserer-sa-propre-banniere.html

et j'ai cru que ça allait marcher. Couac !

Voici ma feuille de style modifiée : il y a un début de réalisation mais mon image n'est pas en place.

Merci pour votre attention.

/****
 *
 * PT piste43-1
 *
****/

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #41494d;
    font-size: 105%;
    word-spacing: normal;
    text-align: center;
    background: #fdfdfd;
}
#container {
    width: 910px;
    line-height: 140%;
    margin: 0px auto 0px auto;
    text-align: left;
    background: #fff url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/container_bg.gif repeat-y 0px 0px;
}
.container-decorator1 {
    width: 900px;
    margin: 0px auto 0px auto;
    background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/pied.gif no-repeat 760px bottom;
    overflow:hidden;
    zoom:1;
}
#left {
    color: #000;
    overflow: hidden;
    width: 187px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
        float: left;
    }
#right {
    color: #000;
    overflow: hidden;
    width: 187px;
        float: right;
     
}
#center {
    overflow: hidden;
    float: left;
    width: 511px;
    margin-left: 10px;
}
#banner {
    width: 900px;
    height: 149px;
    margin:0px 0px 20px 0px;
    padding:0px 0px 0px 0px;
    background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/bandeau1.gif no-repeat;
}
#banner h1 {
    margin: 0px 0px 0px 0px;
    padding: 32px 0px 0px 30px;
    font-size: 27px;
    font-weight: bold;
}
#banner h2 {
    width: auto;
    padding: 10px 0px 0px 30px;
    margin: 0px 0px 0px 0px;
    color:#fff;
    font-size: 14px;
    font-weight: normal;
}
#banner a {
    color: #fff;
    text-decoration: none;
}
#banner-img {
    display: block;
background:#c32443;
background:#c32443 url (http://toxine.hautetfort.com/images/vip_1.jpg) no-repeat 0%0%
height:344px;

}
div.img-link a {
    display: block;
    text-decoration: none;
    width: 100%;
height:344px;
}

Utilisateur anonyme · Answer

Xhtml transitional hmmmm ...

Essaye quand même de mettre ta bannière pour voir ce que ça donne, si c'est juste pour la placer ça se réglera relativement simplement.

Utilisateur anonyme · Answer

Erf, j'ai pas cerné le problème. Pourrais-tu rédiger clairement ton dilemme ? ^^

Alinéann · Answer

Le grand cadre rose devrait contenir une img : regarde, elle est la dessous :

#banner-img { 
display: block; 
background:#c32443; 
background:#c32443 url (http://toxine.hautetfort.com/images/vip_1.jpg) no-repeat 0%0% 
height:344px; 

Pourquoi elle est pas visible, puisqu'elle EST dans mon code.   ???

Utilisateur anonyme · Answer

MDR c'est tout con xD Pourquoi je l'ai vu avant ?! ^^

background:#c32443 url ("http://toxine.hautetfort.com/images/vip_1.jpg") no-repeat 0%0% Voilà y avait qu'à rajouter les guillimets que t'avais oublié ^^

Alinéann · Answer

MD-rage : toujours pas d'img, même avec les guillemets...rhrrrr !

Utilisateur anonyme · Answer

Hum, j'ai été encore plus con

Voilà le petit bout de code que t'as mis un peu plus haut modifié est normalement correct.

Le tiens:
#banner-img {
display: block;
background:#c32443;
background:#c32443 url (http://toxine.hautetfort.com/images/vip_1.jpg) no-repeat 0%0%
height:344px;


Celui que tu vas mettre(modifié):
#banner-img {
display: block;
background:#c32443;
background-image: url (http://toxine.hautetfort.com/images/vip_1.jpg); 
background-repeat: no-repeat;
background-position: 0%0%;
}


On ne definit pas la hauteur d'une image de fond. Peut-être que de mettre un fond de couleur + un fond image créer une discordance. Separe tes proprités par des points virgules (;). Et tu as oublié de mettre les attributs des valeurs.

Alinéann · Answer

ah ça résiste, ça résiste ! Merci pour ta persévérance. J'ai remis la bannière telle que prévue par l'hébergeur. Le but : insérer Ma bannière, c'est à dire mon image. Comme elle fait 500px de large, j'ai mis un fond couleur (#32443). C'est ce que le tuto explique. Je me demande s'il ne faudrait pas modifier le code de cette page d'accueil, pour qu'il concorde avec la mise en place de la bannière. ça : page d'accueil {$blog.title}

{sidebar file="sidebar1.htm"}

{sidebar file="sidebar2.htm"}

{posts assign="post" items_on_index="`$blog.items_on_index`" sort_posts="`$blog.sort_posts`" show_on_index="`$blog.show_on_index`" commentcount="commentcount" trackbackcount="trackbackcount" categories="categories"} {date_header date="`$post.pubdate`"}

{$post.pubdate|date_format:"`$blog.date_format`"}

{/date_header}

{$post.title}

{$post.source|trimlonglines:60}

{if $post.extended}

{t}Read more ...{/t}

{/if}

{post_footer}

a

{/posts}

ça :feuille de style /**** * * PT piste43-1 * ****/ body { margin: 0; padding: 0; font-family: Tahoma,Arial,sans-serif; color: #41494d; font-size: 100%; word-spacing: normal; text-align: center; background: #fdfdfd; } #container { width: 910px; line-height: 140%; margin: 0px auto 0px auto; text-align: left; background: #fff url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/container_bg.gif repeat-y 0px 0px; } .container-decorator1 { width: 900px; margin: 0px auto 0px auto; background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/pied.gif no-repeat 760px bottom; overflow:hidden; zoom:1; } #left { color: #000; overflow: hidden; width: 187px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left; } #right { color: #000; overflow: hidden; width: 187px; float: right; } #center { overflow: hidden; float: left; width: 511px; margin-left: 10px; } #banner { width: 900px; height: 149px; margin:0px 0px 20px 0px; padding:0px 0px 0px 0px; background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/bandeau1.gif no-repeat; } #banner h1 { margin: 0px 0px 0px 0px; padding: 32px 0px 0px 30px; font-size: 27px; font-weight: bold; } #banner h2 { width: auto; padding: 10px 0px 0px 30px; margin: 0px 0px 0px 0px; color:#fff; font-size: 14px; font-weight: normal; } #banner a { color: #fff; text-decoration: none; } #banner-img { display: none; } div.img-link a { display: block; text-decoration: none; width: 100%; }

hani_ · Answer

tu as essayé les liens de tes images. il sont en absolue et vu le chemin d'accès il sont en ligne. sauf qu'on ne peux pas allez les voir --> 404 not found

sinon pour l'histoire des guillemets, on peut les mettre mais il sont fortement déconseillé.
et pour ta syntaxe background:#color url(chemin d'accès) no-repeat positionY positionX; elle est tout a  fait correcte.

Alinéann · Answer

Merci Hani,

En effet, j'ai eu aussi l'erreur 404 et cela m'a intriguée.

En mode administration du blog, j'ai mis cette img dans mes dossiers, ainsi que d'autres.

Comment faire ? Je vais vérifier les autres aussi.

hani_ · Answer

j'ai l'impression qu'il considère la parenthèse de fermeture de ton attribut url() comme faisant partit du lien. essais de mettre un espace avant de fermer ta parenthèse.

Alinéann · Answer

J'ai remis les fichiers en ordre, on les voit sur le web, MAIS, toujours pas de bannière, pfff....

hani_ · Answer

repost ton css...

Alinéann · Answer

ceci est en ligne actuellement.
je soupçonne  
 
#banner {
    width: 900px;
    height: 149px;
    margin:0px 0px 20px 0px;
    padding:0px 0px 0px 0px;
    background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/bandeau1.gif no-repeat;
display:none;

de semer la pagaille. Et si je collais mon img dedans à la place du bandeau gif ?....en mettant display:block;   ???


/****
 *
 * PT piste43-1
 *
****/

body {
    margin: 0;
    padding: 0;
    font-family: Tahoma,Arial,sans-serif;
    color: #41494d;
    font-size: 100%;
    word-spacing: normal;
    text-align: center;
    background: #fdfdfd;
}
#container {
    width: 910px;
    line-height: 140%;
    margin: 0px auto 0px auto;
    text-align: left;
    background: #fff url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/container_bg.gif repeat-y 0px 0px;
}
.container-decorator1 {
    width: 900px;
    margin: 0px auto 0px auto;
    background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/pied.gif no-repeat 760px bottom;
    overflow:hidden;
    zoom:1;
}
#left {
    color: #000;
    overflow: hidden;
    width: 187px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
        float: left;
    }
#right {
    color: #000;
    overflow: hidden;
    width: 187px;
        float: right;
     
}
#center {
    overflow: hidden;
    float: left;
    width: 511px;
    margin-left: 10px;
}
#banner {
    width: 900px;
    height: 149px;
    margin:0px 0px 20px 0px;
    padding:0px 0px 0px 0px;
    background: url(http://static.hautetfort.com/backend/graphics/design/preview/set39/d21616/bandeau1.gif no-repeat;
display:none;
}
#banner h1 {
    margin: 0px 0px 0px 0px;
    padding: 32px 0px 0px 30px;
    font-size: 27px;
    font-weight: bold;
}
#banner h2 {
    width: auto;
    padding: 10px 0px 0px 30px;
    margin: 0px 0px 0px 0px;
    color:#fff;
    font-size: 14px;
    font-weight: normal;
}
#banner a {
    color: #fff;
    text-decoration: none;
}
#banner-img {
background:#d50902;
display: block;
background:#d50902 url ( "http://toxine.hautetfort.com/images/vip_2.jpg" ) no-repeat 0%0%;
height:342px;
}
div.img-link a {
    display: block;
    text-decoration: none;
    width: 100%;
height:342px;
}

hani_ · Answer

encore une fois le background:url() pose problème. L'url de l'image est bonne, mais la parenthèse fermante de url() est considéré comme faisant partie de l'url de l'image. il faudrait donc mettre un espace avant de fermer la parenthèse.

 background:url(urldel'image ESPACE);
et les "" dans le  background:url() sont très fortement déconseillées.

Alinéann · Answer

bah, cela ne change rien, j'ai viré les guillemets ( qui sont pourtants dans le tuto) et ajouté un espace avant la )


re pfffff

Utilisateur anonyme · Answer

Bon bha dans ce cas essaiebackground-image: url('urldel'image'); 

Pourtant regarde, je vais prendre comme exemple une page à moi: http://eiewn.e3b.org/ Si tu vas directement dans la css: http://eiewn.e3b.org/css/styles.css 

Tu verras que mon background-image est comme ceci:background-image: url("../mss.png");


Le "../mss.png" change selon le chemin bien sûr mais autremment c'est ça.
.... Pourtant j'ai mis des guillimets :/

hani_ · Answer

Je n'ai pas dis que les guillemets était interdites, j'ai simplement affirmé qu'elle était très fortement déconseillé par les normes css w3c.

ça marche quand même avec (quoique problème d'incompatibilité parfois.)


a Eiewn
ton css resemble a ça 

body {
background-attachment:fixed;
background-image:url(../mss.png);
background-position:47.5% 50%;
background-repeat:no-repeat;
}
h1 {
color:red;
font-size:xx-large;
text-align:center;
}
h1, p {
font-family:"Trebuchet MS",sans-serif;
}
.time {
font-family:"MS Reference Sans Serif",sans-serif;
left:33%;
margin-top:1%;
position:relative;
width:33%;
}
.ftime {
font-family:"MS Reference Sans Serif",sans-serif;
}
.rtime {
color:orange;
font-size:x-large;
}
.source {
font-size:x-small;
text-align:right;
}
img {
border:0 none;
}
#compteur {
left:1%;
position:absolute;
top:1%;
}

je ne vois pas de guillemets dans le url()...

a moins que firebug parse le css et l'affiche valide w3c... si c'est vrai je dit... putain j'aime firefox... et je sais pourquoi...

Alinéann · Answer

J'ai essayé avec ET sans les guillemets, ce ne change rien, aarff !

Et pourtant, j'ai l'impression de voir un bout de quelque chose en bas du rectangle rouge, 

comme une bannière qui voudrait s'afficher, mais ne peut pas passer....

A propos de Mozilla, quand je visite un lien au sein d'un site, si je clique sur la croix
 pour fermer ce lien et revenir au site, cela ferme tout !

Ce navigateur, c'est "Ah que Couic !"

Alinéann · Answer

Je viens de comprendre : le modèle de blog que j'ai choisi ne permet pas d'installer une bannière !

Je l'avais choisi car c'est le seul dont la couleur rouge me plaît, il faut que j'en choisisse un autre,

désolée pour le remue méninge inutile,

Bonne soirée à vous deux  :-))

Utilisateur anonyme · Answer

hani_ moi je les vois les guillimets sur firefox >_<
Et puis apparement ça change rien aux standards regarde: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Feiewn.e3b.org%2Fcss%2Fstyles.css+&profile=css21&usermedium=all&warning=1&lang=fr J'ai 3 erreurs et elles sont pas liées aux guillimets !

Help html pour mon blog

20 réponses

Discussions similaires

Newsletters