Problème de 5px

Uniquement sous FF et Opera.

Sujet résolu

BenZoU`

19 décembre 2005 à 21:51:27

Bonsoir :]

J'étais entrain de mettre en page un design, lorsqu'un problème qui ne m'est pas inconnu, (j'avais effectivement déjà rencontré ce soucis) m'interompu:

Comme vous pouvez le constater, sous FF (ou même sous Opéra), sur http://www.benzou.be il y'a genre un espace entre le header et le corp de mon design... C'est assez génant :-°

.
Sous IE on ne voit pas ce bug.

Voici mon code XHTML:

<!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>La boite à BenZoU`.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>

<div id="header"></div>

<div id="corp"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quis nisi
. Cras sodales elit. Mauris scelerisque sapien id tellus. Donec sed diam. Pellentesque massa felis,
egestas vitae, egestas mattis, imperdiet eget, enim. In non urna at turpis congue scelerisque. Praesent
tincidunt massa nec magna consequat porta. Duis facilisis lacus et odio. Praesent nec tellus sit amet odio
molestie tristique. Etiam massa pede, aliquam venenatis, scelerisque nec, dictum sit amet, magna. Ut sed velit.
Aenean congue blandit magna. Aliquam elementum, quam id posuere imperdiet, justo sem ullamcor
per lectus, a euismod magna diam et dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec adipiscing elit nec orci
Cras eleifend lectus quis mauris. Vestibulum vehicula dapibus quam. Integer a augue. Nullam elementum sollicitudin felis. Quisque erat. Ut libero. Nullam quis mauris in nisl nonummy euismod.
Ut ultricies sem. Donec turpis ligula, dignissim id, ornare et, malesuada vitae, lacus. Sed nonummy neque ac nibh. Ut purus massa, porta vel,
sagittis sed, pretium id, nisl. Curabitur dapibus, nisl in ornare hendrerit, augue risus accumsan quam, pharetra porttitor dui arcu vel diam.
Integer id nibh eget purus pulvinar tristique. Mauris auctor, pede non tristique lacinia, lectus tortor consectetuer elit, nec pharetra purus enim quis nisi
. Nulla tincidunt gravida purus. Quisque eget quam et odio varius accumsan. In dui magna, congue condimentum, consequat at, molestie ac, est. Nunc viverra,
arcu ac blandit tempor, risus metus posuere diam, et placerat neque lectus at nulla. Praesent rhoncus cursus sem. Duis quis nisl. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. In sodales tempor massa. Fusce quis arcu at turpis rhoncus iaculis. Nullam laoreet malesuada nisi.
Fusce pretium cursus nisl.
Aliquam eget justo. Cras sed ipsum. Vivamus lectus. Phasellus non nisl. Proin eget magna in eros porta ultricies. Integer semper, risus ac
rhoncus interdum, nibh velit imperdiet turpis, sit amet tempor tortor risus a augue. Nunc scelerisque mauris quis dui. Aliquam risus mauris,
hendrerit vitae, pellentesque quis, eleifend a, leo. Sed ultrices eleifend arcu. Phasellus sed neque. Quisque pulvinar luctus erat. Aenean
pharetra erat id felis. Aenean cursus lacus non tellus. Duis posuere quam quis libero fermentum sollicitudin. In rutrum. Quisque nibh risus
, convallis sed, aliquam iaculis, gravida porttitor, lacus. Vestibulum a neque vel orci hendrerit adipiscing.
Aliquam erat volutpat. Pellentesque bibendum consequat metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec tempus tincidunt dui. Maecenas velit sem, molestie nec, tristique ut, varius et, elit. Curabitur luctus. Curabitur
varius arcu sit amet nibh tempus facilisis. Suspendisse quam est, ullamcorper id, gravida ac, nonummy non, leo. Nulla diam. Sed sed nisl
vel est consequat posuere. Nulla erat. In hac habitasse platea dictumst. Sed in ipsum a erat tempus sollicitudin. Quisque nibh justo, gravida
auctor, imperdiet nec, condimentum et, nibh. Sed suscipit, ante tincidunt condimentum consectetuer, ligula sapien fermentum lectus, sed iaculis
enim leo eget urna. Vestibulum consequat odio a leo. Proin iaculis leo eu tellus. Nulla varius nunc nec risus. Fusce arcu est, porttitor sed, vehicula id,
convallis ac, quam. Sed non erat eget velit varius aliquam.</p>
</div>

</body>
</html>

Rien de bien sorcier...

Et voila mon code CSS:

body
{
margin: auto;
width: 800px;
background-color: #696969;
font-size: 12px;
}

#header
{
width: 800px;
height: 205px;
background-image: url('images/index_01.gif');
}

#corp
{
width: 800px;
height: 100%;
background-image: url('images/index_02.gif');
}

p
{
margin-left: 232px;
margin-right: 245px;
}

Voila, donc un code de base et simpliste pour un bug aussi...euh...incompréhensible par moi :-°

(hum, pas très francaise cette phrase, mais on fera avec, hein

)
J'ai essayé le "clear: both", sans effets.

Une solution ?

Bonne soirée

PS: Je viens de voir que c'est la balise <p></p> qui à du mal, le header et le corp restent collés si je transforme <p></p> en <span></span> et idem pour les balises <h1></h1>, <h2></h2>, etc...

jp949

19 décembre 2005 à 21:54:11

#header
margin-bottom:0;
#corp
margin-top:0;

BenZoU`

19 décembre 2005 à 21:57:08

Bonsoir

Aucun effet

merci, ++

EDIT: De plus, je pense pas que se soit un problème de CSS, mais plutot de balises

TimeSplitters

19 décembre 2005 à 22:09:18

Là dans ton CSS tu as mis le <p></p> que dans le cas où le <p></p> est dans le corps. Met plutôt ça

body
{
margin: auto;
width: 800px;
background-color: #696969;
font-size: 12px;
}

p
{

margin-left: 232px;
margin-right: 245px;
}

#corp
{
width: 800px;
height: 100%;
background-image: url('images/index_02.gif');
}
#header
{
width: 800px;
height: 205px;
background-image: url('images/index_01.gif');
}

Ca coûte rien d'essayer...

yöm

19 décembre 2005 à 22:09:26

p{
margin: 0 245px 0 232px;
}

Est-il efficace ?

BenZoU`

19 décembre 2005 à 22:20:54

Citation : Chris2

Là dans ton CSS tu as mis le <p></p> que dans le cas où le <p></p> est dans le corps. Met plutôt ça

body
{
margin: auto;
width: 800px;
background-color: #696969;
font-size: 12px;
}

p
{

margin-left: 232px;
margin-right: 245px;
}

#corp
{
width: 800px;
height: 100%;
background-image: url('images/index_02.gif');
}
#header
{
width: 800px;
height: 205px;
background-image: url('images/index_01.gif');
}

Ca coûte rien d'essayer...

Sans effet là non plus, merci quand même

Citation : Yom

p{
margin: 0 245px 0 232px;
}

Est-il efficace ?

Effectiv'ment efficasse

Merci beaucoup, mais ca produit quel effet en gros ?

yöm

19 décembre 2005 à 23:20:14

C'est tout bête : des marges sont appliquées aux paragraphes par défaut.

Moi, je place toujours ceci en début de ma CSS :

*{
margin: 0;
padding: 0;
border: 0;
}

Cette technique a le mérite de m'éviter les éventuels écarts indésirables (l'étoile désigne un sélecteur universel, c'est à dire toutes les balises.

Ilopnyukos

20 décembre 2005 à 10:05:28

salut,

BenZoU` , je veux pas faire le mec qui sais tout, mais là c'est assez fort, lol : sûrement une faute de frappe, mais revois le nom "corp" pour "corps", je pense que si d'autre comme moi en viendront à lire ton CSS pour une quelconque raison, çà sera mieux...

a+

BenZoU`

20 décembre 2005 à 11:35:31

Citation : PsyKo

salut,

BenZoU` , je veux pas faire le mec qui sais tout, mais là c'est assez fort, lol : sûrement une faute de frappe, mais revois le nom "corp" pour "corps", je pense que si d'autre comme moi en viendront à lire ton CSS pour une quelconque raison, çà sera mieux...

a+

Pas compris dsl

EDIT: Ah, bah libre à moi de choisir d'écrire "corp" pour "corps" ? non ?
le résultat restera toujours le même hein

Ok merci Yom :]

++

Problème de 5px

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème de 5px

Uniquement sous FF et Opera.

Problème de 5px

Supprimer

Modérer

Signaler le message aux modérateurs