28221 sujets

CSS et mise en forme, CSS3

Probleme de mise en forme css

Bonjours à vous,
(oups j'ai cru lire html, Xhtml, css => dsl pour avoir poster aux movais endroit )
Alors voilà j'ai 2 petit problème de mise en page dans mon design :
*jai découper mon header en deux voici le code XHTML: 

<body>
<div id="global">
<div class="header01"><img src="images/header01.gif" alt="banniere"> </> 
 </div>
<div class="header02">
 </div>

Et celui du CSS: 
#global {
margin-left: auto;
margin-right: auto;
}

.header01 {
width: 100%;
height: 20%;
margin-bottom: 0px;
}

.header02 {
background-image:url(../images/header02.gif);
background-repeat: no-repeat;
margin-top: 0px;
padding: 0px;
width: 100%;
height: 110px;
}


Voilà donc: *il y a un espace entre mon header01 et mon header02 et je n'arrive pas à y remédier
*j'ai du mettre l'image de fond dans le div du header01 et non dans le css car sinon il ne s'affichait pas, pourquoi?
*Et enfin en lisant des articles sur ce site j'ai voulu que mon site soit le plus accesible possible et j'ai donc mis mes hauteur et largeur en % mais le height du header02 n'affichait que la moitié de l'image de fond, j'ai donc du le mettre en pixel pourquoi?

Smiley biggrin Bon cela fait beaucoup juste pour un header et j'ai l'impression que malgré les cours que j'ai lu je manque trop de pratique alors merci à ceux qui pourront m'aider
Modifié le 09 Jan 2005 - 00:08
lut LABvin13 Smiley cligne

en utilisant le selecteur universel:

*{margin:0;
padding:0;}
pour être sur que tout est bien à 0 au départ

en spécifiant un width et un height à "global"

et en utilisant au départ que des des couleurs en background pour voir comment se comporte tes blocs , tu devrait déjà avoir un petit peu moins de problème. Smiley cligne

écrit aussi un peu de texte dans tes blocs ça t'aideras a les situer

@+ Smiley cligne
Modifié le 09 Jan 2005 - 03:26
Administrateur
Salut,

Je déplace en Salon CSS Smiley cligne

Si tu as le temps et l'envie, je te conseille de parcourir la Méthodologie qui se trouve en post-it du salon CSS. Tu y trouveras des réponses à ta question Smiley smile
Smiley ohwell j'ai beau avoir lu et je n'ai pas encore trouver les réponses à mes questions.
Et meme pour le header j'ai regarder le tuto ou il est découpé en 2 mais je ne comprend pas la difference.
je suis vraiment un débutant Smiley langue
Alors voila je continue a chercher, mais les personnes qui pourront m'aider je les remercie.
Prenons par étape:
#global {
margin-left: auto;
margin-right: auto;
}

Si tu définis cet id avec ces deux propriétés de marge fixées à auto, c'est que tu dois en attendre un résultat précis. Ne serait-ce pas que tu souhaites centrer #global dans ta page ?
Modifié le 11 Jan 2005 - 22:26
ok, merci je vais lire ces pages qui m'ont l'air fort interesssante mais cela n'a pas resolu mon pb de header voila un ptit schéma:
http://img66.exs.cx/img66/9735/sanstitre24te.gif

donc voilà mon nouveau fichier Html
<body>
<div id="global">
<div id="header01"><img src="Animation/Site Metalogos/images/header01.gif" alt="banniere" />
 </div>
  <div id="header02"><img src="Animation/Site Metalogos/images/header02.gif" alt="banniere" />
    <p class="infobule">Ouverture du site</p>
	<p class="text01">Ouverture du site</p>
</div>


</body>
</html>

et mon CSS
html, body {
background-color: #566FEF;
font-family: Times New Roman, Times, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
}

#global {
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
}

#header01 {
width: 100%;
height: 100%;
margin-bottom: 0px;
}

#header02 {
background-image:url(Animation/Site Metalogos/images/header02.gif);
margin-top: 0px;
width: 100%;
height: 100%;
}

.infobule {
width: 100px;
height: 10px;
margin: 5px 0px 0px 0px;
left: 50px;
}

.texte01 {
width: 100px;
height: 10px;
margin: 5px 0px 0px 10px;
left: 100px;
}


Merci pour votre aide, euh oui j'ai changé d'avis par rapport à mon idéé de départ je poste ce message pour te répondre rapidement igor mais là mes bloc dans mon header02 ne sont pas bien positionné donc je vais lire le lien que u ma passé.
Modifié le 13 Jan 2005 - 00:01
Hum je doit vraiment mal cherché pour ne pas trouver Smiley smile
soit parceque je vois pas les sujet en rapport avec le mien.
Bon je vais continuer a chercher et profité du week-end pour lire et relire les cour en Css , les positionement etc....
Sujet clos
Aller à