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! |
| Page d'accueil trop large. | |
| Addiction
{ Membre }
Messages : 125
| Bonjour, j'ai utilisé beaucoup de CSS pour embellir mon forum et j'ai également eu une grande aide pour ma page d'accueil. Cependant, je trouve le forum trop large. Serait-il possible de garder la mise en page actuelle en diminuant la largeur de la page? Quand je le fais, ça ne me change rien.
Voici tout mon CSS:
- Spoiler:
- Code:
-
a.mainmenu{ font-size: 11px; font-variant: small-caps; text-decoration: none; -moz-border-radius: 6px; text-align: center; } a.mainmenu:hover{ font-size: 11px; font-variant: small-caps; text-decoration: none; border: 1px dotted 8dc900; -moz-border-radius: 6px; text-align: center; }
.mainmenu img {display: none;}
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; font-family: sans-serif; font-size: 12px; font-weight: lighter; letter-spacing: 2px; display:block; text-align: center; }
a.forumlink:hover{ font-weight: lighter; letter-spacing: 2px; text-align: center;}
a.forumlink:link, a.forumlink:visited { font-family: serif; text-transform : uppercase; font-size: 100%; text-align: center;}
a { text-decoration: none; }
a:hover { text-decoration: none !important; border-bottom: 1px dashed #666623; cursor: crosshair; text-align: center; }
u{border-bottom: 1px dashed;text-decoration: none} i{color: #8dc900}
a.mainmenu:hover { text-decoration: none !important; border-bottom: 1px dashed #83B312; text-align: center; }
a.forumlink:hover { text-decoration: none !important; border-bottom: 1px dashed #83B312; text-align: center; }
textarea, .textarea.post, input.post { -moz-border-radius:10px; }
.bodyline { -moz-border-radius:10px; }
.titre { font-family: trebuchet MS; font-size: 210%; text-transform: uppercase; color: #000000; text-align: center; }
.titre:hover { color: #8c8c8c; }
.decore { background-color: #CDD980; background-size: 200%; color: #000000; text-align: center; font-size: 110%; }
div.background { width:400px; height:050px; border:1px solid black; } div.transbox { width:200px; height:100px; margin:20px 40px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=50); opacity:0.5; } div.transbox p { margin:20px 30px; font-weight:bold; color:#000000; }
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #000000; background-color: #CDD980; border: 1px solid #ccc; text-decoration: none; } #navigation li a:hover{ background-color: #CDD980; color: #000000; }
a { font-variant: small-caps; }
div.background { width:500px; height:250px; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; }
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #000000; background-color: #CDD980; border: 1px solid #ccc; text-decoration: none; } #navigation li a:hover{ background-color: #CDD980; color: #000000; }
a { font-variant: small-caps; }
.contenu { vertical-align: top; text-align: center; border: 1px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.contexte { vertical-align: top; text-align: center; }
.titre { color: #000000; background-color: #CDD980; border: 1px solid #ccc; margin: 5%; }
Et voici celui de la page d'accueil:
- Spoiler:
- Code:
-
<table border="0" width="100%"> <tbody><tr> <td colspan="5"><div id="navigation"> <ul> <li><a href="http://milky-way.forumactif.org/reglement-f1/">Règlement</a> </li><li><a href="http://milky-way.forumactif.org/inscription-f2/">Inscription</a> </li><li><a href="http://milky-way.forumactif.org/nouveautes-f3/">Nouveautés</a> </li><li><a href="http://milky-way.forumactif.org/premiers-chevaux-f13/">Chevaux</a></li></ul></div> </td> </tr> <tr> <td class="contenu" width="50%"><div class="titre">NOUVEAUTÉS</div> <br><br>15.02.10: Ouverture du forum.<br></td> <td rowspan="2" class="contexte"><div class="background"><div class="transbox"> <p>Bienvenue sur Milky Way, une écurie virtuelle familiale où les passionnés se retrouvent. Ici, ce n'est pas un RPG, juste un jeu où tu reste toi-même et donc, où tu utilise ton PUF et non un Nom & Prénom. Tu viens ici pour t'amuser, pour élever tes chevaux et les mener en concours. Tu exerces un métier pour subvenir aux besoins de tes chevaux mais également pour agrandir ton élevage et devenir le meilleur éleveur de la vallée. Plusieurs objectifs te sont mis à disposition afin de rendre le jeu plus piquant. N'hésite pas, rejoins-nous et amuse-toi! </p> </div> </div></td> <td style="vertical-align: top;"><br></td><td style="vertical-align: top;"><br></td><td class="contenu" width="50%"><div class="titre">TOP-SITES</div> <br><a href="http://www.root-top.com/topsite/nok/in.php?ID=1323"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/emire/in.php?ID=4570"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/neverland/in.php?ID=414"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/olinalexe/in.php?ID=2824"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a></td> </tr> <tr> <td class="contenu"><div class="titre">STAFF</div> <br><br>Admin: Peach ; Natia. <br>Modo: Aucun. </td> <td style="vertical-align: top;"><br></td><td style="vertical-align: top;"><br></td><td class="contenu"><div class="titre">PARTENAIRES</div> <br><marquee behavior="scroll" align="center" direction="up" scrollamount="2" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" height="120"> <a href="http://milky-way.forumactif.org/publicite-partenariat-f12/">Devenir partenaire.</a><br> <br></marquee> </td> </tr> <tr> <td style="text-align: center;"><img src="http://i68.servimg.com/u/f68/12/58/30/54/accuei10.jpg" alt="" border="0"></td> <td style="text-align: center;"><img src="http://i68.servimg.com/u/f68/12/58/30/54/ici_tu10.jpg" alt="" border="0"><br></td> <td style="vertical-align: top;"><br></td><td style="vertical-align: top;"><br></td><td class="contenu"><div class="titre">CRÉDIT</div> <br><br>Forum by Peach.<br>Design by Peach.<br>Codage by Peach avec l'aide de CSSActif. </td> </tr> </tbody></table>
Je ne sais pas faire de capture d'écran, donc si vous avez vraiment besoin d'un aperçu, je ne peux vous communiquer que l'adresse du forum. Merci de votre aide! | | |
| | | Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Eh bien normalement le message d'accueil devrait se réduire à la taille du forum | | |
| | | Addiction
{ Membre }
Messages : 125
| Pourtant, quand je modifie la largeur du forum, rien ne change! Il faut aussi savoir que j'ai posté une annonce en haut et que mes crédits défilent en-dessous. Cela change-t-il quelque chose? | | |
| | | Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Mh, non je ne pense pas. Et dans tes sous-forums, est-ce que la taille change ? | | |
| | | Addiction
{ Membre }
Messages : 125
| Non, ça reste aussi grand. | | |
| | | Invité Invité
| Dans ce cas là je pense qu'il faut que tu réduises ton tableau de PA en jouant avec les "width" | | |
| | | Addiction
{ Membre }
Messages : 125
| C'est ce que je viens de faire et j'ai fais une bêtise. >.< Maintenant, le texte de ma boîte transparente dépasse.
EDIT: Finalement, j'ai réussi à réparer mon erreur. Mais je n'arrive toujours pas à réduire la taille de ma PA. | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Coucou ! Je pense que tu dois avoir un problème au niveau de ton CSS rattaché à ta page d'accueil : - Code:
-
div.background {width:500px; height:250px; border:2px solid black;}
div.transbox {width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=60); opacity:0.6;} width:400px = la largeur des cases Je pense que c'est à cause de cette taille que ta page est déformée | | |
| | | Addiction
{ Membre }
Messages : 125
| Merci, mais si je la diminue, mon texte sort de la boîte. D'ailleurs, même en diminuant, le forum reste très large. =\ | | |
| | | Liliana
{ Membre actif }
Messages : 997
| - Citation :
- Je ne sais pas faire de capture d'écran, donc si vous avez vraiment besoin d'un aperçu, je ne peux vous communiquer que l'adresse du forum.
Un screen serait pas mal; pour nous montrer ce que tu vois exactement . Je te renvoie à ce sujet : ici . Je pense qu'on arrivera à voir plus clair ^^ | | |
| | | Addiction
{ Membre }
Messages : 125
| Ah! merci!
Sans modification du CSS: https://i.servimg.com/u/f68/12/58/30/54/captur10.jpg
Avec modification du CSS (400 remplacé par 300) https://i.servimg.com/u/f68/12/58/30/54/captur11.jpg | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Okay, j'essaye un truc et j'édite xD Alors déjà, j'ai retiré toutes les tailles dans ton CSS (je me suis permise de retirer les codes que tu avais en double, et qui risquaient donc de faire buguer le tout xD) - Code:
-
a.mainmenu{ font-size: 11px; font-variant: small-caps; text-decoration: none; -moz-border-radius: 6px; text-align: center; }
a.mainmenu:hover{ font-size: 11px; font-variant: small-caps; text-decoration: none; border-bottom: 1px dashed #83B312; text-align: center; }
.mainmenu img {display: none;}
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; font-family: sans-serif; font-size: 12px; font-weight: lighter; letter-spacing: 2px; display:block; text-align: center; }
a.forumlink:hover{ text-decoration: none !important; border-bottom: 1px dashed #83B312; text-align: center; }
a.forumlink:link, a.forumlink:visited { font-family: serif; text-transform : uppercase; font-size: 100%; text-align: center;}
a{text-decoration: none;}
a:hover{ text-decoration: none !important; border-bottom: 1px dashed #666623; cursor: crosshair; text-align: center; }
u{border-bottom: 1px dashed;text-decoration: none} i{color: #8dc900}
textarea, .textarea.post, input.post { -moz-border-radius:10px; }
.bodyline { -moz-border-radius:10px; }
.titre { font-family: trebuchet MS; font-size: 210%; text-transform: uppercase; text-align: center; color: #000000; background-color: #CDD980; border: 1px solid #ccc; margin: 5px; }
.titre:hover { color: #8c8c8c; }
.decore { background-color: #CDD980; background-size: 200%; color: #000000; text-align: center; font-size: 110%; }
a {font-variant: small-caps;}
div.background{ height:250px; border:2px solid black; }
div.transbox{ height:200px; margin:25px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=60); opacity:0.6; }
div.transbox p{ margin:25px 25px; font-weight:bold; color:#000000; }
#navigation ul{ list-style-type: none; text-align: center; }
#navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; }
#navigation li a { padding: 2px 7px 2px 7px; color: #000000; background-color: #CDD980; border: 1px solid #ccc; text-decoration: none; }
#navigation li a:hover{ background-color: #CDD980; color: #000000; }
.contenu { vertical-align: top; text-align: center; border: 1px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.contexte { vertical-align: top; text-align: center; } Ensuite, ta page d'accueil : - Code:
-
<table border="0" width="100%"> <tbody><tr> <td colspan="5"><div id="navigation"> <ul> <li><a href="http://milky-way.forumactif.org/reglement-f1/">Règlement</a> </li><li><a href="http://milky-way.forumactif.org/inscription-f2/">Inscription</a> </li><li><a href="http://milky-way.forumactif.org/nouveautes-f3/">Nouveautés</a> </li><li><a href="http://milky-way.forumactif.org/premiers-chevaux-f13/">Chevaux</a></li></ul></div> </td> </tr> <tr> <td class="contenu" width="50%"><div class="titre">NOUVEAUTÉS</div> <br><br>15.02.10: Ouverture du forum.<br></td> <td rowspan="2" class="contexte" width="50%"><div class="background"><div class="transbox"><p>Bienvenue sur Milky Way, une écurie virtuelle familiale où les passionnés se retrouvent. Ici, ce n'est pas un RPG, juste un jeu où tu reste toi-même et donc, où tu utilise ton PUF et non un Nom & Prénom. Tu viens ici pour t'amuser, pour élever tes chevaux et les mener en concours. Tu exerces un métier pour subvenir aux besoins de tes chevaux mais également pour agrandir ton élevage et devenir le meilleur éleveur de la vallée. Plusieurs objectifs te sont mis à disposition afin de rendre le jeu plus piquant. N'hésite pas, rejoins-nous et amuse-toi! </p> </div> </div></td> <td style="vertical-align: top;"><br></td><td style="vertical-align: top;"><br></td><td class="contenu" width="50%"><div class="titre">TOP-SITES</div> <br><a href="http://www.root-top.com/topsite/nok/in.php?ID=1323"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/emire/in.php?ID=4570"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/neverland/in.php?ID=414"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/olinalexe/in.php?ID=2824"><img src="http://i68.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a></td> </tr> <tr> <td class="contenu"><div class="titre">STAFF</div> <br><br>Admin: Peach ; Natia. <br>Modo: Aucun. </td> <td style="vertical-align: top;"><br></td><td style="vertical-align: top;"><br></td><td class="contenu"><div class="titre">PARTENAIRES</div> <br><marquee behavior="scroll" align="center" direction="up" scrollamount="2" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" height="120"> <a href="http://milky-way.forumactif.org/publicite-partenariat-f12/">Devenir partenaire.</a><br> <br></marquee> </td> </tr> <tr> <td style="text-align: center;"><img src="http://i68.servimg.com/u/f68/12/58/30/54/accuei10.jpg" alt="" border="0"></td> <td style="text-align: center;"><img src="http://i68.servimg.com/u/f68/12/58/30/54/ici_tu10.jpg" alt="" border="0"><br></td> <td style="vertical-align: top;"><br></td><td style="vertical-align: top;"><br></td><td class="contenu"><div class="titre">CRÉDIT</div> <br><br>Forum by Peach.<br>Design by Peach.<br>Codage by Peach avec l'aide de CSSActif. </td> </tr> </tbody></table> Je t'explique ce que j'ai changé : - Code:
-
div.background{ height:250px; border:2px solid black; }
div.transbox{ height:200px; margin:25px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=60); opacity:0.6; }
div.transbox p{ margin:25px 25px; font-weight:bold; color:#000000; } - J'ai donc retiré les largeurs; ainsi elles s'adapteront automatiquement à l'espace disponible sur ta page - J'ai modifié les marges aussi; afin qu'elles soient moins grandes, et que ton texte passe. 1. Les marges de div.transbox p; qui passent en 25 pixels, au lieu des 20 & 30 que tu avais mis. 2. Les marges de div.transbox; qui passe donc à 25 pixels aussi, au lieu de 20 & 40. Quand à la page d'accueil, j'ai modifié cette partie : - Code:
-
<td rowspan="2" class="contexte" width="50%"><div class="background"><div class="transbox"><p>Bienvenue sur Milky Way, une écurie virtuelle familiale où les passionnés se retrouvent. Ici, ce n'est pas un RPG, juste un jeu où tu reste toi-même et donc, où tu utilise ton PUF et non un Nom & Prénom. Tu viens ici pour t'amuser, pour élever tes chevaux et les mener en concours. Tu exerces un métier pour subvenir aux besoins de tes chevaux mais également pour agrandir ton élevage et devenir le meilleur éleveur de la vallée. Plusieurs objectifs te sont mis à disposition afin de rendre le jeu plus piquant. N'hésite pas, rejoins-nous et amuse-toi! </p> </div> </div></td> Pour rajouter "width=50%" au "td"; ainsi la colonne a une largeur de 50% de la page d'accueil entière. Chez moi; ça rentre ^^ En mettant des pixels dans ta page et ton CSS, tu aggrandis le forum selon la résolution que tu as. Ton forum est en pourcentage (Panneau Admin >> Général >> Configuration), donc tout le monde ne voit pas la même chose selon la résolution de l'écran ... Ton forum, je le vois ainsi : cliic . Donc; il faut retenir : - Si la largeur de ton forum est en pixel, code ta page d'accueil et ton CSS en pixels .. - Si ta page est en pourcentages, code avec des pourcentages En espérant que là, ça marchera | | |
| | | Addiction
{ Membre }
Messages : 125
| Aaah d'accord! J'en apprends de jour en jour sur le CSS! Merci beaucoup d'avoir fait tout ça pour moi. Par contre, si ce n'est pas trop demandé, comment on fait pour réduire la colonne des nouveautés et du staff (à gauche)? =) J'ai peur de faire une bêtise en chipotant au CSS aux endroits où il ne faut pas. x) | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Penses toujours à garder ton code CSS quelque part avant de le modifier, on sait jamais ^^ - Citation :
- <table border="0" width="100%">
<tbody><tr> <td colspan="5"><div id="navigation"> <ul> <li><a href="http://milky-way.forumactif.org/reglement-f1/">Règlement</a> </li><li><a href="http://milky-way.forumactif.org/inscription-f2/">Inscription</a> </li><li><a href="http://milky-way.forumactif.org/nouveautes-f3/">Nouveautés</a> </li><li><a href="http://milky-way.forumactif.org/premiers-chevaux-f13/">Chevaux</a></li></ul></div> </td> </tr> <tr> <td class="contenu" width="25%"><div class="titre">NOUVEAUTÉS</div> <br><br>15.02.10: Ouverture du forum.<br></td>
<td rowspan="2" class="contexte" width="50%"><div class="background"><div class="transbox"><p>Bienvenue sur Milky Way, une écurie virtuelle familiale où les passionnés se retrouvent. Ici, ce n'est pas un RPG, juste un jeu où tu reste toi-même et donc, où tu utilise ton PUF et non un Nom & Prénom. Tu viens ici pour t'amuser, pour élever tes chevaux et les mener en concours. Tu exerces un métier pour subvenir aux besoins de tes chevaux mais également pour agrandir ton élevage et devenir le meilleur éleveur de la vallée. Plusieurs objectifs te sont mis à disposition afin de rendre le jeu plus piquant. N'hésite pas, rejoins-nous et amuse-toi! ?</p> </div> </div></td> <td class="contenu" width="25%"><div class="titre">TOP-SITES</div><br> <a href="http://www.root-top.com/topsite/nok/in.php?ID=1323"><img src="https://i.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/emire/in.php?ID=4570"><img src="https://i.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/neverland/in.php?ID=414"><img src="https://i.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a><a href="http://www.root-top.com/topsite/olinalexe/in.php?ID=2824"><img src="https://i.servimg.com/u/f68/12/58/30/54/got_mi10.gif" alt="" border="0"></a></td> </tr> <tr> <td class="contenu" width="25%"><div class="titre">STAFF</div> <br><br>Admin: Peach ; Natia. <br>Modo: Aucun. </td> <td class="contenu" width="25%"><div class="titre">PARTENAIRES</div> <br><marquee behavior="scroll" align="center" direction="up" scrollamount="2" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" height="120"> <a href="http://milky-way.forumactif.org/publicite-partenariat-f12/">Devenir partenaire.</a><br> <br></marquee> </td> </tr> <tr> <td style="text-align: center;"><img src="https://i.servimg.com/u/f68/12/58/30/54/accuei10.jpg" alt="" border="0"></td> <td style="text-align: center;"><img src="https://i.servimg.com/u/f68/12/58/30/54/ici_tu10.jpg" alt="" border="0"><br></td> <td class="contenu" width="25%"><div class="titre">CRÉDIT</div> <br><br>Forum by Peach.<br>Design by Peach.<br>Codage by Peach avec l'aide de CSSActif. </td> </tr> </tbody></table> Les choses que j'ai mis en rouge; les width="x%" sont les tailles de tes colonnes. Il te suffit de les modifier pour ajuster les tailles ... Tant que la sommes des colonnes fait 100%; ça marche ^^ En clair; les colonnes "Nouveautés" "Contexte" et "Top Sites" doivent faire 100% au total ^^. Disons qu'on peut mettre 20%; 50% et 25% pour faire 100% par exemple Par contre, je viens de voir que je me suis loupée dans ta page d'accueil xD. J'ai mis de mauvais pourcentages pour une colonne ^^ Le code que je viens de donner plus haut est bon, je viens de le rectifier | | |
| | | Addiction
{ Membre }
Messages : 125
| Aaah voilà! Tout est ordonné. Merci infiniment! Oui, je veillerais à sauver mon code avant de le modifier et je retiens, la somme des pourcentages doit faire 100%. Quant on en parle comme ça, ça paraît logique, mais je ne le savais pas. xD Merci beaucoup! | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Ca parait logique quand on connait les codes . Mais tout s'apprend, t'inquiètes pas ^^. J'ignore si tu as vu ou pas; mais Orange fait des cours; et y'a pas mal de tutos sur le forum si tu veux en apprendre plus; notamment sur les tableaux : ici En tout cas, ravie d'avoir pu t'aider Je peux donc classer ? | | |
| | | Addiction
{ Membre }
Messages : 125
| Oui oui, j'avais déjà vu les tutos, mais j'ai été beaucoup occupée ces temps-ci. Maintenant, je devrais avoir plus de temps pour réviser! x) C'est entièrement résolu, tu peux donc classer. | | |
| | | Contenu sponsorisé
| | | | | Page d'accueil trop large. | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|