Partage

image de fond et balises imbriquées

l'image de fond d'une balise A se cale sur la balise imbriquée B

2 août 2006 à 16:44:34

Bonjour,

J'ai un problème de mise en page.
Je voudrais obtenir pour la zone principale :
- le texte sur une colonne à droite,
- une zone de liens sur une colonne à gauche, un peu décalée vers le bas,
- une image de fond située en haut à gauche.

La mise en page est donc très similaire à celle de l'exemple du tutoriel. Mais la différence principale réside dans le fichier html : je voudrais écrire le texte avant le menu (d'après ce que j'ai lu, il est conseillé d'écrire le contenu du texte le plus haut possible dans la page html pour améliorer le référencement).

J'ai donc défini (en-dessous de la zone pour les menus principaux) une zone nommée "accueil" contenant :
- une image de fond pour la zone "accueil"
- le texte principal en bloc flottant à droite (balise imbriquée)
- la zone de liens avec une largeur limitée (autre balise imbriquée) qui vient se placer naturellement sur la gauche

Or il semble que l'image de fond ne se cale pas sur la zone "accueil", mais sur la zone de liens. En effet, l'image de fond est décalée vers le bas, comme la zone de liens, et est coupée en bas de la zone de liens.

body {
background: rgb(215,220,220);
}
#contenu {
background: white;
width: 790px;
margin: auto;
}

/*------------ menus pratiques --------------*/
#MenuPratique {
border: solid black 1px;
}
#MenuPratique ul {
margin: 0px;
text-align: center;
}
#MenuPratique li {
display: inline;
padding: 0px 20px;
}

/*----------- menus des sujets -------------*/
#MenuSujets {
border: solid black 1px;
}
#MenuSujets ul {
margin: 0px;
text-align: center;
}
#MenuSujets li {
display: inline;
padding: 0px 20px;
}

/* ----------- page d'accueil ----------- */
#accueil {
background: transparent url("fond3.jpg") no-repeat top left;
}

#presentation {
float: right;
width: 560px;
margin: 0px 0px 10px 10px;
padding: 10px 20px 10px 20px;
background: transparent;
border-left: solid black 1px;
}
#quelquesArticles {
width: 140px;
margin: 100px 0px 10px 10px;
padding: 5px 10px 5px 10px;
background: rgb(230,230,230);
border: solid black 1px;
}
#quelquesArticles ul {
list-style-type: none;
margin: 0px;
padding: 0px;
padding-left: 0px;
}

Le résultat :

Image utilisateur

Je ne comprends pas pourquoi l'image de fond se cale sur la balise imbriquée, et non sur la balise où elle est définie.
Et je ne sais pas comment résoudre ce problème , tout en gardant le texte avant la zone de liens dans le fichier html.

Merci d'avance pour votre aide.

strucky

2 août 2006 à 17:25:22

Désolé, mais malgré ta longue explication, j'ai rien caapté à ton problème.

Citation : sbong

d'après ce que j'ai lu, il est conseillé d'écrire le contenu du texte le plus haut possible dans la page html pour améliorer le référencement.

T'as lu ces foutreries où ?
C'est d'après moi encore du grand n'importe quoi :-°

sbong

2 août 2006 à 17:31:17

J'ai pourtant essayé de faire une explication la plus claire possible, mais je vois que j'ai échoué...

En fait, je voudrais que mon image de fond (la forme géométrique jaune) se positionne juste en dessous des menus horizontaux (donc un peu plus haut) et puisse dépasser de la zone encadrée située dans la colonne de gauche.

strucky

2 août 2006 à 17:58:20

Donc tu veux ton image en haut et dans la colonne gauche, et quelle puisse dépasser de la largeur de cette colonne et empiète sur la colonne droite ?

C'est ça ?

sbong

2 août 2006 à 18:11:19

Oui, je veux effectivement que l'image se trouve en haut (elle n'y est pas) dans la colonne de gauche (elle y est déjà) et qu'elle dépasse sur la colonne droite (elle le fait déjà).
Donc je veux remonter l'image.
Et je veux qu'elle déborde aussi vers le bas, sans être tronquée dès que le texte est fini.
Pour que ce soit plus clair, voici l'image de fond en entier :
Image utilisateur

J'espère que c'est un peu plus clair...

strucky

2 août 2006 à 18:29:59

C'est pour faire le background du menu ?

Edit :

Tiens je t'ai corrigé pas mal de truc, dis moi si c'est ça que tu veux.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

</style>
</head>

<body>

<div id="contenu">

<div id="MenuPratique">
<ul>
<li>accueil</li>
<li>FAQ</li>
<li>contacts</li>
<li>plan du site</li>
</ul>
</div>

<div id="MenuSujets">
<ul>
<li>sujet 1</li>
<li>sujet 2</li>
<li>sujet 3</li>
</ul>
</div>

<div id="accueil">

<div id="quelquesArticles">
<p>Quelques articles :</p>
<ul>
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
</ul>
</div>

<div id="presentation">
<h1>Page d'accueil</h1>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo.
Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus
mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo.
Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus
mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo.
Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus
mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.
</p>
</div>

</div> 
</div> 

</body>
</html>

sbong

2 août 2006 à 22:01:31

Merci pour ta réponse.

Citation : strucky

C'est pour faire le background du menu ?

Non, c'est pour le background de la zone sous les menus horizontaux.

Citation : strucky

Tiens je t'ai corrigé pas mal de truc, dis moi si c'est ça que tu veux.

C'est effectivement le résultat que je souhaitais.

Mais pour y parvenir, tu as interverti l'ordre des balises "quelquesArticles" et "presentation" dans le fichier html. N'est-il pas possible d'obtenir le même résultat en conservant la balise "presentation" en premier ?

En effet, il me semble que l'intérêt du CSS est de pouvoir modifier un design sans modifier le HTML. Donc si je change d'avis plus tard et que je veux mettre la zone "quelquesArticles" à droite et non plus à gauche, il semblerait qu'il me faudra intervenir sur le fichier HTML (...TOUS les fichiers HTML du site !) pour intervertir l'ordre des balises.
C'est pourquoi j'aimerais bien trouver une solution qui n'impose pas d'agir sur le HTML.

Et j'aimerais bien comprendre aussi pourquoi l'image de fond de la balise "accueil" s'applique sur la balise imbriquée "quelquesArticles" (dans mon exemple initial). Comment est-ce que ça marche ?

J'ai encore une petite question : pourrais-tu m'expliquer pourquoi tu as changé tous les "0px" en "0" ?

Edit :
Autre question : tu as supprimé la valeur "transparent" dans la propriété qui définit l'image de fond :

background: transparent url("fond3.jpg") no-repeat top left;

Je l'avais mise car j'ai lu que ça permettait de faire transparaître le fond initial si l'image n'est pas disponible. Est-ce que ça ne marche pas ainsi ?

strucky

2 août 2006 à 22:32:49

Ben c'est plus logique de mettre le menu en flottant que le contenu, tu vas quand même pas me faire croire que tu as gobé ce que l'on t'as dit au sujet du référencement ?

Vu la vitesse où les robots inspectent une page, crois moi, même 1000 lignes sans qu'il ait ton contenu ne changerait rien.

Le principal, c'est justement d'avoir du contenu, et avoir des liens pointant sur toutes tes pages.

Sinon, refait comme tu avais fait, mais bon, c'est illogique.

0px, 0kg, 0mm, 0kj, 0 pomme de terre, c'est 0, pas besoin de précisé les unités, ça sert à rien.

Le transparent, pour moi, il ne sert à rien, si ton image ne s'affiche pas, ce sera la couleur du bloc situé en dessous qui sera sa couleur, pas besoin de transparent.

sbong

2 août 2006 à 23:24:16

OK, merci pour ces précisions.
Je veux bien modifier l'ordre des balises dans le fichier HTML si ça n'a pas d'impact sur le référencement.
Et je précise que je suis webmaster néophyte. Donc j'ai tendance à croire ce que je lis sur des sites qui ont l'air sérieux. Je n'ai pas pour autant l'impression de "gober" des "foutreries".

J'aurais bien voulu citer ma source et vérifier ce que j'ai retenu, mais je n'arrive pas à retrouver où j'ai lu ça... Mais bon, je veux bien croire que ça n'est pas (ou plus ?) valable. Ton argument (sur les robots, pas sur les "foutreries" !) tient la route.

Je me permets aussi d'insister sur un point du CSS (je suis en train d'apprendre...) : comment faire pour positionner le menu à droite quand la balise du contenu est écrite avant la balise des menus dans le fichier HTML (càd tel que tu l'as corrigé) ?

strucky

2 août 2006 à 23:57:56

En float, tu ne peux pas, seule solution, le positionnement absolute.

Moi aussi, j'aurais aimé que tu retrouves le lien de ce site

sbong

3 août 2006 à 9:12:13

Citation : strucky

En float, tu ne peux pas, seule solution, le positionnement absolute.

Donc, je définis une marge gauche de 500px (par exemple) pour ce bloc, et je place le texte sur la gauche avec une dimension horizontale inférieure à 500px. C'est ça ?

Citation : strucky

Moi aussi, j'aurais aimé que tu retrouves le lien de ce site

Je chercherai encore un peu, et si je trouve, je viendrai t'indiquer le lien.

strucky

3 août 2006 à 12:11:27

Oui, c'est le même principe qu'avec un bloc en float

sbong

5 août 2006 à 16:12:02

Comme promis, j'ai continué à chercher où j'avais pu trouver le conseil d'écrire le contenu de la page le plus haut possible dans le fichier html.
Je n'ai pas retrouvé.

J'ai quand même retrouvé un conseil du même genre au sujet de la balise title (ce qui n'est pas tout à fait la même chose, je te l'accorde) : http://methodologies.abondance.com/optimisation.html.
Il est possible que je me sois un peu mélangé les pinceaux dans mon souvenir...