[Résolu]Espace blanc incompréhensible

Question

Pages :

9 Oct 2006 à 09:25

(reprise du message précédent)

Merci pour l'astuce, je ne le savais pas.
Je viens de changer un peu mon code, j'ai mis l'image droite à droite dans mon corps blanc. Au niveau du placement horizontal, ça passe sans problème sous IE et sous FF, mais au niveau du placement horizontal, j'aurais souhaité que l'image se retrouve pile au dessus du corps.

Or, j'ai un décalage de quelques pixels entre l'image et le "top" du corps.
J'ai pourtant mis le CSS suivant :


#ImageDroite {

width : 150px;

float : right;

vertical-align:top;

}

J'ai essayé avec top, text-top, mais rien ne change...
Idem pour le titre du menu droite (mais là par contre sous IE il passe bien) mais sous FF, il a le même décalage que l'image de droite.. Ca doit avoir un rapport je présume...
De plus, le texte défilant ne fonctionne que sous IE apparemment..
voir ici : ICI
Avez-vous une idée?
D'avance, encore un tout grand merci Smiley smile

Modifié par arnaud_verlaine (09 Oct 2006 - 12:06)

ghost

9 Oct 2006 à 15:05

Salut,

Pour ton image, c'est le padding de ton bloc #corps qui te géne,

Pour ton menu droite, bon là c'est plus le "souk", voir le code, mais en gros tu utilise trop de <div> quand des balises spécialisées existent déjà, et je répete indente ton code tu y verras beaucoup plus clair.

Ton marquee sous FF ne passe pas !!


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >	
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>JP</title> 
   <meta name="TITLE" content="" />

   <meta name="ROBOTS" content="none" />
	<style type="text/css">	
body{
background:#F5F5F5;
font-family:Geneva, Verdana, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
color:#333333;
}
#Conteneur{
width: 950px;

margin: auto;

background-color:#DBDBDB;

overflow: hidden;
}
/*Banniere*/
#Banniere{

width: 950px;

height: 135px;

background : #fff;

}

#menu {
overflow: hidden;
float : left;
width:170px;
padding-left:0px;
margin-top: 0px;
padding: 0px;
padding-bottom: 20px;
background-color:#DBDBDB;
font-family:Geneva, Verdana, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
font-weight:bold;
color:#333333;
margin-bottom: 0;
}



#menu ul{
list-style-type: none; /* pas de puces */ 
margin:0;
}



#menu li a { /* les "a" des "li" dans "#menu" */
display:block;
margin: 0px; /* espace entre les menus */
text-align:center;
height:20px;
color: #000;
line-height: 20px;
text-decoration: none;
list-style-type: none;
}

#menu li a:hover { /* les "a" des "li" dans "#menu" */
background-color:#666666;
color:#ffffff;
}

#ImageDroite {

width : 150px;
top: 0;
float : right;
vertical-align:top;
margin-left: 10px;
}

#Corps {
width : 570px;
margin: 0;
float: left;	
background-color:#ffffff;
}

#Corps p {
margin-left: 10px;
text-align: justify;
}

/* Definition ASAP Dans Qui sommes-nous? */

.Definition_ASAP{

background-color:#F5F5F5;

border:#DBDBDB 1px dotted;

width:390px;

}

/* Liste Objectifs */

.Liste_Objectifs{

background-color:#F5F5F5;

border:#DBDBDB 1px dotted;

width:390px;

}

/* Liste Contact */

.Liste_Contact{

background-color:#F5F5F5;

border:#DBDBDB 1px dotted;

width:260px;

}

#MenuDroite {
width : 210px;
background-color:#DBDBDB;
overflow: hidden;

float:left;

}

.LigneHorizontaleGrise{
height:20px;
width:950px;
background-color:#666666;
border-bottom:#FFFFFF 3px solid;
border-top:#FFFFFF 3px solid;
clear: both;
/* Ecriture */
color:#ffffff;
text-align:center;
line-height: 20px;
vertical-align:baseline;
}

a.Lien_Contact_Ligne_Grise:link{

color:#ffffff;

text-align:center;

line-height: 20px;

vertical-align:baseline;

text-decoration:underline;
}
a.Lien_Contact_Ligne_Grise:hover{

text-decoration:none;

}

.LienINFOTEK{
height:20px;
width:950px;
background-color:#F5F5F5;
clear: both;
/* Ecriture */
color:#666666;
text-align:center;
line-height: 20px;
vertical-align:baseline;
}
.LienINFOTEK a:hover{
text-decoration:none;
}

/* TEXTE DEFILANT */




#Texte_Defilant {
width:210px;
text-align:center;
}

#Texte_Defilant h3{
color:#ffffff;
line-height: 20px;
background-color:#666666;
padding: 0;
margin: 0;
width: 100%;

border-bottom:#ffffff 1px solid;

}
a.Lien_Texte_Defilant {

color:#666666;
display: block;
text-decoration:none;
text-align:center;
margin: 10px;
}
a.Lien_Texte_Defilant:hover{

text-decoration:underline;

}

/* Partie LIENS CONTACT */

a.Lien_Contact {

color:#238FCD;

text-decoration:underline;

}
a.Lien_Contact:hover{

text-decoration:none;

}

.spacer{
clear: both;
}
	</style>

</head>

<body>
 
<div id="Conteneur"><div id="Banniere"><img src="banner.jpg" alt="Bienvenue sur le site de l'A.S.A.P" /></div><div class="LigneHorizontaleGrise"></div>
<div id="menu">
  <ul id="menu">
   	<li> </li>

	<li><a href="index.php?Rubrique=QuiSommesNous">QUI SOMMES NOUS ?</a></li>
	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>
	<li><a href="index.php?Rubrique=Objectifs">OBJECTIFS</a></li>
	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>
	<li><a href="index.php?Rubrique=Moyens">MOYENS</a></li>
	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>
	<li><a href="#">AGENDA</a></li>

	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>
    <li><a href="#">ANNONCES</a></li>
	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>
	<li><a href="#">ZONE MEMBRES</a></li>
	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>
	<li><a href="#">COMMENT ADHERER</a></li>
	<li><div align=center><img src="LigneMenu.gif" border="0" /></div></li>

	<li><a href="index.php?Rubrique=Contact">CONTACT</a></li>
  </ul>
</div><div id="Corps"><img src="Titre.gif" id="ImageDroite" />
<p> </p>
<p>A.S.A.P. asbl</p>
<p>ASSOCIATION DES SERVICES AMBULANCIERS PROFESSIONNELS.</p>
<p>Union profesionnelle reconnue sous le n°7457 auprès du Ministrère Fédéral de l'Emploi et du Travail.</p>
<p>Siège social : Rue de Chiny, 12 à 6821 LACUISINE.</p>
<p>L'A.S.A.P est une association patronale belge défendant les intérêts de la profession d'ambulancier tout en préservant l'intérêt du patient que ce soit dans le cadre de l'Aide Médicale Urgente (AMU) ou dans le cadre du Transport Medico-Sanitaire (TMS) urgent ou non.</p>

<p> </p>
<p> </p>

</div>

<div id="MenuDroite">

  <div id="Texte_Defilant">
<h3> NEWS</h3>
<MARQUEE behavior="scroll" 
align="center" 
direction="up" 
height="100"
scrollamount="2"
scrolldelay="1"
onmouseover='this.stop()'
onmouseout='this.start()'>
<a href="#" class="Lien_Texte_Defilant"> Venez vite visitez notre nouveau site web</a>

</MARQUEE>
  </div>
</div>


<div class="LigneHorizontaleGrise">A.S.A.P - Siège social : Rue de Chiny, 12 - 6821 Lacuisine - Tél : - Fax : - e-mail : <a href="mailto:contact@asap-ambulance.be" class="Lien_Contact_Ligne_Grise">contact@asap-ambulance.be</a></div><div class="LienINFOTEK">Site web conçu et réalisé par <b><a href="http://www.infotek.be" class="LienINFOTEK">INFOTEK</a></b></div></div></body>


</html>

arnaud_verlaine

9 Oct 2006 à 17:46

Merci pour ton aide.
En effet, c'était le padding qui me génait, j'ai réglé le problème.
J'ai aéré mon code, c'est mieux en effet, tu as raison.
Pour le menu de droite, c'était un margin à 0 qu'il fallait que je mettre pour FF.
Pour le marquee, oui je sais bien, c'est bizarre j'ai fait un site où ça passait, je vais y regarder parce que je ne vois pas l'erreur
Smiley edit

Voilà pour le marquee qui était une balise propriétaire de crosoft, mais qui ne l'est plus, j'ai seulement remplacé ceci :


width="100%" height="100%"

par ceci :


style="width:100%;height:100%;"

Fallait le savoir hein...

[/edit] Smiley biggol

Modifié par arnaud_verlaine (09 Oct 2006 - 18:10)

Pages :

Sujet clos

CSS et mise en forme, CSS3

[Résolu]Espace blanc incompréhensible