Discussion :

[Luicoaat]

Bonsoir,

Voilà, je suis en train de créer un site et 2 "gros" problèmes de présentation de posent:
- je souhaiterais que la colonne de droite soit dans la partie grise claire à droite et qu'elle soit plus large
- mes artciles sont trop larges (exemple dans la page d'accueil)

Je pense que cela provient du code CSS et j'ai trouvé une piste intéressante en modifiant les propriétés de "maincolumn" ou de "nopad" mais impossible de réussir.

Quelqu'un peut-il m'aider???

Merci

Voici le lien de monsite : http://ofvolley.free.fr/

[tzilliox]

Bonjour Luicoaat,

je n'ai pas compris la question qui concerne la colonne grise claire. Peux-tu reformuler ?

Concernant ton article qui est trop large, il n'y a pas vraiment de problème. Ton navigateur ne fait pas de retour à la ligne lorsqu'il n'y a pas d'espace. Or tu as écrit "fgggggg(...)ggg" sans aucun espace.
En règle général, il vaut mieux utiliser un générateur de texte pour tester sa mise en page, ce sera plus réaliste de la mise en page finale. Tu peux essayer celui-là par exemple : http://www.ipsum-generator.com/

Bonne journée,
Thomas.

[Luicoaat]

Merci Thoams pour ta réponse.

J'essaie ça dès que j'ai 5 minutes et j'espère vraiment que ça va marcher.

Concernant mon 2ème problème, en fait, je souhaite ajouter une colonne à droite de mon site mais quand j'insère le module "rightcolumn" dans mon code html elle empiète sur ma colonne du milieu comme tu peux el voir sur le site. Alors que moi je souhaiterais qu'elle soit à droite de ma page, sur la partie la plus claire. Me suis-je mieux fait comprendre???

[tzilliox]

Bonsoir Luicoaat,

oui c'est plus clair !
J'ai pas pu essayé, donc je te laisse le faire. Mais je pense que ça devrait marcher si :

1. Tu déplaces <div id="rightcolumn">...</div> avant le <div id="center">...</div>
2. Tu dois mettre une largeur à ton body, par exemple 1500px;
3. Tu supprimes le "float: right" de ton div#rightcolumn et tu lui ajoutes une "margin-left: 1030px" environ.

Essayes ça. C'est pas parfait... mais la structure de ta page n'était pas prévu pour accueillir une colonne à droite.

Bon courage,
Thomas.

[Luicoaat]

Super!!!

Merci beaucoup. Par contre je n'arrive pas à élargir ma colonne. Comme tu peux el voir le texte fait 2 cm de large. J'ai modifié la proriété "width" de rightcolumns mais rien n'y fait.....

Juste autre chose aussi...

Mon texte de page d'accueil est tout rikiki

[tzilliox]

Bonjour Luicoaat !

ça fait plaisir, c'est plus joli comme ça.
Pour élargir ta colonne de droite, il faut que tu modifies template.css le style associé à #rightcolumn :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#rightcolumn {
	height:50px;
	margin-left:1030px;
	text-align:left;
	width: 300px; /* au lieu de 100px */
}

Pour la colonne du centre, toujours dans template.css tu peux changer le style associé à div.nopad :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
div.nopad {
	margin:20px; /* moins de marge en haut et plus sur les côtés */
	width:725px; /* bcp plus large */
}

Ca devrait plus te convenir !

Saches que ta template est très compliquée pour un débutant. Des fois, il faut savoir faire simple
A ta place, je regarderais les gabarits il existe des listes gratuites comme celle-ci. Par exemple, ce gabarit ressemble un peu à ce que tu veux faire !

Bonne journée,
Thomas.

[tzilliox]

Re Luicoaat !

De rien

En fait le problème est qu'il y a plein de règle css dans ta page qui ne serve pas à grand chose !

Je te conseil de modifié ta classe body et de #rightColumn:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
body {
	color:#FFFFFF;
	font-family:Georgia,"Trebuchet MS",sans-serif;
	font-size:12px;
	line-height:1.3em;
	/* Supprime la marge négative qui décale tout ton site! */
	padding:0;
	/* Diminue la largeur de ton body pour la jouer un peu plus serré */
	/* Oui je sais, c'est moi qui avait donné cette valeur :P */
	width:1320px;
}
 
#rightcolumn {
	/* Ajoute un float: right; C'est pour ca qu'on a diminuer la largeur du body */
	float:right;
	/* Diminue la hauteur de ta colonne */
	height:0px;
	margin-left:1030px;
	text-align:left;
	width:300px;
}

C'est vraiment du bidouillage !
Même si c'est difficile, je pense que cette expérience t'as montré comment fonctionne le CSS et comment ça peut vite devenir difficile quand c'est le bazar.
Si t'as l'occasion, recommencer tout de zéro t'apprendras encore plus !

Bonne soirée,
Thomas.

[Luicoaat]

Oui je m'initie au language html et CSS et le moins qu'on puisse dire c'est : aïe aïe aïe!!!!

Je viens de "bidouiller" comme tu dis. C'est le meilleur moyen d'apprendre!!

J'ai donc réussi à modifier ma colonne de droite, la descendre et l'aligner avec les autres.

Je crois en effet que beaucoup de lignes sont inutiles dans mon code CSS mais j'ai peur de supprimer un truc qui faut pas alors je laisse comme ça, pour l'instant ça me va...en espérant que ça dur....

Merci énormément pour tes conseils....j'en aurais peut-être encore besoin plus tard...

Bye

[tzilliox]

Re Luicoaat !

de rien

Pour bidouiller, je te conseille de supprimer une par une les propriétés dont tu ne comprends pas l'objectif. regarde sous FF et IE (et les autres si tu le souhaite) si ça correspond toujours à ce que tu veux. si ça change met un commentaire au-dessus de ta propriété pour indiquer à quoi ça sert. Si tu t'en fou supprime là !!!!

Tu es la bienvenue pour d'autres conseils. Néanmoins, il vaut mieux marquer ce post comme résolu (bouton en bas de la page) et poser tes questions dans un autre post pour que les gens qui voudraient participer n'est pas à lire 50 messages pour comprendre ta question !

amuses-toi bien,
Thomas.

[Luicoaat]

Ok!!!

Plus j'essaie de comprendre ce fichu code CSS moins je comprends

Je crois que je vais faire comme tu dis, supprimer tout ce qui ne modifie pas mon site...en espérant que je ne supprime rien d'important.

Je vais donc marquer ce post comme "résolu" et en ouvrir un autre que j'intitulerai : comment supprimer le code inutile