Ecart de quelques pixels sur un tableau..

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ecart de quelques pixels sur un tableau..

Message par Benlastar le Ven 18 Oct 2013 - 13:29

Salut salut !
Je me suis mis en tête depuis quelques jours de refaire le message d'accueil de mon forum.
Ne maitrisant le HTML que grâce aux bases que j'ai acquises moi-même au fur et à mesure de l'évolution de mon forum, j'ai bidouillé pas mal de trucs, parce que je préfère tout faire moi-même plutôt que d'appeler à l'aide :p. Mais là, je tourne en rond depuis quelques temps pour un détail qui a à mes yeux son importance.
Voilà le forum de test où j'ai travaillé :
http://testqj.forumactif.fr/
Ce que j'aimerai faire, et que je n'arrive pas, c'est juste agrandir la première colonne de la deuxième ligne pour l'aligner sur le côté gauche. Là, il y un un "vide" pas très esthétique...
Voici les codes auxquels je suis arrivé (je reconnais que c'est pas très ordonné... :p) :
Le code de la page d'accueil :
Code:
<center>

<table width="100%" cellpadding="5" cellspacing="10" id="le_tableau">
<tbody><tr>
 
   <td colspan="10" class="style_cellule" style="background-image: url('');"  width="75%"><p class="text_taho">Quartier Jeunes</p></td>
</tr>
<tr>

</tr>
<tr>

    <td><div id="nav-menu">
<ul>
</ul>
</div> </td>
    <td id="igauche" VALIGN="top"><span class="titre_4" style="padding-left:15px;"> Les News... </span><p style="padding-left:15px;"><br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  Retrouvez le stream Quartier Jeunes ce samedi 18 octobre à 20h45... <br><br> <img src="http://img10.imageshack.us/img10/784/mui0.png">  La boutique QJ a ré-ouverte ses portes !<br> <br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  Il est encore temps de voter pour les Awards ! Rendez-vous <url=http://www.quartierjeunes.com/t1779-venez-voter-pour-les-awards-qj> dans "News et Annonces"</url> pour voter.<br> <br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  Venez voter pour la meilleure affiche Quartier Jeunes dans la catégorie "Boite à idées" ! <br><br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  La cérémonie des Awards QJ ce samedi 20h45 sera suivie d'un nouveau Testataho.. Pour l'instant, c'est le jeu "7 days to die" qui est en tête.. Aurons-nous à survivre parmi les zombies ? <br><br>

    <td id="idroite" VALIGN="top"><span class="titre_4" style="padding-right:10px;"> Trailer des Awards Quartier Jeunes... </span><p style="padding-right:10px;"><iframe width="480" height="315" src="//www.youtube.com/embed/cAgbpAX4HVI" frameborder="0" allowfullscreen></iframe></p></td>
</tr>
<tr>
    <td class="style_cellule" VALIGN="top">
<span class="titre_4">Nos partenaires</span> <br>

    <br>  <a href="http://www.megaphone-forum.com/"  class="postlink" target="_blank" ><img src="http://i37.servimg.com/u/f37/17/47/19/17/bouton10.png" alt="Le Mégaphone" border="0"></a>
                                                </div>
                                        </div>

</center>
 </td>

    <td class="style_cellule" VALIGN="top">

<center>        <span class="titre_4"> Les membres du staff...</span> <br>
<table>
<tr>
  <br> <td><div class="info" style="color: #842b00">
      <img  alt="Thèmes F.A" title="Thèmes F.A" src="http://img541.imageshack.us/img541/4451/5eid.png">
          <em>
              <span class="titre_info">Enopée - Administratrice



              <div><img src="http://img541.imageshack.us/img541/4451/5eid.png" /></div>
                    <div><a href="http://www.quartierjeunes.com/u1">Profil</a>    <a href="http://www.quartierjeunes.com/privmsg?mode=post&u=1">MP</a></div>
              <div>
            </span>
          </em>
</div>
  </td>

  <td><div class="info" style="color: #842b00">
      <img  alt="Thèmes F.A" title="Thèmes F.A" src="http://img547.imageshack.us/img547/8051/3n8o.png">
          <em>
                            <span class="titre_info">Tahoma - Administrateur



              <div><img src="http://img547.imageshack.us/img547/8051/3n8o.png" /></div>
                    <div><a href="http://www.quartierjeunes.com/u2">Profil</a>    <a href="http://www.quartierjeunes.com/privmsg?mode=post&u=2">MP</a></div>
              <div>
                            </span>
          </em>
</div>
    </td>
</tr>
</table>
</center>
    </td>

    <td class="style_cellule" VALIGN="top"><span class="titre_4">Les meilleurs posteurs de la semaine... </span><br><br>
1 - Enopée - 331 messages<br>
2 - May - 122 messages<br>
3 - Tahoma - 93 messages</td><br>
</tr>
</tbody></table>
</center>
Le code du CSS :
Code:
       #le_tableau{
        color:#69604E;
        font-size: 12px;
        font-family: Comic sans MS;
        background-color: #C9C2A7;
        border: 3px solid #69604E;
        margin: 3px;
        -moz-border-radius: 12px ;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
        -moz- text-shadow: 0px 0px 0px #000;
        -webkit- text-shadow: 0px 0px 0px #000;
        text-shadow: 0px 0px 0px #000;
        }
        
       .text_imag{
        color: #69604E;
        text-align: center;
        vertical-align: center;
        font-family: Comic sans MS;
        font-size: 45px;
        font-weight: comic sans ms;
        }

        .text_taho{
        color: #69604E;
        text-align: center;
        vertical-align: center;
        font-family: Hand Of Sean;
        font-size: 52px;
        font-weight: Hand Of Sean;
        }
        
       .style_cellule{
        background-color: #C9C2A7;
        border: 3px solid #69604E;
        margin: 3px;
        padding: 6px;
        -moz-border-radius: 10px ;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
        }
        
       #igauche{
        background-color: #C9C2A7;

        background-color: #C9C2A7;
        border: 3px solid #69604E;
        padding: 6px;
        -moz-border-radius: 12px ;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
        }
        #idroite{
        background-color: #C9C2A7;
    
       background-color: #C9C2A7;
        border: 3px solid #69604E;
        padding: 6px;
        -moz-border-radius: 12px ;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
        }
        
       .titre_4{
        font-size: 15px;
        color: #69604E;
        border-bottom: 3px dotted #69604E;
        }
        
       /* navigation */
        
       #nav-menu ul{
        list-style: none;
        padding: 0;
        margin: 0;
        }
        
       #nav-menu li{
        float: left;
        margin: 0 2px;
        }
        
       #nav-menu li a{
        background: url();
        height: 0px;
        line-height: 0px;
        float: left;
        width: 0px;
        display: block;
        border: 2px solid #00a200;
        color: #d8f795;
        font-size: 0px;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        -moz-border-radius: 0px 3px 12px 3px ;
        -webkit-border-radius: 0px 3px 12px 3px ;
        border-radius: 0px 3px 12px 3px ;
        -moz-box-shadow: 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
        margin: 2px 0px 2px 0px;
        }
        
       #nav-menu li a:hover{
        color: #bfcd48;
        font-style: ;
        }
        
       /* Hide from IE5-Mac \*/
        #nav-menu li a{
        float: none
        }
        /* End hide */
        
       
       /* fin navigation */
        
       
       /* Scroller Box */
        
       #scroller_container {
        width: 120px;
        height: 70px;
        overflow: hidden;
        }
        
       #dummy {;# }
        
       #scroller_container {
        overflow: auto;
        }
        
       /* fin Scroller Box */
        
       /* infobulle */
        
       div.info em {
        display:none;
        }
        
       div.info:hover {
        background: none;
        z-index: 999;
        cursor: hand;
        position: relative;
        text-decoration:none;
        border: 0;
        }
        
       div.info:hover em {
        font-style: normal;
        font-size: 10px;
        color:#000 !important;
        padding: 3px;
        display: inline;
        position: absolute;
        top: 62px;
        left: 35px;
        -moz-border-radius: 7px 7px 0px 7px ;
        -webkit-border-radius: 7px 7px 0px 7px ;
        border-radius:7px 7px 0px 7px ;
        -moz-box-shadow: 0px 0px 4px #000;
        -webkit-box-shadow: 0px 0px 4px #000;
        box-shadow: 0px 0px 4px #000;
        background-color: #C9C2A7;
        border: 2px solid #69604E;
        width:auto;
        }
        
       .titre_info{
        text-align: center;
        font-size: 14px;
        font-style: ;
        border-bottom: 1px dotted #69604E;
        }
        
       /* fin infobulle */
Voilà voilà, juste cette petite touche finale suffirait à mon bonheur..
Je ne pense pas que ce soit utile, mais au cas où je suis sur Firefox, mon forum est en phb2.
Merci d'avance Smile.


Dernière édition par Benlastar le Sam 19 Oct 2013 - 19:33, édité 1 fois

Benlastar
# Tropactif #

Messages : 1774
Inscrit(e) le : 19/11/2004

http://www.quartierjeunes.com
Benlastar a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Lixyr le Ven 18 Oct 2013 - 13:58

Bonjour.

J'obtiens ceci quand je vais voir votre forum test :

Je suppose que ce n'est pas le rendu que vous avez étant donné que vous voulez élargir la première colonne de la deuxième ligne. Vos cellules devraient être dans quel ordre ?

Cordialement.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Benlastar le Ven 18 Oct 2013 - 14:11

Bonjour,

Je faisais quelques tests, vous aviez du passer sur le forum au mauvais moment :p.
En gros j'aimerai :
1ère ligne : 1 grande colonne sur toute la largeur
2ème ligne : 2 colonnes de la même taille, sur toute la largeur, 50/50. C'est là que se trouve le problème puisque la première colonne est décalée, et ne prend pas toute la page.
3ème ligne : 3 colonnes : 1 petite - 1 moyenne - 1 plus grande (ou de la même taille peu importante, mais le rendu actuel me convient.)

J'avoue avoir mis un joyeux bordel dans le code que je vous transmets.. Je n'en suis pas très fier, mais comme je n'ai pas spécialement le temps d'apprendre à me servir parfaitement des codes, je bidouille.

Je vous joins un petit screen quand même de la page :


Merci !

Benlastar
# Tropactif #

Messages : 1774
Inscrit(e) le : 19/11/2004

http://www.quartierjeunes.com
Benlastar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Lixyr le Ven 18 Oct 2013 - 14:50

Okay, je vois. Alors là tu utilises un tableau. Ce n'est pas du tout une bonne idée.
Je te conseille d'utiliser les float, c'est bien mieux !!

Pourquoi ?
Parce que le tableau, déjà, c'est utilisé pour les bases de données, pas pour de la mise en page.
De deux, tu n'as pas le même nombre de colonnes à chaque ligne, et même aucun n'est à chaque fois divisible par celui d'au dessus :
si tu n'avais que des nombres paires ça irait, mais voilà, pou l'exemple de ta ligne 2 et 3 :
ligne 2 : 2 cellules
ligne 3 : 3 cellules
Comment faire pour que la cellule 1 de la ligne 2 prenne la même place que les cellules 1 et 2 de la ligne 3, tout en prenant la même place en matière de largeur que la cellule 2 de la ligne 2 ? A moins que la cellule 3 de la ligne 3 égale la place de la cellule 1 et 2 de la ligne 3 ? Ce que tu ne veux pas.


(d'ailleurs, pour l'info :
<table width="100%" cellpadding="5" cellspacing="10" id="le_tableau">
       <tbody><tr>
       
           <td colspan="10" class="style_cellule"
colspan 10 ? oo Il n'y a pas dix cellules en dessous à ce que je sache. :DLe maximum est de trois, ne soyons pas aussi gourmand.)


Bref, le mieux c'est d'utiliser un float :
en position float, tu peux placer des blocs les uns à côté des autres, tout en aillant des blocs de différentes tailles.
Pour plus d'informations, je te conseille d'aller apprendre ça par toi-même sur internet. ^^

Alors pour reprendre ton code...

Like a Star @ heaven Au niveau de la structure, ça donne
Un tableau qui entoure
     1ere ligne : un gros titre
     2eme ligne : deux cellules
     3eme ligne : trois cellules,
fin du tableau qui entoure

Like a Star @ heaven et donc avec des blocs
Un bloc qui entoure
    1ere ligne : un gros bloc
    2eme ligne : deux blocs
    3eme ligne : trois blocs,
fin du bloc qui entoure

CODE HTML :
Code:
<div class="contours">
   <div class="float"> 1erLIGNE - GROS BLOC TITRE</div>
   <div class="float">2emeLIGNE - 1ere BLOC</div>   <div class="float">2emeLIGNE - 2eme BLOC</div>
   <div class="float">3emeLIGNE - 1ere BLOC</div>   <div class="float">3emeLIGNE - 2eme BLOC</div>   <div class="float">3eme LIGNE - 3eme BLOC</div>
</div>
Okay ?

Donc pour l'instant, ça te fait ces blocs.

Like a Star @ heaven Si j'en suis ton CSS
- le bloc "contours" prendrait le contenu du css du "tableau"
- le bloc "float" prendrait le contenu du css des "styles de cellules" auquel on rajouterait le style "float:left" pour que tous les blocs flottent les uns à côté des autres.

CSS :
Code:
.contours {  
  color:#69604E;
  font: 12px Comic sans MS;
  background-color: #C9C2A7;
  border: 3px solid #69604E;
  margin: 3px;
  -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
  -moz-box-shadow: 2px 2px 2px #000;
  -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
  text-shadow: 0px 0px 0px #000;}

.float {  
  float:left;
  background-color: #C9C2A7;
  border: 3px solid #69604E;
  margin: 3px;padding: 6px;
  -moz-border-radius: 10px ;-webkit-border-radius: 10px;border-radius: 10px;
  -moz-box-shadow: 2px 2px 2px #000; -webkit-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000;}
Voilà pour l'instant.


Dernière édition par Lixyr le Ven 18 Oct 2013 - 15:05, édité 1 fois

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Lixyr le Ven 18 Oct 2013 - 15:04

tu auras remarqué que chaque bloc a une classe css "float". C'est pour que chaque bloc ait le même aspect et soit en float (donc à gauche d'un autre)

3) On donne des id aux blocs pour ensuite spécifier une taille :

<div class="contours">
  <div class="float" id="bloc_titre"> 1erLIGNE - GROS BLOC TITRE</div>
  <div class="float" id="ligne2_1">2emeLIGNE - 1ere BLOC</div>   <div class="float" id="ligne2_2">2emeLIGNE - 2eme BLOC</div>
  <div class="float" id="ligne3_1">3emeLIGNE - 1ere BLOC</div>   <div class="float"  id="ligne3_2">3emeLIGNE - 2eme BLOC</div>   <div class="float"  id="ligne3_3">3eme LIGNE - 3eme BLOC</div>
</div>
Mes noms d'id ne sont franchement pas très recherchés, mais je pense que ce sera plus simple pour toi comme ça. Donc tu auras remarqué que chaque id est différent. C'est normal : chaque ID est unique et ne peut être utilisé qu'une seule fois.

Maintenant, chaque float est associé à son id, on va pouvoir définir les tailles via le CSS.

- devant un nom d'id, on met un #

Code:
div#bloc_titre {}
div#ligne2_1 {}
div#ligne2_2 {}
div#ligne3_1 {}
div#ligne3_2 {}
div#ligne3_3 {}
enregistre :enreg:


4) ON peaufine le CSS et le html :

HTML :
Code:
<div class="contours">
  <h2 id="bloc_titre"> 1erLIGNE - GROS BLOC TITRE</h2>
  <div class="float" id="ligne2_1">2emeLIGNE - 1ere BLOC</div>  <div class="float" id="ligne2_2">2emeLIGNE - 2eme BLOC</div>
<hr class="clear" />
  <div class="float" id="ligne3_1">3emeLIGNE - 1ere BLOC</div>  <div class="float" id="ligne3_2">3emeLIGNE - 2eme BLOC</div>  <div class="float"  id="ligne3_3">3eme LIGNE - 3eme BLOC</div>

<hr class="clear" />
</div>
CSS :
Code:
div.contours { 
  color:#69604E;
  font: 12px Comic sans MS;
  background-color: #C9C2A7;
  border: 3px solid #69604E;
  margin:0px auto;width:99%;
  -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
  -moz-box-shadow: 2px 2px 2px #000;
  -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
  text-shadow: 0px 0px 0px #000;}

.contours div { float:left;}
.contours div, h2 {
  background-color: #C9C2A7;
  border: 3px solid #69604E;
  margin:3px;padding:6px;
  -moz-border-radius:10px ;-webkit-border-radius: 10px;border-radius: 10px;
  box-shadow: 2px 2px 2px #000;}


h2#bloc_titre {
  width:97%;
  color: #69604E;
  text-align: center;
  font:32px Hand Of Sean;
  font-weight:normal;
  margin: 3px auto;}
div#ligne2_1 {width:47%;}
div#ligne2_2 {width:48%;}
div#ligne3_1 {width:20%;}
div#ligne3_2 {width:33%;}
div#ligne3_3 {width:40%;}

.clear {clear:both;}
Bon, ensuite en float le pourcentage est vraiment pas évident, donc si jamais ça ne te plait pas, tu peux toujours tout mettre en px, de sorte d'être vraiment extrêmement précis.

Ensuite... tu remets le contenu dans chaque bon bloc, avec le CSS associé.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Benlastar le Ven 18 Oct 2013 - 15:38

Merci beaucoup pour ton aide.
Voilà où j'en suis :

J'ai donc attribué un titre à chaque bloc, à qui j'ai via le CSS donné son aspect, et sa taille.

J'ai fait la taille, et l'alignement en latéral, mais je vois pas comment organiser les blocs dans la hauteur.. Là par exemple, un bloc de la 3ème ligne est au milieu.

Sinon, j'ai également recréé le design de mon bloc titre, avec un raccourci vers le CSS.

Mon code :
Code:
<div class="contours"><div class="float"  id="bloc_titre" > <p class="text_titre">QUARTIER JEUNES</p></div><div class="float"  id="ligne21">2emeLIGNE - 1ere BLOC</div>  <div class="float"  id="ligne22">2emeLIGNE - 2eme BLOC</div><div class="float"  id="ligne31">3emeLIGNE - 1ere BLOC</div><div class="float"  id="ligne32">3emeLIGNE - 2eme BLOC</div>  <div class="float"  id="ligne33">3eme LIGNE - 3eme BLOC</div>
</div>
Mon CSS :

Code:
            .contours {
         color:#69604E;
          font: 12px Comic sans MS;
          background-color: #C9C2A7;
          border: 3px solid #69604E;
          margin: 3px;
          -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
          -moz-box-shadow: 2px 2px 2px #000;
          -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
          text-shadow: 0px 0px 0px #000;}
        
       .float {
         float:left;
          background-color: #C9C2A7;
          border: 3px solid #69604E;
          margin: 3px;padding: 6px;
          -moz-border-radius: 10px ;-webkit-border-radius: 10px;border-radius: 10px;
          -moz-box-shadow: 2px 2px 2px #000; -webkit-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000;}

        .text_titre{
        color: #69604E;
        text-align: center;
        vertical-align: center;
        font-family: Hand Of Sean;
        font-size: 52px;
        font-weight: Hand Of Sean;
        }

        div#bloc_titre {
    float: center;
    width: 99%;}
        div#ligne21 {
    float: left;
    width: 50%;}
        div#ligne22 {
    float: right;
    width: 50%px;}
        div#ligne31 {
    float: left;
    width: 20%;}
        div#ligne32 {
    float: middle;
    width: 40%;}
        div#ligne33 {
    float: right;
    width: 40%;}
EDIT : Je viens seulement de voir la dernière partie ajoutée à ton message.. Je regarde ça, il y a peut-être ma réponse dedans :p !

Benlastar
# Tropactif #

Messages : 1774
Inscrit(e) le : 19/11/2004

http://www.quartierjeunes.com
Benlastar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Lixyr le Ven 18 Oct 2013 - 15:54

^^ alors, pour les améliorations :
- le titre n'a pas de bloc à côté de lui, donc pas besoin de float
- comme tous les blocs sont des div, au final, préférer mettre la balise de titre h2 au titre, et les autres blocs flottant en div, ainsi pour le css, au lieu d'avoir une class à chaque fois, spécifié le float directement sur les div.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Benlastar le Ven 18 Oct 2013 - 16:06

Ahhh d'accord, je vois.. Quelle logique :p !
J'ai pas mal avancé grâce à toi, merci vraiment !

Encore une petite question :
Comment puis-je faire pour diminuer la marge en hauteur par rapport aux titres des blocs (flèche rouge) ? J'ai tenté quelques trucs mais rien n'a changé ce que je voulais.


le HTML :
Code:
      <div class="contours">
          <h2 id="bloc_titre"> Quartier Jeunes</h2>
          <div class="float" id="ligne21"> <p class="text_titre_section">Les News...</p><img src="http://img10.imageshack.us/img10/784/mui0.png">  Retrouvez le stream Quartier Jeunes ce samedi 18 octobre à 20h45... <br><br> <img src="http://img10.imageshack.us/img10/784/mui0.png">  La boutique QJ a ré-ouverte ses portes !<br> <br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  Il est encore temps de voter pour les Awards ! Rendez-vous <url=http://www.quartierjeunes.com/t1779-venez-voter-pour-les-awards-qj> dans "News et Annonces"</url> pour voter.<br> <br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  Venez voter pour la meilleure affiche Quartier Jeunes dans la catégorie "Boite à idées" ! <br><br>

<img src="http://img10.imageshack.us/img10/784/mui0.png">  La cérémonie des Awards QJ ce samedi 20h45 sera suivie d'un nouveau Testataho.. Pour l'instant, c'est le jeu "7 days to die" qui est en tête.. Aurons-nous à survivre parmi les zombies ? <br> <br> <br> <br> <br> <br>
</div>  <div class="float" id="ligne22"><p class="text_titre_section">Trailer des Awards...</p>
<iframe width="480" height="307" src="//www.youtube.com/embed/cAgbpAX4HVI" frameborder="0" allowfullscreen></iframe><br><br></div>
        <hr class="clear" />
          <div class="float" id="ligne31"><p class="text_titre_section">Nos partenaires...</p><a href="http://www.megaphone-forum.com/"  class="postlink" target="_blank" ><img src="http://i37.servimg.com/u/f37/17/47/19/17/bouton10.png" alt="Le Mégaphone" border="0"></a></div>  <div class="float" id="ligne32">3emeLIGNE - 2eme BLOC</div>  <div class="float"  id="ligne33">3eme LIGNE - 3eme BLOC</div>
       
        <hr class="clear" />
        </div>
le CSS :

Code:
              .contours {
          color:#69604E;
          font: 12px Comic sans MS;
          background-color: #C9C2A7;
          border: 3px solid #69604E;
          margin: 3px;
          -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
          -moz-box-shadow: 2px 2px 2px #000;
          -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
          text-shadow: 0px 0px 0px #000;}
       
        .float {
          float:left;
          background-color: #C9C2A7;
          border: 3px solid #69604E;
          margin: 3px;padding: 6px;
          -moz-border-radius: 10px ;-webkit-border-radius: 10px;border-radius: 10px;
          -moz-box-shadow: 2px 2px 2px #000; -webkit-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000;}

        .text_titre{
        color: #69604E;
        text-align: center;
        vertical-align: center;
        font-family: Hand Of Sean;
        font-size: 58px;
        font-weight: Hand Of Sean;
        }

        .text_titre_section{
        color: #69604E;
        text-align: center;
        vertical-align: center;
        font-family: Comic sans MS;
        font-size: 22px;
        font-weight: Comic sans MS;
        }

        div.contours {
          color:#69604E;
          font: 12px Comic sans MS;
          background-color: #C9C2A7;
          border: 3px solid #69604E;
          margin:0px auto;width:99%;
          -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
          -moz-box-shadow: 2px 2px 2px #000;
          -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
          text-shadow: 0px 0px 0px #000;}
       
        .contours div { float:left;}
        .contours div, h2 {
          background-color: #C9C2A7;
          border: 3px solid #69604E;
          margin:3px;padding:6px;
          -moz-border-radius:10px ;-webkit-border-radius: 10px;border-radius: 10px;
          box-shadow: 2px 2px 2px #000;}

       
       
        h2#bloc_titre {
          width:97%;
          color: #69604E;
          text-align: center;
          font:32px Hand Of Sean;
          font-weight:normal;
          margin: 3px auto;}
        div#ligne21 {width:47%;}
        div#ligne22 {width:48%;}
        div#ligne31 {width:20%;}
        div#ligne32 {width:33%;}
        div#ligne33 {width:40%;}
       
        .clear {clear:both;}

Benlastar
# Tropactif #

Messages : 1774
Inscrit(e) le : 19/11/2004

http://www.quartierjeunes.com
Benlastar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Lixyr le Ven 18 Oct 2013 - 16:20

Like a Star @ heaven Alors, avant, dans ton css, tu as deux fois la même chose :

    .contours {
                 color:#69604E;
                 font: 12px Comic sans MS;
                 background-color: #C9C2A7;
                 border: 3px solid #69604E;
                 margin: 3px;
                 -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
                 -moz-box-shadow: 2px 2px 2px #000;
                 -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
                 text-shadow: 0px 0px 0px #000;}
             
et

  div.contours {
                 color:#69604E;
                 font: 12px Comic sans MS;
                 background-color: #C9C2A7;
                 border: 3px solid #69604E;
                 margin:0px auto;width:99%;
                 -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
                 -moz-box-shadow: 2px 2px 2px #000;
                 -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
                 text-shadow: 0px 0px 0px #000;}
tu peux enlever le premier.


Like a Star @ heaven  ensuite, la class float ne sert plus à rien puisque toutes les div sont en float avec le code plus bas :
               .contours div { float:left;}
donc enlève le css correspondant à la classe float dans ton css, et les classes float dans ton html.

Like a Star @ heaven  Enfin, pour tes titres :

<p class="text_titre_section">Trailer des Awards...</p>
c'est le paragraphe avec la classe "text_titre_section" qu'il faut regarder :

   .text_titre_section{
               color: #69604E;
               text-align: center;
               vertical-align: center;
               font-family: Comic sans MS;
               font-size: 22px;
               font-weight: Comic sans MS;
               }
rajoute un

Code:
margin-top:0;
pour supprimer la marge du dessus et ce sera bon.


Ce qui donne pour le css :
Code:
           
               .text_titre{
                color: #69604E;
                text-align: center;
                vertical-align: center;
                font-family: Hand Of Sean;
                font-size: 58px;
                font-weight: Hand Of Sean;
                }
        
               .text_titre_section{
                color: #69604E;
                text-align: center;
                vertical-align: center;
                font-family: Comic sans MS;
                font-size: 22px;
                font-weight: Comic sans MS;
  margin-top:0;
                }
        
               div.contours {
                  color:#69604E;
                  font: 12px Comic sans MS;
                  background-color: #C9C2A7;
                  border: 3px solid #69604E;
                  margin:0px auto;width:99%;
                  -moz-border-radius: 12px ;-webkit-border-radius: 12px;border-radius: 12px;
                  -moz-box-shadow: 2px 2px 2px #000;
                  -webkit-box-shadow: 2px 2px 2px #000;box-shadow: 2px 2px 2px #000;
                  text-shadow: 0px 0px 0px #000;}
              
               .contours div { float:left;}
                .contours div, h2 {
                  background-color: #C9C2A7;
                  border: 3px solid #69604E;
                  margin:3px;padding:6px;
                  -moz-border-radius:10px ;-webkit-border-radius: 10px;border-radius: 10px;
                  box-shadow: 2px 2px 2px #000;}
        
             
             
               h2#bloc_titre {
                  width:97%;
                  color: #69604E;
                  text-align: center;
                  font:32px Hand Of Sean;
                  font-weight:normal;
                  margin: 3px auto;}
                div#ligne21 {width:47%;}
                div#ligne22 {width:48%;}
                div#ligne31 {width:20%;}
                div#ligne32 {width:33%;}
                div#ligne33 {width:40%;}
              
               .clear {clear:both;}
et pour le html :
Code:
             <div class="contours">
                  <h2 id="bloc_titre"> Quartier Jeunes</h2>
                  <div id="ligne21"> <p class="text_titre_section">Les News...</p><img src="http://img10.imageshack.us/img10/784/mui0.png">  Retrouvez le stream Quartier Jeunes ce samedi 18 octobre à 20h45... <br><br> <img src="http://img10.imageshack.us/img10/784/mui0.png">  La boutique QJ a ré-ouverte ses portes !<br> <br>
        
       <img src="http://img10.imageshack.us/img10/784/mui0.png">  Il est encore temps de voter pour les Awards ! Rendez-vous <url=http://www.quartierjeunes.com/t1779-venez-voter-pour-les-awards-qj> dans "News et Annonces"</url> pour voter.<br> <br>
        
       <img src="http://img10.imageshack.us/img10/784/mui0.png">  Venez voter pour la meilleure affiche Quartier Jeunes dans la catégorie "Boite à idées" ! <br><br>
        
       <img src="http://img10.imageshack.us/img10/784/mui0.png">  La cérémonie des Awards QJ ce samedi 20h45 sera suivie d'un nouveau Testataho.. Pour l'instant, c'est le jeu "7 days to die" qui est en tête.. Aurons-nous à survivre parmi les zombies ? <br> <br> <br> <br> <br> <br>
        </div>  <div id="ligne22"><p class="text_titre_section">Trailer des Awards...</p>
        <iframe width="480" height="307" src="//www.youtube.com/embed/cAgbpAX4HVI" frameborder="0" allowfullscreen></iframe><br><br></div>
                <hr class="clear" />
                  <div id="ligne31"><p class="text_titre_section">Nos partenaires...</p><a href="http://www.megaphone-forum.com/"  class="postlink" target="_blank" ><img src="http://i37.servimg.com/u/f37/17/47/19/17/bouton10.png" alt="Le Mégaphone" border="0"></a></div>  <div class="float" id="ligne32">3emeLIGNE - 2eme BLOC</div>  <div class="float"  id="ligne33">3eme LIGNE - 3eme BLOC</div>
              
               <hr class="clear" />
                </div>

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Benlastar le Ven 18 Oct 2013 - 16:54

Ca vient bon :p !
Il ne me reste que les infobulles avec le staff.
Voici ce que j'ai fait :
http://testqj.forumactif.fr/

Juste un petit soucis ! Comme pour l'infobulle, j'ai utilisé la balise "div class" :
Code:
<div class="float" id="ligne32"><p class="text_titre_section">Le staff... </p>
        <div class="infobulle"><img src="http://imageshack.us/a/img541/4451/5eid.png">
        <span>Enopée - Administratrice <br><img src="http://imageshack.us/a/img541/4451/5eid.png"> <br> <a href="http://www.quartierjeunes.com/u2">Profil</a>    <a href="http://www.quartierjeunes.com/privmsg?mode=post&u=2">MP</a> </span></div></div>
Il me met le contour de div class que j'ai modifié dans le css, ce qui rend pas terrible dans le cas présent. (flèche rouge)
Y a t'il possibilité de faire l'infobulle sans passer par la div class ? Ou contourner ça ?


Benlastar
# Tropactif #

Messages : 1774
Inscrit(e) le : 19/11/2004

http://www.quartierjeunes.com
Benlastar a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Lixyr le Sam 19 Oct 2013 - 0:07

Soit dans la classe "infobulle", vous mettez
Code:
border:none !important; box-shadow:none !important;
pour supprimer la bordure et l'ombre,

Soit à la place de mettre une div, vous mettez un span, et dans la classe "infobulle", vous mettez :
Code:
display:block !important;





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ecart de quelques pixels sur un tableau..

Message par Benlastar le Sam 19 Oct 2013 - 19:33

D'accord c'est tout bon !
Je te remercie grandement de ton aide qui m'a été ultra-précieuse, et de ta patience à en plus de corriger mes erreurs, me les expliquer.
Je te souhaite une bonne continuation Smile!

Benlastar
# Tropactif #

Messages : 1774
Inscrit(e) le : 19/11/2004

http://www.quartierjeunes.com
Benlastar a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum