28220 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage bancal sous Firefox....encore un!!!!

Hello à tous.....
Après avoir longuement cherché de l'aide sur ce forum, je pense avoir un code correct dans le fichier html et le css que j'utilise pour mon site. C'est aussi l'avis du certificateur w3c.
Cependant, si ma page s'affiche correctement sous Internet Explorer, elle est complètement en vrac sous Firefox.

Voici donc l'url de test de ma premiere page:

http://lgaspar.free.fr/mfr/mfr2/index2.html

Le code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MFR DE CROUZIT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="global">
<div class="leblocheader">
</div>
<div class="leblocmenu">
</div>
<div class="lebloccontenu"> 
<div class="lebloctitre">
      <p class="titre"><strong><font color="#FFFFFF">Toute l'&eacute;quipe de 
        la Maison Familiale Rurale de Crouzit vous souhaite la bienvenue sur son 
        site Internet.<br>
        <br>
        Un Etablissement scolaire priv&eacute; sous contrat avec le Minist&egrave;re 
        de l'Agriculture.<br>
        Une association loi 1901 au service de la formation par alternance.<br>
        <br>
        Bonne visite.</font></strong> </p>
    </div>
</div>
</div>
</body>
</html>


Et le fichier CSS:


body {
    margin: 0;
	font-family: verdana, arial, sans-serif;
	font-size: 75%;
	text-align:center;
	}

.global {
	width: 800px;
	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	padding:0px;
	text-align:left;
	}

.leblocheader {
	width:800px;
	height: 120px;
	background-image: url('images/indpart1.jpg');
	border: 0px;
	}
.arbre {
	}
.titresite {
	}
.leblocmenuheader {
		width: 800px;
	height: 0px;
	border-top: 0px;
	}
.leblocmenu {
	background-image: url('images/indpart2.jpg');
	border: 0px;
	margin-top:0px;
	width: 180px;
	height: 480px; 
	float:left;
	}
.lebloccontenu {
	background-image: url('images/indpart3.jpg');
	border: 0px;
	margin-top:0px;
	padding-top: 80px;
	padding-left: 130px;
	width: 620px;
	height: 480px; 
	float: right;
		}
.lebloctitre {
	border-bottom: 0px;
		height: 15px;
	}

.menutitre {
	text-align: left;
	font-weight: bold;
	margin-left:10px;
	}
.titre {
	text-align: left;
	font-weight: bold;
	margin-left:10px;
	}
.texte {
	text-align: left;
	height:340px;
	overflow:auto;
	padding-left:10px;
	padding-right:10px;
	}
a {
	color: #000000;
	text-decoration: none;
	}
a:hover {
	color: #000000;
	text-decoration: underline;
	}


Voila, si quelqu'un comprend ce qui se passe, merci de me faire signe, moi, j'ai passé la nuit la dessus, j'abandonne pour ce soir!
En espérant trouver la solution après une bonne nuit de sommeil!
Merci d'avance.
Modifié par BalooCantalou (09 Apr 2005 - 04:09)
bonjour,

Reveille toi tranquillement et corrige ceci,

.lebloccontenu {
background-image: url('images/indpart3.jpg');
border: 0px;
margin-top:0px;
width: 620px;
height: 480px;
float: right;
}


tu vois la différence ?

j'ai supprimer 
padding-top: 80px;
padding-left: 130px;


vu que tu met un float: right; les padding sont inutiles et en plus, tu mets un padding left a 130px alors que ton menu de gauche a un width de 180 px

amicalement,
Salut....et merci de ton aide!
En effet, c'est beaucoup mieux comme ca!
Mais j'avais mis ces deux "padding" pour décaler le texte....et effectivement, ca décalait toute la mise en page.

Donc, j'ai appliqué tes conseils, et ca marche, mais comment faire pour que mon texte vienne se placer plus bas et plus à droite?
je suppose que les mêmes balises "padding" devraient etre efficaces, mais il faut que je les applique seulement au texte.
je pense que la solution la plus facile serait de créer un 
.texteaccueil {
margin-top: ...px;
margin-left: ...px;
font-size: ...px;
color: #......;
}
 et le lancer dans la partie html apres la div du bloc titre
YES!!!!!

Ca marche impec! Bah dis-donc, moi qui débute depuis seulement 2 jours avec les css, je vais finir par regretter de pas m'y être mis plus tot!
En tous cas, merci encore pour ton aide, non seulement c'est exactement ce que je voulais, mais en plus j'ai tout compris!

Encore 3 jours et je deviens le meilleur dévelloppeur html/css........de ma rue!

MEGA THANKS pour ta gentillesse et ton efficacité, à charge de revanche.

P.S. En échange de ton coup de main, voici un ptit cadeau...
L'adresse d'un site ou tu trouveras la démo du groupe Tout Sourire, dans lequel je joue modestement de la basse. Profites-en, on vire les fichiers dans 3 jours pour les remplacer par une nouvelle démo, c'est collector!
http://dgaspar.free.fr/v3toutsourire.htm

@+...et n'hésite pas à me donner ton avis!
Modifié par BalooCantalou (09 Apr 2005 - 00:58)
de rien baloocantalou

met un petit [résolu] devant ton premier post

et le lien du groupe ne fonctionne pas Smiley langue


grillé par Raphaël Smiley edit Modifié par ganou66 (09 Apr 2005 - 01:01)[/edit]
Héhé, t'es arrivé un peu vite!!!!
J'ai édité mon précédent post...le lien doit marcher, maintenant. Non?

@+
Modifié par BalooCantalou (09 Apr 2005 - 04:54)
Sujet clos
Aller à