Bonjour,
J'aimerais que mon bloc div #conteneur, soit centrer par rapport a la largeur de l'écran, et non le texte centrer, et que la largeur du bloc div #conteneur soit exact a la largeur que le contenu du bloc prend dans toute les circonstance (augmentation de la taille du texte, de la resolution etc.).
Donc avec un display:table sur le div #conteneur, #gauche, #droite
j'obtient l'effet desire sous Firefox,
une bidouille possible pour IE ? peut etre avec expression.
pour un exemple, j'ai mit en ligne une page test
http://www.all-game-event.com/events.php
code css :
code html :
*J'ai éditer pour avoir le code a jour
Modifié par sylvain5090 (07 Feb 2007 - 10:57)
J'aimerais que mon bloc div #conteneur, soit centrer par rapport a la largeur de l'écran, et non le texte centrer, et que la largeur du bloc div #conteneur soit exact a la largeur que le contenu du bloc prend dans toute les circonstance (augmentation de la taille du texte, de la resolution etc.).
Donc avec un display:table sur le div #conteneur, #gauche, #droite
j'obtient l'effet desire sous Firefox,
une bidouille possible pour IE ? peut etre avec expression.
pour un exemple, j'ai mit en ligne une page test
http://www.all-game-event.com/events.php
code css :
body {
font-family:Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 0;
margin-left:0px;
margin-right:0px; }
#header {
background-color: #ffffff;
text-align:center;
margin-top:20px;}
a.header{
color:black;}
img{
border:none;}
h1{
display:inline;
vertical-align:top;
line-height:60px;
margin-left:20px;
margin-bottom:0px; }
h4{
display:inline;
padding:0 0 0 84px;
margin-bottom:0px;
line-height:0px;}
#haut {
height: 30px;
background-color:#CCCCFF;}
#conteneur {
position:absolute;
border:solid 1px black;
margin-top:2%;
display:table;
margin:auto;
background:url('bgCalendrierEvent.jpg') repeat-x ;
background-color: #FFFFFF; }
p.membersInfos{
color:#ffffff;
background-color:#000000;
padding:5px 5px 5px 5px; }
a{
color:white;
text-decoration:none; }
a.menuMembres{
color:yellow;}
p.menu{
font-size:1.4em;
margin-left:5px;
margin-top:5px;
margin-bottom:5px;}
form{
margin-left:5px;
margin-bottom:-10px; }
#gauche {
float:left;
margin-top:20px;
margin-bottom:20px;
display:table;}
p.selectGauche{
margin-left:10px;
color:#ffffff;
font-size:1.3em;
margin-top:0px;
margin-bottom:10px;}
#droite {
float:left;
margin-top:20px;
margin-bottom:20px;
margin-left:20px;
display:table;}
p.selectDroite{
margin-left:0px;
color:#ffffff;
font-size:1.3em;
margin-top:0px;
margin-bottom:10px;}
#pied {
clear:both;
background-color: #ffffff;
text-align:center;
margin-bottom:10px;}
code html :
<body>
<div id="header">
<a class='header' href='index.php' title="Home page">
<img src="logo.jpg">
<h1>Online Role-Playing Events Manager</h1>
<br>
<h4>View all events planned for your favorites games
at the same place.
</h4>
</a><br><br>
</div>
<div id="conteneur">
<p class="membersInfos"> :
<a class="menuMembres" href="">Your Settings</a> /
<a class="menuMembres" href="">Edit your events</a> /
<a class="menuMembres" href="">Log off</a> /
</p>
<p class="menu">
<a href="">Guilds</a> -
<a href="">Games</a> -
<a href="">Templates</a>
</p>
<form name='Infos' action='events.php' method='post'>
<input type='hidden' name='date' value=''>
<input type='hidden' name='tabDate' value='Array'><br />
</form>
<div id="gauche" >
<p class="selectGauche">
<a href="" class="help" title=""> ? </a>
1) Select date(s)
</p>
</div>
</div>
<div id="droite">
<p class="selectDroite">
<a href="" class="help" title=""> ? </a>
2) Browse event list to see details
</p>
</div>
<div id="pied"></div>
</div>
</body>
*J'ai éditer pour avoir le code a jour
Modifié par sylvain5090 (07 Feb 2007 - 10:57)
