Apprendre nouveau design CSS

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.
 
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.
 
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.
 
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. ;)
 
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 !
 
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)
 
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...
 
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...
 
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.
 
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"
@+
 
+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...
 
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).
 
+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.