Julian von Mendel (unregistriert): Bildgröße relativ zur Höhe -> wie Breite bestimmen?

SELF-Forum

Bildgröße relativ zur Höhe -> wie Breite bestimmen?

Julian von Mendel (unregistriert) Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!

Ich möchte eine Website gestalten, die sich vollständig an die Fenstergröße anpasst. Da sie nicht für mich ist, muss sie ein festgelegtes Design umsetzen. Ich habe ein Hintergrundbild bekommen, das ich mit img (da sich CSS-Background-Zeugs nicht von der Größe her beeinflussen lässt) auf eine Höhe von 100% setze. Die Breite lege ich nicht fest, was dazu führt, dass sie automatisch im richtigen Verhältnis vom Browser bestimmt wird. Ich möchte über das Hintergrundbild von rechts beginnende Menüpunkte legen. Da das Hintergrundbild nicht zwingend die Breite des Fensters voll ausnutzt blendet es nach rechts aus. Jetzt sollen die Menüpunkte vor der Ausblendung sein:

+-------------------+
|              |    |
|     Menüpunkte    |
|              |    |
|              |    |
|              |    |
+--------------+----+
               |    |
               |    + Rechtes Ende vom Fenster
               + Rechtes Ende des Hintergrundbildes

Die Positionierung der Menüpunkte muss also so sein, dass diese an einer festen Stelle im Hintergrundbild landen. Von der Höhe her geht das einfach, da ich ja die Höhe des Hintergrundbildes auf 100% setze und somit den Abstand der Menüpunkte nach oben relativ zur Gesamthöhe bestimmen kann. Da ich die relative Breite des Hintergrundbilds zur Fenstergröße aber nicht kenne, weiß ich nicht, welche Entfernung von Rechts ich für die Menüpunkte einstellen soll.

Hat jemand eine kluge Lösung, mit der ich das Problem umgehen kann? (Nein, ich kann das Design nicht ändern. Es ist halt so wie's ist.)

Schöne Grüße
Julian von Mendel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildgröße relativ zur Höhe -> wie Breite bestimmen?

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    +-------------------+
    |              |    |
    |     Menüpunkte    |
    |              |    |
    |              |    |
    |              |    |
    +--------------+----+
                   |    |
                   |    + Rechtes Ende vom Fenster
                   + Rechtes Ende des Hintergrundbildes

    Hat jemand eine kluge Lösung,

    Keine kluge Lösung, weil mit absoluter Positionierung, aber ein Lösungsvorschlag:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Text des Titels</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
html, body {height:100%; margin:0; padding:0;}  
#haupt {position:absolute; top:0; left:0; height:100%; border:1px solid black;}  
#haupt img {display:block; height:100%;}  
#haupt p {position:absolute; right:0; border:1px solid black;}  
#haupt p#m1 {top:10%;}  
#haupt p#m2 {top:30%;}  
#haupt p#m3 {top:50%;}  
-->  
</style>  
</head>  
<body>  
<div id="haupt">  
<img src="Beispiel.jpg" alt="Hintergrund" title="">  
<p id="m1">Menüpunkt 1</p>  
<p id="m2">Menüpunkt Nummer 2</p>  
<p id="m3">Mpkt 3</p>  
</div>  
</body>  
</html>

    Die Rahmen sind nur zur Veranschaulichung.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildgröße relativ zur Höhe -> wie Breite bestimmen?

      Julian von Mendel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      #haupt p {position:absolute; right:0; border:1px solid black;}

      muss das nicht position:relative heißen? Die Idee ist ja, das man um das Hintergrundbild ein div baut, dass sich so stark ausdehnt, wie das Hintergrundbild groß ist, und man dann in diesem div zusätzlich die Menüpunkte hat, die nur relativ zum div positioniert sind.

      Danke für den Lösungsvorschlag!

      Schöne Grüße
      Julian

      --
      "Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook
      http://derjulian.net
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bildgröße relativ zur Höhe -> wie Breite bestimmen?

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        #haupt p {position:absolute; right:0; border:1px solid black;}

        muss das nicht position:relative heißen?

        Nein.

        Die Idee ist ja, das man um das Hintergrundbild ein div baut, dass sich so stark ausdehnt, wie das Hintergrundbild groß ist,

        Ja, deswegen, und damit das DIV nicht mehr position:static hat, position:absolute für das DIV.

        und man dann in diesem div zusätzlich die Menüpunkte hat, die nur relativ zum div positioniert sind.

        Ja, allerdings kann das nicht mit position:relative erreicht werden, sondern nur mit position:absolute.
        http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Bildgröße relativ zur Höhe -> wie Breite bestimmen?

          Julian von Mendel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hi,

          http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

          "absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements,"

          dieses "gemessen am Rand des nächsthöheren Elternelements" ist wohl der Abschnitt, der begründet, warum ich falsch lag... Danke für deine Hilfe.

          Schöne Grüße
          Julian

          --
          "Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook
          http://derjulian.net
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln