[XHTML] [CSS] espace div/image

**MatRem** · 26/04/2006, 11h12

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 :

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

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 :

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

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.

**Ayana** · 26/04/2006, 11h18

Peut-être "height:100%" ...

**hebus73** · 26/04/2006, 11h21

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

**MatRem** · 26/04/2006, 11h22

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.

**hebus73** · 26/04/2006, 11h23

dans ton cas il te sert absolument a rien

**MatRem** · 26/04/2006, 11h26

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.

**hebus73** · 26/04/2006, 11h31

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

**Ayana** · 26/04/2006, 11h50

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

**MatRem** · 26/04/2006, 11h52

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:

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>").

**MatRem** · 26/04/2006, 15h59

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.

**vinzzzz** · 26/04/2006, 18h04

Ajoute

Code :

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

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.

**MatRem** · 26/04/2006, 20h06

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

[XHTML] [CSS] espace div/image

CSS

Discussions similaires

Partager

Partager