[Question] Encadrer notre forum avec des images

Zioup là

Des questions sur [ce tuto] ? C'est par ici ^^

Date d'inscription: 05/06/2011 Distinctions:

Hoow je sens que ça va bien me servir ça pour la prochaine version de mon forum, super tuto Miettes :=):

(PS : Je me suis permise de verrouiller le topic du tuto Wink

)

_________________

Date d'inscription: 22/11/2011

Alors moi j'ai un petit problème,

J'ai réussi à mettre le haut du fond en place, mais lorsque j'essaie de mettre le fond intermédiaire, et bien celui-ci remplace toujours le haut alors que je met les paragraphe l'un à la suite de l'autre.

Peut-être que je le marque mal celà dit, je place les css de la manière suivante :

Code:

body {

margin:0;
padding:0;
width:100%;

#fd_haut{
width:1000px;
height: 250px;
background: url('http://sd-1.archive-host.com/membres/images/155503523822256639/Haut2.jpg');
background-repeat:no-repeat;
background-position:center top;
margin:auto;

#fd_milieu{
width:1000px;
height: 250px;
background: url('http://sd-1.archive-host.com/membres/images/155503523822256639/intermediaire.jpg');
background-repeat:no-repeat;
background-position:center top;
margin:auto;

}
}
}

Je n'ai pas encore mis le bas vu que je bute déjà avant xD.

Date d'inscription: 05/06/2011 Distinctions:

Au vu de ton CSS, c'est parce que tu fermes mal les class et id
Exemple :

Code:

body { /* Là on ouvre */
propriété ici
} /* Et après les propriétés on ferme */
.ma_class { /*J'ouvre*/
mes propriétés
} /*Je ferme */

_________________

Date d'inscription: 22/11/2011

Spoiler:

Comme ça tu veux dire? Parce que même comme ça, mon image intermédiaire se répète mais passe toujours au dessus du fond superieur :s.

Date d'inscription: 05/06/2011 Distinctions:

Tu saurais faire un screen ?

Et il y a toujours une erreur dans ton CSS, regarde mon exemple :

body

{ /* Là on ouvre */

} /* Et après les propriétés on ferme */

Tu vois ? Le body je ferme juste après les propriétés.

_________________

Date d'inscription: 22/11/2011

Alors voilà un petit screen :

Spoiler:

Je vais en même temps te transmettre ma page css complète je sais pas s'il y a d'autres critères qui entrent en compte.?

Spoiler:

La si c'est encore mal codé, jvais définitivement être sûr que je suis une quiche parfaite en code ><.

Date d'inscription: 05/06/2011 Distinctions:

Il y a encore quelques erreurs ^^
Je te les mets en gras, avec un commentaire en italique qui te permettra de les corriger Wink

Spoiler:

Essaye en modifiant déjà ça ?
Sinon, si ça ne marche pas, montre nous également ton template modifié Wink

_________________

Date d'inscription: 22/11/2011

La honnêtement je comprends pas cette histoire de body, j'ai remodifier tout ça, et j'en viens à un résultat encore pire xD :

Spoiler:

et le CSS ( chui encore certain d'avoir fait n'imp -_-) :

Spoiler:

Je vous transmet donc également le template :

Overall_header :

Spoiler:

Code:

<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />

<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />


<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />

{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>


<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>



<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>



<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
   /* Definir le sens de direction en fonction du panneau admin */
   var tickerDirParam = "{switch_ticker.DIRECTION}";
   var slid_vert = false;
   var auto_dir = 'next';
   var h_perso = parseInt({switch_ticker.HEIGHT});

   switch( tickerDirParam )
   {
      case 'top' :
         slid_vert = true;
         break;

      case 'left':
         break;

      case 'bottom':
         slid_vert = true;
         auto_dir = 'prev';
         break;

      case 'right':
         auto_dir = 'prev';
         break;

      default:
         slid_vert = true;
   }

   $(document).ready(function() {
      var w_cont = $('#fa_ticker_container').width();

      if (w_cont > 0)
      {
         $('#fa_ticker_container').width(w_cont);

         /* Affichage de la liste */
         $('#fa_ticker_content').css('display','block');

         /* Calcul des dimensions du conteneur et des ?l?ments */
         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});
         var height_max = h_perso;

         /* Calcul de la hauteur maximale du contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
         $('ul#fa_ticker_content li').each( function () {
            if ($(this).height() > height_max)
            {
               height_max = $(this).height();
            }
         } );

         /* Redimensionnement des ?l?ments et des images trop larges */
         $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
            if ($(this).width() > width_item)
            {
            var ratio    = $(this).width() / width_item;
            var new_height = Math.round($(this).height() / ratio);
            $(this).height(new_height).width(width_item);
            }
         });

         /* Redimensionnement et centrage du conteneur en mode vertical */
         if (slid_vert)
         {
            $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
         }

         /* Initialisation du caroussel */
         $('#fa_ticker_content').jcarousel({
               vertical: slid_vert,
            wrap: 'circular',
            auto: {switch_ticker.STOP_TIME},
            auto_direction: auto_dir,
         scroll: 1,
         size: {switch_ticker.SIZE},
         height_max: height_max,
         animation: {switch_ticker.SPEED}
         });
      }
      else
      {
         $('ul#fa_ticker_content li:not(:first)').css('display','none');
         $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
      }
   });
//]]>
</script>


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
   
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      pm.focus();
   
   
      report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
      report.focus();
   
   
      ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
   
});


   var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;



$(document).ready( function() {
   $(window).resize(function() {
      var windowWidth = document.documentElement.clientWidth;
      var popupWidth = $("#login_popup").width();
      var mypopup = $("#login_popup");

      $("#login_popup").css({
      "left": windowWidth/2 - popupWidth/2
         });
   });
});

//]]>
</script>
{GREETING_POPUP}

<style>
.jcarousel-skin-tango .jcarousel-item {
   text-align:center;
   width: 10px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
   margin-right: {switch_ticker.SPACING}px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
   margin-bottom: {switch_ticker.SPACING}px;
}
</style>

{HOSTING_JS}

<script type="text/javascript">
//<![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
   _gaq.push(['_trackPageview']);

   (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
//]]>
</script>

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<div id="hitskin_preview" style="display: block;">
   <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
   <div class="content">
      <p>
         {hitskin_preview.L_THEME_SITE_PREVIEW}
         <br />
         <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>
   </div>
</div>



<div id="login_popup">
   <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
      <tr height="25">
         <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
         </td>
      </tr>
      <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
         <td class="row1" align="left" valign="top">
            <div id="login_popup_buttons">
               <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}" />
                  <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                  <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
               </form>
            </div>
            <span class="genmed">{LOGIN_POPUP_MSG}</span>
         </td>
      </tr>
   </table>
</div>


<a name="top"></a>
{JAVASCRIPT}
<div id="fd_haut"> </div>
<div id="fd_milieu">
<table id="nav_barr" style="margin-top: -10px;" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
   <tr>
      <td class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               
               <td align="center" width="100%" valign="middle">
                  
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  <br />
                  
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br />
                  <span class="gen">{SITE_DESCRIPTION}<br /> </span>
               </td>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               
            </tr>
         </table>

         <div style="clear: both;"></div>

         
         <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
               <tr>
                  <td {CLASS_TABLE_TYPE} align="left" class="row1">
                     <div id="fa_ticker_container">
                        <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                           
                           <li>{switch_ticker.ticker_row.ELEMENT}</li>
                           
                        </ul>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         
         <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
               <tr>
                  <td {CLASS_TABLE_TYPE} align="left" class="row1">
                     <div id="fa_ticker_container">
                        <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                           <div class="fa_ticker_content">
                              
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
               <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                  <tbody>
                     <tr>
                        <td valign="top" width="{C1SIZE}">
                           <div id="{ID_LEFT}">
                              
                              {giefmod_index1.MODVAR}
                                 
                                 <div style="height:{SPACE_ROW}px"></div>
                                 
                              
                           </div>
                        </td>
                        <td valign="top" width="100%">

                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>

Date d'inscription: 24/06/2010

Coucou

Hum le css ne fonctionne pas comme les balise html

les id et class sont indépendants les uns des autres , tu dois donc en fermer un avant d'ouvrir l'autre .

reprend le css corrigé de Mewyn en enlevant les choses inutiles

et attention si tu veux laisser les commentaires notes les de cette façon :

Code:

/*ton commentaire */

on regardera ensuite ton template

_________________

J’ai toujours rêvé que mon ordinateur soit aussi simple à utiliser que mon téléphone.
Ce rêve est devenu réalité : je ne comprends plus comment utiliser mon téléphone [ by Bjarne Stroustrup ]

Mes cadeaux de Noel : Merci Clo

Merci Volt

Et ensuite, y a un gros souci là :

Code:

body {

#fd_haut{
width:1000px;
height: 250px;

Tu mets tous le css dans le body...

_________________

SoP Story :: Votes pour la 3ème épreuve

Date d'inscription: 22/11/2011

Alors alors, quitte à faire les choses, autant ne pas les faire à moitié, j'ai tout simple tout les template à zéro sur mon fofo pour repartir sur de bonnes bases, j'ai re-modifier le css et j'en arrive à se résultat :

Spoiler:

Le résultat c'est amélioré, j'entends par la que désormais, le fond en trois parties est désormais unis \o/. Malgré cela, j'ai encore un problème, qui est le suivant :

- le fond n'est pas aligné avec le forum, le screen ci-dessous sera plus parlant je pense :

Spoiler:

Coucou

On va corriger ça ^^

Ici, tes images sont très grandes => donc de grands blocs. Ici, on va dire aux blocs "tu t'adaptes automatiquement à la largeur de l'écran".

On va donc remplacer les width par

Code:

width:100%;

_________________

SoP Story :: Votes pour la 3ème épreuve

Date d'inscription: 22/11/2011

Je viens d'effectuer le changement, le css ressemble donc désormais à ceci :

Spoiler:

Et le résultat, à ceci :

Spoiler:

* Commence à se sentir chiant :s *

Le souci vient d'ici

Code:

body{
margin:0;
padding:0;
width:70%;
}

Le width doit aussi être à 100%

_________________

SoP Story :: Votes pour la 3ème épreuve