28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai une div (#content) avec en background une image mais celle-ci n'apparait pas sous firefox et safari mais apparait sous IE . Pour voir à quoi ça ressemble voir le lien en dessous, attention j'ai schématisé et ça peut faire un peu mal au yeux mais quand j'ai un soucis avec le css que je pratique en amateur c'est ce que je fait ^^

http://crazymoondrawer.free.fr/test/

Je voudrais juste que la couleur blanche apparaisse à droite ainsi que l'image en bas à droite.

et voici mon code css :


body {
	margin: 10px auto 20px;
	padding:0px;
	background: grey;
	font-family: "Geneva", Arial, Helvetica, sans-serif;
	font-size: 13px;  
	color: #000;
}

a:link { color:#999900; text-decoration:none;}
a:visited {color:#FF3300; text-decoration:none;}
a:hover {color:#9900FF; text-decoration:underline}


#content{
	width: 850px ;
	margin:auto;
	text-align:justify;
	background:white url(img/head.jpg) no-repeat bottom right;
}

#gauche {
	float:left;
	width:630px;
	margin:auto;
	font-size:1.1em;
	color:#000;
	background:red;
}

#text-main {
	margin:auto;
	padding:10px;
	background:pink;
	width:610px;	
}	

#deco-bt {
	margin:auto;
	background:green;
	width:610px;
	padding:20px 10px;
}	


#footer {
	width:830px;
	clear:both;
	margin: auto;
	padding: 10px;
	text-align:left;
	font-size:1.1em;
	color:#000;
	background:orange;
}

#footer a {
	text-decoration: none;
	color:#EF6724;
}

#footer a:hover {
	color:#EF6724;
	text-decoration: underline;
}


j'espère que j'ai été assez clair et merci d'avance
Modifié par Stok (15 Oct 2009 - 12:50)
sous firefox 3.5.3 et idem sous safari 4.0.2, du coup j'ai édité le premier essage pour que cela soit plus clair ^^ Smiley smile
Modifié par Stok (15 Oct 2009 - 12:51)
Modérateur
Hello,

À noter cette règle importante (...) :

* image de contnenu :

<img src="une_image.png" alt="description significative de l'image" width="50" height="50" />


* image de mise en forme (décoration/fioriture):

#une_div {
	background:url(une_image.png) no-repeat top left;
	
}


<<<EDIT
Pour comprendre la différence,

* je suis vendeur en décoration de Noël et je fais mon site :
<img src="article/image/girlande_électrique_ag4015.png" alt="décoration de Noël - guirlande électrique rouge" width="50" height="50" />


* Je suis un ami de untel et untel. Pour fêter un bon Noël avec mes amis, j'ai décidé d'exposer les photos des invités de la soirée de Noël :

#une_div {
	background:url(image/charte/guirlande_entete_haut_gauche.png) no-repeat top left;
	
}


Au fait, les photos de la soirée avec mes amis en html ou en css ?
EDIT;
Modifié par Nolem (15 Oct 2009 - 13:54)
Stock,

Vous voulez que l'image de la tete en fond sur toute la page (hormis le footer)?
Or:
- l'image est en background dans le div #content,
- ce div #content comprend lui même un div #gauche et un div #main,
- ces 2 derniers div ont un background (red et pink).
donc ces 2 derniers backgrounds vont venir "par dessus" le div #content.

ou voulez-vous avoir l'image à droite du texte?
Je voudrais que l'image apparaisse en bas à droite du texte comme cela est le cas dans IE8

http://forum.alsacreations.com/upload/19451-HCIE0801.png

A noter que l'image choisis ainsi que les couleurs de fonds ne sont que des exemples et que pour moi l'image de tête (qui n'est qu'un exemple) n'est pas là pour illustrer le texte mais pour décorer

Sinon Nolem je ne suis pas sur de saisir ce que tu as écris par rapport à mon problème.
Modérateur
Stok a écrit :

....
A noter que l'image choisis ainsi que les couleurs de fonds ne sont que des exemples et que pour moi l'image de tête (qui n'est qu'un exemple) n'est pas là pour illustrer le texte mais pour décorer

...


J'avais l'impression que tu te trompais.

Pour revenir à ton soucis, manque la propriété height à #content. Qui de tout façon ce n'est pas normal. Je n'ai pas vraiment vu ton code, mais je pense que tu as fait une pétouille en amont.
Je te propose de modifier tes marges et un div.
Le div #content OK, il te permet de positionner l'image une seule fois en bas à droite.
Une fois que ce div est défini.
Il faut veiller à ce que plus rien n'empiète sur cette image et que ce qui est au dessus reste en blanc. C'est bien çà?
C'est bien un div qui peut servir mais pas en flottant, en marge droite pour ne jamais recouvrir la partie droite du div #content (rappel l'image est background, pas en block)

Voici ce que je te propose à partir de ton code:
les marges sont ajustées et le div #gauche n'est plus en flottant

body
  {margin: 10px auto 20px auto; padding: 0px; background: grey; font-family: "Geneva", Arial, Helvetica, sans-serif; font-size: 13px; color: #000}
a:link
  {color:#999900; text-decoration:none;}
a:visited
  {color:#FF3300; text-decoration:none;}
a:hover 
  {color:#9900FF; text-decoration:underline}
#content
  {display: block; width: 850px; margin:auto; text-align:justify; background: white url("./img/tete.png") no-repeat bottom right}  
#gauche 
  {margin:0px 230px 0px 0px; font-size:1.1em; color:#000}  
#text-main
  {margin: 0px; padding:10px; background:pink;}      
#deco-bt
  {margin: 0px; background:green; padding:20px 10px; }       
#footer
  {width:830px;     clear:both;     margin: auto;     padding: 10px;     text-align:left;     font-size:1.1em;     color:#000;     background:orange; }
#footer a
  {text-decoration: none;     color:#EF6724; }
#footer a:hover {     color:#EF6724;     text-decoration: underline; } 


J'espère que cela répond à ta demande.
Tu pourras trouver plus d'info sur les tutoriels, en particulier comment faire des colonnes sans tableau.
Merci Sellig cela marche parfaitement, maintenant c'est vrai que je n'avais pas pensé à utilisé le margin et non pas le float. En fait si je comprends bien quand je met l'atribut float à mon div gauche cela perturbe l'affichage de mon div content ...

a écrit :
Pour revenir à ton soucis, manque la propriété height à #content. Qui de tout façon ce n'est pas normal. Je n'ai pas vraiment vu ton code, mais je pense que tu as fait une pétouille en amont.


Je ne pense pas que height soit obligatoire surtout que je voudrai que l'image apparaissent toujours en bas quelque soit la hauteur / longueur du texte
Stok

En résumé, pour que "çà flotte", il faut avoir qlq chose au même niveau qui mette en valeur le fait de flotter.
Or dans ton cas il n'y avait "rien", l'image est en background, donc pas au même niveau que le div qui "flotte".
De plus lorque qlq chose flotte l'alignement n'est pas conservé lorsque cette chose est dépassée. Je m'explique: si une image fait 100px de haut, si elle flotte à gauche d'un paragraphe texte, le texte commence à droite et dès que le navigateur a dépassé 100px de haut pour le paragraphe, à la permière ligne suivante il réécrit complètement à gauche, donc sous l'image. Toujours dans cet exemple, si tu change l'image pour en mettre une de 150px de haut, le navigateur, repositionne automatiquement le texte et recommence à gauche à la 1ère ligne après 150px.
Bonne suite.