Jump to content

css : Décalage colonne aléatoire


Recommended Posts

Je m'arrache les cheveux,



J'ai apporté des modifications à la signature des articles. Depuis, la colonne de droite se retrouve sous le contenu pour certaines pages et pas d'autres.



Exemple : colonne décalée : http://www.i-trekkings.net/news/index.php?val=2296_auvergne+outdoor+nouvelle+application+ios+android


Exemple non décalé : http://www.i-trekkings.net/news/index.php?val=2295_windcatcher+air+pad+gonflez+votre+matelas+rapidement+sans+effort



Je n'y comprends rien.



Avez-vous un idée ?



Greg


Link to post
Share on other sites

Hello, d'instinct comme ça, je dirais que ton #droite est dans ton #milieu et qu'à priori, il devrait être après ( ce qui est le cas dans la page où ça fonctionne)


Link to post
Share on other sites

Le template est identique aux 2 pages, ça n'est pas ça.



C'est la signature qui pose souci (en fin d'article). Si je l'enlève, la mise en page est ok.



Pour être plus précis, voici les bouts de code de la signature :



Page :



$listenews .="<div class=\"contrib contriblarge\">";
$listenews .= "<div class=\"contcol\">\n";
//Description
function splitTxtB($chaine, $max) {
if (strlen($chaine) > $max) {
$chaine = html_entity_decode($chaine, ENT_QUOTES);
$chaine = substr($chaine, 0, $max)."...";
}
return $chaine;
}
$descUtilisateur = splitTxtB(stripslashes($news->descUtilisateur),260);

//Avatar
if ($news->imgUtilisateur=="") {
$photo="<img alt=\"\" src=\"../images/avatar/defaut!.jpg\" width='80px' height='80px' style='float:left;padding:0px 6px 6px 0' />";
} else {
$photo="<img alt=\"\" src=\"../images/avatar/".$news->imgUtilisateur."\" width='80px' height='80px' style='margin-top:10px;float:left;padding:0px 12px 6px 0'/>";
}
// choix affichage
if ($news->statutUtilisateur=="artadmin") {
$statut="<span style='font-size:14px;'>Administrateur</span>";
}
elseif ($news->statutUtilisateur=="inscrit") {
$statut="<span style='font-size:14px;'>Membre</span>";
}
else {
$statut="<span style='font-size:14px;'>$LG_AUTAUTOR</span>";
}
// choix affichage ou non des infos du profil (géré par le membre depuis son interface)
if ($news->nomcache=="oui" && $news->nomcache=="oui") {
$afficher_nom="";
}
if ($news->nomcache=="oui" && $news->prenomcache=="non") {
$afficher_nom="".$news->prenomUtilisateur."";
}
if ($news->nomcache=="non" && $news->prenomcache=="oui") {
$afficher_nom="".$news->nomUtilisateur."";
}
if ($news->nomcache=="non" && $news->prenomcache=="non") {
$afficher_nom="".$news->prenomUtilisateur." ".$news->nomUtilisateur."";
}

$listenews .= "<div style='margin-left:10px;margin-top:3px;width:100%;display:block;float:left;position:relative;line-height:22px;'><a href='http://www.i-trekkings.net/welcome/auteur.php?id_auteur=".$news->id_utilisateur."'>$photo <h1 style='padding-top:15px;text-align:left;'>".$news->loginUtilisateur."</h1></a><span style='font-size:14px;'>". stripslashes($afficher_nom) . "</span><br />$statut<br /></div>";

$listenews .= "<img style='margin-left:10px;' align='absmiddle' src=\"../templates/temp$SESSION_SKIN/img/email.gif\" alt=\"\" /> <a href=\"mail.php?id_auteur=" .$news->id_utilisateur."\">" .$LG_AUTENVOIMAIL."</a><br />\n";

if($news->siteUtilisateur) {
$listenews .= "<img style='margin-left:10px;' align='absmiddle' src=\"../templates/temp$SESSION_SKIN/img/www.gif\" alt=\"\" /> <a href=\"" .$news->urlUtilisateur."\" target=\"_blank\">" .stripslashes($news->siteUtilisateur)."</a><br />";
if($news->siteUtilisateur != '') { $listenews .= ""; }
}

$listenews .= "<img style='margin-left:10px;margin-bottom:10px;' align='absmiddle' src=\"../templates/temp$SESSION_SKIN/img/summit.jpg\" alt=\"\" /> $LG_SUMMITS : " .$news->noteUtilisateur." | $LG_SUMMITSMOIS : " .$news->noteUtilisateurMois." | $LG_SUMMITSTOTAL : " .$news->noteUtilisateurTotal."<br />     > <a href=\"http://www.i-trekkings.net/welcome/top.php\">Classement des I-Trekkeurs</a>\n";
$listenews .= "<div style='line-height:16px;font-size:11px;padding:0 10px;margin:0;height:auto;'>".$descUtilisateur."</div>";
$listenews .= "<div style='margin:15px 10px 15px 124px;height:auto;'><a href='http://www.i-trekkings.net/welcome/auteur.php?id_auteur=".$news->id_utilisateur."' style='background:#E7511E;color:#FFF;line-height:22px;font-size:13px;padding:3px 10px;font-weight:normal;'>Voir son profil complet d'I-trekkeur</a></div>";

$listenews .= "</div>\n";
$listenews .= "</div>\n";
$listenews .= "<div style='width:100%;display:block;float:left;height:20px;'></div>\n";

Css :



.contrib {margin:0em 0em 0px 0em;width:92%;padding:1em;position:relative;display:block;float:left;}
.contriblarge { width:100%;padding:0em; margin:1.4em 0em 0px 0em; }
.contrib h1 {padding:0 0 10px;margin:0;}
.contrib h2 {padding:0em 0 0 0;margin:0;}
.contrib h3 {padding:0em 0 0 0;margin:0;text-align:right;}
.contrib a {font-weight:bold; text-align:center}
.contcol {border:2px dotted #3D362E;width:98%;padding:0em;margin:0em 0 1em 0;float:left;line-height:28px;}
.contdesc {float:left;padding-top:25px;padding:0;}
.contdesc ul {padding:1em 0 1em 1em;margin:0em}
.contdesc img {float:left;margin-right:1em}
.contart {margin-top:0em;float:left;width:100%;position:relative;display:block;}
.contart h1 {border-bottom:1px solid #3D362E;font-size:14px;font-weight:bold;text-transform:uppercase;padding:20px 0 4px 0; margin: 0 0 5px 0}
.contart ul {padding:0em 0 0em 1em;margin:0em}
.contcol2 {width:100%;padding:0.5em;margin:0.5em}

Greg

Link to post
Share on other sites

Salut,



Dans tes deux liens y'en a un avec des commentaires et un sans commentaire est-ce que tu as vérifié que ça ne vienne pas de la le fait qu'une page fonctionne et pas l'autre ?


Link to post
Share on other sites
Le template est identique aux 2 pages, ça n'est pas ça.

Pour être franc avec toi, j'ai regardé avant de répondre, et c'est ça. En tout cas c'est comme ça que firefox l’interprète, puisque c'est ce que firebug me rend smile.gif

(d'ailleurs si je copie/colle ton #droite à l'extérieur de #milieu, il se place correctement, fais la même chose pour t'en convaincre dans ton débuggueur)

En clair, c'est la cause de ton soucis. Après, le pourquoi du comment... je ne peux répondre que sur ce que je vois : le html wink.gif

C'est surement une balise <div> mal fermée dans ton milieu, mais je ne peux pas le savoir.

***edit surement que qqpart dans ton code PHP, tu ouvres des div que tu fermes pas.

Link to post
Share on other sites

Bon apparemment, c'est bien un problème de <div>. Il était déjà existant avant sans toutefois poser des soucis d'affichage...



Le problème venait de mon template. Je corrige tout ça.



Merci pour ton retour :)


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Similar Content

    • By Elnin
      Bonjour, je suis musicien et je commence à coder mon propre site, car il se trouve que, comme la plupart d'entre vous, j'adore coder (bref).
      En tous cas, je viens de terminer la maquette du design, et il se trouve que suis incompétent à réaliser certaines bases du site...
      Il se trouve que j'aimerais séparer (en gros) la page web en deux, avec une grande ligne diagonale. Dans un vieux tutoriel, j'avais lu qu'en Javascript, l'on pouvait dessiner tout ce qu'on voulait sur des calques avec canvas... Problème : je n'ai que quelques bases en Javascript qui ne me permettront surement pas d'atteindre mon objectif. Je sollicite donc votre aide pour m'indiquer ne serait-ce qu'un lien ou ce que j'aimerais réaliser est expliqué ou si vous connaissez certaines balises...
      Merci d'avance,
      Elnin
    • By himelle
      Bonsoir,
       
      Je suis en train de créer un site internet sur wordpress avec le thème premium enfold qui comporte un endroit pour y insérer le css.
      J'ai une page "calendrier" et sur cette page, je souhaiterai modifier le background-color tout comme sur les pages de chaque événements lorsque l'on veut les lire.
      (Mais pas sur les autres. Je précise car j'ai essayé de modifier le .container et forcément les fonds de toutes les pages du sites ont été modifiées. Ce n'est pas mon but.)
      Le calendrier est également un plug-in premium (the events calendar) et c'est pourquoi même lorsque j'accède aux fichiers par filezilla je suis perdue.
      Est ce que quelqu'un pourrait m'aider ?
       
      Je vous remercie.
    • By Zlika
      Bonsoir,



      Pour une version mobile d'un site, j'utilise foundation.

      Pour un affichage en portrait j'aimerai un bloc d'infos par ligne et pour un landscape j'aimerai avoir 2 blocs dans la largeur.



      Dans un premier temps j'étais parti sur un class="row maClasse" en passant un width à 50% en css sur du landsacape mais je n'arrivais à rien de bon.



      Finalement j'ai un row dans lequel j'insère mes 2 blocs en float left doublé d'un float right ! Je trouve pas ça propre dans la démarche.



      Et vous comment faites vous ?

      Merci

      Zlika



    • By ivoyages
      Je viens d'enlever la possibilité de s'inscrire par le forum Phpbb car j'ai lié le forum à ma base membre. Les membres du site peuvent donc participer au forum.

      Dans le template du forum, j'aimerais faire pointer vers le bloc de connexion / inscription mais celui-ci ne s'affiche pas. Le template Phpbb a pourtant été rafraîchi.

      Dans template/overall_header.html, j'ai



      <div id="login">
      <div align="left" id="loginbloc1"><?php include('http://www.i-trekkings.net/mod.login.php'); ?></div>
      </div>
      Dans stylesheet.css, j'ai





      /* ---------- BLOC LOGIN ---------- */
      #login {
      width:995px;
      height:31px;
      background-color:#3b362e;
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#ff9933;
      }
      #loginbloc1 {
      float:left;
      height:22px;
      padding:0px 0px 0px 0px;
      margin-top:6px;
      }


      #login a, #login a:link, #login a:visited, #login a:active {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      font-weight:normal;
      color:#ff9933;
      text-decoration:none;
      }
      #login a:hover {
      color:#e7511e;
      }
      #login a#pasencore, #login a#pasencore:link, #login a#pasencore:visited, #login a#pasencore:active {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      font-weight:normal;
      color:#fff;
      text-decoration:none;
      }
      #login a#pasencore:hover {
      color:#e7511e;
      }

      Une idée, pourquoi le bloc ne s'affiche pas ?


      Grégory



×
×
  • Create New...