28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai effectué une mise en page classique titre/menu/contenu par CSS au moyen de <div id=...>

Tout marche très bien, mais l'attribut text-align: justify contenu dans Body refuse de mettre le texte du contenu en justify sous Firefox 2 alors que sous IE6 il le fait... je comprend pas d'où vient le problème, alors si vous pouviez m'aider.

Merci.

Code :

body {
	background-color: #000000;
	font-family: Verdana, Arial;
	color: #E78B2A;
	text-align: justify;
	font-size: 9pt;
}
#titre {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
}
#menu {
	width: 145px;
	height: auto;
	position: absolute;
	top: 100px;
	left: 0px;
	text-align: left;
}
#menuh {
	position: relative;
	height: 25px;
	top: 0px;
	left: 0px;
	background-image: url(_images/menuh.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
}
#menuc {
	position: relative;
	top: 0px;
	left: 0px;
	padding-left: 12px;
	padding-right: 12px;
	background-image: url(_images/menuc.jpg);
	background-repeat: repeat-y;
	background-position: top;
}
#menub {
	position: relative;
	height: 25px;
	top: 0px;
	left: 0px;
	background-image: url(_images/menub.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
#contenu {
	width: auto;
	height: auto;
	position: absolute;
	top: 100px;
	left: 145px;
	padding: 15px;
}


<html>
<head>
	<title>JDR Blackmoon - La lune Noire</title>
	<link rel="stylesheet" type="text/css" href="bmstyle.css" />
</head>
<body>

<div id="titre"><?php include("titre.html"); ?></div>

<div id="menu">
	<div id="menuh"><br /></div>
	<div id="menuc"><?php include("menu.html"); ?></div>
	<div id="menub"><br /></div>
</div>

<div id="contenu">
 
il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire il était un petit navire 



</div>

</body>
</html>
Bonjour,

Ton bloc #contenu est en absolute (pourquoi?) n'a pas de dimension, se sera donc difficile de le justifier ... Smiley cligne
ghost a écrit :
Bonjour,

Ton bloc #contenu est en absolute (pourquoi?) n'a pas de dimension, se sera donc difficile de le justifier ... Smiley cligne


Il est en absolu car il doit se trouver sous le bloc #titre et à droite du bloc #menu (qui contient les blocs #menuh #menuc et #menub). Le bloc menu devant lui-même être sous le bloc titre :

| Titre |
---------------
menu | contenu
|

Il n'a en effet pas de dimension car ce bloc doit prendre la largeur restante de la fenêtre et la longueur dont le contenu à besoin et donc le texte devrait se justifier par rapport à la limite de la fenêtre du navigateur où il effectue justement un retour à la ligne automatiquement... sous IE il le fait, mais pas sous Firefox.

Si je fixe une largeur, je vais me retrouver avec une barre de défilement horizontale sous certaines résolution non ?
Re,

Si tu places menu en float left et contenu dans le flux avec un margin-left égal au menu non?
Bonsoir,

Dans le code HTML cité, je ne vois pas de Doctype. Est-ce une suppression volontaire « pour simplifier », ou bien n'y a-t-il vraiment pas de Doctype à la page en question ?

Sans Doctype, chaque navigateur interprète la page à sa sauce. Pour ma part, je refuse de débuguer ce genre de page. Trop de prise de tête pour pas grand chose.

Sinon, qu'est-ce que ça donne en appliquant un text-align: justify directement au bloc voulu ?
ghost a écrit :
Re,

Si tu places menu en float left et contenu dans le flux avec un margin-left égal au menu non?


Euh... le but c'est de pouvoir avoir que des positions relative ? Car là je vois pas trop en quoi le fait d'avoir le menu en float me permettra d'avoir le texte du contenu en justify...

Florent V.
Le doctype est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En appliquant le justify directement dans le bloc #contenu, j'ai le même problème.

Edit :
En mettant tous les blocs en position relative et le menu en float, le justify fonctionne sous Firefox... je comprend vraiment pas pourquoi...
Par contre les liens de mon menu ne marche plus (peu plus cliquer dessus, c'est comme si c'était que du texte Smiley ohwell )
Modifié par Shara (26 May 2007 - 22:26)
Shara a écrit :
Edit :
En mettant tous les blocs en position relative et le menu en float, le justify fonctionne sous Firefox... je comprend vraiment pas pourquoi...
Par contre les liens de mon menu ne marche plus (peu plus cliquer dessus, c'est comme si c'était que du texte Smiley ohwell )

On pourrait voir la page ? Ça sera plus simple pour se prononcer...
Même en supprimant tous les position: relative (à priori tous inutiles) et les propriétés associées (left et top), div#contenu hérite bien du text-align: justify de body. Du moins avec Firefox 2.

On peut voir la page dans l'état qui ne marche pas ?

PS : est-ce que ça ne pourrait pas être un problème de cache : feuille de style CSS sans text-align: justify mis en cache par le navigateur, et par la suite les modifications de la feuille de style ne seraient pas prises en compte.
Modifié par Florent V. (27 May 2007 - 20:30)
Au passage : l'image d'en-tête porte des informations qui ne seront accessibles ni aux navigateurs textuels ou lecteurs d'écrans, ni aux moteurs de recherche. De même, si pour n'importe qu'elle autre raison l'image ne peut pas être chargée ou n'est volontairement pas chargée, il peut être utile d'avoir à la place un texte alternatif pertinent.

Actuellement, le texte alternatif est « titre.jpg ». Mais je pense que c'est temporaire... Smiley cligne
Euh, non là le text-align fonctionne (depuis que j'ai retiré les position absolue)... mais les liens disposés dans le menu ne fonctionne plus.

Par contre en suivant ton conseil (retiré toutes les positions relative), c'est revenu. Smiley lol

Seulement je comprend pas pourquoi Smiley confus

Pour ce qui est du titre, c'est l'image actuelle du site que j'ai mise pour test. Elle sera sans doute modifiée en partie et en effet, le texte alternatif est temporaire. Pour le moment je tente de faire fonctionner correctement le template graphique et ensuite je m'occuperais du contenu déjà existant (je veux en somme refaire en partie le design du site). Smiley cligne