[Xhtml/CSS] problème de background et de float

16 février 2006 à 11:46:41

Salut (jp949

)
Une fois de plus, mon codage admet qqs erreurs.
site

sous ie : le background (bg.png) s'affiche deux fois, une fois au bon endroit, centré au milieu de la page, et une seconde collé à gauche de la page, pourquoi?
sous ff et ie : le bloc contenu tient compte de mon "float : left" mais ne se place pas à la hauteur du bloc colonne_g.
sous ff et ie : le bloc contenu ne tient pas compte de ma "margin-left: 30px"

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

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

<div id="colonne_g">
<div id="connection"></div>
<div class="menu_bg"></div>
<div class="menu_bottom"></div>

<div id="menu"></div>
<div class="menu_bg"></div>
<div class="menu_bottom"></div>

<div id="lastmatchs"></div>
<div class="menu_bg"></div>
<div class="menu_bottom"></div>

<div id="players"></div>
<div class="menu_bg"></div>
<div class="menu_bottom"></div>
</div>

<div id="contenu">
<div id="news"></div>
<div id="news_bg"></div>
<div id="news_bottom"></div>
</div>
</body>
</html>

html, body
{
background-image: url(images/bg.png);
background-repeat: repeat-y;
width: 800px;
margin: auto;
}

#header
{
background-image: url(images/header.png);
width: 800px;
height: 165px;
background-position: center;
background-repeat: no-repeat;
}

#colonne_g
{
width: 150px;
margin: 30px;
}

#connection
{
background-image: url(images/connection.png);
width: 150px;
height: 23px;
}

.menu_bg
{
background-image: url(images/menu_bg.png);
width: 150px;
}

.menu_bottom
{
background-image: url(images/menu_bottom.png);
width: 150px;
height: 23px;
}

#menu
{
background-image: url(images/menu.png);
width: 150px;
height: 23px;
}

#lastmatchs
{
background-image: url(images/lastmatchs.png);
width: 150px;
height: 22px;
}

#players
{
background-image: url(images/players.png);
width: 150px;
height: 26px;
}

#contenu
{
width: 580px;
float: right;
margin-left: 30px;
}

#news
{
background-image: url(images/news.png);
width: 580px;
height: 24px;
}

#news_bg
{
background-image: url(images/news_bg.png);
width: 580px;
}

#news_bottom
{
background-image: url(images/news_bottom.png);
width: 580px;
height: 27px;
}

Si vous pouvez apporter des réponses à ces problèmes, merci de m'en faire part.
Merci beaucoup d'avance

jp949

16 février 2006 à 12:10:58

Salut.
pour le background fais une regle a part pour le body background-image ne la mets pas dans html.
pour le contenu tu l'as implementé dans le code html apres la colonne_gauche faut le placer avant.
pour le margin-left , ton bloc est deja flottant a droite il ne va pas rajouter une marge a gauche, je suppose que c'est un margin-right que tu veux mettre donc dans ta regle #contenu ajoute display:inline; /*pour IE */

cdel06

16 février 2006 à 15:09:33

j'ai scrupuleusement suivis tes instructions mais je crains que la situation ait empiré; jp949 serait-il faillible ou est-ce moi qui ne sais pas lire?

Je te laisse apprécier
le site
Xhtml : ctrl+U
Css
Je compte sur toi o_O

jp949

16 février 2006 à 15:22:19

#colone_gauche {margin:25px; /*a remplacer par*/
margin-left:25px; display:inline; /*pour IE*/ }

cdel06

16 février 2006 à 15:48:54

j'ai fais les modifications mais qqs problèmes subsitent
site

jp949

16 février 2006 à 15:53:43

sur FF pas probleme Pour IE faut remettre les proprietés width:800px; margin:auto dans body

cdel06

16 février 2006 à 15:56:22

tu proposes deux fichiers css?
et je tiens à souligner qu'il reste un leger problème pour ff (regarde le header)
Ps: tu aurais pas msn des fois?

jp949

16 février 2006 à 16:08:17

cdel06

16 février 2006 à 17:03:19

On avance.
Tout est parfait sous ff mais le background n'est pas centré sous ie.
site

On y est presque, j'ai résolu le problème de background.
Bon ba déjà je te dis merci au cas ou j'oublirais plus tard
dernier petit probleme en date : au nivo de "connection" j'ai mi des input et ca créé un effet bizare sous ff donc ...

jp949

17 février 2006 à 6:19:09

Sur IE c'est bon le design est centré.
pour FF c'est les paragraphes que tu as mis a l'interieur de #connection, il faut soit que tu fasses une regle #connection p {margin:0 auto;}ou placer au debut et a la fin de #connection 1<span></span> vide

cdel06

17 février 2006 à 10:39:02

Bon ba voila, je te remercie : tu m'as, une fois de plus, resolu tous mes bugs.
Pour ce dernier probleme j'ai mis des margin top et bottom à 0px.
A un prochaine fois.
La semaine prochaine, promis, je te demande rien (je serais pas là

)

jp949

17 février 2006 à 11:09:44

ouf un peu de vacanves