28173 sujets

CSS et mise en forme, CSS3

Background étirable, div et iframe qui ne veulent pas bien cohabiter !

Bonjour,

J'ai essayé de suivre l'exemple d'alsacréations pour faire un arrière plan étirable. C'est pas que j'en veux un, mais j'ai une image à la base qui est trop petite, je voudrais juste pouvoir la mettre en fond en l'étirant (comme un fond d'écran de bureau).

Mais je n'y arrive pas. J'ai donc suivi l'exemple, mais faut qu'au dessus de cet arrière plan, je puisse mettre un div et une iframe et là c'est la cata, je n'y arrive pas du tout, tout ce que j'essaye ne marche jamais, du coup je viens demander un petit coup de main SVP.

Voilà je code de la page HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="fr">
	<HEAD>	
		<TITLE>Fiche clients</TITLE>
		<LINK href="ficheClient.css" rel="stylesheet" type="text/css">
		<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</HEAD>
	
	<BODY>
		<DIV id="corpsPage">
			<IMG id="arrierePlan" alt="" src="fond_bleu_bulles.gif" />
			<DIV id="searchClient">
				la
			</DIV>
			<IFRAME id="ficheClient" name="ficheClient" src="ficheClient.php"></IFRAME> 
		</DIV>
	</BODY>
</HTML>


Et le code css :

body
{
	text-align : center;
	margin:0;
	padding:0;
}

#corpsPage
{
	position: absolute;
}

#corpsPage img#arrierePlan
{
	width : 100%;
	height: 100%;
}

#corpsPage div#searchClient
{
	text-align : left;
	color: black;
	margin : 0 auto;
	width : 200px;
	margin-top : 50px;
	background-color : blue;
	position: absolute;

}

#corpsPage iframe#ficheClient
{
	text-align : left;
	margin-left : 10px;
	width : 700px;
	height : 600px;
	position: absolute;
}


Voilà quand je fais ça, aucune image s'affiche en fond, et tout est décalé d'une largeur d'écran vers la droite au moins.
Par contre si j'enlève le "position: absolute;" du conteneur et que je le met dans l'image, alors l'image s'affiche, avec les éléments dessus, mais encore d'un gros décalage vers la droite, et mon div contenant le text "la" ne fait plus que la largeur du "la" au lieu des 200px.

J'espère avoir été claire. Merci pour votre aide !
Modifié par poopsinou (27 Jun 2007 - 16:23)
Personne ne voit ?
Parce que j'arrive pas à trouver la solution.

J'ai IE7 (on sait jamais ça peut aider vu que sous Firefox ça fait pas la même chose, mais c'est pas bon non plus Smiley langue )
Hello,

poopsinou a écrit :
J'ai essayé de suivre l'exemple d'alsacréations pour faire un arrière plan étirable.

Pas forcément une bonne idée. Si l'exemple que tu as suivi est celui auquel je pense, c'est plus une expérimentation « pour voir » qu'une technique à utiliser sur un vrai site.

À ma connaissance, et hormis pour les sites entièrement en Flash, les arrière-plans étirables que l'on peut obtenir en HTML et CSS sont des bricolages à l'intérêt très limité. Mieux vaut les éviter.

poopsinou a écrit :
C'est pas que j'en veux un, mais j'ai une image à la base qui est trop petite, je voudrais juste pouvoir la mettre en fond en l'étirant (comme un fond d'écran de bureau).

Tu peux sans doute imaginer un autre moyen pour avoir un design correct sans avoir à étirer tes images de fond. Smiley cligne

Donc voilà, à ta place j'abandonnerais l'idée, et je ferais quelque chose de plus simple ou de plus pertinent au regard des contraintes techniques.

Ceci dit, à propos de ton code : tu utilises un Doctype HTML 4 Transitional, sans URL de la DTD, ce qui fera passer les navigateurs en mode Quirks (chacun interprète la page à sa sauce). Et ça n'est pas une bonne idée. Pour obtenir un rendu en mode standard (chaque navigateur tente de respecter les standards... avec plus ou moins de bonheur mais c'est déjà mieux), on utilisera le Doctype suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
C'est ce que je me suis dis aussi pour le fond. Me reste plus qu'à trouver un joli fond bleu assez neutre qui fait pas mal aux yeux (c'est pas gagné Smiley langue ).

Et sinon je savais pas pour le doctype, je vais changer.

Merci de ta réponse Smiley smile

EDIT : après avoir essayé de rajouter l'url dans le doctype, j'ai compris pourquoi elle n'y était pas !! C'est parce que si je la met, mon menu horizontal qui se trouve en haut de page (menu fait par quelqu'un d'autre que je suis obligé d'utiliser) est tout décalé !!
Modifié par poopsinou (27 Jun 2007 - 15:50)
poopsinou a écrit :
EDIT : après avoir essayé de rajouter l'url dans le doctype, j'ai compris pourquoi elle n'y était pas !! C'est parce que si je la met, mon menu horizontal qui se trouve en haut de page (menu fait par quelqu'un d'autre que je suis obligé d'utiliser) est tout décalé !!

Si à cause de ce menu tu es obligé de travailler en mode Quirks, c'est dommage. Je sais que pour ma part en mode Quirks je m'arrache un peu les cheveux. Smiley sweatdrop
(Enfin bon, c'est pas catastrophique mais quand même...)
Sujet clos
Aller à