28172 sujets

CSS et mise en forme, CSS3

[Resolu]Propriétés div qui ne fonctionnent pas sous firefox...

Bonjour à tous !

Un ptit nouveau sur ce forum mais qui je pense va passer du temps ici (me suis remis dans le métier Smiley smile )

Voila grosse galère, bug que je ne comprend absolument pas puisque je reste sur que mon code est correct.

Voila sous IE7 cela fonctionne parfaitement mais sous firefox, ça ne prend pas en compte du tout la mise en page...

Je vous mets ici mon code de ma page XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">

<div id="header">
Header
</div>
    
<div id="menu">
Menu
</div>
    
    <div id="gauche">
    Gauche
    </div> 
        
  	<div id="droite">
    Droite
    </div>
    
 		<div id="contenu">
        Contenu
  		</div>
        
<!-- footer -->         
<div id="footer">
Footer
</div>   
<!-- fin div page -->          
</div>

</body>
</html>


Et ma de ma feuille de style :

body {
	font-family: Verdana,Helvetica,Sans-Serif; 
	font-size: 18px;
	text-align: center; 
	margin: 0;
	padding: 0;
	color: #333333;
	}

<!-- Div principales (Header, contenu page, menu gauche et droite, centre et footer -->

#page {
	position: relative;
	max-width: 1000px;
	min-width: 766px;
	margin: 0 auto;
}

#header {
	height: 50px;
	background-color: #FFCCCC;
}

#gauche {
	position: absolute;
	left:0;
	width: 150px;
	background-color: #00CC66;
}

#droite {
	position: absolute;
	right:0;
	width: 150px;
	background-color: #0066FF;
}

#contenu {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #996699;
}

#footer {
	height: 30px;
	background-color: #9999CC;
}

<!-- Div menu principal -->

#menu {
	height: 30px;
	background-color: #CC33CC;
}


Merci de votre aide ! Smiley cligne
Modifié par Lexa (29 Jan 2009 - 12:05)
Hello et bienvenue Smiley smile

Sans regarder le code, quel est ton problème exactement ? As-tu une capture d'écran ou une page en ligne à proposer ?
Malheureusement je n'ai pas ça sous la main:

En fait j'en suis qu'au squelette du site... J'explique (enfin j'essaye Smiley lol )...

J'essaye de faire une page avec un header et un footer classique avec dans la page une div pour une colonne à gauche fixe, une pour le milieu et une pour la droite fixe le tout dans une div qui possède une largeur mini et maxi.

Le but étant d'avoir un bon affichage en 800x600 et que la largeur se limite à 1000px de large pour les plus grands écrans (pour le confort de lecture).

Sous IE7 cela s'affiche parfaitement mais sous Firefox mes différentes parties s'affichent comme si le css n'était pas pris en compte... Mes textes de repère sont les uns au dessus des autres et mes couleur de fond ne s'affichent pas...
Hello Smiley smile

En regardant le code fourni, le problème semble venir de ta façon de commenter ta feuille de styles, sur le fond c'est une très bonne idée, sur la forme...ce n'est pas encore ça Smiley cligne
Pour faire simple :

<!-- Commentaires "html"--> 
(ce sont des délimiteurs SGML[#blue]*[/#] spéciaux qui seront ignorés par l'analyseur
 lors de la visualisation )
/*Commentaires css*/

Plus d'info: http://www.yoyodesign.org/doc/w3c/css2/syndata.html#comments

* langage de description de structure de document -Standard Generalized Markup Language- dont html est l'application la plus connue.

Modifie ces commentaires et cela devrait résoudre ce petit soucis Smiley cligne

Cdt,
Sylvain
Ton erreur vient de la feuille de styles :

<!-- Div principales (Header, contenu page, menu gauche et droite, centre et footer -->

Les commentaires en CSS, c'est :
/* Commentaire CSS */

et non :
<!-- Commentaire HTML -->


Sinon je te conseille de regrouper #gauche, #droite et #contenu dans une <div> (#centre, par exemple), et de baser ton positionnement absolu par rapport à cette dernière (donc position:relative sur #centre et non sur#page). Et n'oublie pas les propriétés top / bottom quand tu utilises ce type de positionnement Smiley cligne

Jeter un coup d'œil sur les modèles de mise en page d'Alsacréations pourrait t'être utile.

A bientôt !
Si c'est ça, c'est extrêmement bête et je m'en excuse d'avance...

En plus, bien évidemment que d'habitude je fais des commentaires correctes en css (encore heureux..). Tellement concentré sur le code en lui même...

J'essaye de suite et merci !
Bien joué...

Je suis vert là...

Merci ! Smiley biggrin Smiley biggrin Smiley biggrin

Pour la peine je laisse mon erreur pour tous le monde !
Modifié par Lexa (29 Jan 2009 - 12:07)
BeliG a écrit :
Ton erreur vient de la feuille de styles :

<!-- Div principales 
(Header, contenu page, menu gauche et droite, centre et footer -->

Les commentaires en CSS, c'est :
/* Commentaire CSS */

et non :
<!-- Commentaire HTML -->



Je n'avais pas dû être suffisemment clair sans doute ? Smiley sweatdrop
6l20 a écrit :
Je n'avais pas dû être suffisemment clair sans doute ? Smiley sweatdrop

6l20
# 29 Jan 2009 - 12:02:25

BeliG
# 29 Jan 2009 - 12:02:52

Smiley cligne
Sujet clos
Aller à