Version complète: sur le forum Webmaster Hub : Entrainement mise en page
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
sarc
vendredi 24 décembre 2004 à 12:23
Bonjour,

Je suis le garcon qui a tout fait a l'envers : je connais maintenant assez bien (je pense) le php et le sql, mais il me reste BCP d'efforts a faire en html, mais surtout CSS, en gros a la mise en page des sites...
Donc ici, si vous le voulez bien, je mettrai mes soucis de mise en page (j'espère qu'il n'y en aura pas bcp) pour mon site pour les TPE (bon entrainement...)

http://sarcasmeur.free.fr/tpe/new/

Voila, vous trouverez le design ici (j'en avais deja fait un, mais il me plaisait pas... biggrin.gif).
Deja, je vous propose de faire les critiques du design en général, en sachant que c'est un site pour le lycée, que j'ai pas envie de passer 4 ans dessus, mais s'il y a des améliorations rapides, je pourrai les faire.

Mais j'ai (déjà) rencontré un premier probleme de mise en page :

Le mot Accueil devrait être aligné dans le blanc au dessus de lui, à droite de l'image ssban2.jpg... Mais dès que je mets le CSS pour la balise h1, il me le descend d'une ligne. Comment faire pour enlever cette ligne ?

Merci d'avance pour votre aide biggrin.gif
Dan
vendredi 24 décembre 2004 à 14:41
Salut Sarc,

Pour que la balise H1 s'affiche sans retour à la ligne, il suffit de mettre le style="display:inline;"
Il te faudra dans ce cas ajouter toi-même les retour chariot qui vont bien. wink.gif

Pour qu'elle se centre dans cette zone, il suffit de mettre à la balise TD qui contient cette balise un style="text-align:center;"

De plus, il faut que tu changes les valeurs de cette balise:
CODE
TD vAlign=center align=middle

en mettant align="center" valign="middle", ou mieux encore avec des CSS:
style="text-align:center;vertical-align:middle;" smile.gif

Un petit style="padding-left:5px;" pour que tes menus évitent de coller à la marge gauche, et ce sera bon laugh.gif

Dan
sarc
vendredi 24 décembre 2004 à 15:10
CITATION(Dan @ vendredi 24 décembre 2004, 14h41)
Salut Sarc,

Pour que la balise H1 s'affiche sans retour à la ligne, il suffit de mettre le style="display:inline;"
Il te faudra dans ce cas ajouter toi-même les retour chariot qui vont bien. wink.gif


Roooh ! Salut Dan, et pis trop merci, t'es un champion wink.gif lol
Le CSS c'est cool, quand on connait les choses qu'il faut mettre... :nono:

CITATION
De plus, il faut que tu changes les valeurs de cette balise:
CODE
TD vAlign=center align=middle

en mettant align="center" valign="middle", ou mieux encore avec des CSS:
style="text-align:center;vertical-align:middle;" smile.gif


J'ai beau chercher, j'ai pas trouvé la balise en question... biggrin.gif La seule balise qui ressemblerait serait : align="center" valign="middle", donc ce serait bon...
Voui, faut vraimen tout mettre en CSS rolleyes.gif unsure.gif ... A croire que le html sert plus a rien loul...

CITATION
Un petit style="padding-left:5px;" pour que tes menus évitent de coller à la marge gauche, et ce sera bon laugh.gif

Je n'avais pas continué la mise en page, mais ca avance, ca avance (enfin, faudrait aller plus vite, je doit rendre le site en état de marche pour le 10 janvier lol...

En tout cas, trop merci, t'es trop génial hihi biggrin.gif
Xavier
vendredi 24 décembre 2004 à 16:22
Quitte à faire du CSS, pourquoi ne pas y aller vraiment et bannir définitivement les tableaux ?

Sinon ce que je voulais dire surtout c'est que les images en jpg c'est pas terrible, en tous cas à ce niveau de compression. Essaye de reprendre les originaux, en les enregistrant en png (compression sans perte), tu devrais même pouvoir gagner de la place avec certaines (d'autres moins, celles avec le texte) wink.gif
sarc
vendredi 24 décembre 2004 à 16:28
CITATION
Quitte à faire du CSS, pourquoi ne pas y aller vraiment et bannir définitivement les tableaux ?


Ah, voila, j'attendais cette question...
Bah, je peux toujours essayer, mais je suis loin d'être sur de réussir ca... biggrin.gif
En fait, je voulais commencer doucement, par la mise en place des textes, des élements de tableau, pour ensuite virer ces fichues tables.. tongue.gif


En tout cas, pour le PNG, je vais essayer biggrin.gif

EDIT : j'ai cherché un peu comment faire pour totalement virer les tableaux, et j'avoue ne pas trouver de tutorial sympa pour mettre en page tout son site (banniere, menus, ecritures etc). Quand on cherche des infos sur le CSS, on trouve finalement que des petits codes, ou alors une explication pour mettre deux "tableaux" en css, l'un a coté de l'autre, mais rien de tres complet sur la mise en page entiere du site.. :s

Comment faire ?
Dan
vendredi 24 décembre 2004 à 18:12
CITATION(sarc @ vendredi 24 décembre 2004, 15h10)
J'ai beau chercher, j'ai pas trouvé la balise en question...  biggrin.gif  La seule balise qui ressemblerait serait : align="center" valign="middle", donc ce serait bon...
*
Elle y était dans la source de ta page... mais tant mieux si elle est partie wink.gif
Xavier
vendredi 24 décembre 2004 à 21:39
CITATION(sarc @ vendredi 24 décembre 2004, 16h28)
Ah, voila, j'attendais cette question...
Bah, je peux toujours essayer, mais je suis loin d'être sur de réussir ca... biggrin.gif
En fait, je voulais commencer doucement, par la mise en place des textes, des élements de tableau, pour ensuite virer ces fichues tables.. tongue.gif

C'est vrai, mais en même temps le mélange des genres peut parfois s'avérer périlleux.
Ex : le bgcolor que tu as sur la balise <body> ; si d'un coup tu as envie de mettre un body {background:...;} dans ta CSS, et que tu oublies de retirer le bgcolor, tu fonces vers ta perte (enfin dans ton cas le code est assez simple donc le problème risque moins de se poser parce que tu as peu de risques de l'oublier, mais c'est quand-même des choses que j'ai déjà vues... whistling.gif )

Pour des mises en pages complètes sans tableaux il y a alsacréations et ses modèles de mise en page CSS dans lesquels tu trouvera sans doutes ton bonheur wink.gif
sarc
vendredi 24 décembre 2004 à 22:39
Pour un tutorial de la mise en page, bien expliqué :
voila, j'ai trouvé !

Deja, merci dan, merci xavier, pour votre disponibilité le jour ou apparement le hub s'est endormi ! Merci xavier pour les liens, le site a l'air pas mal, il completera le beau livre "optimiser ses sites ouebs" que j'ai eu pour nowel (Rum laugh.gif je sais pas ce qu'il vaut hein...)

Le lien que j'ai donné est une page du site que tu as mis, super tuto, j'adore, jvais pouvoir comprendre, et faire un site sans tableau (reve de gamin hihi)

Bonnes fetes a tous, et pis bonne continuation de vacs sans moi, je reviens mercredi pour attaquer mon css biggrin.gif
sarc
jeudi 30 décembre 2004 à 17:26
Voilà, rebonjour à tous, j'espère que vous avez passé de bonnes fêtes et que vous reprenez (peut-être) le boulot avec joie.

De mon côté, j'ai bien avancé... Voici mon premier tableless : accueil

Je suis conscient que c'est pas parfait, mais on fait ce qu'on peut comme on dit... Dites moi s'il y a des problèmes de compatibilité (testé sur firefox et IE6), et aussi tous les commentaires concernant le code sont les bienvenus (c'est une page que j'essaye d'optimiser a fond pour voir ce dont je suis capable, tant sur google que pour les visiteurs lol).

Par contre, j'ai deux petits problèmes :
- je n'arrive pas a centrer verticalement le texte dans la barre d'en bas. J'ai essayé vertical-align:middle;, margin-top et padding-top, et j'ai jamais réussi a faire bouger le texte verticalement... Comprends pas angry.gif

-
CODE
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
<ul class="menu">
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
<li>menu 9</li>
</ul>

J'ai essayé ca parce que je savais pas comment passer une ligne dans une liste, et le résultat est mauvais : il ne m'affiche que le deuxieme menu :s... Comment ca se fait ? Le premier est passé où ?


Merci de vos réponses biggrin.gif

EDIT : j'aimerais mettre une bordure autour de l'ensemble du contenu (c'est a dire, tout sauf les marges), mais vu que c'est en plusieurs DIV, je ne sais pas comment faire. Un par un en spécifiant les cotés, ou faire un autre div ? J'avoue je suis bloqué biggrin.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.