Discussion :

[Flosteo]

Bonjour a tous,

Je cree mon premier site internet et j'ai deja des problemes de mise en page avec CSS. Globalement c'est satisfaisant dans l'ensemble (enfin, disons que je suis pas trop a cote de la plaque) mais j'ai parfois des comportements que je voudrais eviter.

J'utilise Dreamweaver CS4 et je structure mon site en utilisant des balises div dont j'applique les proprietes par style CSS.

Voici comment j'ai decoupe mon site : ICI

Vous l'aurez compris, chaque rectangle correspondant a une balise.

Pour avoir ce decoupage, est-ce la facon la plus pertinente ou est-ce que je me suis compliqué l'esprit?

Plus specifiquement :

1-Je voudrais que ma zone de texte et mon menu gauche aient quelque soit la longueur de leur contenu partent de la barre de navigation horizontale jusqu'au footer, tous les deux et pas que l'un des deux soit plus cours. Comment proceder? J'ai mis les marges a 0, la hauteur a 100% pour les 2, rien a faire.

Pour le moment je n'ai fait que 2 pages. Dans un cas, j'ai un menu long et peu dans la zone texte mais il affiche le menu comme je veux (voire un peu trop long par rapport au contenu) donc de la barre de navigation jusqu'au footer, alors que la zone de texte se contente d'etre a la taille minimum pour contenir le peu de text qu'elle contient, ce qui fait que j'ai un gros vide entre le footer et le bas ce la zone de texte.

Dans l'autre cas, il y a peu de contenu pour le moment et dans la fenetre designe aucun n'atteint le footer (pas de beaucoup) et la zone de texte depasse legerement en hauteur le menu. Alors que lorsque je teste sur Firefox par exemple, cette fois ci le menu depasse la zone de texte et atteint le footer correctement. Si j'augemente le contenu de la zone de texte c'est le contraire.

Je voudrais une mise en page qui reste stable quelque soit le contenu de chaque partie.

2- J'ai applique une largeur de 90% a la balise div qui contient toutes les autres avec des mages droite et gauche definies sur auto pour que le site soit centré. Cependant, ces 90% dependent du fait qu'il y ait ou non une scrollbar a droite. J'ai cree une baniere que j'ai applique en background de mon header. Seulement, quand il n'y a pas de scrollbar, comme l'affichage par le browser est plus large (de la largeur de la scrollbar) l'image de mon header se repete legerement a droite et ca fait un rendu ignoble. Comment faire pour eviter ca?

3-Comment faire pour que toute la surface de mon header puisse servir de lien vers l'acceuil? et aussi pour que la surface des 6 elements de la barre de navigation puisse mettre a jour le menu de gauche sans forcement cliquer specifiquement sur le mot qu'ils contiennent chacun?

Merci d'avance pour vos reponses

[Jérémie A.]

Une petite réponse pour te lancer sur quelques pistes.

Pour ton point "1", je te renvois vers ce document qui parle de ce que tu veux faire (un design en colonne on pourrait appeler cela).

Pour le point "2", tu peux appliquer en CSS sur ton header l'interdiction de répéter l'image de fond :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#header
{
      background-image: url('./adresse_de_ton_image.extension');
      background-repeat: no-repeat;
}

Pour ton point 3, pour tes liens, tu peux appliquer des "padding" pour augmenter virtuellement la taille de ton "<a />" aux dimensions du bloc qui le contient.
Exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#menu a /* les liens qui sont dans le menu */
{
      padding-bottom: 5px;
      padding-top: 5px;
      padding-left: 10px;
      padding-left: 10px;
}

[Flosteo]

Hi!

Merci pour tes reponses.

Je dois etre un vrai bras cassé parce que j'ai testé chacune des 3 astuces qui m'avaient l'air plutot bien trouvées mais sans succès.

1-En lisant les premieres lignes de la page, l'auteur dit qu'il va repondre a la question : "Comment faites-vous pour que la couleur d'arrière-plan de la colonne de droite s'étende jusqu'en bas de la page ?" qui justement se trouve etre exactement la mienne. Cependant si j'applique son astuce : repeter verticalement le background, je ne vois pas pourquoi ca irait forcement jusqu'au footer. Justement dans mon cas, et j'ai testé avec un motif qui permettait de deceler les repetitions, il repete jusqu'au minimum syndical c'est-a-dire juste en bas du texte et donc sans atteindre le footer.

2-Malheureusement en faisant cas, certes ca ne repete pas le background, mais ca ne met pas la <div> a la taille du background, ce qui fait qu'il reste une zone a droite qui manque, ce qui fait que la droite du header est en retrait par rapport a tout ce qui est sous-jacent. D'autant plus que l'ecran sur lequel on visualise la page est grand car je travaille sur un pauvre petit 15"

3-Le moindre pixel de padding que j'affecte au titre de mon site (que je link vers l'accueil) augmente la taille du header (voyant apparaitre surtout verticalement soit un vide ou une repetition du background selon les proprietes que je fixe)

[Jérémie A.]

Salut,

Pour le point 2, tu peux régler ton problème en appliquant ceci dans ce cas :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html 
{
       overflow-y: scroll;
}

De cette manière, la barre de "scroll" sera toujours présente mais en grisée quand elle est inutile (comme sur Internet Explorer en fait).

Pour le point 3, ca c'est normal.
Dimension finale d'un bloc = dimensions ("width" & "height") + padding
Donc par exemple, si avant tu avait ceci:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div
{
       width: 200px;
       height: 50px;
}

Pour conserver les mêmes dimensions tout en ajoutant un padding de 10 pixels à chaque extrémité, tu devras faire ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
div
{
       width: 180px;
       height: 30px;
       padding: 10px;
}

[Flosteo]

Merci beaucoup! Je vais essayer ca demain.

J'ai lu mon bouquin sur Dreamweaver CS4 en quelques heures... j'ai pas tout retenu on dirait