Centrera en div

Dasjenka · 15 Jul 2007

Att centrera en div är inte svårt, men hur gör man om man vill få den att ligga precis i överkant på sidan?

Om css-koden ser ut som nedan blir det en ca 10 pixlars bred marginal ovanför själva diven. Den kan fuskas bort med lämpligt stor padding, men det känns som en fullösning? Hur ska jag göra?

body {
margin: 0;
padding: 0;
text-align: center;
background-image:url(bakgrundsbild.gif);
height:100%;
}

.centreradruta {
width: 800px;
padding: 0;
margin: 0 auto;
text-align: left;
background:#ffffff;
min-height:100%;
border-right:3px solid #000000;
border-left:3px solid #000000;
}

meodeo · 16 Jul 2007

Sv: Centrera en div

Du måste nog fått något skräp mellan body och divtaggen, för hur jag än gör blir det ingen marginal ovanför med den koden.

Dasjenka · 16 Jul 2007

Sv: Centrera en div

I sådana fall måste du kolla med Internet Explorer? Den webbläsaren tolkar inte kod korrekt.

I webbläsare som tolkar koden rätt så blir det ett mellanrum. Kika med Mozilla Firefox eller Opera så får du se.

moiran · 16 Jul 2007

Sv: Centrera en div

Med exakt den här koden:

Kod:

<html>
  <head>
    <title>divtest</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        text-align: center;
        /*background-image:url(bakgrundsbild.gif);*/
        height:100%;
      }

      .centreradruta {
        width: 800px;
        padding: 0;
        margin: 0 auto;
        text-align: left;
        background:#ffffff;
        min-height:100%;
        border-right:3px solid #000000;
        border-left:3px solid #000000;
      }
    </style>
  </head>
  <body>
    <div class="centreradruta">Ruta</div>
  </body>
<html>

Så ligger rutan exakt i överkant. Inga mellanrum mellan div- och bodykant. Och ja, jag har dubbelcheckat med firefox, ie och opera. Så jag tror du har något som strular till någon annanstans än i just den css-kod du klippt in. Kolla så att du inte lagt till marginal eller padding på något element som diven kan identifiera sig med längre ned i css-koden.

meodeo · 16 Jul 2007

Sv: Centrera en div

Nej, jag har kollat med både FF och IE med samma resultat...

Dasjenka · 16 Jul 2007

Sv: Centrera en div

Tack för svaren.

Har nu hittat det egentliga felet och det är att jag har en text i min ruta. Omsluten av <p> och </p> alltså. Och så länge jag har det så blir det en marginal ovanför rutan (i FF och Opera) även med Moirans kod. Genom att sätta marginalen för p till 0 får jag det att funka.

Hade aldrig listat ut det om ni inte hade påpekat att det visas rätt (utan text i rutan)!

meodeo · 17 Jul 2007

Sv: Centrera en div

Det var ju bra att det ordnade sig. Ja, det läggs väl till en marginal som standard för en del taggar.

Centrera en div

Dasjenka

meodeo

Dasjenka

moiran

meodeo

Dasjenka

meodeo

Liknande trådar

Välj ämne nedan

Bukefalos, Hästnyheter, Radannonser

Allmänt, Barn, Dagbok

Hund, Katt, Andra Djur

Hästrelaterat

Omröstningar