28173 sujets

CSS et mise en forme, CSS3

[resolu]Code super simple, ok sur IE mais pas sur FF, comprends pas...

Bonjour a tous,

je fais une petite page temporaire pour mon travail, pour mettre du contenu obligatoire en ligne avant l'arrivée du site complet.
donc un truc tres simple, mais la ca ne passe pas sous FF et je ne vois pas pourquoi Smiley sweatdrop
sous IE la backgroud de mes div titre et contenu passe bien mais pas sous FF, testez le code pour vous en rendre compte...

un peu d'aide svp Smiley ravi 

<html>
<head>

<style type="text/css">

	#body {
		background: #D4D3BE;
	}
	#page {
		position: absolute;
		width: 616px;
		margin-left: -308px;
		left: 50%;
		height: 320px;
		margin-top: -160px;
		top: 50%;
		border: 0px;
		padding: 0px;
	}
	#titre {
		position: absolute;
		top: 0px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		width: 611px;
		height: 60 px;
		background: #ffffff;
	}
	#contenu {
		position: absolute;
		top: 60px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		width: 611px;
		height: 260 px;
		background: #A70632;
	}
	.font {
		font-family: Times, verdana, sans-serif ;
		font-weight : bold;
		color : #ffffff;
		margin: 0px;
		padding: 0px;
		position: absolute;
	}
	.fonttitre {
		font-family: PRAXIS, verdana, sans-serif;
		font-weight: bold;
		color: #A70632;
		margin: 0px;
		padding: 0px;
		position: absolute;
	}
</style>

<script type="text/javascript">
	function DropMenu() {
			menu = document.jump.menu.options[document.jump.menu.selectedIndex].value;
			var iframeDiv = document.getElementById("iframe");
			iframeDiv.src = menu;
	} 
</script>

</head>

<body id="body">


	<div id="page">
		<div id="titre">
			<img src="logo.jpg" style="position: absolute; top: 0px; left: 0px;"/>
			<span class="fonttitre" style="top: 30px; left: 265px;">
				Produits souffrés des roches
			</span>
		</div>

		<div id="contenu">
			<span class="font" style="top: 10px; left: 15px;">
				Choose a language :
			</span> 
			<div class="font" style="top: 10px; left: 160px;">
				<form name="jump" class="form">
					<select name="menu" onChange="DropMenu();">
						<option value="fds/dan.html">Danish</option>
						<option value="fds/dut.html">Dutch</option>
						<option value="fds/eng.html">English</option>
						<option value="fds/fin.html">Finnish</option>
						<option value="fds/fre.html" SELECTED>french</option>
						<option value="fds/ger.html">German</option>
						<option value="fds/ita.html">Italian</option>
						<option value="fds/nor.html">Norwegian</option>
						<option value="fds/por.html">Portuguese</option>
						<option value="fds/spa.html">Spanish</option>
						<option value="fds/swe.html">Swedish</option>
					</select>
				</form>
			</div>
			<div class="font" style="top: 32px; left: 0px;">
				<iframe src="fds/fre.html" frameborder="0" name="iframe" id="iframe" width="490" height="225">
				</iframe>
			</div>
		</div>
	</div>


</body>
</html>

Modifié par titus.sensei (19 Apr 2007 - 14:10)
un petit up messieurs dames !

je pars en congers demain, donc faut que finisse vite Smiley confused si je veux pas avoir a choisir entre mes congers et ma place Smiley langue
Modifié par titus.sensei (19 Apr 2007 - 13:31)
Salut,

Bon, ton code pourrait être nettement amélioré (respect de la sémantique, simplification de la CSS, utilisation plus parcimonieuse de position: absolute) mais puisque tu es pressé par le temps :

Il ne faut pas mettre d'espace entre les valeurs et les unités dans ta CSS, comme tu as fait pour spécifier les hauteurs de #titre et #contenu.
mouarf la honte Smiley confused

j'avais pas vu, et j'ai passé le code a un validateur et il n'a rien vu non plus Smiley ohwell

merci Asumbaa !

néanmoins j'ai le reste de l'apres midi pour peaufinner, voir la semaine de mon retour, donc je suis a l'ecoute de tous conseils pour améliorer ma syntaxe !
(suis autodidacte, donc je prends de mauvaises habitudes Smiley cligne )

merci

edit: j'ai mis resolu mais je reste dans le coin au cas ou tu aurais le temps pour les petits conseils Smiley cligne
Modifié par titus.sensei (19 Apr 2007 - 14:13)
Je voudrais pas faire le pénible, mais ici ça fonctionne pareil sous IE7, Opera et FF 2... avec espaces... Smiley smile

@+,

JF
FF 2.0.0.3 ca ne fonctionnait pas...
mais c'est resolu sans espace Smiley rolleyes

a part l'utilisation de relative plutot que d'absolute, vous pouvez me conseiller quoi pour ameliorer tout ca ?
Sujet clos
Aller à