Aller au contenu

Entrainement mise en page


Sarc

Sujets conseillés

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... :D).

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 :D

Modifié par sarc
Lien vers le commentaire
Partager sur d’autres sites

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. ;)

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:

TD vAlign=center align=middle

en mettant align="center" valign="middle", ou mieux encore avec des CSS:

style="text-align:center;vertical-align:middle;" :)

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

Dan

Lien vers le commentaire
Partager sur d’autres sites

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. ;)

Roooh ! Salut Dan, et pis trop merci, t'es un champion ;) lol

Le CSS c'est cool, quand on connait les choses qu'il faut mettre... :nono:

De plus, il faut que tu changes les valeurs de cette balise:

TD vAlign=center align=middle

en mettant align="center" valign="middle", ou mieux encore avec des CSS:

style="text-align:center;vertical-align:middle;" :)

J'ai beau chercher, j'ai pas trouvé la balise en question... :D La seule balise qui ressemblerait serait : align="center" valign="middle", donc ce serait bon...

Voui, faut vraimen tout mettre en CSS :rolleyes::unsure: ... A croire que le html sert plus a rien loul...

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

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 :D

Lien vers le commentaire
Partager sur d’autres sites

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) ;)

Lien vers le commentaire
Partager sur d’autres sites

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... :D

En fait, je voulais commencer doucement, par la mise en place des textes, des élements de tableau, pour ensuite virer ces fichues tables.. :P

En tout cas, pour le PNG, je vais essayer :D

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 ?

Modifié par sarc
Lien vers le commentaire
Partager sur d’autres sites

J'ai beau chercher, j'ai pas trouvé la balise en question...  :D  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 ;)
Lien vers le commentaire
Partager sur d’autres sites

Ah, voila, j'attendais cette question...

Bah, je peux toujours essayer, mais je suis loin d'être sur de réussir ca... :D

En fait, je voulais commencer doucement, par la mise en place des textes, des élements de tableau, pour ensuite virer ces fichues tables.. :P

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: )

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

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 :lol: 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 :D

Lien vers le commentaire
Partager sur d’autres sites

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:

-

<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 :D

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é :D

Modifié par sarc
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...