Ankündigung

Einklappen
Keine Ankündigung bisher.

DIV Breite an Position eines anderen DIV ausrichten

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    DIV Breite an Position eines anderen DIV ausrichten

    Hallo,

    bevor ich es umständlich beschreibe, hier eine kleine Grafik:



    Das gelbe Div ist auf margin: auto; gesetzt, also immer mittig im Browserfenster. In diesem gelbe Div ist das rote Div enthalten, welches seine Position entsprechend mit verändert.

    Das Gruene DIV soll nun immer so breit sein, dass es bis zu rechten Kante des roten Div reicht.

    Kurze Erklärung, was ich vorhabe:
    Die Seite wird ein Hintergrgrundbild bekommen, welches das komplette Browserfenster ausfüllt. Links das grüne Div wird eine halbtransparente Fläche, die über diesem Hintergrundbild liegt.
    Das rote Div ist das Menü. Die Menüeinträge sind in weisser Schrift gehalten und liegen wiederum über dem grünen Div, damit man sie, egal welches Hintergrundbild gerade aktuell ist, gut lesen kann.

    Ich hoffe, das hilft euch!

    Ist das mit reinem CSS und HTML hinzubekommen, oder muss ich das per JS berechnen lassen?

    Oder könnte man es noch ganz anders lösen?
    Stichworte: -
  • #2
    Ist das mit reinem CSS und HTML hinzubekommen
    ME nicht.

    Kommentar

    • #3
      Zitat von mentalman Beitrag anzeigen
      Ist das mit reinem CSS und HTML hinzubekommen
      Kommt in erster Linie drauf an, ob die Breiten fest/prozentual sind, oder sich dynamisch aus den Inhalten ergeben.

      Kommentar

      • #4
        Zitat von ChrisB Beitrag anzeigen
        Kommt in erster Linie drauf an, ob die Breiten fest/prozentual sind, oder sich dynamisch aus den Inhalten ergeben.
        das rote und das gelbe div haben feste breiten, das grüne wäre dann dynamisch. dessen breite würde sich aus der position des roten div ergeben!

        Kommentar

        • #5
          Wenn du das Grüne nur brauchst, um irgendwas mit einer transparenten Fläche zu überlagern, dann würde ich folgendes vorschlagen:

          Absolut Positionieren von links oben, Breite 50% (des Viewports), und über ein negatives margin-left ein Stück nach links aus dem sichtbaren Bereich „heraus ziehen“:
          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, p { margin:0; padding:0; }
#content { width:600px; margin:auto; background:yellow; }
#menue { width:120px; float:left; background:red; margin:0 .5em 0 0; }
#menue span { display:block; }
#overlay { position:absolute; top:0; left:0; width:50%; height:500px; z-index:-1; margin:0 0 0 -180px;
background:green; }
</style>
</head>
<body>
<div id="content">
<div id="menue">
<span>Menülink #1</span><span>Menülink #zwei</span><span>Menülink #3</span>
</div>
<p>Lorem ipsum <em>emphasised text</em> dolor sit amet, <strong>strong text</strong> consectetur adipisicing elit,
<abbr title="">abbreviated text</abbr> sed do eiusmod tempor <acronym title="">acronym text</acronym> incididunt
ut labore et dolore magna aliqua. Ut <q>quoted text</q> enim ad minim veniam, quis nostrud exercitation
<a href="/">link text</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
<del>deleted text</del> <ins>inserted text</ins> irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>code text</code> cupidatat non proident, sunt 
in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="overlay"></div>
</body>
</html>
          Der Wert für das negative margin-left beträgt (Breite von Gelb) / 2 - (Breite von Rot); in diesem Beispiel also 600px/2-120px = 180px.

          Das funktioniert so lange, wie der Viewport nicht schmaler wird, als der gelbe Bereich - dann fängt das grüne an, sich weiter nach links zu schieben, als beabsichtigt. Ob man das auch noch irgendwie abfangen will/muss/kann - selber überlegen bitte.

          Kommentar

          • #6
            Das Problem ist die Anforderung
            Das Gruene DIV soll nun immer so breit sein, dass es bis zu rechten Kante des roten Div reicht.
            , da grün und gelb nunmal nichts miteinander zu tun haben.

            Kommentar

            • #7
              Wenn das wirklich nur eine teil-transparente „Fläche“* bilden soll, sehe ich da kein Problem.

              * einfarbig, rgba-Wert oder transparentes PNG als background. Wenn's einen Hintergrund bekommen soll, der mehr „Info“ transportiert, als nur eine einfarbige Fläche zu sein, kann man den ggf. immer noch rechtsbündig im Element ausrichten.

              Kommentar

              • #8
                Zitat von ChrisB Beitrag anzeigen

                Das funktioniert so lange, wie der Viewport nicht schmaler wird, als der gelbe Bereich - dann fängt das grüne an, sich weiter nach links zu schieben, als beabsichtigt. Ob man das auch noch irgendwie abfangen will/muss/kann - selber überlegen bitte.
                und genau sowas soll nicht passieren! aber trotzdem danke für deinen input. hab es jetzt ganz anders gelöst (also auch das layout), sodass ich ohne js auskomme.

                Zitat von nikosch Beitrag anzeigen
                Das Problem ist die Anforderung , da grün und gelb nunmal nichts miteinander zu tun haben.
                korrekt! und nur durch js miteinander in verbindung bringbar, was zu vermeiden gilt. jedenfalls bei solchen optischen spielereien.

                Kommentar

                Vorherige Weiter
                Lädt...
                X