1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

automatische höhe einer div box

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von ma.buso, 27.03.07.

  1. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    hallo,

    ich habe eine div-box, deren höhe ich automatisieren will. das konstrukt geht vereinfacht in etwa so:

    Code:
    <div id=1>
    <div id=2 style="float: right;">
    ...
    </div>
    <div id=3>
    noch mehr ....
    </div>
    </div>
    
    keine der divs hat eine fixe höhe. die höhe bestimmt der inhalt von div 3. ich möchte nun, dass div 2 immer genauso groß ist wie div 3.
     
  2. Simbo

    Simbo Gast

    Kurz und knapp: das geht nicht... :)
    Da Div3 vom Inhalt abhängt und somit "keine" Höhe hat, kann man sie auch nicht auslesen und somit auch nicht Div2 dieselbe Höhe zuweisen. Erst recht nicht nur mit CSS...

    Ich geh mal davon aus, das div2 ist dein Menü und Div3 dein Inhalt (oder umgekehrt) und du möchtest sie aus designtechnischen gründen gleich hoch haben... es gibt andere methoden, etwas in der art zu erreichen...

    Vielleicht erzählst du aber nochmal, was du genau vorhast bzw. welchen Effekt du erreichen möchtest...
     
    ma.buso gefällt das.
  3. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    Wenn du in DIV3 ein Bild drin hast, das alles überragt und so die Höhe bestimmt, kannst du in DIV2 ein transparentes GIF tun mit der Höhe, die das Bild in DIV3 hat. ;)
     
    ma.buso gefällt das.
  4. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    also ... div 1 ist das inhaltsfeld, rechts ist div 2, mit grauem hintergrund und dort sind die bilder drinne. neben div 2 ist div 3 mit dem text.

    wie genau sieht denn die andere methode aus :-D

    versteh ich nicht :) bilder sind nur in div 2 drinne ;)
     
  5. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    kannst du mal das statische html mit css online stellen und einen link posten, dann könnte man einfacher erahnen was du willst und wo es hingehen soll

    am besten noch mit backckground: red (green, yellow) im css für die drei bereiche und dann kann man mal gucken was wie wann wo hoch sein soll ;)
     
    ma.buso gefällt das.
  6. Simbo

    Simbo Gast

    also ist eigentlich nur das problem, dass der graue hintergrund nicht so hoch wie div3 ist... dann gib doch einfach deinem div1 ein hintergrundbild, dass auf der rechten Seite grau ist.

    Oder falls dein div1 bereits ein hintergrundbild hat, füge ein weiteres div innerhalb von div1 ein, das div2 und div3 umschließt und teils grauen, teils transparenten hintrgrund hat.
     
  7. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    würde ich prinzipiell auch so machen - nur hat meine graue box auch noch einen rahmen :)
    edit: und die breite der grauen box kann variieren :)
     
  8. Simbo

    Simbo Gast

    ok... da wirds ja richtig kompliziert...

    man könnte div3 innerhalb von div2 platzieren... aber dann kriegst du den rahmen nicht 100%ig hin...
    Ich will ja nicht den Teufel an die Wand malen, aber eine Tabelle wäre hier die Lösung... :)
     
  9. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    eben :-D

    :eek: eigentlich bin ich grad dabei, die seite vom tabellenlayout zum css-layout umzustellen.
     
  10. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    ma.buso gefällt das.
  11. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    Danke, aber der geht dafür leider auch nicht.
    Ich habe mal einen Screenshot angehängt und die entsprechenden divs umrahmt. das grüne soll eben immer so hoch sein wie das gelbe.
     

    Anhänge:

    • dummy.jpg
      dummy.jpg
      Dateigröße:
      115,6 KB
      Aufrufe:
      73
  12. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    doch der geht - und nur der.

    Gruß Stefan
     
  13. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    und wie genau? :)
     
  14. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Genauer als im Artikel kann ich's leider auch nicht beschreiben. o_O
     
  15. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    der Trick liegt darin, dem umschliessenden DIV einen Hintergrund mitzugeben, der die beiden Spalten darstellt. Egal welcher der beiden innen liegenden DIVs nun größer ist - er bestimmt die Größe des umschliessenden DIVs und damit auch die Wiederholung des Hintergrunds.

    Einschränkung: durch das Hintergrundpic sind die Spaltenbreiten festgelegt und können in einem floating Layout nicht mitwachsen.

    Gruß Stefan
     
  16. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    Mein Problem ist ja leider gerade die variable Spaltenbreite. Womöglich könnte ich dort noch nen Abstrich machen, mal sehen was die Design-Fraktion sagt. Da gibt's bestimmt Schläge :)
    Quasi müsste ich dann oben und unten noch ein Bild einfügen, damit der untere Rahmen mitkommt... I probier it mal.
     
  17. maxg

    maxg Prinzenapfel

    Dabei seit:
    16.10.06
    Beiträge:
    553
    warum? Weil vielerorts gesagt wird, dass Layout über css richtiger sei? Das stimmt so zwar ABER dann muss man auch Inhalt und layout vernünftig trennen (Stichwort: "semantisches markup") Einfach nur die Tabellenzellen durch <divs> zu ersetzen bringt für dich kaum Vorteile aber dafür schlägt man sich mit genau diesen Positionierungsproblemen rum, die du gerade hast.

    Max

    p.s. vielleicht findet sich für dich trotzdem was bei cssplay.co.uk ich habe da jetzt aber nicht gesucht
     
  18. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    das würde ich im vorliegenden Fall mal so sehen. Das Konstrukt wie oben beschrieben erscheint mir ganz sinnig.

    Das ein floating Layout mal in einer Designvorgabe erscheinen könnte … ich hätt's nicht geglaubt. Normalerweise sind's die Grafiker die in statischen Pixeln denken :oops:.

    Gruß Stefan
     
  19. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    Das liegt daran, dass ich es ihnen ausgetrieben habe :)

    Ich bemühe mich schon, den Code möglichst korrekt zu gestalten, aber da stößt man hier und da mal auf Grenzen verschiedener Art.

    Das Tabellenlayout bestand aus mehreren Tabellen mit insgesamt knapp 50 Zellen, daraus habe ich 6 divs gemacht. ;) Also keine Sorge.
     
  20. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    So Freunde, jetz geht's :-D

    Danke euch allen!
     

Diese Seite empfehlen