5568 sujets

Sémantique web et HTML

[Résolu] Je n'arrive pas a mettr un background-color sur un div

Pages :
Smiley bawling Smiley bawling Smiley bawling Smiley bawling Désolé pour le titre .... Je ne comprend pas mon probleme !
voila voila allez voir à ICI ; hébergement ifrance donc bon faites pas attention à la pub etc.. c'est juste pour tester Smiley confus
je suis super fatigué ça fait longtemps que je suis sur un problème aussi basique ..
Il ya un div fixed qui vous suit a la trace lors du scroll.. il est en z-index: 1 et la ou ya le texte c'est du z-index: 0 le div qui contient les deux parties de texte en bas c'est du z-index: 2 et backgroundcolor #FFFFFF
RÉSULTAT
le div passe au dessus du premier texte
le div passe au dessous du deuxieme texte
mais le deuxieme texte na pas de couleur de fond donc c'est transparent donc on voit le le div un peu !!
résultat espéré
le div passe au dessus du premier texte
le div passe complètement au dessous du deuxième texte
Désolé s jai écris comme un bourrin mais jsuis super fatigué
merciii Smiley eek
Modifié par titoinou (03 Nov 2006 - 17:56)

<div style="position: absolute; top: 0px; left: 392px; right: 0px; bottom: 0px; width: 376px; height: inherit;">
Texte à droite aligné a gauche  PLEIN DE FOIS Texte à droit
...
</div>


Qu'est-ce qui vous retiens de rajouter background-color à la propriété style?
Modifié par GeorgesM (03 Nov 2006 - 13:24)
c bon tkt tu peu me tutoyer Smiley cligne
ba voila en fait quand je dis que j en é marre de ce problème c'est parce que jai essayé beaucoup de chose, a vrai dire tout ..
mais je vais réessayer peut-être cela va marcher
En fait je ne ve pas du tout que le fond du texte soit blanc vu ke sinon cela ne va pas TOUT me colorier en blanc je veux juste que le fond du div soit blanc

bon allez j essaye je te tiens au courant
merchiiii Smiley smile
bon ba voila cela marche pas et le div qui contient les deux div qui contiennet le texte a la propriété background-color: #FFFFFF
ci joint le code source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Saluuut</title>
<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
<style type="text/css" media="screen">
#position_menu {
	position: relative;
	height: auto;
	width: 64px;
	top: auto;
	left: 704px;
	z-index: 1
}

div#menu, div#menu_up, div#menu_down {
	position: fixed;
	width: 64px;
	z-index: 1;
	line-height: 0px;
	left: auto;
	background-repeat: repeat
}
</style>
</head>
<body>

<div style="width: 768px; height: auto; margin-left: auto; margin-right: auto">

<div id="position_menu">
	<div id="menu_up" style="background-image: url(menu_up.gif); top: 0px; height: 16px"></div>
	<div id="menu" style="background-image: url(menu_back.gif); top: 16px; height: auto">
		<center>
			<img alt="salut" src="salut.gif" />
		</center>
	</div>
	<div id="menu_down" style="background-image: url(menu_down.gif); top: 112px; height: 16px"></div>
</div>

<font style="z-index: 0">
	TEXTE NORMAL TEXTE NORMAL
</font>

<div style="background-color: #FFFFFF; position: relative; width: 768px; height: auto; z-index: 2">
		<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 376px; height: inherit; text-align: right">
			Texte a gauche aligné à droite  [langue]
		</div>
		<div style="position: absolute; top: 0px; left: 392px; right: 0px; bottom: 0px; width: 376px; height: inherit">
				Texte à droite aligné a gauche  [langue]
		</div>
</div>

</div>
</body>
</html>

PS:ne pas oublier qu'il faut mettr assez de caractère (dans le premier texte et le deuxieme Smiley cligne ) pour que la page soit scrollable et donc admirer sie cela marche
Modifié par titoinou (03 Nov 2006 - 13:39)
Pour y voir plus clair il faudrait mettre tous tes style dans une feuille à part, là il y en a partout, dans le fichier externe, dans le head, en ligne.
voila jai allegé et mis tout dans le css
il ny a plus qu'une image, rouge que vous trouverez a cette addresse
http://titoinou.ifrance.com/essai/salut.gif et la page http://titoinou.ifrance.com/essai/salut.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Saluuut</title>
<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
<style type="text/css" media="screen">
#position_menu {
	position: relative;
	height: auto;
	width: 32px;
	top: auto;
	left: 640px;
	z-index: 1
}

div#menu {
	position: fixed;
	width: 32px;
	z-index: 1;
	left: auto
}

#conteneurdivs {
	background-color: #FFF;
	position: relative;
	width: 768px;
	height: auto;
	z-index: 2
}

#divgauche, #divdroite {
	border-color: #000;
	top: 0px;
	right: 0px;
	bottom: 0px
}

#divgauche {
	position: absolute;
	left: 0px;
	width: 376px;
	height: inherit;
	text-align: right
}

#divdroite {
	position: absolute;
	left: 392px;
	width: 376px;
	height: inherit;
	text-align: left
}

</style>
</head>
<body>
<div style="width: 768px; height: auto; margin-left: auto; margin-right: auto">

<div id="position_menu">
	<div id="menu">
		<img alt="salut" src="salut.gif" />
	</div>
</div>

TEXTE NORMAL

<div id="conteneurdivs">
		<div id="divgauche">
			Texte a gauche aligné à droite  [langue]
		</div>
		<div id="divdroite">
			Texte à droite aligné a gauche  [langue]
		</div>
</div>

</div>
</body>
</html>
Bon. J'obtient l'effet en modifiant comme ça : 


#conteneurdivs {
	position :relative;
	right:0;
	width: 768px;
	z-index: 2
}

#divgauche, #divdroite {
	background-color:white;
	width: 49%;
	border-color: #000;
}

#divgauche {
	float:left;
	text-align: right:
}

#divdroite {
	float:right;
	text-align: left
}


Les position absolute ne semblent pas indispensable. Le height inhérit ne fonctionne pas.

Si ça peux vous, pardon tu, t'aider...
CA MARCHE merciiiiiiiiiiiiiii !!!!!!!!!! en fait il fallait juste changer #fff en white merciiiiiiii (et aussi merci pour lastuce du float que je ne connaissait pas)
Smiley smile Smiley smile Smiley smile
oups..
jai un problème avec ta technique.. c'est qu'on ne peut choisir sa propre couleure !! est ce que le #FFFF80 existe ? c'est du bleu foncé en anglais blue navy il me sembl ..
Smiley decu rgb 0 0 128
Modifié par titoinou (03 Nov 2006 - 15:14)
titoinou a écrit :

( désolé si ma remarque ta dérangé Smiley cligne )


padutout padutout padutout...

a écrit :

jai un problème avec ta technique.. c'est qu'on ne peut choisir sa propre couleure !! est ce que le #FFFF80 existe ? c'est du bleu foncé en anglais blue navy il me sembl ..


Oui, on peut choisir, soit un mot clé (white, black, navy, teal), soit un codage sur trois caractères #abc, ou 6 caractères #f54321, ou rgb(255,128,64).
Administrateur
titoinou a écrit :
c bon tkt tu peu me tutoyer Smiley cligne
ba voila en fait quand je dis que j en é marre de ce problème c'est parce que jai essayé beaucoup de chose, a vrai dire tout ..
mais je vais réessayer peut-être cela va marcher
En fait je ne ve pas du tout que le fond du texte soit blanc vu ke sinon cela ne va pas TOUT me colorier en blanc je veux juste que le fond du div soit blanc

bon allez j essaye je te tiens au courant
merchiiii Smiley smile

Hello,

Voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Merci d'avance.
désolé
normalement je m'applique mais la je suis à cran !
pour répondre à GeorgesM euh.. bah en fait le problème c'est que cela ne marchait pas avec #FFFFFF ...
je suis encore plus à cran vu que mon problème n'est résout que sur une page d'essai, version allégée de mon plus gros problème.. pas résolu Smiley bawling Smiley bawling
HTML
	<div class="bgcolor" style="position: relative; width: 768px; height: auto; z-index: 2">
		<div style="width: 376px; float: left; text-align: right">
			<div id="compteur" style="position: relative; top: 0px; left: 0px; width: 256px; height: 24"></div>
			<?php
					include("php/compteur.php");
			?>
			<font class="lightfont">
				Compteur
			</font>
		</div>
		<div style="width: 376px; float: right; text-align: left">
			<font class="lightfont" style="line-height: 50%">
				<span id="date2">
					<?php
						include("php/date2.php");
					?>
				</span>
			</font>
		</div>
	</div>

CSS
.bgcolor {
	background-color: rgb(204,204,204)
}

PS : je suis vraiment désespéré .. peut-être la solution serait-elle de créé un autre div qui lui occupe 768px; et qui se trouve ici et qui est rempli de tel couleur ..
Modifié par titoinou (03 Nov 2006 - 15:53)
petite image pour illustrer..
édit par igor: merci d'utiliser l'option vignette pour présenter des images sur le forum pour ne pas le déformer
Modifié par Igor (03 Nov 2006 - 17:10)
titoinou a écrit :
désolé
normalement je m'applique mais la je suis à cran !
pour répondre à GeorgesM euh.. bah en fait le problème c'est que cela ne marchait pas avec #FFFFFF ...
je suis encore plus à cran vu que mon problème n'est résout que sur une page d'essai, version allégée de mon plus gros problème.. pas résolu Smiley bawling Smiley bawling


Il suffit de faire une sieste, ou une bonne nuit de repos puis de reprendre au calme le code et l'orthographe. Smiley zzzz Smiley cligne
Modifié par Igor (03 Nov 2006 - 17:15)
-_- loool
le problème c'est que ce problème est vraiment des plus simple je ne comprend pas pourquoi je m'attarde toujours sur quelquechose de simple !
Pages :
Sujet clos
Aller à