Bien aligner les blocks dans ma PA Bouton_activeBien aligner les blocks dans ma PA Bouton_hoverBien aligner les blocks dans ma PA Fb-hoverBien aligner les blocks dans ma PA Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Bien aligner les blocks dans ma PA EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Bien aligner les blocks dans ma PA EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Bien aligner les blocks dans ma PA EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Bien aligner les blocks dans ma PA EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Bien aligner les blocks dans ma PA EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Bien aligner les blocks dans ma PA EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Bien aligner les blocks dans ma PA EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Bien aligner les blocks dans ma PA EmptyMar 07 Fév 2023, 08:40 par Oxtran

-45%
Le deal à ne pas rater :
PC Portable LG Gram 17″ Intel Evo Core i7 32 Go /1 To
1099.99 € 1999.99 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Bien aligner les blocks dans ma PA

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Bien aligner les blocks dans ma PA Empty
Bonjour Bien aligner les blocks dans ma PA 1516208530
J'ai essayé de faire ma propre PA seulement, je galère pas mal à aligner parfaitement comme je le voudrais :s J'ai fais un montage de ce que j'aimerais avoir :

Bien aligner les blocks dans ma PA ZAnyNRZ4mn

Mon résultat actuel c'est plutôt ça :

Spoiler:

Code page d’accueil :

Code:
<table><tr><td><div class="lien">Contexte</div></td><td><div class="lien">Avatars</div></td><td><div class="lien">Scénarios</div></td><td><div class="lien">Prédéfinis</div></td></tr></table><br>


<table><tr><td width="20px" valign="top"></td><td width="300px" valign="top"><div class="block-welcome">Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte  Ton texte Ton texte Ton texte Ton texte </div></td>

<table><tr><td width="280px" valign="top"><div class="block"><center><div class="titre">Partenaires</div></center><br>
<a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><br><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><br><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><a href="LIEN_PARTENAIRE"><img class="image" src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png"></a><br></div></td>

<td width="92px" valign="top"><div class="block-staff"><center><div class="titre-staff">The staff</div></center><br><table><tr><td width="92px" valign="top"><center><div class="thumbnail"><img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png"><span><div class="tstaff" align="center">Pseudo<br><br><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a></div></span></td>
<td width="90px" valign="top"><center><div class="thumbnail"><img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png"><span><div class="tstaff" align="center">Pseudo<br><br><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a></div></span></td></tr></table>
<center></div></center></td></tr></table>

<center><td width="220px" valign="top"><div class="block-credit"><center><div class="titre">Crédits</div></center><div style="overflow: auto; width: 220px; height:70px">Design ©️ PRETTY YOUNG THING <br>
Codage ©️ Never Utopia <br></div></div></td></tr></table></center>

Partie css :

Code:
/** Debut PA **/
.image {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;
  width: 88px;
  height: 31px;
  padding: 1px
            }
       
  .image:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;
  padding: 1px
                    }


.tstaff{font-size:1em;}

.thumbnail{position: absolute;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
  border: #ffffff 1px solid;
color: #ffffff;
background-color: #000000;
text-shadow: 0px 0px 8px #000000;
  opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=50);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;}
.thumbnail:hover span{
visibility: visible;
top: 0px;
left: 0px;
width: 78px;
height: 78px;}



.lien{
background: #EFE5CE;
width: 110px;
-moz-border-dotted::20px 20px 20px 20px;
-webkit-border-dotted:20px 20px 20px 20px;
border-right: 1px #709930 dotted;
border-left: 1px #709930 dotted;
border-top: 1px #709930 dotted;
border-bottom: 1px #709930 dotted;
  margin-right: 10px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  padding: 10px;
}

.lien:hover{
background: #D9C0B0;
width: 110px;
-moz-border-dotted:20px 20px 20px 20px;
-webkit-border-dotted:20px 20px 20px 20px;
border-right: 1px #709930 dotted;
border-left: 1px #709930 dotted;
border-top: 1px #709930 dotted;
border-bottom: 1px #709930 dotted;
  margin-right: 10px;
  text-align: center;
  color: #709930;
  text-shadow: 0px 0px 8px #000000;
  padding: 10px;
}
 
 
.block-welcome{
background: #EFE5CE;
width: 500px;
height: 150px;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
border-right: 2px #709930 solid;
border-left: 2px #709930 solid;
border-top: 2px #709930 solid;
border-bottom: 2px #709930 solid;
  text-align: justify;
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  padding: 10px;
    overflow: auto;
 
}

.block-staff{
background: #EFE5CE;
width: 210px;
height: 150px;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
border-right: 2px #709930 solid;
border-left: 2px  #709930 solid;
border-top: 2px  #709930 solid;
border-bottom: 2px #709930 solid;
  text-align: justify;
  color: #EFE5CE
  text-shadow: 0px 0px 8px #ffffff;
  padding: 10px;
}

.titre-staff{background: #9EB96C;
width: 130px;
border-right: 1px #ffffff dotted;
border-left: 1px #ffffff dotted;
border-top: 1px #ffffff dotted;
border-bottom: 1px #ffffff dotted;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  padding: 4px;
margin-left: 0px;
margin-top: 0px;
font-family: georgia;
font-size: 14px;}

.titre-staff:hover{background: #9EB96C;
width: 130px;
border-right: 1px #ffffff dotted;
border-left: 1px #ffffff dotted
border-top: 1px #ffffff dotted;
border-bottom: 1px #ffffff dotted;
  -moz-box-shadow: 1px 1px 5px #ffffff;
  -webkit-box-shadow: 1px 1px 5px #ffffff;
  text-align: center;
  color: #D6E6B1;
  text-shadow: 0px 0px 8px #000000;
  padding: 4px;
margin-left: 0px;
margin-top: 0px;
font-family: georgia;
font-size: 14px;}

.titre{background: #9EB96C;
width: 130px;
border-right: 1px #ffffff dotted;
border-left: 1px #ffffff dotted;
border-top: 1px #ffffff dotted;
border-bottom: 1px #ffffff dotted;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  padding: 4px;
margin-left: 0px;
margin-top: 0px;
font-family: georgia;
font-size: 14px;}

.titre:hover{background: #9EB96C;
width: 130px;
border-right: 1px #ffffff dotted;
border-left: 1px #ffffff dotted;
border-top: 1px #ffffff dotted;
border-bottom: 1px #ffffff dotted;
  -moz-box-shadow: 1px 1px 5px #ffffff;
  -webkit-box-shadow: 1px 1px 5px #ffffff;
  text-align: center;
  color: #D6E6B1;
  text-shadow: 0px 0px 8px #000000;
  padding: 4px;
margin-left: 0px;
margin-top: 0px;
font-family: georgia;
font-size: 14px;}

.block{
background: #EFE5CE;
width: 280px;
height: 150px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-right: 2px #709930 solid;
border-left: 2px #709930 solid;
border-top: 2px #709930  solid;
border-bottom: 2px #709930 solid;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  padding: 10px;
}

.block-credit{
background: #EFE5CE;
width: 220px;
height: 150px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-right: 2px #709930 solid;
border-left: 2px #709930 solid;
border-top: 2px #709930 solid;
border-bottom: 2px #709930 solid;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  padding: 10px;
}
/** Fin PA **/
MessageSujet: Bien aligner les blocks dans ma PA   Bien aligner les blocks dans ma PA EmptySam 21 Avr 2012, 11:11
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Bien aligner les blocks dans ma PA Empty
Ploum !

Il y a un codage (c) Never Utopia dans ton code, tu as essayé de poser la question à l'auteur du code ? O.O

Sinon, peut-être devrais tu réviser les tableaux Wink Tu as besoin d'une structure de ce genre :

Code:
<div id="MonAccueil">
<table width="100%">
   <td width="25%" valign="middle" align="center">
      CONTEXTE
      <br>
      AVATARS
   </td>
   <td width="50%" valign="middle">
      Contenu central
   </td>
   <td width="25%" valign="middle" align="center">
      SCENARIOS
      <br>
      PREDEFINIS
   </td>
</table>

<table width="100%">
   <td width="35%" valign="top" align="center">
      <h1>Partenaires</h1>
      Tes partenaires
   </td>
   <td width="30%" valign="top" align="center">
      <h1>The staff</h1>
      Images du staff
   </td>
   <td width="35%" valign="top" align="center">
      <h1>Credits</h1>
      Liste des crédits
   </td>
</table>
</div>

Pense à faire des sauts de ligne, ça rend le code beaucoup plus lisible Wink
MessageSujet: Re: Bien aligner les blocks dans ma PA   Bien aligner les blocks dans ma PA EmptyDim 22 Avr 2012, 11:36
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Bien aligner les blocks dans ma PA Empty
Le codage de NU est uniquement pour les sous-forums enfaite, la PA est de moi x)
Je vais essayer Smile
MessageSujet: Re: Bien aligner les blocks dans ma PA   Bien aligner les blocks dans ma PA EmptyDim 22 Avr 2012, 11:42
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Bien aligner les blocks dans ma PA Empty
Finalement j'ai opté pour une tout autre PA donc on peut verrouiller Wink
MessageSujet: Re: Bien aligner les blocks dans ma PA   Bien aligner les blocks dans ma PA EmptyLun 23 Avr 2012, 15:10
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Bien aligner les blocks dans ma PA Empty
    Hello (:
    Puisque tu le souhaites, je déplace dans les problèmes résolus (:
MessageSujet: Re: Bien aligner les blocks dans ma PA   Bien aligner les blocks dans ma PA EmptyLun 23 Avr 2012, 16:00
Revenir en haut Aller en bas
Contenu sponsorisé




Bien aligner les blocks dans ma PA Empty
MessageSujet: Re: Bien aligner les blocks dans ma PA   Bien aligner les blocks dans ma PA Empty
Revenir en haut Aller en bas
 

Bien aligner les blocks dans ma PA

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Code pour aligner des points verticalement dans les posts
» Aligner la flèche du dernier message
» Problème pour aligner mes liens sur ma PA
» Aligner le titre des catégories à gauche
» Aligner les statistiques avec le reste du forum

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forumactif.com | Informatique et Internet | Internet