Forums Développement Multimédia

Aller au contenu

Centrage vertical + site extensible

CODE HTML CSS

  • Vous ne pouvez pas répondre à ce sujet
Aucune réponse à ce sujet

#1 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 13 May 2012 - 10:12 AM

Bonjour à tous,

je cherche à refaire le design de mon site en appliquant un style extensible de préférence cette fois-ci. Seulement voilà, dans le même temps, je souhaite appliquer un style centré verticalement sur l’ensemble de mes div.
Si après quelques conseils, j'arrive à réaliser ce dernier effet seul, cela m'est plus difficile à gérer si je veux donner un style extensible dans le même temps à mon site. J'ai pas mal d'éléments supplémentaires que je veux incorporer par dessus la div "conteneur" qui ne restent pas à la même place selon la résolution, comme ici, la div "engphoto".

J'ai bien peur de m'être mélangé les pinceaux pour créer le tout, et j'ai du mal à trouver une solution pour que l'ensemble soit cohérent.

Y-a t-il toutefois des incompatibilités entre faire un site extensible/centrage vertical/superposition, qui pourraient poser problème ?

J'ai déjà pu réaliser de sites fixes et extensibles, avec superpositions, sans problème, mais depuis que j'ai choisi l'option du centrage vertical, ca ne passe plus. Je me doute encore avoir peut-être des erreurs dans le code mais j'ai déjà essayé plusieurs choses sans succès...Merci pour votre aide.


<body>
<div id="bloc">
<table>
   <tr>
           <td><a href="#"><img src="menu_actualite.png" alt="actualite" /></a></td>
            <td><a href="#"><img src="menu_photoshop.png" alt="photoshop" /></a></td>
            <td><a href="#"><img src="menu_illustrator.png" alt="illustrator" /></a></td>
            <td><a href="#"><img src="menu_indesign.png" alt="indesign" /></a></td>
            <td><a href="#"><img src="menu_dessin.png" alt="dessin" /></a></td>
            <td><a href="#"><img src="menu_profil.png" alt="profil" /></a></td>
            <td><a href="#"><img src="menu_contact.png" alt="contact" /></a></td>
    </tr>
</table>
<div id="conteneur"><img src="interface.png" alt="#" />
<div id="engphoto"><img src="eng_photoshop.png" alt="#" /></div>
</div>
</div>
<div id="pied">Pied</div>
</body>

html {
          display   :table;
          height:100%;
          width:100%;
          }
body {
          display:table-cell;
          vertical-align:middle;
          text-align:center;
          background:url(fond.jpg);
          }
 
#bloc {
          border:0;
          width:100%;
          margin:auto;
          }
 
#conteneur {
          border:0;
          width:80%;
          margin:auto;
          position:relative;
          }
 
#pied {
          border:solid 1px #000000;
          background-color:#FF9900;
          width :80%;
          margin:auto;
          margin-top:250px;
          text-align:left;
          }
table {
          border:0;
          width:80%;
          margin:auto;
          margin-bottom:10px;
          text-align:center;
          }
img {
          border: none;
          width:100%;
          }
#engphoto {
          border:0;
          margin-left:600px;
          margin-top:-330px;
          width:10%;
          }
 




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP