Bug et gros décalage de page. Bouton_activeBug et gros décalage de page. Bouton_hoverBug et gros décalage de page. Fb-hoverBug et gros décalage de page. Fb-active
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
» Système d'onglets simple et personnalisable
Bug et gros décalage de page. EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Bug et gros décalage de page. EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Bug et gros décalage de page. EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Bug et gros décalage de page. EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Bug et gros décalage de page. EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Bug et gros décalage de page. EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Bug et gros décalage de page. EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Bug et gros décalage de page. EmptySam 11 Fév 2023, 06:04 par Krager

-56%
Le deal à ne pas rater :
Ampli Home Cinema Denon AVR-X1700H à 349€
349 € 799 €
Voir le deal

Partagez
 

Bug et gros décalage de page.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://lgdcwarriors.actifforum.com/
Mia0712
Mia0712
{ Membre }
{ Membre }

Féminin Messages : 119



Bug et gros décalage de page. Empty
    Bonjour (:
    Je suis en train de mettre en place une page codée au CSS. Cependant lorsque je valide voilà la résultat :
    Spoiler:

    Mon codage pour la page :
    Spoiler:

    Feuille CSS du forum :
    Spoiler:
MessageSujet: Bug et gros décalage de page.   Bug et gros décalage de page. EmptySam 19 Mai 2012, 09:40
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Bug et gros décalage de page. Empty
Bonjour,

Les problèmes viennent de ton HTML uniquement. Il y a un certain nombre de balises mal fermées (blockquote, center), et aussi de balises de fermeture en trop (div, table).

En conservant ta structure, voici donc ton code corrigé.
Code:
<DIV style="TEXT-ALIGN: right" align=center><SPAN style="FONT-FAMILY: Palatino Linotype"><FONT face=georgia size=7><blockquote>
[i][color=black]FONDATRICE[/color][/i]
[size=18][color=white]« ...  »[/color][/size]</blockquote></FONT></SPAN><BR></DIV><div style="border-bottom: 15px dotted #e1e1e1; font-size: 1px">.</div>
<center>
<table width="80%"><tr><td><div style="width: 200px; height: 250px; border: 2px solid silver; -moz-border-radius: 16px; background-image:url('image Ambre')">.</div><div style="text-align: center; border-bottom: 1px dotted; font-size: 11px; color: silver; width: 200px">Ambre - The ...</div></td><td style="text-align: justify; padding: 12px; font-size: 10px; margin: 2px; color: black; border: 2px solid silver; -moz-border-radius: 16px; background-color: white"><div style="height: 250px; overflow: auto">[center] [img]Image 1[/img] [img]Image 2[/img]  [img]Image 3[/img] [/center]

[size=18][color=DarkGray]« Citation »[/color][/size]

DESCRIPTION AMBRE</div></td></tr></table></center>


<DIV style="TEXT-ALIGN: right" align=center><SPAN style="FONT-FAMILY: Palatino Linotype"><FONT face=georgia size=7><blockquote>
[i][color=black]ADMINISTRATRICES[/color][/i]
[size=18][color=white]« THEY ARE FREAKS BUT WE LOVE THEM SO MUCH »[/color][/size]</blockquote></FONT></SPAN><BR></DIV><div style="border-bottom: 15px dotted #e1e1e1; font-size: 1px">.</div>
<center><table width="80%"><tr><td><div style="width: 200px; height: 250px; border: 2px solid silver; -moz-border-radius: 16px; background-image:url('IMAGE DOUCE PLUME')">.</div><div style="text-align: center; border-bottom: 1px dotted; font-size: 11px; color: silver; width: 200px">Douce Plume - The ... </div></td><td style="text-align: justify; padding: 12px; font-size: 10px; margin: 2px; color: black; border: 2px solid silver; -moz-border-radius: 16px; background-color: white"><div style="height: 250px; overflow: auto">[center] [img]http://image.noelshack.com/fichiers/2012/20/1337265435-AvatarLGDC1.jpg[/img] [img]http://image.noelshack.com/fichiers/2012/20/1337265436-AvatarLGDC2.jpg[/img]
[img]http://image.noelshack.com/fichiers/2012/20/1337265438-AvatarLGDC3.jpg[/img][/center]

[size=18][color=DarkGray]« [i]Citation[/i] »[/color][/size]

Si j'étais un poisson, je serais le poisson clown
Si j'étais un oiseau, je serais une colombe
Si j'étais un fauve, je serais un guépard
Si j'étais un fruit de mer, je serais un poulpe
Si j'étais une espèce menacée, je serais un panda
Si j'étais un dinosaure, je serais un ptérodactyle
Si j'étais un animal imaginaire, je serais un dragon
Si j'étais une plante, je serais une jonquille
Si j'étais un arbre, je serais un sapin
Si j'étais un arbre fruitier, je serais un pêcher
Si j'étais un des cinq éléments fondamentaux, je serais le vent
Si j'étais une saison, je serais le printemps
Si j'étais une planète, je serais Mercure
Si j'étais une étoile ou une constellation, je serais la constellation de la Lyre
Si j'étais une couleur, je serais le vert
Si j’étais une ville, je serais Paris
Si j’étais un film, je serais l’arnacoeur
Si j'étais une chanson, je serais l’Assassymphonie
Si j'étais une musique de film, je serais celle de Titanic
Si j'étais un roman, je serais La Guerre des Clans
Si j'étais un manga, je serais Fairy Tail
Si j'étais un héros de littérature, je serais Sinead, dans Jack Spark
Si j'étais un écrivain, je serais Victor Dixen
Si j'étais un légume, je serais un brocolis
Si j'étais un fromage, je serais du bleu d’Auvergne
Si j'étais une boisson, je serais l’ice tea
Si j'étais un chiffre, je serais le treize
Si j'étais un parfum de glace, je serais Stracciatella
Si j'étais une console de jeux, je serais un ordinateur
Si j'étais un jeu vidéo, je serais Assassin’s Creed
Si j'étais un personnage de jeu video, je serais Ezio Auditore</div></td></tr></table></center>




<DIV style="TEXT-ALIGN: right" align=center><SPAN style="FONT-FAMILY: Palatino Linotype"><FONT face=georgia size=7><blockquote>
[i][color=black]MODERATRICES[/color][/i]
[size=18][color=white]« THEY ARE THE GUARDIANS OF THE CODE »[/color][/size]</blockquote></FONT></SPAN><BR></DIV><div style="border-bottom: 15px dotted #e1e1e1; font-size: 1px">.</div>
<center><table width="80%"><tr><td><div style="width: 200px; height: 250px; border: 2px solid silver; -moz-border-radius: 16px; background-image:url('IMAGE CENDRES')">.</div><div style="text-align: center; border-bottom: 1px dotted; font-size: 11px; color: silver; width: 200px">Sioux - The ... </div></td><td style="text-align: justify; padding: 12px; font-size: 10px; margin: 2px; color: black; border: 2px solid silver; -moz-border-radius: 16px; background-color: white"><div style="height: 250px; overflow: auto">[center] [img]http://nsa30.casimages.com/img/2012/05/18/120518041529960133.jpg[/img] [img]http://nsa30.casimages.com/img/2012/05/18/120518041529960133.jpg[/img]
[img]http://nsa30.casimages.com/img/2012/05/18/120518041614729835.jpg[/img][/center]

[size=18][color=DarkGray]« [i]"... l'essence même du bonheur, qui au fond semblait toujours avoir quelque chose d'enfantin. " Journal d'un vampire, p 488. [/i] »[/color][/size]

[b][size=18]O[/size][/b]n pourrait croire que je vais avoir facile à me décrire, moi qui adore parler de ma personne, de mes soucis et de ma vie, ce qui peut parfois m'énerver moi-même, mais j'ai du mal à me retenir... Mais ce ne sera pas le cas maintenant, du moins pour mon caractère, car il est, selon moi, toujours difficile de se décrire et on a tendance à trop se rabaisser ou a trop se mettre en valeur. Alors, commençons par le reste, si vous le voulez bien.

[size=18][b]D[/b][/size]epuis toute petite, j'adore la magie et la féerie des mondes que notre imagination arrive à imaginer. J'avais d'ailleurs une amie imaginaire dès l'âge de 2 ans et demi et j'aimais inventer pleins d'aventures aussi extraordinaires les unes que les autres en faisant semblant d'être elle ou d'être avec elle. [ Non, ce n'est pas parce que j'avais pas d'amis, vu que Loveless était avec moi xD ] Je me rapelle que dans son monde, j'avais réuni tout les films/séries et même des jeux que j'aimais dans des nuages tels qu'Harry Potter, Barbie ( oui, j'ai honte xD ) et plein d'autres choses en plus de ce que moi, j'avais imaginé. Ce qui est d'ailleurs bizarre, car j'adore aussi beaucoup la science qui est souvent comparé à l'opposé du fantastique. Moi je dis que l'un ne va pas sans l'autre, comme le bien et le mal. Aujourd'hui, je retrouve cette magie dans mes livres tels que La Guerre des Clans ( bien évidemment x) ), Les Gardiens de Ga'Hoole, Filles de Lunes, L'Elfe de Lune et Vampire Diaries. Certes ce ne sont pas encore d'énormes livres d' « adultes » tel qu'Harry Potter, Tara Duncan, etc comme ceux de ma mère. Mais je tiens à garder précieusement cette partie d'Ame d'enfant que j'envie de plus en plus en grandissant. D'ailleurs, j'adore toujours les peluches  Au moins, si tu sais pas avoir un animal sauvage trop mignon chez toi, tu les as en peluche ;D Et oui, I'm fan des animaux et ce, depuis bébé ♥️
J'aurais aimé parler encore plus, mais je vais m'arrêter là avant de ne plus avoir de place pour mon caractère x)

[size=18][b]C[/b][/size]omme je suis encore jeune, je ne crois pas me connaitre encore entièrement donc je vais surtout me décrire comment on me voit et comment je m'entrevois.
D'une nature têtue, j'aime avoir raison. Malheureusement, ce trait de caractère ne s'étant pas beaucoup et je ne suis donc pas persévérente. Je suis même plutot du genre à vite baisser les bras. D'après ma mère, je suis une fille posée car je réfléchis avant d'agir. Moi, je trouve que je réfléchis parfois un peu trop et pas assez vite. Souvant égoïste, je trouve que ça c'est quand même amélioré avec le temps. J'ai tendance à ne voir que mes défauts, mais si il a une qualité dont je suis sûre d'avoir, c'est d'être fidèle à mes amis et je pense être prête à les protéger si besoin est, tout comme ma famille. Certains me diront que je suis insensible car je ne pleure pas facilement devant les films tristes ( quoiqu'en grandissant, je remarque que ça m'arrive de plus en plus souvent ) et que je ne montre pas toujours mes sentiments. Mais ceux qui me connaissent savent qu'au fond, je suis plus sensible qu'on le croit au première abord. Je suis même une « stressé de la vie », comme on dit. Du genre timide, je me montre sous mon vrai jour qu'avec les gens que j'aime et que je connais. Une fois qu'il y a quelqu'un d'autre, je peux carrément devenir coincée. Maus au moins, je suis une bonne élève en classe car, comme dirait mon titulaire, " elle arrive à créé une bulle autour d'elle jusqu'à oublier les gens de la classe ".
Plusieurs fois, j'ai voulu redevenir un petit enfant, là où la vie était facile, où tout le monde était votre ami et où toutes les horreurs de ce monde ne semblaient pas exister. Ce moment où, vous voyez le monde beau et charmant. En effet, il l'est. Mais pas autant que ce qu'on l'on croit au début. En gros, l'Insouscience et l'Innoncence de l'Enfance...</div></td></tr></table></center>


<DIV style="TEXT-ALIGN: right" align=center><SPAN style="FONT-FAMILY: Palatino Linotype"><FONT face=georgia size=7><blockquote>
[i][color=black]ECRIVAINS[/color][/i]
[size=18][color=white]« ... »[/color][/size]</blockquote></FONT></SPAN><BR></DIV><div style="border-bottom: 15px dotted #e1e1e1; font-size: 1px">.</div>
<center><table width="80%"><tr><td><div style="width: 200px; height: 250px; border: 2px solid silver; -moz-border-radius: 16px; background-image:url('IMAGE AJONC')">.</div><div style="text-align: center; border-bottom: 1px dotted; font-size: 11px; color: silver; width: 200px">n'Ajonc - The ... </div></td><td style="text-align: justify; padding: 12px; font-size: 10px; margin: 2px; color: black; border: 2px solid silver; -moz-border-radius: 16px; background-color: white"><div style="height: 250px; overflow: auto">[center]
[img]http://img11.hostingpics.net/pics/556393Image1.png[/img]
[img]http://img11.hostingpics.net/pics/718074Image2.png[/img]
[img]http://img11.hostingpics.net/pics/764038Image3.png[/img][/center]

[size=18][color=DarkGray]« Astra esterni ono thelduin. »[/color][/size]

Moi ? Je suis complètement folle .
J’adore faire stresser les gens, les clasher, corriger leurs fautes d’orthographe et surtout [b]les faire fuir de la CB.[/b] BWAH AH AH AHA.
Pour mon plus grand malheur je suis en troisième, et j’ai franchement hâte d’aller au lycée, plus qu'un mois à tenir. J’adore les gaufres nutella-glace-à-la-vanille-chantilly-sucre-glace & les chansons de Katy Perry. Et euh... que dire pour faire dix lignes ? Je fais toujours dix mille choses en même temps, je suis toujours débordée, je déteste les kikoolol mais le problème c'est que j'en suis une. J'adore ce forum c'est mon tout premier, et je ferai tout pour qu'il vive trèèès longtemps parce que j'adore trop les gens qui sont dessus ♥️.
J'aime beaucoup les livres, surtout Eragon et HP ♡. </div></td></tr></table></center>

Autrement, tu as l'air de plus te compliquer la vie qu'autre chose, à vouloir mélanger tableaux et divs, sans réellement profiter de ton CSS. Je ne comprends pas non plus pourquoi tu utilises simultanément une SPAN et une FONT, d'autant qu'elles se contredisent un peu. Smile

Tu pourrais adopter une structure beaucoup plus simple en utilisant uniquement DIV et SPAN, et stylée directement dans ton CSS. Voilà par exemple l'équivalent d'un de tes blocs. =)
Code:
<div class="staff_block" id="Ambre"> <!--l'ID est le seul élément à changer quand tu ajoutes un bloc, il te permet d'ajouter l'avatar en background-image dans le CSS-->
   <div class="staff_head">
      <span class="titre">Fondatrice</span>
      <span class="sous-titre">« ... »</span>
   </div>
   <div class="staff_content">
      <div class="staff_profil">
         <div class="staff_avatar"></div>Ambre - The ...
      </div>
      <div class="staff_bio"><div>
            <div class="images">[img]Image 1[/img] [img]Image 2[/img]
            [img]Image 3[/img]</div>
            <span class="citation">« Citation »</span>
            DESCRIPTION AMBRE
      </div></div>
   </div>
</div>
Code:
/* style de base du bloc entier */
.staff_block {
   width:100%;
   position:relative;
}
/* style des titres du bloc : "fondatrice" + citation */
.staff_head {
   text-align:right;
   font-family:Palatino Linotype;
   border-bottom:15px dotted #e1e1e1;
   padding:20px;
}
.staff_head .titre {
   color:#000;
   font-style:italic;
   font-size:4em;
   text-transform:uppercase; /*met en majuscules*/
   font-weight:bold;
}
.staff_head .sous-titre {
   font-size:2em;
   color:#fff;
}
/* style du contenu, englobe "profil" et "bio" */
.staff_content {
   width:80%;
   margin:0 auto; /*permet de centrer*/
}
/*fixe la largeur de l'espace "profil", et l'avatar qu'il contient*/
.staff_profil, .staff_avatar {
   width: 200px;
}
.staff_profil {
   float:left; /*fait flotter sur la gauche*/
   border-bottom: 1px dotted;
   text-align: center;
   font-size: 11px;
   color: silver;
}
/* déclaration du fond de chaque avatar ; l'ID est celle que tu détermines au début de chaque bloc :) */
#Ambre .staff_avatar {
   background-image:url('image Ambre');
}
/* bordures et hauteur de l'avatar et de l'espace "bio" */
.staff_avatar, .staff_bio {
   border: 2px solid silver;
   -moz-border-radius:16px;
   -webkit-border-radius:16px;
   border-radius:16px;
   height: 250px;
}
/* style général de la "bio" */
.staff_bio {
   background-color:#fff;
   color:#000;
   font-size:10px;
   text-align:justify;
   margin:0 0 0 220px; /*fait de l'espace à gauche pour avatar+pseudo*/
   padding:12px;
}
/* comme tu avais fait, désolidarise les barres de défilement de la bordure de staff_bio */
.staff_bio > div {
   overflow:auto;
   height:100%;
}
/* alignement centré des images de la bio ; tu peux très bien utiliser [center] comme tu avais fait, j'ai essayé d'enlever le plus de BBcode possible */
.staff_bio .images {
   text-align:center;
}
/* style de la citation de la bio */
.staff_bio .citation {
   display:block;
   color:darkgrey;
   font-size:2em;
   font-style:italic;
   padding:0 5px;
}

Vouala. J'ai essayé de commenter autant que possible le CSS, j'espère que c'est assez clair et que ça t'aura aidé. Surprised
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptySam 19 Mai 2012, 11:47
Revenir en haut Aller en bas
http://lgdcwarriors.actifforum.com/
Mia0712
Mia0712
{ Membre }
{ Membre }

Féminin Messages : 119



Bug et gros décalage de page. Empty
Merci (:
Malheureusement => http://la-guerredesclans.forum-actif.net/t502-le-staff-du-forum#7991
Alala :X

Et quand tu dis stylée CSS c'est mettre le code CSS directement sur ma feuille CSS coté Panneau Admin ou directement sur ma page ? Smile
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptySam 19 Mai 2012, 13:45
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Bug et gros décalage de page. Empty
Directement sur ta feuille CSS dans le panneau d'administration. =)

Est-ce que tu as personnalisé le template viewtopic_body ?
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptySam 19 Mai 2012, 15:49
Revenir en haut Aller en bas
http://lgdcwarriors.actifforum.com/
Mia0712
Mia0712
{ Membre }
{ Membre }

Féminin Messages : 119



Bug et gros décalage de page. Empty
J'ai ajouté le code sur feuille CSS Wink
Pour le template non je ne l'ai personnalisé - mais je suis pas douée pour le template - je dois ajouter un code pouvant faire marcher le code CSS ? :>.<:
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptyDim 20 Mai 2012, 05:12
Revenir en haut Aller en bas
Illadon
Illadon
{ Membre }
{ Membre }

Masculin Messages : 126



Bug et gros décalage de page. Empty
Non tu n'as pas besoin d'ajouter de code pour faire fonctionner le css.
Par contre il serait bien que tu nous dises qu'est ce qui pose problème au niveau rendu car au niveau code c'est fouilli.
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptyDim 20 Mai 2012, 06:40
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Bug et gros décalage de page. Empty
Mia, le code CSS que je t'ai présenté n'est utile que si tu utilises l'HTML présenté avec. Smile
Ce n'est pas la peine de l'ajouter dans ton panneau d'administration si tu gardes ce que tu as fait à la base. A toi de voir ce que tu préfères utiliser, ce n'était qu'une proposition. Wink

Concernant les bugs, effectivement il serait bien d'avoir des détails. Personnellement j'ai vu que la signature s'incrustait dans la dernière partie. Il y a autre chose ?

A moins que tu n'aies manqué quelque chose en copie-collant, peut-être qu'il y a des balises mal fermées dans la signature...
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptyDim 20 Mai 2012, 06:55
Revenir en haut Aller en bas
http://lgdcwarriors.actifforum.com/
Mia0712
Mia0712
{ Membre }
{ Membre }

Féminin Messages : 119



Bug et gros décalage de page. Empty
Enfaite, le seul problème que je trouve c'est que le fait que la fin s'incruste avec la signature comme tu as pu le citer toi-même Doare :/
J'ai essayé de chercher si je n'avais pas oublié de fermer une balise ou autre mais rien ne change :S

EDIT : C'est bon j'ai réussi ! Un oublie de codage à la fin de mon propre code de la page Very Happy
Merci pour votre aide !!
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptyJeu 24 Mai 2012, 06:54
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Bug et gros décalage de page. Empty
Hello Mia0712 (:
Le problème est-il donc entièrement résolu ?
Merci d'avance de ta réponse Bug et gros décalage de page. 926145
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptyJeu 24 Mai 2012, 13:36
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Bug et gros décalage de page. Empty
Hello !
N'ayant toujours pas obtenu de réponse, je considère le sujet comme résolu !
Merci de ta compréhension Bug et gros décalage de page. 926145
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. EmptyLun 28 Mai 2012, 12:21
Revenir en haut Aller en bas
Contenu sponsorisé




Bug et gros décalage de page. Empty
MessageSujet: Re: Bug et gros décalage de page.   Bug et gros décalage de page. Empty
Revenir en haut Aller en bas
 

Bug et gros décalage de page.

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

 Sujets similaires

-
» Gros problème d'affichage de la page d'index du forum
» [En Cours - Staff Codage] Gros problèmes page d'accueil
» Footer toujours en bas de page et à la largeur de la page
» Décalage de la PA
» Un problème de décalage

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-

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 | Cookies | Forum gratuit