Tableau reste à gauche

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.10 Martinique
#~ Url du site : 3w.als-formationlangues.com
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour à tous,

Je continue sur mon site, et malgré mes modifs je n'arrive pas à bouger mon tableau de place.

Voici ce que j'ai dans le gabarit:

{* Start Bas et Nouveautes*}
<div id="bas" class="core-wrap-960">
</div>
<div class="block cms">
{global_content name='bas'}
</div>


Et voici ce que j'ai mis dans ma feuille de style:

/* ------------ Bas et Nouveautés------------ */


#bas .block {
width: 430px;
margin: 20px 215px 0px;
border: 1px solid black;
vertical-align: top;


}


#bas .cms {
text-align: left;
}


J'ai fait plein de tests et malgré tout ça, mon tableau reste à gauche...

Pourriez vous m'aider, j'ai regardé sur le site du zero mais vraiment je ne vois pas ou est mon erreur...

Merci
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.10 Martinique
#~ Url du site : 3w.als-formationlangues.com
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour à tous,

Je continue sur mon site, et malgré mes modifs je n'arrive pas à bouger mon tableau de place.

Voici ce que j'ai dans le gabarit:

{* Start Bas et Nouveautes*}
<div id="bas" class="core-wrap-960">
</div>
<div class="block cms">
{global_content name='bas'}
</div>


Et voici ce que j'ai mis dans ma feuille de style:

/* ------------ Bas et Nouveautés------------ */


#bas .block {
width: 430px;
margin: 20px 215px 0px;
border: 1px solid black;
vertical-align: top;


}


#bas .cms {
text-align: left;
}


J'ai fait plein de tests et malgré tout ça, mon tableau reste à gauche...

Pourriez vous m'aider, j'ai regardé sur le site du zero mais vraiment je ne vois pas ou est mon erreur...

Merci
#2
utilise tu firebug ? si non, commence par l'installer sous firefox, ça aide énormément pour comprendre ce qu'il se passe.
#2
utilise tu firebug ? si non, commence par l'installer sous firefox, ça aide énormément pour comprendre ce qu'il se passe.
#3
bess a écrit :utilise tu firebug ? si non, commence par l'installer sous firefox, ça aide énormément pour comprendre ce qu'il se passe.

Bonjour Bess

Devine quoi? j'ai installé le firebug, et bingo!!!
j'ai réussi!
Il me manquait un margin-left

je te remercie Big Grin Big Grin
#3
bess a écrit :utilise tu firebug ? si non, commence par l'installer sous firefox, ça aide énormément pour comprendre ce qu'il se passe.

Bonjour Bess

Devine quoi? j'ai installé le firebug, et bingo!!!
j'ai réussi!
Il me manquait un margin-left

je te remercie Big Grin Big Grin
#4
reste à mettre [résolu] alors Smile
#4
reste à mettre [résolu] alors Smile
#5
Plutôt [résolu temporairement] car margin-left va amener d'autres bugs de mise en page.
Un petit passage vers des tutoriels html et css récents (ton code date de la préhistoire) ainsi que l'apprentissage du JQuery (au lieu d'utiliser des .gif) devraient te permettre de remettre tes connaissances à jour (tu es une professionnelle). Wink
#5
Plutôt [résolu temporairement] car margin-left va amener d'autres bugs de mise en page.
Un petit passage vers des tutoriels html et css récents (ton code date de la préhistoire) ainsi que l'apprentissage du JQuery (au lieu d'utiliser des .gif) devraient te permettre de remettre tes connaissances à jour (tu es une professionnelle). Wink
#6
Bonjour, Big Grin

Alors comment ça mon code date de la préhistoire Wink
La plupart du code vient du cms en version 1.10
Mais vous avez certainement raison, et oui je suis une professionnelle... Le client tenait tellement à ce que ce soit fait en cms made simple Wink

merci pour le tuyau de jquery je vais regarder, c'est sur que le gif c'est moyen
#6
Bonjour, Big Grin

Alors comment ça mon code date de la préhistoire Wink
La plupart du code vient du cms en version 1.10
Mais vous avez certainement raison, et oui je suis une professionnelle... Le client tenait tellement à ce que ce soit fait en cms made simple Wink

merci pour le tuyau de jquery je vais regarder, c'est sur que le gif c'est moyen
#7
cms 1.10 ? cmsmadesimple 1.10 ? cette version comme celle d'avant n'a jamais comporté de <table> dans son code. Un autre logiciel peut être ?

et oui je pousse dans le sens de Jean Le Chauve, les tables sont bannies des concepts web (hors mail) depuis les années 2000 avec l'avènement du CSS. Si tu peux, si tu as le temps (ce qui est deux choses aléatoire avec un client en face) je t'invite très sérieusement à virer cela pour opter pour du CSS.

Dans tous les cas ça n'enlèvera en rien l'aide du forum.

Par contre attention, là ou ça risque de coincer c'est si tu reviens régulièrement nous dire coucou pour des soucis de CSS car comme nous avons du déjà te le dire : nous ne sommes que des humbles bénévoles qui n'avons pas la prétention d'être des formateurs CSS Wink
#7
cms 1.10 ? cmsmadesimple 1.10 ? cette version comme celle d'avant n'a jamais comporté de <table> dans son code. Un autre logiciel peut être ?

et oui je pousse dans le sens de Jean Le Chauve, les tables sont bannies des concepts web (hors mail) depuis les années 2000 avec l'avènement du CSS. Si tu peux, si tu as le temps (ce qui est deux choses aléatoire avec un client en face) je t'invite très sérieusement à virer cela pour opter pour du CSS.

Dans tous les cas ça n'enlèvera en rien l'aide du forum.

Par contre attention, là ou ça risque de coincer c'est si tu reviens régulièrement nous dire coucou pour des soucis de CSS car comme nous avons du déjà te le dire : nous ne sommes que des humbles bénévoles qui n'avons pas la prétention d'être des formateurs CSS Wink
#8
Bonsoir Bess

Oui cmsmadesimple 1.10

Oui tou à fait j'ai utilisé les tables car je n'ai jamais pu centrer mes blocs, et quand j'en ai deux à poser je ne sais pas comment m'y prendre. Alors pour faire vite j'ai fait des tables...

Je n'ai hélas pas le temps, car je dois livrer asap... mais oui avec du temps je le corrigerai certainement

Je sais que vous n'êtes pas de formateurs css, mais hélas, il faut un petit peu, je ne demande pas grande chose ou si?
Sinon, j'irai dans un forum css... je ne sais pas...

Merci à vous deux en tout cas
#8
Bonsoir Bess

Oui cmsmadesimple 1.10

Oui tou à fait j'ai utilisé les tables car je n'ai jamais pu centrer mes blocs, et quand j'en ai deux à poser je ne sais pas comment m'y prendre. Alors pour faire vite j'ai fait des tables...

Je n'ai hélas pas le temps, car je dois livrer asap... mais oui avec du temps je le corrigerai certainement

Je sais que vous n'êtes pas de formateurs css, mais hélas, il faut un petit peu, je ne demande pas grande chose ou si?
Sinon, j'irai dans un forum css... je ne sais pas...

Merci à vous deux en tout cas
#9
le petit peu d'une personne multiplié par le nombre de personne sur ce forum divisé par le nombre d'heure que chaque bénévole met dans le sac de cmsmadesimple équivaut à ce qui ne sera pas mis dans la rédaction des guides, de la création de tuto, dans la mises en place de site tels que www.cmsdemo.fr, pro.cmsmadesimple.fr et compagnie

Comment te dire autrement qu'on n'aide pas sur du CSS non pas pour faire chier mais que par principe nous ne sommes pas assez nombreux pour réaliser des formations cohérentes sur ce sujet si vaste ?

inspire toi de ce qui existe

colonne à gauche : www1.democms.fr
colonne à droite : www.furie.be

tu as le code html, le CSS qui va avec et c'ets gratuit en open bar, te suffit de l'analyser avec FF et firebug. Que demander de plus Wink
#9
le petit peu d'une personne multiplié par le nombre de personne sur ce forum divisé par le nombre d'heure que chaque bénévole met dans le sac de cmsmadesimple équivaut à ce qui ne sera pas mis dans la rédaction des guides, de la création de tuto, dans la mises en place de site tels que www.cmsdemo.fr, pro.cmsmadesimple.fr et compagnie

Comment te dire autrement qu'on n'aide pas sur du CSS non pas pour faire chier mais que par principe nous ne sommes pas assez nombreux pour réaliser des formations cohérentes sur ce sujet si vaste ?

inspire toi de ce qui existe

colonne à gauche : www1.democms.fr
colonne à droite : www.furie.be

tu as le code html, le CSS qui va avec et c'ets gratuit en open bar, te suffit de l'analyser avec FF et firebug. Que demander de plus Wink
#10
Allez et parce que c'est la fin de soirée.

Il existe plusieurs manières de faire des colonages, en voici deux qui sont pas mal pour du multicolonne comme la page d'accueil de ton site.

Soit deux colonne : A et B, B devant être à droite.

A est une div qui mesure 400px et B une div mesurant 300px de large.

La première solution joue sur le margin-left de la colonne qui sera à la droite.

tu définit width:400px pour A

[----------]
[----------]
[----------]
[----------]

et 300px pour B


[--------]
[--------]
[--------]
[--------]
[--------]
[--------]

maintenant si tu laisse ainsi tu aura B sous A à cause du fait que les div (comme <p><h1><ul>) sont des balises HTML qui font des retours à la ligne graphiquement parlant contrairement aux balises in-line (<a> <span>) qui continue sur leur ligne.

la solution donc un peu trop porc à mon gout et de mettre un margin-left de minimum 400px à B afin qu'il se décale puis de mettre float:left à B pour lui retirer l'effet retour à la ligne. et te voilà avec deux colonnes.


[----------] [--------]
[----------] [--------]
[----------] [--------]
[----------] [--------]
...............> [--------]
...............> [--------]
...400px....> [--------]
...............> [--------]


Seconde solution que je préfère :

tu définit la div B avant la div A dans ton code HTML (très important)

tu met float:right à B
tu met float:left à A

terminé.

Dans tous les cas

float left et right ont des effets pas sympa sur les éléments qui les suivent. un <div class='clear'></div> après tout cela + le css

.clear{
clear:both;
}

permet généralement de remettre les choses en place.

A savoir : il existe également d'autres solutions encore plus propres tels que l'utilisation de framework CSS qui surchargent tout cela afin de laisser + de liberté aux utilisateurs. Penche toi sur l'utilisation des frameworks type knacss

http://www.knacss.com/


voilà, 40 minutes de ma journée en moins pour prendre le temps de te répondre. J'espère que tu en ferras bon usage Smile
#10
Allez et parce que c'est la fin de soirée.

Il existe plusieurs manières de faire des colonages, en voici deux qui sont pas mal pour du multicolonne comme la page d'accueil de ton site.

Soit deux colonne : A et B, B devant être à droite.

A est une div qui mesure 400px et B une div mesurant 300px de large.

La première solution joue sur le margin-left de la colonne qui sera à la droite.

tu définit width:400px pour A

[----------]
[----------]
[----------]
[----------]

et 300px pour B


[--------]
[--------]
[--------]
[--------]
[--------]
[--------]

maintenant si tu laisse ainsi tu aura B sous A à cause du fait que les div (comme <p><h1><ul>) sont des balises HTML qui font des retours à la ligne graphiquement parlant contrairement aux balises in-line (<a> <span>) qui continue sur leur ligne.

la solution donc un peu trop porc à mon gout et de mettre un margin-left de minimum 400px à B afin qu'il se décale puis de mettre float:left à B pour lui retirer l'effet retour à la ligne. et te voilà avec deux colonnes.


[----------] [--------]
[----------] [--------]
[----------] [--------]
[----------] [--------]
...............> [--------]
...............> [--------]
...400px....> [--------]
...............> [--------]


Seconde solution que je préfère :

tu définit la div B avant la div A dans ton code HTML (très important)

tu met float:right à B
tu met float:left à A

terminé.

Dans tous les cas

float left et right ont des effets pas sympa sur les éléments qui les suivent. un <div class='clear'></div> après tout cela + le css

.clear{
clear:both;
}

permet généralement de remettre les choses en place.

A savoir : il existe également d'autres solutions encore plus propres tels que l'utilisation de framework CSS qui surchargent tout cela afin de laisser + de liberté aux utilisateurs. Penche toi sur l'utilisation des frameworks type knacss

http://www.knacss.com/


voilà, 40 minutes de ma journée en moins pour prendre le temps de te répondre. J'espère que tu en ferras bon usage Smile
#11
@bess Smile

Je rentre de vacances, j'ai vu ta réponse pendant mon séjour, mais je n'ai pas voulu répondre vite fait...

Alors, je voulais te remercier infiniment pour ton aide, j'imagine que ce n'est pas évident de répéter toujours la même chose au débutants qui arrivent et posent les mêmes question, alors un grand merci à toi, et à tous ceux qui m’ont gentiment répondu. Je n'ai pas mis en pratique tout ce que tu m'expliques mais crois moi, je vais revenir sur le poste et le lire et le relire... Car pour l'instant j'ai laissé les tableaux... et ce n'est pas top, mais j'ai quand même avancé par mal sur le site...

Encore merci et à bientôt!!!! Big Grin
#11
@bess Smile

Je rentre de vacances, j'ai vu ta réponse pendant mon séjour, mais je n'ai pas voulu répondre vite fait...

Alors, je voulais te remercier infiniment pour ton aide, j'imagine que ce n'est pas évident de répéter toujours la même chose au débutants qui arrivent et posent les mêmes question, alors un grand merci à toi, et à tous ceux qui m’ont gentiment répondu. Je n'ai pas mis en pratique tout ce que tu m'expliques mais crois moi, je vais revenir sur le poste et le lire et le relire... Car pour l'instant j'ai laissé les tableaux... et ce n'est pas top, mais j'ai quand même avancé par mal sur le site...

Encore merci et à bientôt!!!! Big Grin
#12
Jean le Chauve a écrit :Plutôt [résolu temporairement] car margin-left va amener d'autres bugs de mise en page.
Un petit passage vers des tutoriels html et css récents (ton code date de la préhistoire) ainsi que l'apprentissage du JQuery (au lieu d'utiliser des .gif) devraient te permettre de remettre tes connaissances à jour (tu es une professionnelle). Wink

Alors aujourd'hui en suivant tes conseils je m'attaque au JQuery, et effectivement sur mon latop de 17 pouces le margin left pose problème! Wink
#12
Jean le Chauve a écrit :Plutôt [résolu temporairement] car margin-left va amener d'autres bugs de mise en page.
Un petit passage vers des tutoriels html et css récents (ton code date de la préhistoire) ainsi que l'apprentissage du JQuery (au lieu d'utiliser des .gif) devraient te permettre de remettre tes connaissances à jour (tu es une professionnelle). Wink

Alors aujourd'hui en suivant tes conseils je m'attaque au JQuery, et effectivement sur mon latop de 17 pouces le margin left pose problème! Wink


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)