28221 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Sur mon site : http://www2.serveur4u.com/risk/portfolio/creations.html

Entre le menu et le contenu et aussi entre le contenu et le pied de page ( footer ), dans explorer tout va bien, mais sur Firefox, il y a un espace. Pouvez vous m'aider ? Soit corriger mes codes, soit me dire le code a rajouter ? Merci d 'avance

voici mes codes

creations.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Pignon Thomas PortFolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<Style type="text/css">
A:link {text-decoration: none;color:black} 
A:visited{text-decoration:none;color:black} 
A:Hover{text-decoration:none;color:#FFB800} 
</style> 

</head>
<!-- Ci-dessous le design "par défaut" du site -->
<link rel="stylesheet" media="screen" type="text/css" title="Portfolio" href="portfolio.css" />

<body>

<div id="haut_de_page">

<!-- Ici on mettra en haut de la page une bete image -->
</div>

<div id="header">

<!-- Ici on mettra la bannière -->
</div>

<div id="sub_menu">

<!-- Ici on mettra la barre du sub_menu -->
</div>

<div id="menu">

<a href="#"><img src="boutons/accueil.jpg" /></a><img src="decoupes/separation_menu.jpg" />
<a href="#"><img src="boutons/creations.jpg" /></a><img src="decoupes/separation_menu.jpg" />
<a href="#"><img src="boutons/profil.jpg" /></a><img src="decoupes/separation_menu.jpg" />
<a href="#"><img src="boutons/tribune.jpg" /></a><img src="decoupes/separation_menu.jpg" />
<a href="#"><img src="boutons/liens.jpg" /></a><img src="decoupes/separation_menu.jpg" />
<a href="#"><img src="boutons/contacts.jpg" /></a>
</div>
<!-- Ici on mettra le menu -->
</div>

<div id="sous_menu">

<!-- Ici on mettra la barre du sous_menu -->
</div>

<div id="corps">
<div class="creations_centre"><a href="http://www2.serveur4u.com/risk/portfolio" /><img src="creations/portfolio.jpg" width="206" height="165" class="carton" alt="" /></a> 
       <span class="titre">Site :</span>  www.thomaspignon.com<br  />
       <span class="titre">Date :</span> Février 2005<br />
  <span class="titre">Programmes utilisés :</span> Photoshop 7.0.1 ( Graphisme ) / Notepad++ ( Code )<br />
  <span class="titre">Nom :</span> Portfolio > Thomas<br />
  <span class="titre">Site :</span><br />
 </div>
</div>








<div id="bas_de_page">

<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
</div>       
</body>
</html>


portfolio.css
body
{
width: 727px;
margin: auto; /* Pour centrer notre page */
background-image: url("decoupes/fond.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc [langue] */
}

a, a:link, a:active, a:visited {
 color: #5D90A1; 
 text-decoration: none; 
 border: 0px;
} 
a:hover {
 color: #546B72; 
 text-decoration: none; 
 border: 0px;
}
a img
{
border: none;
}


/* Le Haut de page */

#haut_de_page
{
width: 727px;
height: 21px;
background-image: url("decoupes/dessus.jpg");
background-repeat: no-repeat;
}

/* le header */

#header
{
width: 727px;
height: 116px;
background-image: url("decoupes/header.jpg");
background-repeat: no-repeat;
}

/* sub_menu */

#sub_menu
{
width: 727px;
height: 1px;
background-image: url("decoupes/sub_menu.jpg");
background-repeat: no-repeat;
}

/* menu */

#menu
{
width: 727px;
height: 22px;
background-image: url("decoupes/menu_fond.jpg");
background-repeat: no-repeat;
font-size:0;
}

#menu {
text-align: center
}
#menu img {
border:0
}




/* sous_menu */

#sous_menu
{
width: 727px;
height: 1px;
background-image: url("decoupes/sous_menu.jpg");
background-repeat: no-repeat;
}

/* corps */

#corps
{
font-family: Verdana;

text-align: Justify;
color: #696969;
width: 727px;
height: 500px;
background-image: url("decoupes/corps_fond.jpg");
background-repeat: repeat;
padding: 0;
font-size:12px;
}
.carton {
 float: left;
 padding: 0;
 margin: 0px 5px 0px 0px;

}

.creations_centre {
 font-size: 13px;
 padding: 10px;
 background-color: #D1D1D1;
 border-left: 1px solid #AEAEAE;
 border-right: 1px solid #AEAEAE;
 border-top: 1px solid #AEAEAE;
 border-bottom: 1px solid #AEAEAE;
 margin-left:24px; 
 margin-right:24px; 
 margin-top:9px; 
 margin-bottom:8px;
 height:405px;
}
.titre {
font-family: Verdana;
color: #F67F00;
font-size: 11px;

}

.transparent {
font-family: verdana;
color: #D1D1D1;
font-size: 11px;
}



.creations {
font-family: Verdana;
color: #696969

}

.an_d {
 margin: 0;
 padding: 0;
 float: right;
 text-align: right;
}

.corps2 {
background-image: url("pages/index.jpg");
width: 727px;
height: 446px;
}

#news 
{
 width:570px;
 height:102px;
 padding-left:109px;
 display: block;
 background-image: url("decoupes/news.jpg");
}

.separa {
 height:8px;
}

.news_haut {
 height:5px;
 background-image: url("decoupes/separation.jpg");
 background-repeat: no-repeat;
 padding: 0;
 display: block;
}

.content_news {
 height:104px;
 padding-left:109px
 display: block;
 
}

.news {
 height:104px;
 background-image: url("decoupes/news.jpg");
 padding: 0
}

.edito {
 height:104px;
 background-image: url("decoupes/edito.jpg");
 padding: 0
}


/* bas_de_page */

#bas_de_page
{
width: 727px;
height: 21px;
background-image: url("decoupes/bas_de_page.jpg");
background-repeat: no-repeat;
}


Merci d'avance
Salut,

Ce sont les marges hautes et basses de tes div de la classe .creations_centre que tu vois. A toi de rajouter du padding dans le conteneur, ou de mettre ces marges à 0 pour qu'on ne les voie plus.

NB : Fais ta page sous Firefox, ça t'évitera ce genre de désagréments Smiley confus

Conseils en rab :
1) Remplace ton fond.jpg par un background : #ccc, un fond monochrome n'a pas besoin d'une image pour se faire
2) Tu pourrais grandement optimiser le nombre et le poids de tes images
Merci de ta réponse.

a écrit :
NB : Fais ta page sous Firefox, ça t'évitera ce genre de désagréments


Je souhaiterais qu'il soit compatible pour tous les navigateurs..

Et lorsque je ne me tiens qu'a firefox, c'est IE qui fait des siennes...

lol

Conseils en rab :
1) Remplace ton fond.jpg par un background : #ccc, un fond monochrome n'a pas besoin d'une image pour se faire
2) Tu pourrais grandement optimiser le nombre et le poids de tes images
[/code]

Ce n'est pas un fond monochrome, sur le coté tu peux apercevoir deux "petites marges" et elle fond partie de ce background.

Mais je vais tester tout ça, merci !!!
Tiens, petite parenthèse, dans ton document, il y'a une DTD XHTML1.1, pourtant le Content-Type est text/html, ce qui est incorrect. Remplace la DTD par la DTD XHTML 1.0 Strict Smiley cligne
J'ai modifié mais le marge est plus grand sur IE que sur Firefox, comme ça se fait ?

<div id="corps">
 <div class="sup_creations"></div>
 <div class="creations_centre"><a href="http://www2.serveur4u.com/risk/portfolio" /><img src="creations/portfolio.jpg" width="206" height="165" class="carton" alt="" /></a> 
        <span class="titre">Site :</span>  www.thomaspignon.com<br  />
        <span class="titre">Date :</span> Février 2005<br />
		 <span class="titre">Programmes utilisés :</span> Photoshop 7.0.1 / Notepad++<br />
		 <span class="titre">Nom :</span> Portfolio > Thomas<br />
		 <span class="titre">Pour qui ? :</span> Moi, Thomas<br />
 </div>
 <div class="creations_centre"><a href="http://www.serix.be" /><img src="creations/serix.jpg" width="206" height="165" class="carton" alt="" /></a> 
        <span class="titre">Site :</span>  www.serix.be<br  />
        <span class="titre">Date :</span> Juillet 2005<br />
		 <span class="titre">Programmes utilisés :</span> Photoshop 7.0.1 / Flash<br />
		 <span class="titre">Nom :</span> Serix - Theme Principal<br />
		 <span class="titre">Pour qui ? :</span> Serix<br />
		 <span class="titre">Travail avec :</span> Mathieu Pignon ( Code )<br />
		 <span class="titre">Autre :</span> Mon frère Mathieu a fait tous les codes, moi le graphisme. Les codes sont nettement mieux fait que le graphisme mais c'était mes débuts [smile]<br />
 </div>
 <div class="creations_centre"><a href="#" /><img src="creations/vide.jpg" width="206" height="165" class="carton" alt="" /></a> 
        <span class="titre">Site :</span>  www.thomaspignon.com<br  />
        <span class="titre">Date :</span> Février 2005<br />
		 <span class="titre">Programmes utilisés :</span> Photoshop 7.0.1 / Notepad++<br />
		 <span class="titre">Nom :</span> Portfolio > Thomas<br />
		 <span class="titre">Pour qui ? :</span> Moi, Thomas<br />
 </div>
 <div class="creations_centre"><a href="#" /><img src="creations/vide.jpg" width="206" height="165" class="carton" alt="" /></a> 
        <span class="titre">Site :</span>  www.thomaspignon.com<br  />
        <span class="titre">Date :</span> Février 2005<br />
		 <span class="titre">Programmes utilisés :</span> Photoshop 7.0.1 / Notepad++<br />
		 <span class="titre">Nom :</span> Portfolio > Thomas<br />
		 <span class="titre">Pour qui ? :</span> Moi, Thomas<br />
 </div>
 <div class="creations_centre"><a href="#" /><img src="creations/vide.jpg" width="206" height="165" class="carton" alt="" /></a> 
        <span class="titre">Site :</span>  www.thomaspignon.com<br  />
        <span class="titre">Date :</span> Février 2005<br />
		 <span class="titre">Programmes utilisés :</span> Photoshop 7.0.1 / Notepad++<br />
		 <span class="titre">Nom :</span> Portfolio > Thomas<br />
		 <span class="titre">Pour qui ? :</span> Moi, Thomas<br />
 </div>
		
</div>


CSS
.sup_creations {
  padding: 0px;
  margin-left:0px; 
  margin-right:0px; 
  margin-top:0px; 
  margin-bottom:0px;
  height:8px;
  margin: 0;
  padding: 0;
  display: block;
  
}

.creations_centre {
  font-size: 13px;
  padding: 10px;
  background-color: #D1D1D1;
  border-left: 1px solid #AEAEAE;
  border-right: 1px solid #AEAEAE;
  border-top: 1px solid #AEAEAE;
  border-bottom: 1px solid #AEAEAE;
  margin-left:24px; 
  margin-right:24px; 
  margin-top:0px; 
  margin-bottom:0px;
  height:165px;
}


Quelqu'un a une idée ?

###Edit: j'ai oublié de mettre l'adresse du site : http://www2.serveur4u.com/risk/portfolio/creations.html
Modifié le 11 Feb 2005 - 09:56
Ca va les amis Smiley smile j'ai trouvé !!!

Il suffisait de mettre ca :

<div class="sup_creations"><img src="img/separation.jpg" width="*" height="8" alt="" class="an_g" /></div>


Pour ceux qui auront le meme prob Smiley smile

Allé merci à vous, bonne journée ...
Si c'est résolu, merci de rajouter un tag résolu dans le titre de ton sujet en éditant ton message. Profites-en pour trouver un titre plus évocateur également Smiley cligne