PA recalcitrante

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

Résolu PA recalcitrante

Message par Kingston le Dim 27 Oct 2013 - 17:33

Bonjour,

Pour mon forum j'ai réalisé une Page d'accueil, jusque là aucun problème cela fait plus d'un mois que je l'ai faîte seule, j'en suis pas peu fière. Et aujourd'hui tombant par hasard sur un tutoriel pour faire coulisser une image et voir un texte dessous j'ai décidé de l'intégrer à ma Page d'accueil, au début les trois images ( celles du Staff ) n'étaient pas côte à côte, j'ai donc essayé de les mettre dans une " table " ce qui a relativement marché sauf qu'à présent me voici avec ça :

Spoiler:

Tous les problèmes sont décrits sur l'image. Voici le code HTML de la PA :

Code:
<center><div style="width:auto; background-color;none; padding:0px;"><div style="margin:auto; text-align:center;"><div style="background-color:none; width:auto; color:white; padding: 10px;"><div class="usual"><blockquote><link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'><div style="margin:auto;text-align:center;width:100%; font-family:cinzel decorative; font-size:30px; color:#392B3D; text-shadow: 0px 0px 5px black" >Bienvenue sur Expiation</font></div></blockquote><br>

<table cellspacing="auto" width="auto"><tr><div style="text-align:justify;background-color:#FAF9F5 ;box-shadow: 2px 2px 6px black; height: 12px;width:auto;overflow:auto; color:black; padding:10px;">        
<a href="http://expiation.forumactif.org/t1-le-reglement-general-d-expiation">Règlement</a>   
<a href="http://expiation.forumactif.org/t2-le-contexte">Contexte</a>   
<a href="http://expiation.forumactif.org/t4-fiche-de-presentation">Billet d'entrée</a>   
<a href="http://expiation.forumactif.org/f34-galerie-des-figurants">Galerie des Portraits</a>    <a href="http://expiation.forumactif.org/t36-galerie-des-noms">Galerie des Noms</a>    <a href="http://expiation.forumactif.org/t32-flash-infos">Flash Infos</a>    <a href="http://expiation.forumactif.org/t37-les-usages-et-coutumes-d-expiation">Coutumes d'Expiation</a>    <a href="http://expiation.forumactif.org/t34-presentation-du-staff">Le Staff</a>    </div><br>
<table><div style="text-align:justify;background-color:#FAF9F5 ;box-shadow: 2px 2px 6px black; height: 200px;width:380px;overflow:auto; color:black; padding:10px;"><div style="margin:auto;text-align:left;"><strong><font face=" cinzel decorative"><span style="font-size: 20px; line-height: normal">  Contexte</span></font></strong></div><div align="left"><br>
Chaque mois, dans les vestiges de l'ère humaine que nous connaissons, le Haut-Gouvernement siégeant d'une main de fer, contraint plusieurs citoyens vivant à l'extérieur du Mur de finir leurs jours asservis dans l'enceinte du Mur. Cet événement résulte du Soulèvement survenu cent ans plus tôt où le peuple avait défié l'autorité du gouvernement en place et des nobles. En tant que châtiment en suite à leur crime le Haut-Gouvernement avait prononcé que la peine serait le servitude de plusieurs villageois : " Chaque mois serait offert le sang de citoyens en santé pour couvrir le crime de leurs aïeux ". </div></div><div style="text-align:justify;background-color:#FAF9F5;box-shadow: 2px 2px 6px black; height: 200px;  width:384px; align:right;overflow:auto; color:black;padding:10px; margin-top:-220px; margin-left:425px;"><div style="margin:auto;text-align:left;width:100%"><strong> <font face=" cinzel decorative"><span style="font-size: 20px; text-align:left;">  Pré-crés</span></font> </strong></div><div align="left"><i><br><div class="infobulle"><img src="http://img15.hostingpics.net/pics/344835alex.png" style="width:60px; border-radius: 75px;>
<span>Cara H. Liason - Membre de la Guilde des Ombres</span></div>

    <a href="http://expiation.forumactif.org/t50-predefinis-ombrageux#227" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/pics/344835alex.png" style="width:60px; border-radius: 75px;"> </a> <a href="http://expiation.forumactif.org/t50-predefinis-ombrageux#230" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/pics/977051als.png" style="width:60px; border-radius: 75px;"></a> <a href="http://expiation.forumactif.org/t51-predefinis-villageois#233" target="_blank" rel="nofollow"><img src="http://media.tumblr.com/f4bcd35521b7ef740eb38fe19d845424/tumblr_inline_muvv9mV0aA1qjrc4q.png" style="width:60px; border-radius: 75px;"></a> <a href="http://expiation.forumactif.org/t51-predefinis-villageois#239" target="_blank" rel="nofollow"><img src="http://images5.fanpop.com/image/photos/26900000/Blake-Lively-Serena-Van-Der-Woodsen-blake-lively-26926936-100-100.png" style="width:60px; border-radius: 75px;"></a></i></div><table>
<br><br>
<table><div style="text-align:justify;background-color:#FAF9F5;box-shadow: 2px 2px 6px black; height: 175px; margin-left:0px;width:250px;overflow:auto; color:black;padding:10px;"><div style="margin:auto;text-align:left;"><strong><font face=" cinzel decorative"><span style="font-size: 20px; line-height: normal">   News</span></font></strong></div><div align="left"><i><br> 11/07 ► Création d'Expiation <br> 12/09 ► Nouveau design de rentrée <br> 22/09 ► Galerie des noms<br>25/10 ► Inscriptions à l'Event n°1 ouvertes<br>25/10 ► Nouvelle template : <br><br><center><img src="http://img11.hostingpics.net/pics/600352templateexpiation.png" style="width:100px;"></center></i></div></div><div style="text-align:justify;background-color:#FAF9F5 ;box-shadow: 2px 2px 6px black; height: 175px;  width:250px; align:right;overflow:auto; color:black;padding:10px; margin-top:-195px; margin-left:277px;"><div style="margin:auto;text-align:left;width:100%"><strong> <font face=" cinzel decorative"><span style="font-size: 20px; line-height: normal">  Staff</span></font> </strong></div><div align="left"><i><br><div style="box-shadow:0px 0px 0px black; border-radius:76px; width:76px";><table><tr><td><div class="contenant"><div class="contenu"><br><br><a href="http://expiation.forumactif.org/u1">Hailey J. Kingston</a><br>Fondatrice</div><img src="http://img11.hostingpics.net/pics/252125401.png"/></div></td><td></td><td><div class="contenant"><div class="contenu"><br><br><a href="http://expiation.forumactif.org/u2">Cody D. Everglade</a><br>Admin</div><img src="http://img11.hostingpics.net/pics/225648373.png"/></div></td><td></td><td><div class="contenant"><div class="contenu"><br><br><a href="http://expiation.forumactif.org/u3">Linelleray</a><br>Admin</div><img src="http://img11.hostingpics.net/pics/940809164.png"/></div></td></tr></table></div></i></div></div><div style="text-align:justify;background-color:#FAF9F5 ;box-shadow: 2px 2px 6px black; height: 175px;  width:254px; align:right;overflow:auto; color:black;padding:10px; margin-top:-195px; margin-left:555px;"><div style="margin:auto;text-align:left;width:100%"><strong> <font face=" cinzel decorative"><span style="font-size: 20px; line-height: normal">  Partenariats</span></font> </strong></div><div align="left"><i><br><a href="http://partotcrew.forumcanada.org/" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/pics/342033potc.jpg" style="box-shadow: 0px 0px 5px black";></a> </i></div></div>
</font></div></div></center>
<br>


Dernière édition par Kingston le Lun 28 Oct 2013 - 19:37, édité 1 fois

Kingston
**

Messages : 59
Inscrit(e) le : 06/09/2013

Kingston a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA recalcitrante

Message par Kingston le Lun 28 Oct 2013 - 8:40

Up

Kingston
**

Messages : 59
Inscrit(e) le : 06/09/2013

Kingston a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA recalcitrante

Message par MlleAlys le Lun 28 Oct 2013 - 18:48

Bonjour,
j'ai essayé de corriger le problème, mais il y en a pas mal dans le code de base, donc j'ai retravaillé le code général de la PA :

Pour ce genre de "blocs", le mieux est de travailler avec la propriété "float" du css, et ainsi mettre le bloc à droite ou à gauche. Nous avons donc un bloc principal, que j'ai nommé "accueil", et puis 7 div à l'intérieur, que j'ai nommées en fonction de leur contenu au cas où :

Code:
<div id="accueil">
    <link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'/>
    
    <DIV>
        Bienvenue sur Expiation
    </DIV>
    
    <DIV id="liens-accueil" class="panneau"></DIV>
    
    <DIV id="contexte" class="panneau"></DIV>
    
    <DIV id="precrees" class="panneau"></DIV>
    
    <DIV id="news" class="panneau"></DIV>
    
    <DIV id="staff" class="panneau"></DIV>
    
    <DIV id="partenariat" class="panneau"></DIV>
    
</div>
class="panneau" permet d'attribuer le même style (couleur de fond, ombre, etc) à toutes ces div via le css : ça évite de surcharger le code html et de devoir remettre le même code dans chaque balise Wink

On attribue ensuite les propriété float:right ou left aux div qu'on veut placer sur les côtés : contexte et news en float:left, precrees et partenariat en float right. Comme le staff doit se trouver entre deux blocs en float, on va l'écrire après les deux floats. On règle aussi la taille des blocs. Les div en clear:both permettent d'annuler en quelque sorte les effets des float :

Code:
<div id="accueil" style="padding:10px; width:830px; opacity:0.7;">
    <link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'/>
    
    <DIV>
        Bienvenue sur Expiation
    </DIV>
    
    <DIV id="liens-accueil" class="panneau" style="text-align:center; margin: 10px 0 20px 0;"></DIV>

    <DIV id="contexte" class="panneau" style="height:200px; width:370px; float:left;"></DIV>
    
    <DIV id="precrees" class="panneau" style="height:200px; width:370px; float:right;"></DIV>
    
    <div style="clear:both; height:20px;"></div>
    
    <DIV id="news" class="panneau" style="height:175px; width:250px; float:left;"></DIV>
    
    <DIV id="partenariat" class="panneau" style="height: 175px; float:right; width:250px;"></DIV>
    
    <DIV id="staff" class="panneau" style="width:250px; height:175px;"></DIV>
    
    <div style="clear:both;"></div>
    
</div>
Les blocs sont maintenant placés et dimensionnés, reste à les remplir sans plus toucher à ce squelette Wink:

Code:
<div id="accueil" style="padding:10px; width:830px; opacity:0.7;">
    <link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'/>
    
    <DIV style="text-align: center; font-family:cinzel decorative; font-size:30px; text-shadow: 0px 0px 5px black">
        Bienvenue sur Expiation
    </DIV>
    
    <DIV id="liens-accueil" class="panneau" style="text-align:center; margin: 10px 0 20px 0;">
        <a href="http://expiation.forumactif.org/t1-le-reglement-general-d-expiation">Règlement</a>
        <a href="http://expiation.forumactif.org/t2-le-contexte">Contexte</a>
        <a href="http://expiation.forumactif.org/t4-fiche-de-presentation">Billet d'entrée</a>
        <a href="http://expiation.forumactif.org/f34-galerie-des-figurants">Galerie des Portraits</a>
        <a href="http://expiation.forumactif.org/t36-galerie-des-noms">Galerie des Noms</a>
        <a href="http://expiation.forumactif.org/t32-flash-infos">Flash Infos</a>
        <a href="http://expiation.forumactif.org/t37-les-usages-et-coutumes-d-expiation">Coutumes d'Expiation</a>
        <a href="http://expiation.forumactif.org/t34-presentation-du-staff">Le Staff</a>
    </DIV>
    
    <DIV id="contexte" class="panneau" style="height:200px; width:370px; float:left;">
        <div class="titre">
            Contexte
        </div>
        <br/>
        Chaque mois, dans les vestiges de l'ère humaine que nous connaissons, le Haut-Gouvernement siégeant d'une main de fer, contraint plusieurs citoyens vivant à l'extérieur du Mur de finir leurs jours asservis dans l'enceinte du Mur. Cet événement résulte du Soulèvement survenu cent ans plus tôt où le peuple avait défié l'autorité du gouvernement en place et des nobles. En tant que châtiment en suite à leur crime le Haut-Gouvernement avait prononcé que la peine serait le servitude de plusieurs villageois : " Chaque mois serait offert le sang de citoyens en santé pour couvrir le crime de leurs aïeux ".
    </DIV>
    
    <DIV id="precrees" class="panneau" style="height:200px; width:370px; float:right;">
        <div class="titre">
            Pré-créés
        </div>
        <span class="infobulle">
            <a href="http://expiation.forumactif.org/t50-predefinis-ombrageux#227" target="_blank" rel="nofollow">
                <img src="http://img15.hostingpics.net/pics/344835alex.png"/>
                <div>Cara H. Liason - Membre de la Guilde des Ombres</div>
            </a>
        </span>
        <a href="http://expiation.forumactif.org/t50-predefinis-ombrageux#230" target="_blank" rel="nofollow">
            <img src="http://img15.hostingpics.net/pics/977051als.png" />
        </a>
        <a href="http://expiation.forumactif.org/t51-predefinis-villageois#233" target="_blank" rel="nofollow">
            <img src="http://media.tumblr.com/f4bcd35521b7ef740eb38fe19d845424/tumblr_inline_muvv9mV0aA1qjrc4q.png" />
        </a>
        <a href="http://expiation.forumactif.org/t51-predefinis-villageois#239" target="_blank" rel="nofollow">
            <img src="http://images5.fanpop.com/image/photos/26900000/Blake-Lively-Serena-Van-Der-Woodsen-blake-lively-26926936-100-100.png" />
        </a>
    </DIV>
    
    <div style="clear:both; height:20px;"></div>
    
    <DIV id="news" class="panneau" style="height:175px; width:250px; float:left;">
        <div class="titre">
            News
        </div>
        <br/>
        <span style="font-style:italic;">
            11/07 ► Création d'Expiation<br/>
            12/09 ► Nouveau design de rentrée<br/>
            22/09 ► Galerie des noms<br/>
            25/10 ► Inscriptions à l'Event n°1 ouvertes<br/>
            25/10 ► Nouvelle template :<br/><br/>
            <img src="http://img11.hostingpics.net/pics/600352templateexpiation.png" style="display:block; width:100px; margin:auto;"/>
        </span>
    </DIV>
    
    <DIV id="partenariat" class="panneau" style="height: 175px; float:right; width:250px;">
        <div class="titre">
            Partenariats
        </div>
        <br/>
        <a href="http://partotcrew.forumcanada.org/" target="_blank" rel="nofollow">
            <img src="http://img15.hostingpics.net/pics/342033potc.jpg" style="box-shadow: 0px 0px 5px black;"/>
        </a>
    </DIV>
    
    <DIV id="staff" class="panneau" style="width:250px; height:175px;">
        <div class="titre">
            Staff
        </div>
        <br/>
        <div class="contenant">
            <div class="contenu">
                <a href="http://expiation.forumactif.org/u1">Hailey J. Kingston</a>
                <br/>
                Fondatrice
            </div>
            <img src="http://img11.hostingpics.net/pics/252125401.png"/>
        </div>
        <div class="contenant">
            <div class="contenu">
                <a href="http://expiation.forumactif.org/u2">Cody D. Everglade</a>
                <br/>
                Admin
            </div>
            <img src="http://img11.hostingpics.net/pics/225648373.png"/>
        </div>
        <div class="contenant">
            <div class="contenu">
                <a href="http://expiation.forumactif.org/u3">Linelleray</a>
                <br/>
                Admin
            </div>
            <img src="http://img11.hostingpics.net/pics/940809164.png"/>
        </div>
    </DIV>
    
    <div style="clear:both;"></div>

</div>
De la même façon que j'ai créé une classe pour les panneaux, j'en ai créé une pour les titres des panneaux, de façon à ne pas avoir à recopier la même mise en forme à chaque fois.

Et donc le css associé, dans lequel se trouve les mises en forme justement (à coller dans affichage > couleurs > feuille de style css après avoir passé quelques lignes) :
Code:
/****************MISE EN FORE ACCUEIL*******************/

#accueil .panneau {
    background-color: #FAF9F5;  /*fond des panneaux*/
    box-shadow: 2px 2px 6px black;  /*ombre des panneaux*/
    overflow: auto;  /*apparition barre de défilement si le contenu dépasse*/
    color: black;  /*couleur du texte*/
    padding: 10px; /*marge à l'intérieur des panneaux*/
    text-align: left;  /*texte aligné à gauche*/
}

#liens-accueil a {  /*pour les liens en haut de l accueil*/
    margin: 0 5px 0 5px;
    font-family: 'cinzel decorative';
}

#accueil .titre { /*pour les titres de tous les panneaux*/
    font-family:cinzel decorative;
    font-size:20px;
    font-weight:600;  /*gras*/
}

/*mise en forme des pré créés*/
#precrees img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px;
}
span.infobulle {
    position: relative;
}
span.infobulle div {
    display: none;
}
span.infobulle:hover div {
    display: block;
    position: absolute;
    top: 5px;
    left: 0px;
    text-align: center;
}
/*fin mise en forme des pré créés*/

/*effet coulissement sur staff*/
div.contenant {
    width:75px;
    height:75px;
    border-radius: 50%; /*arrondi*/
    overflow:hidden;  /*pour que ça disparaisse quand ça sort*/
    display: inline-block;  /*pour éviter le retour à la ligne*/
}
div.contenu {  /*qui contient le texte*/
    width:65px;
    height:65px;
    padding:5px;
    overflow: auto;
    display: table-cell;  /*pour pouvoir centrer verticalement*/
    vertical-align: middle;  /*centrage vertical*/
    text-align: center;
}
div.contenant img {  /*pour l'image*/
    width:75px;
    height:75px;
    position: relative; /*pour pouvoir repositionner l image*/
    top:-77px;  /*image au dessus du texte*/
    left:0px;
    transition: top 1s ease; /*effet transition*/
}
div.contenant:hover img {  /*au passage de la souris*/
    top:0px;
    transition: top 1s ease;
}
/*fin effet coulissement staff*/

/****************FIN MISE EN FORE ACCUEIL*******************/
J'ai fini la mise en forme de l'effet de coulissement aussi, le retour à la ligne était provoqué par la div, qui par défaut est un bloc avec un retour à la ligne avant et un après : pour modifier cela j'ai attribué à ces div la propriété display: inline-block; dans le css, soit affichage comme un bloc mais sans les retours à la ligne. ^^

J'ai vu aussi des class "infobulle" pour les pré-définis, mais incomplet, j'ai fait quelque chose rapidement mais je ne sais pas si c'était ce que tu voulais =s

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA recalcitrante

Message par Kingston le Lun 28 Oct 2013 - 19:37

Bonjour,
Merci beaucoup pour cette réponse elle était vraiment complète j'ai compris toutes mes erreurs, merci encore, c'est exactement ce que je cherchais à faire ^-^

Kingston
**

Messages : 59
Inscrit(e) le : 06/09/2013

Kingston a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA recalcitrante

Message par MlleAlys le Lun 28 Oct 2013 - 19:40

de rien ! ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys 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