[XHTML] [CSS] espace div/image

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai un petit problème de mise en page css d'un document xhtml.
J'ai créé un div avec une image dedans, et je me retrouve avec un espace en dessousd e l'image, dans le div, que je ne veux pas.

ps:
- xhtml 1.1 et css valide.
- testé sous firefox 1.5.0.2 sous linux

page xhtml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>titre</title>
        <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    </head>
    <body>
        <div id="desktop">
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
            <p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte</p>
        </div>
        <div id="footer" >
            <img alt="footer" src="imgs/footer.jpg" />
        </div>
    </body>
</html>

feuille de style css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body{
    margin:                0;
    background-color:    #312C32;
    padding-top:        1%;
    padding-bottom:    1%;
    padding-right:        5%;
    padding-left:        5%;
    color:                black;
}
img{
    border:                0;
    margin:                0;
    padding:                0;
}
 
div, p{
    background-color:    white;
    color:                black;
    width:                100%;
    margin:                0;
    padding:               0;
    border:                0;
}
 
div#footer img{
    width: 100%;
}

Le résultat est en pièce jointe.

26/04/2006, 11h18
Ayana

Peut-être "height:100%" ...
26/04/2006, 11h21
hebus73

padding et margin =0 mais je ne vois vraiment pas a quoi ca sert de mettre un e image dans un div
Tu n'a qu'a appellé ta classe sur l'image tu ora le meme rendu
26/04/2006, 11h22
MatRem

En mettant height:100% dans img ça ne fonctionne même pas... De tout façon je pense que le div doit englober automatiquement son contenu.
26/04/2006, 11h23
hebus73

dans ton cas il te sert absolument a rien
26/04/2006, 11h26
MatRem

J'ai pas bien compris ce que tu dit hebus73.

Mais si tu veux dire de mettre la balise img, directement dans le body, ce n'est pas valide.
26/04/2006, 11h31
hebus73

et en quoi c'est pas valide??
meme en xhtml strict c'est valide et tu n'est de toute facon pas en xhtml strict
26/04/2006, 11h50
Ayana

Citation:

Envoyé par MatRem

En mettant height:100% dans img ça ne fonctionne même pas... De tout façon je pense que le div doit englobé automatiquement son contenu.

Je pensais le mettre dans le div, même si ce n'est pas la meilleure des idées :lol:
26/04/2006, 11h52
MatRem

Forcément que je suis pas en xhtml strict parceque ça existe pas en xhtml 1.1, y'a qu'une dtd. ;)

Voilà l'erreur:

Citation:

This page is not Valid XHTML 1.1!

Below are the results of checking this document for XML well-formedness and validity.

Error Line 18 column 55: document type does not allow element "img" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag.

<img id="footer" alt="footer" src="imgs/footer.jpg" />

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
26/04/2006, 15h59
MatRem

Excuse moi ayana, j'avais pas vu ton post...

En effet le height:100% dans le div sa fonctione... (pkoi? :?).

Entre temps j'avais trouvé une autre solution, c'est de passer img en display:block.
26/04/2006, 18h04
vinzzzz
Ajoute
Code:

1 2 line-height: 1px
dans l'élément qui contient ton image (ta div).
Ou encore tu peut afficher ton image en block.

Normalement ca devrait passer.
Le pb est du au fait que intenet explorer (si le pb est bien avec IE...) attribu une valeur minimale aux div (la taille courante du texte il me semble), et ton image doit être plus petite que cette valeur en hauteur, d'ou l'espace qui apparait en dessous.
26/04/2006, 20h06
MatRem

J'utilise firefox 1.5, il doit donc avoir le même problème.