Meilleure façon de mettre en œuvre des pages Web «Post Card Sized»

Si je voulais créer une page Web avec du contenu sur la taille d'une carte postale, comment pourrais-je le positionner à l'écran?Meilleure façon de mettre en œuvre des pages Web «Post Card Sized»

Horizontalement n'est pas un problème (margins auto); Cependant, le centrer verticalement est un problème.

Quelle est la meilleure façon de centrer le conteneur verticalement? Javascript? Dois-je même essayer de le centrer verticalement, ou préféreriez-vous généralement une page pour commencer près du sommet?

Merci!

Source

2009-02-25 John

Vous pouvez le faire avec CSS. Centrez un conteneur DIV en utilisant 50% à gauche et en haut. Puis simplement compenser votre carte postale contenue 50% de sa largeur & hauteur de retour.

<div id="postcard_container"> 
    <div id="postcard"> 
    Postcard here 
    </div> 
</div> 

#postcard_container { 
    position:absolute; 
    display:block; 
    width:1px; 
    height:1px; 
    left:50%; 
    top:50%; 
} 
#postcard { 
    position:absolute; 
    width:800px; 
    height:600px; 
    left:-400px; 
    top:-300px; 
}

Source

2009-02-25 17:06:04 Ademuk

Est-ce que cela ne cause que des problèmes dans IE6? (Si je rétrécis la fenêtre, nous commençons à perdre le sommet de div 'carte postale') – John

Strange, semble fonctionner correctement pour moi dans IE6. – Ademuk

Si vous faites la fenêtre plus petite que 600px avec le code ci-dessus dans IE6, le haut du conteneur commence à devenir inaccessible – John

Je pense que je vais céder et aller à la route des tables; il semble être le rendu correctement navigateur croisé:

<head> 
    <title></title> 
    <style type="text/css"> 
#content { 
    text-align: left; 
    padding: 5px; 
    width: 800px; 
    height: 600px; 
} 
</style> 
</head> 
<body> 
    <table style="width: 100%; height: 100%"> 
     <tr valign="middle"> 
      <td align="center"> 
       <div id="content"> 
        Postcard here 
       </div> 
      </td> 
     </tr> 
    </table> 
</body>

Source

2009-02-25 18:45:27 John

Meilleure façon de mettre en œuvre des pages Web «Post Card Sized»

Répondre

Questions connexes