Image d'en tête qui se répète en bas du forum.

le Sam Sep 29, 2007 10:39

Bonjour,

J'ai un petit soucis avec mon image d'entête, elle se répète en bas du forum.
J'ai beau chercher, impossible de trouver la solution. Mon image est pas assez large? trop large? j'ai un bout de code qui n'est correct ?

http://www.association-acem.blogspot.com/

Merci a toutes et a tous par avance.

philippe

:wink:

le Sam Sep 29, 2007 13:17

Ben déjà le code n'est pas super. Pourquoi ne pas utiliser une feuille de style ?

le Sam Sep 29, 2007 14:17

Il te manque un div de fermeture de ton header.

Soit là avant le top-nav
</div></div>
<div id='top-nav'>

soit plus vraissemblablement après la fermeture du toip nav,
</div>
<div id='main-wrapper'>

Si j'ai bien compté, tu commences le main-wrapper sans avoir fermé le header.

Maintenant pour avoir expérimenté les deux, je te redis mon conseil : va sur Wordpress, c'est beaucoup plus facile à gérer.

le Sam Sep 29, 2007 15:56

Oniris a écrit:Ben déjà le code n'est pas super. Pourquoi ne pas utiliser une feuille de style ?

Bonjour et merci de m'avoir répondu. je n'utilise pas de CSS car je suis un naze en info ( mais je me soigne ). J'essaie simplment de me debrouiller au plus vite pour rendre un service en prenant un modele exsitant et en rajoutant les onglets ( cest mon souhait )

Philippe

le Sam Sep 29, 2007 16:00

Marie-Aude a écrit:Il te manque un div de fermeture de ton header.

Soit là avant le top-nav
</div></div>
<div id='top-nav'>

soit plus vraissemblablement après la fermeture du toip nav,
</div>
<div id='main-wrapper'>

Si j'ai bien compté, tu commences le main-wrapper sans avoir fermé le header.

Maintenant pour avoir expérimenté les deux, je te redis mon conseil : va sur Wordpress, c'est beaucoup plus facile à gérer.

Bonjour,

Bon j'y connais pas grand et j'ai essayé d'appliquer ses 2 solutions une et a une et le probleme persitste. je te mets le code ci dessous pour plus de lisibilité.
Pour wordpress. en fait j'y vais pas car j'ai commecé la dessus et en allant voir cela m'a rebuté . De plus cela a l'air payant. Tu vas pas me dire que blogger sait pas cadrer une image quand meme c'est pas la lune.
si tu arrive a percer mon mystere cest vraiment cool.
philippe

__________________________________________________________

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* --- * Blogger Template Style---- * Name: Desert----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: 2007 August ----- */
/* Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#555" value="#555555">

<Variable name="PageBgColor" description="Page Background Color"
type="color" default="#bca572" value="#bca572">

<Variable name="pagetitlecolor" description="Page Header Color"
type="color" default="#ffc" value="#ffffcc">

<Variable name="datecolor" description="Date Header Color"
type="color" default="#fff" value="#ffffff">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#bca572" value="#bca572">

<Variable name="titlehovercolor" description="Post Title Hover Color"
type="color" default="#ffc" value="#ffffff">

<Variable name="footercolor" description="Post Footer Color"
type="color" default="#877256" value="#877256">

<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#65828e" value="#65828e">

<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#877256" value="#877256">

<Variable name="sidebarlink" description="Sidebar Link Color"
type="color" default="#65828e" value="#65828e">

<Variable name="sidebarhover" description="Sidebar Hover Color"
type="color" default="#fff" value="#ffffff">

<Variable name="linkcolor" description="Link Color"
type="color" default="#65828e" value="#65828e">

<Variable name="linkhover" description="Link Hover Color"
type="color" default="#f63" value="#ff6633">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#65828e" value="#65828e">

<Variable name="descriptioncolor" description="Description Color"
type="color" default="#fff" value="#ffffff">

<Variable name="Commentscolor" description="Comments Text Color"
type="color" default="#555" value="#555555">

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 83% Verdana, sans-serif" value="normal normal 83% Verdana, sans-serif">

<Variable name="pagetitlefont" description="Page Header Font"
type="font" default="normal normal 220% 'Georgia','Times New Roman'" value="normal normal 220% 'Georgia','Times New Roman'">

<Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 100% 'Georgia','Times New Roman'" value="normal bold 100% 'Georgia','Times New Roman'">

<Variable name="sidebarheaderfont" description="Sidebar Title Font"
type="font" default="normal bold 100% 'Georgia','Times New Roman'" value="normal bold 100% 'Georgia','Times New Roman'">

<Variable name="sidebarfont" description="Sidebar Text Font"
type="font" default="normal normal 90% 'Verdana','Arial'" value="normal normal 90% 'arial','tahoma'">

<Variable name="descriptionfont" description="Description Font"
type="font" default="normal normal 90% 'Verdana','Arial'" value="normal normal 90% 'Verdana','Arial'">
*/
/* ---( page defaults )--- */

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: $PageBgColor }
blockquote { margin: 0 0 0 30px; padding: 0px 0 0 20px; font-size: 88%; line-height: 1.5em; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

/* unordered list style */
ul { list-style: none; margin-left: 7px; padding: 0; }
li { list-style: none; padding-left: 8px; margin-bottom: 3px; }

/* links */
a:link { color: $linkcolor; text-decoration: none; }
a:visited { color: $visitedlinkcolor; text-decoration: none; }
a:hover { color: $linkhover; text-decoration: none; }
a:active { color: $visitedlinkcolor; text-decoration: none; }

/* ---( layout structure )---*/
#outer-wrapper { width: 1000px; margin: 0px auto 0; text-align: justify; font: normal normal 100% Verdana, sans-serif; }
#content-wrapper { margin-left: 0px; /* to avoid the border image */ width: 100%; }
#main { float: left; width: 650px; margin: 0px; padding-left:45px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
#sidebar { float: right; width: 250px; padding-right: 18px; font: $sidebarfont; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
#center {background: url('http://lh6.google.com/jvdmds/RteAFFV20CI/AAAAAAAAAjc/8vAPtdmJTsE/desert-2.jpg') repeat-y top left;}

/* ---( header and site name )--- */
#header-wrapper { margin: 0; padding: 0px}
#header { height:349px; width:1000px; color: $pagetitlecolor; background: url('http://img515.imageshack.us/img515/4463/desertacemombresoleilqt2.jpg') no-repeat top left; }
#header h1 { width: 380px; font: $pagetitlefont; padding: 200px 20px 5px 600px; filter: glow(color=#000000,Strength=5); text-align: center; }
#header h1 a { text-decoration: none; color: $pagetitlecolor; }
#header h1 a:hover { color: $descriptioncolor;}
#header .description { margin:-10px 20px 20px 600px; text-align: right; padding-right:20px; width:350px; font: $descriptionfont; color: $descriptioncolor; }
#top-nav {
position:absolute;
top:286px;
height:32px;
margin:0;
padding:31px;
text-align:left;
}
#top-nav a {
background:#232021;
margin:0;
padding:4px 10px;
text-decoration:none;
color:#FFFFFF;
}
#top-nav a:hover {
background:#595757;
color:#CCC;
text-decoration:none;
}
#top-nav ul {
margin:0;
padding:;
list-style:none;
}
#top-nav li {
margin:0;
padding:0;
display:inline;
}

/* ---( main column )--- */
h2.date-header { margin: 0; padding-left: 10px; font-size: 70%; color: $datecolor;}
.post h3 { margin: 0; font: $titlefont; color: $titlecolor; border-bottom: 1px solid #bca572; border-top: 1px solid #bca572;}
.post { margin-left:0; margin-right:0; margin-top:0; margin-bottom:1em; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:1em }
.post h3 a {color: $titlecolor; text-decoration: none;}
.post h3 a:hover { color: $titlehovercolor; text-decoration: none; }
.post-footer { margin: 0; padding: 0px; text-align: right; font-size: 88%; color:$footercolor;}
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #cccccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
.feed-links { clear: both; line-height: 2.5em; color:$footercolor;}
.blog-feeds { text-align: right; color:$footercolor; border-top: 1px solid #bca572;}
#blog-pager-newer-link { float: right; }
#blog-pager-older-link { float: left; }
#blog-pager { text-align: center; }

/* comment styles */
#comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: $Commentscolor;}
#comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 105%; color: $Commentscolor; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ }
#comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; }
.comment-body { padding: 0 10px 0 25px; }
.comment-body p { margin-bottom: 0; }
.comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999; }
.comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;}
.deleted-comment { font-style:italic; color:gray; }

/* ---( sidebar )--- */
.sidebar h2 { margin: 0 0 0 0; padding: 10px 0 0 0px; font: $sidebarheaderfont; color: $sidebarcolor; height: 32px; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin: 0; padding: 0 0 10px 10px; }
.sidebar a {color: $sidebarlink; text-decoration: none;}
.sidebar a:hover {color: $sidebarhover; }
.sidebar li { background: 0 5px; }
.profile-textblock { clear: both; margin-left: 0;}
.profile-img { float: right; margin: 0 5px 5px 0; border: 1px solid #ddd; padding: 4px;}

/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */ clear: both; }
#footer-wrapper {margin: 0px; padding:0 0 0 0; font-size: 70%; clear: both; }
#footer {margin: 0; width: 1000px; height:94px; background: url('http://apu.mabul.org/up/3/apu-3-ftquj11adtms6t6kehxzfoka.jpg') no-repeat top left; text-align:center; color: #555555; }
#footer-wrapper a { color: #555555; text-decoration: none; line-height:94px;}
#footer-wrapper a:hover{ color: #ffc; text-decoration: none;}

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #main,
body#layout #sidebar { padding-top: 0; margin-top: 0;}
body#layout #outer-wrapper,body#layout #content-wrapper { width: 770px;}
body#layout #sidebar { margin-right: 0; margin-bottom: 1em; }
body#layout #header,body#layout #footer,
body#layout #main { padding: 0; }
body#layout #content-wrapper { margin: 0px; }
#navbar-iframe { height:0px; visibility:hidden; display:none }

]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='center'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='LA CHAINE DE L"ESPOIR POUR LE MAGHREB (en-tête)' type='Header'/>
</b:section>

<div id='top-nav'>
<ul>

<li><a href='http://association-acem.blogspot.com/2007/09/accueil_28.html'><b>ACCUEIL</b></a></li>
<li><a href='http://association-acem.blogspot.com/2007/09/actions-en-cours_28.html'><b>ACTION EN COURS</b></a></li>
<li><a href='http://association-acem.blogspot.com/2007/09/suivi-de-nos-actions_28.html'><b>SUIVI DE NOS ACTIONS</b></a></li>
<li><a href='http://association-acem.blogspot.com/2007/09/nous-aider_28.html'><b>NOUS AIDER</b></a></li>
<li><a href='http://association-acem.blogspot.com/2007/09/historique_28.html'><b>HISTORIQUE</b></a></li>
<li><a href='http://association-acem.blogspot.com/2007/09/coordonnees.html'><b>COORDONNEES</b></a></li>
</ul>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='LA FONDATRICE DE L ACEM' type='Profile'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div class='footer section' id='footer'><div id='footer-wrapper'>
Design by: <a href='http://www.finalsense.com/services/blog_templates/' shape='rect' title='Blogger Templates'>FinalSense</a>
and Réalisation by : <a> Philippe Vidoni</a>
</div>
</div>
</div> 
</div></div> 
</body>
</html>

le Sam Sep 29, 2007 16:43

1. Tu n'as pas besoin de remettre le code ici, il suffit d'aller voir le code source de ta page pour le lire.

2. WordPress n'est pas payant, il est gratuit, que ce soit sur ton propre hébergeur ou sur hébergement de type monsite.wordpress.org

3. Je suis désolée de t'annoncer que comme Monsieur Jourdain tu fais du css sans le savoir, et c'est peut être pour cela que tu as des problèmes. (parce que tu ne le sais pas). Ce à quoi Oniris faisait allusion était de séparer la feuille de style du modèle lui-même, ce qui est effectivement intéressant, mais les styles peuvent parfaitement être intégrés directement à la page html, ce qui est le comportement par défaut, malheureusement, de blogger. Une syntaxe
#header-wrapper { margin: 0; padding: 0px}
#header { height:349px; width:1000px; color: $pagetitlecolor; background: url('http://img515.imageshack.us/img515/4463/desertacemombresoleilqt2.jpg') no-repeat top left; }
c'est du css

4. Ton problème semble lié au C du css, cascading style sheet, soit une des propriétés de ton header va sur le footer, pour une raison inconnue, soit ton header n'est pas fermé à l'endroit où il faut, et englobe ton wrapper, soit plusieurs choses. Je suis certaine qu'une partie du problème vient des onglets que tu as rajouté, et du nombre de divs ouvrant et fermant, mais en fait il s'agit de débugger un modèle blogger modifié, et j'avoue que si j'ai quitté blogger pour wordpress, c'est justement parce que ce genre de choses étaient effroyablement plus complexes sur blogger.

Pour savoir où se situe ton problème, méthode de débogage bien simple : repartir au modèle de base, mettre l'image header customisée, et voir si le problème apparait. Si oui, changer de modèle.
Sinon, mettre les onglets, voir si le problème apparait. Si oui changer la méthode d'inclusion des onglets, sinon remercier le ciel.

La dernière solution est que le probleme vienne de l'iframe, mais là je ne peux pas t'aider, je n'ai jamais touché aux iframes qui sont de toutes manières une saleté pour le référencement.

Maintenant, quand tu utilises les css, il est rarement possible de copier "tel quel" une solution faite ailleurs, car les différents élements de la page ont un impact les uns sur les autres.

le Sam Sep 29, 2007 18:06

Re,

En fait je viens de trouver, c'étais tellement simple que c'est passé a coté. mon image de header etait heberger chez imageshack. par precaution, je l'ai heberger chez " mabul" et la je l'ai mis dans le header et ...dans le footer. En retablissant le bon lien tout est rentre dans l'ordre.

merci neanmoins de toutes ses explications qui me servent quand meme.

pour la gratuite de wordpress. j'ai regarde tout a l'heure et il est specifie que les modif de CSS sont payantes.

il me reste neanmoins un bug sur mon blog. quand je vais dans mise en page il m'est impossible de rajouter des widgets dans la partie principale de la page j'ai un message d'erreur :

bX-z4woey
Informations supplémentaires
blogID: 3479739472774627819
host: www.blogger.com
uri: /rearrange

a noter que je peux rajouter des elements ailleurs que dans cette parti ( par exemple a droite dans le "about me"

j'ai tout fermé, j'ai recopier le code dans un blog bidon mais toujours le meme soucis

amicalement

le Sam Sep 29, 2007 20:05

Pour Wordpress, tu as des thèmes que tu peux choisir, en modifiant les couleurs, et l'image d'en tête, soit exactement ce que tu fais ici, et c'est plus facile et gratuit.

Les widgets ne sont pas censés se trouver dans la partie centrale de la page, mais uniquement dans les colonnes annexes. La partie centrale est censée uniquement montrer les posts.

Image d'en tête qui se répète en bas du forum.

Image d'en tête qui se répète en bas du forum.

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne