Dans le CSS, l'obtention d'un logo à mettre en place une centrale de mise en page et colle à la gauche?

Je suis vraiment coincé ici...

J'ai un site de mise en page avec un plan central (c'est à propos de 922px largeur, au centre de la page)... j'ai un petit logo en haut à gauche de cette, mais il tient environ 10 pixels à gauche du centre de la conception. Si vous pouvez l'imaginer, c'est un peu de colle à la gauche de la conception...

Maintenant, on m'a dit que le positionnement absolu serait de rendre cela possible. Mais je ne peux pas voir comment le logo serait de travailler avec un positionnement absolu, si la conception elle-même au centre de la page. Je pense que c'est pour vérifier qu'il fonctionne dans IE6... j'ai essayé flottant le logo dans la partie centrale de l'en-tête, puis en appliquant une marge négative de margin-left: -10px; qui fonctionne, mais j'ai lu que cela ne fonctionne pas avec IE6.

InformationsquelleAutor | 2009-04-01
  1. 1

    Sans un bout de code c'est dur à dire, mais c'est probablement un problème avec l'endroit où votre élément est arriver, c'est "absolu" d'un positionnement. "Absolu" est un abus de langage. Cela signifie en réalité "absolue...par rapport à la plus proche parent positionné". Alors, si dans votre conception, vous n'avez pas un parent de l'élément avec le css "position" de style sur elle, il va prendre sa position de l'élément de corps (qui peut avoir une certaine marge/rembourrage sur elle en fonction de votre navigateur).

    L'ajout d'un position: relative; à l'élément que vous voulez être de la "ultrapériphériques" conteneur va vous permettre de spécifier la position: absolute sur un élément à l'intérieur, et de préciser vos coordonnées exactes à partir de là.

    • Donc, avec la définition de la "position: relative" à la principale contenant l'en-tête, je peux ensuite absolue de la position du logo et de l'ensemble de la gauche: -10px? Encore une fois cependant, ce sont ces marges négatives qui ne fonctionnent pas correctement sous IE6 droit?
    • À ce stade, vous pouvez définir left: -10px, qui devrait fonctionner correctement dans IE. Ce n'est pas de marge, sa position, qui est géré différemment.
    InformationsquelleAutor jvenema
  2. 1

    Ensemble "position: relative" sur un div conteneur.

    <style type="text/css">
    div.page {
        position: relative;
        margin: 0 auto;
        width: 922px;
    }
    div.page img.logo {
        position: absolute;
        left: -10px; top: 0;
    }
</style>


<div class="page">
    <img class="logo" ... />
</div>

    Mais.. je préfère le faire fonctionner sans un positionnement absolu.

    InformationsquelleAutor Konstantin Tarkus
  3. 1

    Lorsque vous avez la position de votre logo absolument il doit être placé par rapport à quelque chose. Que quelque chose est normalement la fenêtre d'affichage de pointe. Si le logo est à l'intérieur d'un élément qui est positionné relativement ensuite qu'il va plutôt être positionnées l'une par rapport à cet élément. Donc la réponse est de faire de votre centrée page div display:relative; de sorte que le logo s'aligne toujours sur la page, pas sur le bord de la fenêtre du navigateur. Voici un exemple:

    Le code HTML:

    <div id="centeredpage">
   <img id="logo"... />
</div>

    Le CSS:

    body {
   text-align:center;
}
#centeredpage {
   width:922px;
   margin:0 auto;
   text-align:left;
   position:relative;
}
#logo {
   position:absolute;
   top:0;
   left:-10px;
}

    J'espère que ça aide.

    InformationsquelleAutor Matthew James Taylor