Page 1 sur 1

Probleme CSS

Posté : 20 nov. 2011, 19:41
par besoin_daide
Bonjour,
j'aurais besoin de votre aide a propos de mon site web.
C'est tout simple, entre le haut de ma page(tout en haut) et mon premier bloc(menu,banniere, ce que vous voulez)j'ai un espace d'environ 10px(environ) que je n'arrive pas enlever,meme apres avoir tester mon code css par petit bout...
help?

Re: Probleme CSS

Posté : 20 nov. 2011, 22:08
par Ryle
Est-ce que les attributs margin et padding de ta balise body sont bien à 0 ?
Idem pour les marges supérieures de ton entête ?
Qu'y a t il entre ton entete et ton body ?

Avec un p'tit bout de code ce sera plus facile :) (pas besoin de toute ta page, juste le css et le html concernés :))

Re: Probleme CSS

Posté : 21 nov. 2011, 23:24
par Aureusms
ryle à raison avec duc ode c'est plus facile.
Si tu utilises firefoc, ajoute l'excellent addon firebug. Il y a en dedans un outil permettant au survole de savoir qui est qui est de reconnaitre les CSS incriminés.

Sinon essayes toujours cela :
body {
margin:0;
}
En effet, le body a toujours des marges par défaut.

Re: Probleme CSS

Posté : 24 nov. 2011, 00:11
par besoin_daide
ok

voila le code css((seulement le necessaire ;) ):

Code : Tout sélectionner

body { width:98%; margin: auto; background-repeat:no-repeat; /*margin-bottom:10px; margin-top:3px;*/ background-color:rgb(101,87,77);} #en_tete { width:992px; height: 350px; background-image:url("images/baniere.png"); background-repeat: no-repeat; margin:auto; } #all { width:98%; margin:auto; border-left:3px dotted rgb(246,217,140); border-right:3px dotted rgb(246,217,140); border-bottom:3px dotted rgb(246,217,140); -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background: -moz-linear-gradient(top, #b68d4c 30%, #FCFCFC 52%, #FCFAF7 87%, #c19e67 95%); }
}

et mes pages
[html]<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


[html]<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>~ Anime-Jap | Accueil ~</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Page d'accueil" href="design.css" />
   </head>
 
   <body>
 

       <!-- L'en-tête -->


	<?php include("en_tete.php");?>
	   
       <!-- Les menus -->
<div id="all">

	<?php include("menus.php");?>

	   
	   <!-- Le corps -->

       <div id="corps">
          
           
               	<h2 class="h2_edit">Editorial du webmaster</h2>
<img class="im_edit" alt="editorial de kaze" src="images/edit.jpg"/><p>Bienvenue sur Anime-Jap ! Le contenu de ce site sera essentiellement centré sur le
streaming. Les mangas que vous trouverez ici seront pour la plupart en <strong>VOSTFR</strong> car je pense que vous êtes d'accord avec moi, les
animes en version original sont bien meilleurs :).Vous pourrez y suivre, entre autres, les aventures de Naruto, One Piece, Bleach, Fairy Tail...
Sur Anime-Jap, vous pourrez également partager vos créations (dessins..)et vos avis sur les animes grâce à notre <a href="forum.php">forum</a> ! Alors venez jeter un coup d'oeil et bonne visite !</p>
  
				<h2 id="anc_news">Les nouveautés</h2>



<!--img-->

	  </div>


        <!-- Le pied de page -->
 
	<?php include("pied_de_page.php");?>
 </div>

   </body>

voyez directement ce que ca fait ;) : http://www.anime-jap.fr

ah dernière question :) : en html(ou php) savez vous quel code faut il mettre pour ouvrir une page dans une nouvelle fenetre aux dimensions choisies

Re: Probleme CSS

Posté : 24 nov. 2011, 23:57
par Aureusms
C'est là, sous tes yeux ....

Code : Tout sélectionner

body { width:98%; margin: auto; background-repeat:no-repeat; /*margin-bottom:10px; margin-top:3px;*/ background-color:rgb(101,87,77);}
Ton problème vient de "Margin : auto;"
"Margin : auto;" reviens à écrire :
margin : auto auto auto auto ;

margin s'utilise ainsi :
margin : margeHaute margeDroite margeBasse margeGauche;

Ce qui te donnerai si tu veux tout utiliser :
margin : 3px auto 10px auto;

De même :
margin : 3px 10px;
reviens à écrire :
margin : 3px 10px 3px 10px;

Pour revenir à ton cas, mettre "margin: auto;" donne la valeur "auto" à la marge haute (margin-top). Les navigateurs n'interprètent pas margin-top: auto; (ni margin-bottom: auto;) et l'ignorent car (à ma connaissance) "auto" n'est disponible que pour les marges Doite et gauche. Ainsi, dans ton cas les navigateurs n'interprètent pas la valeur et mettent le margin-top par défaut de body à savoir 10px;

Code : Tout sélectionner

body { width:98%; margin: 0 auto; background-repeat:no-repeat; /*margin-bottom:10px; margin-top:3px;*/ background-color:rgb(101,87,77);}
Je déconseille cependant de mettre un width à body mais ce n'est pas interdit. Rappelle toi juste que tu l'as mis...
Si c'est pour centrer une page met une div en dessous avec un width et un margin: 0 auto;