Aller au contenu

centrer un design et les balises id


fgaascht

Sujets conseillés

Bonjour,

Je tente de centrer mon design mais cela sans réussite.

Après avoir trouvé un tutoriel sur Alsacreations tuto centrer en CSS je commence un peu à mieu comprendre.

Malheureusement je ne parviens pas à comprendre commet et où je dois place mes balises "id" pour pouvoir nommer mes différents éléments et donc ensuite pouvoir les centrer en utilisant du code CSS.

Comment faire ? Merci d'avance.

Un lien vers ma page

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

Bonsoir

Pfiou ! Tout ce code pour ça.. (vive ImageReady :wacko:)

Tu cherches à centrer la partie violette ? J'ai un peu regardé, mais personnellement je ne m'y retrouve pas dans cet enchevêtrement de tableaux inutiles :(

Tant que tu es sur Alsacréations (et a fortiori dans leur section "Faire une mise en page sans tableaux"), je ne saurais trop te conseiller la lecture des articles sur les mises en pages.

Ta mise en page est assez simple (en-tête, contenu, colonne gauche, pied), ça se résume facilement en quelques lignes d'HTML correctement structuré.

Il sera ensuite enfantin de centrer l'ensemble ;)

Lien vers le commentaire
Partager sur d’autres sites

Merci pour ton aide.

Je viens de passer ma journée à regarder les différents tutoriaux sur ce site et c'est vrai que c'est assez facile même quand on ne s'y connait pas trop en programmation html et autres.

Je suis parvenu à peu près au même effet que avec ImageReady. Et c'est bien plus facile à changer si par exemple la couleur ne me plait pas.

Je bloque encore sur des problème de bordures (est il possible de ne faire apparaitre que 3 bordures sur mon cadres ?) car celles-ci s'additionnent sur mon bloc texte et mon footer. Ou encore je ne parviens pas à faire apparaitre une marge en bas de ma page pour laisser un peu d'espace.

Je suppose qu'il est également possible de copier tous ce code css , de le mettre sur un document style.css et de réaliser un lien directements vers mes pages.

Est-il également possible d'ajouter des menus supplémentaire directement via la feuille de style css ?

Encore merci pour ton aide.

Lien vers le commentaire
Partager sur d’autres sites

Merci pour ton aide.

Je viens de passer ma journée à regarder les différents tutoriaux sur ce site et c'est vrai que c'est assez facile même quand on ne s'y connait pas trop en programmation html et autres.

Je suis parvenu à peu près au même effet que avec ImageReady. Et c'est bien plus facile à changer si par exemple la couleur ne me plait pas.

:)

Ça fait plaisir de lire des choses comme ça !

Souvent les gens ont tendance à dire "c'est difficile" avant même de s'être lancé

Je bloque encore sur des problème de bordures (est il possible de ne faire apparaitre que 3 bordures sur mon cadres ?) car celles-ci s'additionnent sur mon bloc texte et mon footer. Ou encore je ne parviens pas à faire apparaitre une marge en bas de ma page pour laisser un peu d'espace.
Tout est possible :D

Pour les bordures qui se chevauchent tu as cette règle CSS

border-collapse: collapse

qui va faire en sorte d'annuler les bordures redondantes; à appliquer sur l'élément désiré. Sinon, tu peux aussi ne spécifier les bordures que là où tu en as besoin (c'est la méthode que je préfère d'ailleurs, mais chacun la sienne). Pour les marges tu as 2 type des marges:

  • margin: marge extérieure (après le bord de l'élément)
  • padding: marge intérieure (avant le bord de l'élément)

Le mieux est de nous montrer ton nouveau code, qu'on y jette un oeil ;)

Je suppose qu'il est également possible de copier tous ce code css , de le mettre sur un document style.css et de réaliser un lien directements vers mes pages.
C'est même fortement conseillé ! Sinon ça perd beaucoup de son utilité.

Mais pendant les tests, il vaut mieux garder les styles directement dans la page entre 2 balises <style type="text/css></style> dans la partie <head>

Ça évite les surprises liées au cache.

Est-il également possible d'ajouter des menus supplémentaire directement via la feuille de style css ?
Non, le CSS ne sert qu'à la "présentation" du document. Tout ce qui a trait au "contenu" doit être géré en HTML (ou en PHP qui générerait de l'HTML mais ça revient au même)

A+

Lien vers le commentaire
Partager sur d’autres sites

Donc voici ce que je suis parvenu à obtenir

Pour les bordure, je ne les ai fait apparaitre que de certains cotés avec border-left, top, bottom,...

Il me reste à comprendre comment faire apparaitre une bordure (ou un espace vierge) en bas de ma page comme j'ai fais en haut.

Egalement trouver un système pour organiser mon menu avec des rubriques.

Ensuite, trouver comment mettre des boutons dans mon header avec les liens correspondant.

Et puis on verra pour la suite...

Merci quand même pour ton aide.

Lien vers le commentaire
Partager sur d’autres sites

Très bon début, ça change du résultat donné par ImageReady :up:

Je vais te donner quelques liens qui te seront fort utiles:

-Listamatic: pour faire de beaux menus en CSS.

-AlsaCréations: un site avec de très bon articles, conseils, mode d'emploi,...

-Site du Zer0: un site avec des tutoriels (HTML+CSS, PHP+MySQL,...) Il faut le temps de le lire et de faire les qcm, les exercices proposés. Mais une fois que c'est fait, on a de bonnes bases pour commencer.

-Validateur de page W3C: j'ai remarqué avec plaisir que le code de ton site était propre. Ce site va pouvoir t'aider en cas de problème avec le design,... (oubli de </div>,...). Essaye qu'il y ait le moins d'erreur de HTML dans tes pages, ce qui est bien parti ;)

Côté plugins firefox:

-L'incontournable du webmaster: WebDevelopper, il te permet de voir directement les erreurs de html, la taille de tes blocs, désactiver les images,...

-IEview: te permettra en un clic droit de voir voir ce que donne ta page sur IE sans devoir l'ouvrir

Bonne continuation :)

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

Et si tu définis une hauteur au bloc "conteneur' (dans le cas où tu souhaites garder une hauteur fixe) ?

height: 400px; (par exemple)

xpatval

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

Voilà,

Après quelques tests, je suis parvenu à ceci: ma page de test

Mais cependant, je bloque sur certains détails:

- Comment obtenir une légère marge (de 30px) en bas de mon footer comme je suis parvenu à avoir en haut de ma page ?

- Coment faire varier le style de mon menu (taille des titres, couleurs de liens,....) car je ne trouve pas comment faire. Regrouper #menu avec .menu et mettre par exemple #menu li au lieu de .menu li ?

- Est il également normal que la hauteur de mon liner "ligne grise" apparaisse en plus grand sous IE ?

Merci d'avance pour vos réponses.

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

  • 2 semaines plus tard...
Posté (modifié)

Après quelques jours passé sur mon design, je suis arrivé à ceci (et oui, ça n'a pas beaucoup plus évolué mais y a les examens qui approchent également... :fete: ).

Néanmoins, je ne parviens pas à résoudre queles trucs:

- Comment faire pour que mon menu s'allongent en même temps que je rajoute des rubriques.

- Comment rajouter une marge sous mon footer ?

- Est-ce normal que lorsque je veuille sélectionner du texte sur ma page, le texte de mon footer se sélectionne également ?

Merci d'avances pour vos lumières.

Modifié par fgaascht
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...