Forums Développement Multimédia

Aller au contenu

Background-color html / body

CODE HTML CSS

10 réponses à ce sujet

#1 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 28 September 2010 - 18:50 PM

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

#2 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 28 September 2010 - 20:22 PM

ça marche chez moi

#3 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 28 September 2010 - 20:55 PM

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

#4 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 28 September 2010 - 21:40 PM

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

#5 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 28 September 2010 - 21:48 PM

Voir le messageneolao, 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 !

#6 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 28 September 2010 - 22:39 PM

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

#7 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 28 September 2010 - 22:49 PM

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

#8 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 28 September 2010 - 22:59 PM

Voir le messageneolao, le 28 September 2010 - 22:49 PM, dit :



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

#9 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 29 September 2010 - 09:22 AM

Bonjour,

attention aux float à outrance :smile:, 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
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#10 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 29 September 2010 - 15:02 PM

Voilà,

J'ai ajouter avant mon footer :

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

Puis dans le css

.x {
clear:both;
}

Et ça roule...

Merci beaucoup !

#11 julesinmontreal

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 29 September 2010 - 15:04 PM

Voir le messageRen, 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...



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP