[CSS - IE FF] IE bug affichage repeat y

Fermé
RoN. - 18 nov. 2006 à 14:27
 lets-be-loopy - 27 avril 2009 à 14:08
Bonjour à tous!

Avant de poster j'ai essayer de chercher si quelqu'un avait le meme probleme que moi et je me suis apercu qu'il y a beaucoup de probleme au niveau des feuilles de style entre ie et ff...

Donc en voila un de plus....

Je débute en css et html et c'est plutot décourageant de voir que dés ma premiere page qui est portant plutot vide il y a deja des problemes sous ie.

Rentrons dans le vif du sujet....

Voici l'url de mon site: http://benjamin.gonzva.free.fr

Sous firefox pas de probleme , sa ressemble à ce que je cherchais à faire.

Sous internet explorer :

-Les bordures droite et gauche de la partie centrale du site n'aparaisse pas.... (Bizard ! Ils aparaissent sur la partie du bas "copyright")
-Le copyright n'est pas centrer verticalement
-Les balises <BR> semblent être ignorer. En effet pas de saut de ligne avant .:: Accueil ::.

Vraiment étrange et décourageant.

J'attend votre soutiens

Merci d'avance !

SOURCES :

index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">
<head>
<title>Site personnel : GONZVA Benjamin.</title>
<?php 
require('meta.html'); 
?>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="top"></div>
<div id="body">
<div id="borduret"></div>
<div id="bordureb"></div>
<div id="bordurel"></div>
<div id="bordurer"></div>
<div id="cointl"></div>
<div id="cointr"></div>
<div id="coinbl"></div>
<div id="coinbr"></div>
<BR>
<h1>.:: Accueil ::.</h1>
<h2>Bienvenue sur mon site web.<h2>
<div id="cvhead">
CV HEAD
<div id="cvbody">CV BODY</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<?php 
require('bottom.html'); 
?>
</div>


</body>
</html>



meta.html
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Benjamin GONZVA">
<meta name="description" content="Site personnel">
<meta name="keywords" content="GONZVA,cv">


bottom.html
<div id="bottom">
<div id="borduret"></div>
<div id="bordureb"></div>
<div id="bordurel"></div>
<div id="bordurer"></div>
<div id="cointl"></div>
<div id="cointr"></div>
<div id="coinbl"></div>
<div id="coinbr"></div>
<p id="margedroite">© 2006 - GONZVA Benjamin</p>
</div>

style.css
* 
{  
font-family:verdana;
font-size:12pt;
color:white;
}

h1 
{ 
text-align:center;
font-size:26pt;
font-weight:800;
}

h2 
{ 
text-align:center;
font-size:22pt;
font-weight:600;
}

div#top
{ 
position:absolute;
top:20px;
left:5%;
width:90%; /* Largeur */
height:164px;
background-image:url(header.png);
background-repeat:no-repeat;
background-position:center center;
margin:0;
}

div#body
{ 
position:absolute;
top:204px;
left:5%;
width:90%;
background-color: #5b6870;
}

div#bottom
{
position:absolute;
bottom:-110px;
width:100%;
height:90px;
background-color:#5b6870;
font-size:8pt;
text-align:right;
line-height:70px;
}

div#borduret
{ 
position:absolute;
top:0px;
left:0px;
width:100%;
height:26px;
background: url(bordureh.png) repeat;
}

div#bordureb
{ 
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:26px;
background: url(bordureh.png) repeat;
}

div#bordurel
{ 
position:absolute;
top:0px;
left:0px;
width:26px;
height:100%;
background: url(bordurev.png) repeat;
}

div#bordurer
{ 
position:absolute;
top:0px;
right:0px;
width:26px;
height:100%;
background: url(bordurev.png) repeat;
}

div#cointl
{ 
position:absolute;
top:0px;
left:0px;
width:29px;
height:27px;
background: url(borduretl.png);
}

div#cointr
{ 
position:absolute;
top:0px;
right:0px;
width:27px;
height:29px;
background: url(borduretr.png);
}

div#coinbl
{ 
position:absolute;
bottom:0px;
left:0px;
width:27px;
height:29px;
background: url(bordurebl.png);
}

div#coinbr
{ 
position:absolute;
bottom:0px;
right:0px;
width:29px;
height:27px;
background: url(bordurebr.png);
}

p#margedroite
{
font-size:8pt;
margin-right:40px;
}

div#cvhead
{ 
position:absolute;
top:175px;
left:100px;
width:400px;
height:50px;
background-color: #ccdde5;
border-width:4px;
border-color:#7d888e;
border-style:solid; 
}

div#cvbody
{ 
position:absolute;
bottom:-265px;
left:-2px;
width:100%;
height:250px;
background-color: #ccdde5;
border-width:2px;
border-color:#7d888e;
border-style:dashed; 
}
A voir également:

3 réponses

Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 825
18 nov. 2006 à 14:37
Salut.

-Les bordures droite et gauche de la partie centrale du site n'aparaisse pas
Applique un z-index aux deux div qui les contiennent.
Ex :
div#bordure_gauche,div#bordure_droite{z-index:500}

-Le copyright n'est pas centrer verticalement
La je ne vois pas trop ce que tu veux dire.
Tu peux utiliser position:absolute a mon avis.

-Les balises <BR> semblent être ignorer. En effet pas de saut de ligne avant .:: Accueil ::.
Ecris plutôt :
<br />
Le mieux étant d'utiliser les margins et les paddins :
h1{padding-top:2em;}
applique une marge de deux hauteurs de ligne au titre (si c'est bien la balise h1)

Ca marche ?


EDIT :
Ta balise h2 est mal refermée (le deuxième tag devrait être </h2> et non <h2>)
Lorsque tu as besoin d'utiliser plusieurs divs avec le même id, utilise des class.
Chez moi le conteneur principal ne prend pas toute la place (la bordure du bas est dessus).
Pour ca tu peux appliquer un clear:both; au div qui contient la borudre du bas (div#bordureb)
1
Merci pour toutes ces informations....

Je vais tester tout ca dés que j'aurais un moment.
Ouai lol , le </h2> je suis trop bete!

Pour le copyright je parle de ce quil y a ecrit en bas. (c Benjamin GONZVA 2006) je vousdrais l'aligner verticalement dans le div#bottom.

J'ai essayer :

vertical-align:center;

sa ne fonctionnai pas...

J'ai donc essayer :

line-height:70px;

qui fonctionne sous firefox et non sous ie.....

MERCI ENCORE d'avoir pris le temps de t'etre attarder sur mon code.
0
Bonsoir,
J'ai cherché pratiquement toute la journée une solution à un problème qui me gène,je suis débutant en css et html je le sais mais c'est la première fois que j'ai ce problème.
Dans mon code css, j'utilise la balise <h1> pour définir un espace où sera affiché tout ce qui sera inscrit entre les balises <h1> et </h1> ce qui permettrait que le texte ecrit et les images affichées ne soient pas derrière le menu en CSS, j'ai décidé de garder le code CSS dans la page html elle-même, ainsi ce sera plus simple pour moi de modifier les deux en même temps.
Le problème est qu'à l'inverse d'Internet Explorer et d'Opera, Mozzilla Firefox, lui, n'effectue pas le positionnement voulu, voici le lien où le problème persiste: [url]http://hangyaku-no-nagai.xdir.fr/systeme.htm[/url].

et voici le code complet de la page:
<html>
<head>
<title>Hangyaku no Nagaï - Systèmes</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!-- 
body {
margin:15px 10px 15px 10px;
}
h1 {
font-family:comic sans ms, sans-serif;
font-size:70%;
color:gray;
background-color:transparent;
text-align:left;
Position: Absolute;
Top: 5cm; 
Left: 7cm;
}
h2 {
font-family:comic sans ms, sans-serif;
font-size:110%;
color:crimson;
background-color:transparent;
text-align:center;
}
h3 {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:white;
background-color:transparent;
text-align:left;
}
p {
font-family:comic sans ms, sans-serif;
font-size:90%;
color:white;
background-color:transparent;
text-align:center;
margin-left:5px;
margin-right:5px;
}
li {
font-family:comic sans ms, sans-serif;
font-size:90%;
color:red;
background-color:transparent;
text-align:left;
margin-left:10px;
margin-right:10px;
}
a:link {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:#696969;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:#696969;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:silver;
background-color:transparent;
text-decoration:none;
}
table {
border-color:silver;
border-style:outset;
border-width:2px;
}
td {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:silver;
text-align:center;
background-color:transparent;
border-color:#696969;
border-style:inset;
border-width:2px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: Absolute; 
top: 5cm;
left: 0,5cm;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #740000;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #454545;
}
#menu li a, #menu dt a {
color: black;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #440101;
}
-->
</style>
</head>
<body bgcolor="Black" text="Silver">
<center><img src="http://img172.imageshack.us/img172/2421/bannirery4.jpg" alt="Hangyaku no Nagaï"></center><br><br><br>
<dl id="menu">
		<dt onclick="javascript:montre();"><a href="accueil.htm">Accueil</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Présentation</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="projet.htm">Projet</a></li>
					<li><a href="histoire.htm">Histoire</a></li>
					<li><a href="perso.htm">Personnages</a></li>
					<li><a href="lieux.htm">Lieux</a></li>
					<li><a href="monstre.htm">Monstres</a></li>
					<li><a href="systeme.htm">Systèmes</a></li>
					<li><a href="quete.htm">Quètes secondaires</a></li>
				</ul>
			</dd>	
			
		<dt onclick="javascript:montre();"><a href="grenier.htm">Grenier</a></dt>
		
        <dt onclick="javascript:montre();"><a href="dl.htm">Telecharger</a></dt>
		 
		<dt onclick="javascript:montre();"><a href="http://hangyaku-no-nagai.grafbb.com">Forum</a></dt>
         
        <dt onclick="javascript:montre();"><a href="partenaires.htm">Partenaires</a></dt>		 
         
		<dt onclick="javascript:montre();"><a href="contact.htm">Nous contacter</a></dt>
</dl>
<h1><h2>Systèmes du jeux</h2><br><br>Vous voici sur la page des systèmes du jeu, vous vous en douterez, tous les systèmes ne seront pas présents sur cette page car tout simplement, ils n'ont pas tous étés réalisés, mais une bonne partie l'est déjà, descendez le long de la page pour les découvrir.<br><br><br>
<u>Custom Title System [CTS]:</u><br><br>
Ceci est un système d'écran-titre personnalisé qui a été créé à partir d'un script de Corbaque sans qui ce système n'aurait pas vu le jour dans notre jeux.<br><br>
<u>Exemple en image:</u><br><br>
<img src="images/menu-cts.jpg"><br><br>
<u>Custom Menu System [CMS]:</u><br><br>
Ceci est un système de menu personnalisé à la Final Fantasy X-2 dont le scirpteur est:CatchM.<br>
À partir de ce script que nous avons traduit et dont le graphisme a été totalement refait, nous avons pu d'ores et déjà naviguer dans un menu 50% customisé par nous puisque le code n'est pas de nous.<br><br>
<u>Exemple en image:</u><br><br>
<img src="images/menu.jpg"><br><br>
<u>La suite dans un instant:</u><br><br></h1>
</body>
</html>

Pourriez-vous m'aider à trouver un moyen pour que l'affichage soit le même entre Internet Explorer et Firefox?
0
lets-be-loopy
27 avril 2009 à 14:08
Salut !

Pour centrer un texte verticalement, le seul moyen est de mettre une hauteur égale à la line-height.

ex :

#madiv {
line-height:25px;
height:25px;
}

Et ton texte sera aligné verticalement dans une bande de 25 pixels de hauteur...

Autre chose : évite les balises <br />, elles ne servent qu'à revenir à la ligne dans un paragraphe <p>... pour espacer tes éléments, utilise du margin, padding et line-height !

Bon Courage !
0