Benni: Rahmen mittig anordnen

SELF-Forum

Rahmen mittig anordnen

Benni
– Informationen zu den Bewertungsregeln

Hallo.

Ich möchte einen Rahmen mittig vom Browserfenster anordnen. In diesem Rahmen soll sich dann der ganze Inhalt der Homepage befinden. Außerdem ist in diesem Rahmen ein Bild, dass bei einer Auflösung von 1024x768 in der Höhe zu groß ist, d.h. es soll oben und unten entsprechend beschnitten werden. Mein Ansatz sieht bis jetzt so aus:

<div class="rahmen">
  <div class="htext"><font size="-2">The</font><br />Riffsurfers</div>
  <div class="guitar"><img src="graph/guitar.jpg" /></div>
</div>

CSS dazu:
.rahmen {
 position: absolute;
 height: 768px;
 width: 99.84%;
 border: 1px solid #000000;
 margin-top: 30px;
 overflow: hidden;
}

.htext {
 font-family:"Courier New", Courier, monospace;
 font-size: 16px;
 font-weight: bold;
 position: absolute;
 top: 20px;
 left: 30px;
 overflow: hidden;
 z-index: 2;
}

.guitar {
 position: absolute;
 top: 0px;
 left: 30px;
 overflow: hidden;
 z-index: 1;
}

Wenn die Beschreibung zu unverständlich ist bitte noch mal schreiben.

Grüße Benni

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rahmen mittig anordnen

    SorgenkindMech
    – Informationen zu den Bewertungsregeln

    moins
    also ich habs mir jetz nich zeile für zeile durchgelesen, aber ich denke mal du hast das problem, dass er in der höhe nicht korrekt zentriert wird?
    achne der hat ja ne vorgegebene höhe
    ansonsten, sofern du das erreichen willst, solltest du dem container "html" und "body" eine höhe von 100% zuweisen, damit das funktioniert

    mit dem bild beschneiden ... hm, also ich denke ich würde es so machen, dass ich das bild als hintergrund für den div nehmen würde
    background-image:url();

    und dann würde ich background-position auf mittig setzen, also einmal horizontal und einmal vertikal
    und natürlich background-repeat:no-repeat;

    ich hoffe es hat wenigstens ein wenig weiter geholfen, bin da nich so der spezi drin, hoffe auch besser qualifizierte antworten ;)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Rahmen mittig anordnen

      Benni
      – Informationen zu den Bewertungsregeln

      also ich habs mir jetz nich zeile für zeile durchgelesen, aber ich denke mal du hast das problem, dass er in der höhe nicht korrekt zentriert wird?

      genau das ist das Problem. Der Rahmen hat eine Höhe von 768px und der soll mittig angeordnet werden und das geht nicht. Ich hab den Quellcode mal etwas vereinfacht, damit es übersichtlicher wird:

      <body>

      <div class="rahmen">Test</div>

      </body>

      CSS:

      html {
       height: 100%;
       width: 100%;
      }

      body {
       height: 100%;
       width: 100%;
       margin: 0px;
       vertical-align: middle;
      }

      .rahmen {
       position: absolute;
       height: 768px;
       width: 100%;
       border: 1px solid #000000;
       vertical-align: middle;
      }

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Rahmen mittig anordnen

        Engin Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi Benni,

        html {
        height: 100%;
        width: 100%;
        }
        body {
        height: 100%;
        width: 100%;
        margin: 0px;
        vertical-align: middle;
        }

        Hier könntest du abkürzen

        html, body {}

        Ob dir das vertical-align was bringt? Ich glaube nicht. Das könntest du ja durch ein padding ersetzen. :)

        .rahmen {
        position: absolute;
        height: 768px;
        vertical-align: middle;
        }

        Auch hier ist vertical-align die falsche wahl.

        Folge: über
        http://forum.de.selfhtml.org/hilfe/ zu
        http://forum.de.selfhtml.org/hilfe/faq.htm nach
        Jehova!

        noch ein Link-Tipp auf kosten des Hauses: position:absolute

        Grüße,
        Engin
         GYRO

        --
        "I would like to buy a hamburger"
        Der Valligator
        sh:( fo:| ch:? rl:( br:> n4:? ie:{ mo:} va:? js:| de:µ zu:] fl:| ss:{ ls:?
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Rahmen mittig anordnen

        SorgenkindMech
        – Informationen zu den Bewertungsregeln

        ich weiß ja nich, obs mittlerweile gelöst ist, aber fakt ist, dass dein position:absolute die mittlere positionierung verhindert, denn:
        ok, du sagst html und body 100%, ist ok, dann sagst du alles im body vertikal zentriert, ok, aber dem div sagst du, dass er ne feste position hat, und zwar genau da wo er steht.. kann meiner meinung nach nicht funktionieren

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln