Help html pour mon blog

Résolu/Fermé
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009 - 23 oct. 2008 à 13:54
 Utilisateur anonyme - 26 oct. 2008 à 00:54
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;
}

20 réponses

Utilisateur anonyme
26 oct. 2008 à 00:54
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 !
0
Utilisateur anonyme
23 oct. 2008 à 13:57
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.
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
23 oct. 2008 à 14:37
Merci Eiewn,

Pas d'image en vue :-o

Le block contenant mon nom et le titre est viré, mais j'en ai besoin en fait.
-1
Utilisateur anonyme
23 oct. 2008 à 14:45
Erf, j'ai pas cerné le problème. Pourrais-tu rédiger clairement ton dilemme ? ^^
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
23 oct. 2008 à 14:59
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. ???
-1

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

Posez votre question
Utilisateur anonyme
23 oct. 2008 à 15:07
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é ^^
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
23 oct. 2008 à 17:51
MD-rage : toujours pas d'img, même avec les guillemets...rhrrrr !
-1
Utilisateur anonyme
24 oct. 2008 à 00:07
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.
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 08:44
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

<!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" xml:lang="{$blog.language}" lang="{$blog.language}">
<head>
<link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />
<title>{$blog.title}</title>
<meta name="description" content="{$blog.description|htmlspecialchars}" />
<meta name="keywords" content="{$blog.keywords|htmlspecialchars}" />
<meta name="abstract" content="{$blog.description|htmlspecialchars}" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="publisher" content="http://en.blogspirit.com/" />
<meta name="generator" content="http://en.blogspirit.com/" />
<meta name="robots" content="{if $blog.referencing}index,follow{else}noindex,nofollow{/if}" />
<link rel="stylesheet" href="{$blog.url}style.css" type="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="{$blog.url}atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$blog.url}index.rss" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="{$platform.url}rsd/{$blog.blog_id}" />
</head>
<body>
<div id="container">
<div class="container-decorator1">
<div class="container-decorator2">
<div id="banner-img">
<div class="banner-img-decorator1">
<div class="banner-img-decorator2">
<div class="img-link">
<a href="{$blog.url}"></a>
</div>
</div>
</div>
</div>
<div id="banner">
<div class="banner-decorator1">
<div class="banner-decorator2">
<h1><a href="{$blog.url}">{$blog.title}</a></h1>
<h2>{$blog.description|default:" "}</h2>
</div>
</div>
</div>
<div id="left">
<div class="left-decorator1">
<div class="left-decorator2">
{sidebar file="sidebar1.htm"}
</div>
</div>
</div>
<div id="right">
<div class="right-decorator1">
<div class="right-decorator2">
{sidebar file="sidebar2.htm"}
</div>
</div>
</div>
<div id="center">
<div class="center-decorator1">
<div class="center-decorator2">
<div class="content">
{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`"}
<h2 class="date"><span>{$post.pubdate|date_format:"`$blog.date_format`"}</span></h2>
{/date_header}
<a id="a{$post.id}"></a>
<h3 id="p{$post.iteration}"><span>{$post.title}</span></h3>
<div class="posttext">
<div class="posttext-decorator1">
<div class="posttext-decorator2">
{$post.source|trimlonglines:60}
<div style="clear:both;"></div>
</div>
</div>
</div>
{if $post.extended}<p class="readmore"><a href="{$post.permalink}#more">{t}Read more ...{/t}</a></p>{/if}
<div class="postbottom">
<div class="postbottom-decorator1">
<div class="postbottom-decorator2">
<p class="posted">
{post_footer}
</p>
</div>
</div>a
</div>
{/posts}
<div class="pager">{blog_pager}</div>
</div>
</div>
</div>
</div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
</body>
</html>



ç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%;
}
-1
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 21
24 oct. 2008 à 09:13
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.
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 09:34
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.
-1
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 21
24 oct. 2008 à 09:39
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.
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 09:56
Ah la vache !

Je suis la reine des bourriques : pas mis de nom en enregistrant mes fichiers dans les dossiers du blog, du coup, ok, elles étaient là sous mes yeux, mais en ligne : erreur 404.

J'ai tout remis en place en suivant la marche, je vais recommencer et ça devrait marcher,

Merci pour votre aide, excusez moi pour cette bourde,

Je vous dis la suite
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 11:58
J'ai remis les fichiers en ordre, on les voit sur le web, MAIS, toujours pas de bannière, pfff....
-1
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 21
24 oct. 2008 à 12:43
repost ton css...
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 14:22
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;
}
-1
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 21
24 oct. 2008 à 14:31
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.
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 15:04
bah, cela ne change rien, j'ai viré les guillemets ( qui sont pourtants dans le tuto) et ajouté un espace avant la )


re pfffff
-1
Utilisateur anonyme
24 oct. 2008 à 16:38
Bon bha dans ce cas essaie
background-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 :/
-1
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 21
24 oct. 2008 à 17:27
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...
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 18:11
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 !"
-1
Alinéann Messages postés 23 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 18 mars 2009
24 oct. 2008 à 18:47
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 :-))
-1