28172 sujets

CSS et mise en forme, CSS3

[Résolu] Page non collée - haut

Bonjour,

j'ai une petite marge de quelques pixels en haut de la page, alors que je souhaiterai qu'elle soit tout en haut, je ne comprends pas pourquoi, merci de m'éclairer Smiley smile

code css:

#page
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #FFFFFF;
	text-align: left;
	visibility: visible;
	margin-right: auto;
	margin-left: auto;
	margin-top= "0px";
	position: relative;
	width: 1100px
	}


#blocgauche
	{
	background-image:url(bordgauche.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	background-color: #f6f6b8;
	position: relative;
	width: 25%;
	height: 800px;
	float: left
	}

#bloccentre
	{
	background-color: #c9ebe3;
	position: relative;
	width: 43%;
	height: 800px;
	float: left;
	margin-left: 5px;
	line-height: 16px
	}


#blocdroite
	{
	background-image:url(borddroit.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	background-color: #f6c3f6;
	position: relative;
	width: 25%;
	height: 800px;
	float: left
	}

#boite8
	{
	background-color: #ccc;
	position: relative;
	padding: 10px;
	border-color: #666;
	border-width: 3px;
	border-style: double;
	clear: left
	}

#boite9
	{
	background-color: transparent;
	position: relative;
	padding: 20px;
	text-align: center
	}


code html :

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"
  <meta charset="UTF-8">		
  <title>preprod</title>

</head>

<body>
<div align="center">
			<div id="page">
				<div id="blocgauche">
				</div>
				<div id="bloccentre">
				texte
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				script adresse mail
				<br>
				image terre
	
				</div>

				<div id="blocdroite">
				</div>
				<div id="boite8">
					boite 8;<br>
					background-color: #cccccc; position: relative; padding: 10px; border-color: #666; border-width: 3px; border-style: double; clear: left 
				</div>
				<div id="boite9">
					boite 9;<br>
					Dans la boîte ci-dessus, 
					<strong>
						clear: left
					</strong>

sert à annuler l'effet côte-à-côte dû à la propriété flottante de la boîte précédente, et permet de s'assurer que cette dernière boîte vient se glisser en-dessous de la plus haute boîte qui la précède.
				</div>
			</div>
		</div>


</body>

</html>


merci !
Modifié par 6l20 (14 Jan 2014 - 20:45)
Bonsoir,

Merci de penser à baliser votre code dans vos messages (boutons de colorisation syntaxique sous le message) Smiley cligne

"Une erreur" dans votre CSS:
margin-top= "0px";

À remplacer par :
margin-top: 0;

Ou mieux :
#page {
  font-size: 11px; /* C'est surement trop petit comme taille */
  font-family: Verdana, Geneva, Arial, sans-serif;
  background: #FFF;
  text-align: left;
  margin: 0 auto;
  position: relative; /* Probablement pas utile */
  width: 1100px;
  }


Le positionnement relatif sur chacun de vos blocs n'a aucune utilité.
Il est préférable de placer la déclaration d'encodage en premier (juste après l'ouverture de la balise <head>).
La "div align center" ne sert strictement à rien, et n'est pas valide en HTML5.

Pour aller plus loin :
Guide de survie du positionnement CSS
Rendu par défaut des éléments HTML qui explique parfois certaines bizzareries Smiley cligne

Enfin, une page en ligne pour constater le problème rencontré et vous apporter une aide plus efficace n'est pas inutile...

Bon courage.
Merci beaucoup 6l20 d'avoir répondu c'est parfait !

je penserai au balisage et au lien la prochaine fois (suis nouveau Smiley confused )

++
Sujet clos
Aller à