10 réponses à ce sujet

[julesinmontreal]

Bonjour,

Je suis nouveau sur ce forum et débutant en html et css.

MON PB : Je suis confronté à des difficultés sur les couleurs de fond entre mon body et html.
Cela fait plus d'une journée que je cherche mon erreur mais sans résultats...

Sur le site qui se trouve à l'adresse (www.julien-michaud.com/mp) je tente de mettre le site en fond blanc et le reste en fond gris clair.
J'ai donc écrit sur ma feuille de style :

html, body {
height:auto !important;
min-height:100%;
background:transparent none repeat scroll 0 0;
border:0 none;
font-size:100%;
margin:0;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}

html {
background-color:#E8EBEF;
}

body {
background-color:#FFFFFF;
color:#493E30;
font-family:Arial,Helvetica,sans-serif;
font-size:75%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:150%;
margin:0 auto;
width:1000px;
position:relative;
}

Mais cela ne fonctionne pas... je ne sais pas si cela viens de la feuille de style ou de page html.

Quelqu'un peut il m'aider svp ?

Merci.

julien

[neolao]

ça marche chez moi

[julesinmontreal]

Bonjour neolao,

Tu veux dire quand tu regardes mon site ? Ou bien quand tu codes ?

Si tu regardes bien sur le site à l'adresse indiqué en haut, il y a un trou (en bas à gauche) qui n'est pas remplit par la propriété backgroud color blanc.
D'ailleurs j'ai remarqué que la partie "texte", c'est à dire tout la partie en dessous du header et en haut du footer ne prenait pas en compte la propriété backgroud color blanc.

C'est sûr que j'ai une solution... : une image en background qui reproduire gris/blanc/gris. Mais je souhaite réaliser ce site sans image en background...

Merci

[neolao]

ok je viens de voir

c'est parce que tu as mis ton #content et ton #menu en float. Du coup, ton body s'en retrouve réduit.
Il faut savoir que si tu utilises float, ton conteneur n'englobe plus correctement le contenu. Tu peux voir une solution du côté de la propriété CSS "clear".

[julesinmontreal]

neolao, le 28 September 2010 - 21:40 PM, dit :

ok je viens de voir

c'est parce que tu as mis ton #content et ton #menu en float. Du coup, ton body s'en retrouve réduit.
Il faut savoir que si tu utilises float, ton conteneur n'englobe plus correctement le contenu. Tu peux voir une solution du côté de la propriété CSS "clear".

Merci, je vais regarder ça de suite !

[julesinmontreal]

Je ne vois pas vraiment les alternatives avec la fonction clear...

[neolao]

Explication ici http://www.alsacreat...ttants-css.html

[julesinmontreal]

neolao, le 28 September 2010 - 22:49 PM, dit :

Explication ici http://www.alsacreat...ttants-css.html

OK. Je vais regarder çà.
Merci beaucoup pour ton aide.

[Ren]

Bonjour,

attention aux float à outrance , il ne faut pas les utiliser partout.
Seulement là où c'est utile.

Regarde bien le nombre de lignes supprimées pour le nombre de lignes ajoutées;)

Peux-tu effectuer les modifications suivantes :

CSS

#content
[indent]float:left;
width:700px;[/indent]

#infos
[indent]float:left;
height: 20px;
display: inline;
margin-top:20px;
clear: both;
//Ajouter
display: inline-block;[/indent]

#footer
[indent]clear: both;
float:left;
height:10px;
background: #333;
//Ajouter
display: inline-block;
border-top: 10px solid #333;[/indent]

Personnellement je n'utilise jamais la propriété clear.
Je trouve que tu charges ton code de beaucoup de propriétés qui n'ont aucun effet, c'est dommage et ça complique énormément la lecture de ta feuille de style.

Ren

[julesinmontreal]

Voilà,

J'ai ajouter avant mon footer :

<div class="x">
</div>

Puis dans le css

.x {
clear:both;
}

Et ça roule...

Merci beaucoup !

[julesinmontreal]

Ren, le 29 September 2010 - 09:22 AM, dit :

Bonjour,

attention aux float à outrance , il ne faut pas les utiliser partout.
Seulement là où c'est utile.

Regarde bien le nombre de lignes supprimées pour le nombre de lignes ajoutées;)

Peux-tu effectuer les modifications suivantes :

OK, je vais regarder ça et alléger...