CSS : centrer au milieu de l'écran

phelibre · 6 Décembre 2007

Hi,

Suite à mes # posts , j'ai réalisé mon site actuel en frameset ici en css & javascrit pour ouvrir mes créations façon zoom ...
Néanmoins j'ai un problème je ne sais pas comment faire afin que le corps de l'affichage se place automatiquement au centre du navigateur ?

voilà mon fichier css et corps de l'affichage est #page

body
{
background-color: black;
text-align: left;
margin: 0
}

#page
{
background-color : #000;
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 14px;
background-image: url(images/fondacceuil.png);
text-align: left;
visibility: visible;
// margin-top: 20px;
// margin-right: auto;
// margin-left: auto;
margin: auto;
position: relative;
width: 850px;
height: 600px
}

#tete
{
position: relative;
height: 39px
}

#menu
{
color: black;
position: relative;
background-image: url(images/barrebouton.png);
height: 29px;
text-align: right;
font-size: 10px;
line-height: 29px;
letter-spacing: 4px
}

a
{
color: black;
text-decoration: none
}

a:hover
{
color: white;
font-size: 1.25em;
font-weight: bold;
letter-spacing: 2px;
text-decoration: none
}

p
{
color: white;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 15px
}

#contenu
{
position: relative;
height: 472px
}
#surgalerie
{
position: relative;
background-image: url(images/surgalerie.png);
height: 47px
}

#choixgalerie
{
background-color: black;
position: relative;
width: 850px;
height: 305px;
overflow: auto
}

#sousgalerie
{
position: relative;
background-image: url(images/sousgalerie.png);
height: 120px
}

#bas
{
position: relative;
height: 10px
}

Anonyme · 6 Décembre 2007

C'est à cause des frames, il faut éviter d'utiliser les frames. Mais ça tu le sais déjà.

phelibre · 6 Décembre 2007

On c'est mal compris

avec les framsets le corps est affiché automatiquement au centre ... j'aimerai retrouver la même chose en mode css :zen:

hemelune · 7 Décembre 2007

Bloc de code:

body
{
background-color: black;
text-align: center; 
margin: 0
}

#page {
background-color : #000;
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 14px;
background-image: url(images/fondacceuil.png);
text-align: left;
margin-right: auto;
margin-left: auto;
width: 850px;
height: 600px;
}

#tete
{
height: 39px
}

#menu
{
color: black;
background-image: url(images/barrebouton.png);
height: 29px;
text-align: right;
font-size: 10px;
line-height: 29px;
letter-spacing: 4px
}

a
{
color: black;
text-decoration: none
}

a:hover
{
color: white;
font-size: 1.25em;
font-weight: bold;
letter-spacing: 2px;
text-decoration: none
}

p
{
color: white;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 15px
}

#contenu
{
height: 472px
}

#surgalerie
{
background-image: url(images/surgalerie.png);
height: 47px
}

#choixgalerie
{
background-color: black;
width: 850px;
height: 305px;
overflow: auto
}

#sousgalerie
{
background-image: url(images/sousgalerie.png);
height: 120px
}

#bas
{
height: 10px
}

J'ai apporté quelques corrections, mais j'aimerais bien voir la page html sans frameset pour mieux comprendre comment tu imbriques tes div ... car répondre à ta question comme ça c'est pas évident ...

phelibre · 10 Décembre 2007

Eh bien même avec les modif de phelibre.css la page s'affiche à gauche avec IE mais pas avec geeko (safari firefox) .... voilà l'index.html

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<link rel="stylesheet" href="phelibre.css"type="text/css"media="all"></link>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="DESCRIPTION" content="phelibre infographie mac Osx linux retouche freelance travaux photos,dessin peinture infographie retouche freelance">
<meta name="KEYWORDS" content="painter infographie graphisme photo peinture retouche freelance">
<meta name="GENERATOR" content="Mozilla [fr] (X11; U; Linux )">
<title>Phelibre Graphisme</title>

</head>

<body style="background-color: rgb(0, 0, 0)">
<div id="page">
<div id="tete">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="" onclick="window.open('impcartevisite.html','AFP','toolbar=0,directories=0,status=0,scrollbars=0,resizable=0,copyhistory=0,menubar=0,width=563,height=330'); return(false)"><img src="images/at11.png" alt="pour ne pas oublier" width="55" height="39" border="0"></a></td>
<td><img src="images/at12.png" alt="" width="140" height="39"></td>
<td><img src="images/at12.png" alt="" width="140" height="39"></td>
<td><img src="images/at14.png" alt="" width="100" height="39"></td>
<td><img src="images/at15.png" alt="" width="265" height="39"></td>
<td><img src="images/at16.png" alt="message" width="150" height="39"></td>
</tr>
</table>              

</div>
<div id="menu">
<a href="contact.html">Contact</a> | <a href="peinture.html">Galerie</a> | <a href="ressources.html">Ressources</a> | <a href="favoris.html">Favoris</a>&nbsp
</div>
<div id="contenu">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/at31.jpg" alt="" width="850" height="156" border="0"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/at41.jpg" alt="" width="850" height="156" border="0"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/at51.jpg" alt="" width="850" height="120" border="0"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/at61.jpg" alt="" width="100" height="40"></td>
<td background="images/at62.jpg" width="750" height="40"></td>
</tr>
</table>
</div>
<div id="bas">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/at71.png" alt="" width="435" height="15"></td>
<td><img src="images/at72.png" alt="" width="415" height="15"></td>
</tr>
</table>
</div>
</div>
</body>

</html>

phelibre · 12 Décembre 2007

C'est bon j'ai trouvé voilà ou était le problème :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
remplacé par :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

merci ...

Anonyme · 12 Décembre 2007

Hélas, ils sont tous les deux faux.

CSS : centrer au milieu de l'écran

phelibre

Membre actif

Anonyme

Invité

phelibre

Membre actif

hemelune

Membre actif

phelibre

Membre actif

phelibre

Membre actif

Anonyme

Invité

Sujets similaires