• Bonjour Visiteur. Bienvenue sur les nouveaux forums de MacGeneration. La peinture est encore fraiche, quelques boulons doivent être resserrés, plus d’informations demain !

Apprendre nouveau design CSS

Pooki

Membre émérite
6 Juillet 2007
768
20
37
Lille
Bonsoir,
J'ai voulu retravailler sur ce petit tuto pour commencer un site mais j'ai un soucis avec le menu, je pense qu'il y a quelque chose que je n'ai pas du comprendre. Je m'explique:
Je souhaiterais que mon menu prenne toute la partie gauche du site. Qu'il aille du header au footer mais je n'y arrive pas du tout.


Quelqu'un serait il m'aider?

J'ai mis tout ça ICI

Un grand merci d'avance.
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
30
$PWD
p4bl0.net
Bonsoir,
J'ai voulu retravailler sur ce petit tuto pour commencer un site mais j'ai un soucis avec le menu, je pense qu'il y a quelque chose que je n'ai pas du comprendre. Je m'explique:
Je souhaiterais que mon menu prenne toute la partie gauche du site. Qu'il aille du header au footer mais je n'y arrive pas du tout.


Quelqu'un serait il m'aider?

J'ai mis tout ça ICI

Un grand merci d'avance.
Enlève les bordures autre que top de ton menu ;)

Y a pas de solution pour ce genre de truc, ou alors ça va marcher que dans un seul navigateur par exemple... (ou plus exactement dans tous sauf IE quoi ^^ mais même pas aussi bien partout).

Faut contourner le problème par des jeux de couleurs avec une image de fond par exemple, ou dans le cas présent si la couleur de fond du menu est la même que la page suffit d'enlever le bord d'en bas et hop on voit pas que ça s'arrête.
 

Pooki

Membre émérite
6 Juillet 2007
768
20
37
Lille
Merci pour cette réponse mais ca ne va pas car mon menu est d'une autre couleur et c'est vraiment moche la coupure du bas.
 

da capo

abonné absent
Club MacG
12 Août 2001
17 403
3 632
A

Anonyme

Invité
Comme disiait p4bl0, enlève les border autour de #menu et #content et place une image de fond dans le #wrapper répètée en y et alignée à gauche de la largeur du menu. Dans ce cas, il ne faut pas oublier de donner une couleur (ou une image) de fond à #header et #footer.

Je vois également que tu as supprimé le h1 : c'est une mauvaise idée, la hiérarchie des titres doit être continue et en général le h1 est le titre du site avec un lien pour revenir à la page d'accueil. Si tu utilises une image avec une fonte fantaisie alors place-là dans le h1 avec comme attribut alt, le nom du site.

J'ai fait un petit exemple pour illustrer avec un fichier zip à télécharger.

P.S. : il est possible de se passer de l'astuce avec l'image et d'utiliser display:table et display:cell mais IE (encore lui!) ne reconnaît pas ces propriétés css. ;)
 

Pooki

Membre émérite
6 Juillet 2007
768
20
37
Lille
Super, merci beaucoup pour ces réponses. Je commence à comprendre encore un peu mieux.
 

angelo95

Membre confirmé
20 Décembre 2005
219
14
40
Paris
Un grand merci à Gloup Gloup je vais revenir consulter cette page...
 

smog

Membre émérite
17 Août 2005
648
49
46
Je profite du sujet pour vous poser une petite question.

J'ai, sous les conseils avisés des spécialistes ici-présents, abandonné DreamWeaver et j'ai tout repris à zéro avec un simple éditeur (BorakHTML en l'occurence). Ca me prend 10 fois plus de temps, mais au moins j'ai un code "propre" (sans doute encore perfectible, je débute en CSS) et je suis "au goût du jour". Merci pour tous ces tutos et la patience de ceux qui répondent !

Voilà mon "problème" : j'ai créé un "header", un "content" et un "wrapper" pour le tout, et j'ai intercalé entre le "header" et le "content" une boîte pour accueillir mes menus ; en effet par soucis de cohérence graphique et par choix d'une fonte "exotique", j'utiliserai un roll-over d'images pour mes quelques menus (avec un ALT bien sûr M. Gloup Gloup;)). Et là je ne sais pas comment faire pour placer mes images-menu les unes à côté des autres (ça doit donner des images juxtaposées sur toute la largeur, pour faire une seule "bande" de menu).
Je ne sais pas si c'est bien clair ce que je dis... C'est la bande jaune-orange sur le lien ci-dessous.

Merci pour votre aide...

PS : en regardant les gabarits d'AlsaCréations, je me demande si une série de menu "texte" avec un surlignage lors du survol ne peut finalement pas être aussi bien... Enfin, ça ne change rien à mon problème technique...

Pour rappel, ma 1ere version antique avec des tableaux :
Pas bô le code !
 

da capo

abonné absent
Club MacG
12 Août 2001
17 403
3 632
et si tu donnais des largeurs fixes à tes images ? pour que la somme des largeurs soit égale (ou légèrement inférieure) à la largeur de la bande ?

j'ai compris ta question ? (j'ai un doute)
 

smog

Membre émérite
17 Août 2005
648
49
46
Oui, c'est ça je pense : les images (il y en a cinq) doivent être les unes à côté des autres et occuper la largeur totale...
 

da capo

abonné absent
Club MacG
12 Août 2001
17 403
3 632
Eh bien, si ta largeur de bandeau est fixe alors il suffit de diviser cette largeur par 5 pour connaitre la largeur maxi des images.

Exemple : le bandeau de menu a pour largeur width:700px;

Dans ce cas, tu dois créer des images ayant au plus 140px de large.

Soit attentif aux propriétés border, margin et padding qui risquent d'ajouter quelques pixels et annuler tes efforts.

En complément, car je vois que tu utilises des effets au survol serait d'utiliser la technique des sprites (voir google : css image sprite) au lieu du sempiternel javascript Rollover machin truc...
 

smog

Membre émérite
17 Août 2005
648
49
46
Merci Da Capo, tu m'as permis de voir le problème ! J'ai corrigé la hauteur et mis en ligne ma version "CSS"...

Mais j'ai plein de nouveaux trucs bizarres à améliorer... Mais pour ça je vais créer un nouveau sujet pour ne pas polluer celui-ci.
 

angelo95

Membre confirmé
20 Décembre 2005
219
14
40
Paris
Je viens de relire ce tuto il est vraiment genial. Et pour ceux qui veulent en savoir plus j ai decouvert un tres bon bouquin "The missing manual for CSS"
@+
 

smog

Membre émérite
17 Août 2005
648
49
46
+1 !

A ce propos, avez-vous, en plus de cette référence, des ouvrages à conseiller sur le sujet ?
Maintenant que j'ai bien mis la main à la pâte, j'ai envie de consolider mes connaissances, mais je sais que la littérature informatique est vaste mais peu d'ouvrages sont vraiment au dessus du lot...
 

da capo

abonné absent
Club MacG
12 Août 2001
17 403
3 632
En français, un ouvrage de Raphaël Goetter (à l'origine de alsacréations.com) :

CSS2 Pratique du design web (Eyrolles - 32€)

Ouvrage bien construit et clair (à mon sens).
 

Benjamin D.C.

Membre d’élite
Club MacG
10 Décembre 2004
2 950
336
35
Belgium
deaxon.com
+1 !

A ce propos, avez-vous, en plus de cette référence, des ouvrages à conseiller sur le sujet ?
Maintenant que j'ai bien mis la main à la pâte, j'ai envie de consolider mes connaissances, mais je sais que la littérature informatique est vaste mais peu d'ouvrages sont vraiment au dessus du lot...
Si tu veux en savoir plus sur le positionnement CSS, tu peux jeter un œil à l'article suivant: Maîtriser le positionnement CSS dans toutes les situations.