18041 sujets

Questions générales et questions de débutants

Modèle alsacréations + positionnement colonne + validation

Bonjour,

J'essaie d'utiliser ce modèle trouvé sur Alsacréation :

http://css.alsacreations.com/modeles/modele9.htm

pour passer en tout css (suppression des tableaux) un site :

http://jeteste.ovh.org/.

Cette url est une url de test. Le site original, toujours en construction est visible ici : http://www.lpcortat-aurillac.org/

C'est donc une structure 3 colonnes sur un en-tête et qui fini par un pied de page, avec des inclusions dans les colonnes gauche et droite.

Le résultat n'est pas probant pour l'instant... Où est mon erreur ?

J'ai bien (ou mal) cherché dans le forum et dans les articles mais je n'ai pas trouvé.

Merci de votre aide bienvenue.

Maj : nouveaux souci --> http://forum.alsacreations.com/topic-23-18910-1-Modle-alsacrations.html#p142574
Modifié par jeanfi (04 Nov 2006 - 23:09)
Bonjour,

J'ai l'impression (peut-être est ce dans tes fichiers CSS) que les qualités des classes gauche, droite, centre... ne sont pas reprises dans ton document.
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}

Ce sont elles qui imposent le placement et la largeur des div qui vont embarquer tes tableaux.

Si ce n'est pas cela, il faudrait peut-être faire fonctionner ta page sans contenu (calendrier et autres) complexe, pour après réintroduire ces tableaux une fois que tu constates que les blocs se posent bien dans ta page.

Bon courage,

CT
Merci de ta réponse Captain Igloo.

Les classes sont définies dans le fichier durzy.css

Je les appelle dans le fichier sommaire.html.

Pourquoi ne seraient-elles pas reprises ?

J'ai enlevé le contenu complexe au centre, ça ne change rien.

Les colonnes ne se positionnent pas.

Je sens que je vais galérer si déjà au départ, en reprenant un modèle assez simple, je bloque Smiley smile

Merci.
Je crois avoir trouvé, les accolades fermantes } ne sont pas présentes..

#gauche {
position: absolute;
left:0;
width: 150px;
}

#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}

J'espère que cela fonctionnera.

CT
Merci De ton intérêt Captain Igloo.

Malheureusement, ça ne fonctionne toujours pas malgré la fermeture des balises.

Une autre idée ?
Bonjour jeanfi,

Tu devrais remplacer le class de
div class="blabla"
par id pour que ça marche.

Bonne continuation.
@CAPTAINIGLOO

Est-ce que tu pourrais baliser ton code avec le BBCode [ code][/code ] (sans les espaces) tel que demandé dans les règles du forum* ?

Ça le rendra plus lisible.

upload/1-code.gif

Merci.

* que tu as lues et approuvées en t'inscrivant.
Comme cela ?

#gauche {
position: absolute;
left:0;
width: 150px;
}


Désolé, je me suis inscrit à la 'va-vite' pour répondre au post. Je n'ai pas lu les petites lignes. J'y retourne.

Merci
Administrateur
CAPTAINIGLOO a écrit :
Comme cela ?

Parfait Smiley smile

Reste plus qu'à penser au "s" final de "AlsacréationS" Smiley langue
Smiley cligne Corrigé pour Alsacréations.

Je reviens à vous, car comme vous pourrez le constater en vous rendant sur les sites cités dans mon premier post, j'ai toujours un gros problème de positionnement sur la colonne de droite... et je parle même pas du fouillis que me mets IE.

Idées, suggestions, conseils,... instructions bienvenues.

Merci.
euh... ma question est mal posée ... ou ... trop simpliste ? Inintéressante ? ou peut être tout simplement bête ?

euh... dites que non Smiley smile
Salut jeanfi,

euh... non Smiley ravi !

Pour ce qui est de tes 2 liens je dirais que le principal soucis est d'avoir plusieurs balises <head> dans chaque source Smiley eek et pour ton test le fait d'utiliser 4 feuilles de styles ne facilite pas la relecture... Smiley biggol

@+
Comment ça ?

Je n'en voit qu'une moi.

Ou alors, faut que je reprenne tout depuis le début Smiley smile

Quelqu'un pourrait-il m'aider à transformer les fichiers de ce site en CSS, celà pourrait en même temps servir de tutoriel à d'autres en suivant au fil des jours les différentes adaptations et progrès.

Merci.
jeanfi a écrit :
Je n'en voit qu'une moi.

Il suffit d'afficher la source générée de ce lien : http://jeteste.ovh.org/ ou de celui-ci : http://www.lpcortat-aurillac.org/ et de faire une recherche sur <head> Smiley cligne

jeanfi a écrit :
celà pourrait en même temps servir de tutoriel à d'autres en suivant au fil des jours les différentes adaptations et progrès

Smiley rofl Bien essayé !

@+ Smiley biggrin
4 jours que je suis dessus. Je n'y arrive pas... j'abandonne. Trop seul devant des difficultés qui dépassent mes compétences.

Je ressort de cet échec malgré tout amer.

Merci à ceux qui se sont donnés la peine d'essayer de m'aider.
Re-Salut jeanfi !

Faut pas baisser les bras Smiley cligne

En repartant du modèle de base et en rajoutant au fur et à mesure tes éléments tu devrais t'en sortir. Mais c'est vrai que c'est plus facile de partir de zéro que de reprendre un existant codé en table Smiley ohwell
Et puis même si ton développement ne devient pas un cas d'école (puisque tous les posts ou presque le sont Smiley biggol ) il suffit de venir poser la question sur ce qui te bloque à chaque fois !

@+ Smiley biggrin
Les Css sont source de bien de satisfaction mais aussi de bien de découragement...
Perso, j'ai toujours un Iexplorer et un Firefox en batterie afin de vérifier si ce que j'ai fait n'est pas 'tombé' en marche.
Pour ta colonne de gauche, sous Firefox elle est impec... Smiley cligne
Peut-être parce que l'alignement de marche gauche à -100px 

#gauche {
background:#B9CAFF;
float:left;
width:33%;
[#orange]margin-left:-100%;
[/#]}
ne sert à rien qu'à être néfaste dans IExplorer.

Je suis ok avec Heyoan, il faut que tu t'accroches en enlevant méthodiquement ce qui ne sert pas (feuille de style agenda.css peut-être), en lisant les articles (ex sur les float:left...) et en 'jouant' dans des feuilles html brouillon. Après, crois moi ça vient.
Ah oui, encore un truc que j'utilise, je fais passer mes html et css dans les validator de w3C, cela donne plein de bonnes choses:

http://validator.w3.org/check?uri=http%3A%2F%2Fjeteste.ovh.org%2F.&charset=%28detect+automatically%29&doctype=Inline
validation de ta page
et pour la CSS
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjeteste.ovh.org%2Fsquelettes%2Fstyles%2Fdurzy.css&usermedium=all

Bon courage,
Smiley smile
Voilà... Ca a pas mal avancé mais je me retrouve avec 14 erreurs de validation html principalement sur des balises dites non fermées et qui pourtant le sont. Je suis quand même parti de + de 60 erreurs au départ Smiley smile

Si quelqu'un veut bien m'aider. Merci.

Url : http://jeteste.ovh.org
Modifié par jeanfi (04 Nov 2006 - 22:16)
Salut,

2 petites erreurs à premiere vue:

1- Remplace ton onLoad par onload (sans majuscules)
2-Remplace tes > par &gt; et tes < par des &lt;

A+
Sujet clos
Aller à