18041 sujets

Questions générales et questions de débutants

Centrer une page ie avec un css

Bonjour à tous,

J'essaie de faire en sorte que ma page soit centré horizontalement sous internet explorer 7 mais rien n'y fait

J'ai une page index qui appel la feuille de style ; tous fonctionne sauf le centrage de ma page.

voici le bout de code qui s'occupe de la page si quelqu'un peut m'aider.


div#global {float: middle;
                height: 100%;
          	width: 760px;
          	padding: 0 10px;
          	margin: 0 auto;
                position: relative;
                background: url(../img/global_rose.png) center repeat-y;}


D'avance merci.
Salut,

Comment peux tu espérer qu'on puisse t'aider avec si peu d'informations...
Il n'y a même pas le code html lié à ce bout de code css, et le reste de la feuille de style peut être incriminée, donc il serait important de voir les deux.

A toi de nous aider pour qu'on puise t'aider à notre tour. Smiley cligne
Hello Smiley smile

Tu peux faire flotter une boite à gauche ou à droite, mais pas au milieu (float:middle n'existe pas Smiley cligne ).

Normalement, fixer une largeur (width:XXXpx;) et des marges automatiques (margin:0 auto;) suffisent à centrer une boite horizontalement...

Le problème doit venir d'ailleurs, as-tu une page en ligne à proposer ?
alors voila le code


la page index

<?php
/******************************************************************************/
/*                          XXXXXXXXXXXXXXXX                                  */
/*                            23/01/08                                        */
/******************************************************************************/   
if (isset($_GET['couleur'])){
            if( $_GET['couleur']=='vert_pastel') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
            elseif( $_GET['couleur']=='mauve') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
            elseif( $_GET['couleur']=='bleu') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
            elseif( $_GET['couleur']=='saumon') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
            elseif( $_GET['couleur']=='lie_de_vin') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
            elseif( $_GET['couleur']=='turquoise') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';} 
            elseif( $_GET['couleur']=='orange') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
            elseif( $_GET['couleur']=='rose') {echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_'.$_GET['couleur'].'.css" />';}
}else{
    echo '<link rel="stylesheet" type="text/css" href="./monsite/css/accueil_rose.css" />';
}
?>

<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>monsite</title>
	</head>
	<body>
		<div id="global">
			<div id="header">
				<h1>monsite</h1>
			</div>
			<div id="center">
				<div id="content">
					<?php
          if (isset($_GET['couleur'])){
            if( $_GET['couleur']=='vert_pastel') {}
            elseif( $_GET['couleur']=='mauve') {}
            elseif( $_GET['couleur']=='bleu') {}
            elseif( $_GET['couleur']=='saumon') {}
            elseif( $_GET['couleur']=='lie_de_vin') {}
            elseif( $_GET['couleur']=='turquoise') {} 
            elseif( $_GET['couleur']=='orange') {}
            elseif( $_GET['couleur']=='rose') {include_once('./monsite/inc/enregistrement.php');}
          }else{
              include_once('./lmonsite/inc/enregistrement.php');
          }
          ?>
				</div>
				<div id="sidebar">
					<ul id="menu">
            <li><a href="index.php?couleur=vert_pastel" title="Les actualités">Actus</a></li>
						<li><a href="index.php?couleur=mauve" title="Les vidéos">Mes vidéos</a></li>
						<li><a href="index.php?couleur=bleu" title="Les bandes sons">Mes sons</a></li>
						<li><a href="index.php?couleur=turquoise" title="Les photos">Mes photos</a></li>
						<li><a href="index.php?couleur=saumon" title="La construction">Ma maison</a></li>
						<li><a href="index.php?couleur=lie_de_vin" title="La famille">Ma famille</a></li>
						<li><a href="index.php?couleur=orange" title="Mes cadeaux">Mes cadeaux</a></li>
						<li><a href="index.php?couleur=rose" title="Se connecter">Se connecter</a></li>
					</ul>
				</div>
			</div>
			<div id="footer">
				<p> </p>
			</div>
		</div>
	</body>
</html>


une des feuille de style

/*==============================================================================
================================================================================
================================================================================
                        La mise en forme de la page
================================================================================
================================================================================
==============================================================================*/
html, body {height: 100%;
          	margin: 0;
          	background: #ddd url(img/html.png);}

div#global {float: middle;
            height: 100%;
          	width: 760px;
          	padding: 0 10px;
          	margin: 0 auto;
            position: relative;
            background: url(../img/global_rose.png) center repeat-y;}

div#header {background: #f86adf url(../img/header.jpg) no-repeat;
          	color: #fff;
          	height: 201px;
          	position: relative;
          	margin-left: 0px;
            margin-right: 0px;
            width: 750px;
            font: 90% "Stripes and bubbles", sans-serif;}
          	
div#header h1 {margin: 0;
            	 position: absolute;
            	 bottom: 10px;
            	 left: 30px;
            	 font: 3em Stripes and bubbles, serif;}
            	 
div#center {padding-bottom: 50px; 
	          overflow: auto;}
	          
div#footer {position: bottom;
          	width: 750px;
          	background: #f86adf url(../img/footer.png) repeat-x;
          	color: #fff;
            margin-left: 0px;
            margin-right: 0px;}
          	
div#footer p {margin: 2px -50;
	            font-size: 0.9em;}
	            
div#content {float: left;
             height: 100%;
             width: 70%;
             margin-left: 0px;
             margin-right: 0px;
             margin-bottom: 0px;}
             
div#content h2 {padding-left: px;
              	background: #fff url(../img/titre.png) left center no-repeat;
              	color: #8f7db9;}
              	
div#content h3 {color: #c00;
	              }
	              
div#sidebar {float: right;
	           width: 200px;}
	           
div#sidebar h3, div#footer p, div#sidebar p  {padding: 0 10px;} 	 
          	           	 
/*==============================================================================
================================================================================
================================================================================
                        La mise en forme du texte
================================================================================
================================================================================
==============================================================================*/
ul#menu {margin-left: 10px;
         padding: 0;
         list-style: none;}
         
ul#menu li a {display: block;
            	height: 30px;
            	line-height: 30px;
            	background: url(../img/fond_lien.png) no-repeat left top;
            	padding-left: 35px;
            	margin: 2px 0;
            	border-bottom: 1px solid #f86adf;}
            	
ul#menu li a:hover { background-position: left bottom;}

ul#menu li a {color: #8f7db9;
            	font: small-caps 1.1em/30px Georgia,serif;
            	text-decoration: none;}      
            	
ul#menu li a:hover {color: #c30;}

a {color: #6c0;
	 font-weight: bold;}
	 
a:hover {color: #c00;}
Re,

Euh... et le Doctype ?

EDIT : Comme je te l'ai précisé dans mon précédent post, le float:middle ne sert à rien...
Modifié par BeliG (09 Mar 2008 - 18:33)
Absence de Doctype qui va bien = mode de rendu «Quirks» = pas de centrage horizontal avec les marges automatiques. CQFD.

On pourra faire une recherche sur le mode Quirks et le mode Standard (sur le Web, dans les tutoriels Alsacréations, etc.), cela devrait être instructif. Smiley cligne

Et effectivement, float: middle n'existe pas (pas plus que float: center ou autre valeur inventée. Les seules valeurs possibles pour la propriété float en CSS 2.1 sont: "left", "right" et "none".
Modifié par Florent V. (09 Mar 2008 - 18:54)
je te propose ce code, il marche sous internet explorer et firefox. Smiley cligne
Enleve le flottement et margin-left = ta largueur divisé par 2. 

div#global {
	width: 760px;
	margin-left: -380px;
	position: relative;
	left: 50%;
	height: 100%;
             padding:... 
             background:...
}
body {
	margin: 0px;
	padding: 0px;
}


fanny
Modifié par fanny742 (12 Mar 2008 - 23:45)
Sujet clos
Aller à