Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 16
  1. #1
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    divs nebeneinander alle 100% Höhe

    folgendes Problem, welches mir nun schon lange Kopfschmerzen bereitet:

    mehrere divs befinden sich in einem aussen div und sind nebeneinander positioniert.
    Das aussen div nimmt automatisch die Höhe des Browserfensters ein. also height:100%
    die inneren divs nehmen automatisch die Höhe des aussen divs ein. ebenfalls height:100%

    soweit so gut.
    Wird aber der Inhalt von einem innen div höher, dann wächst zwar das aussen-div mit, aber die anderen innen divs bleiben kürzer. (siehe Beispiel)

    Wie kann man es nun lösen, das alle innen divs automatisch sich nach dem längsten richten und immer 100% des aussen divs annehmen? Das wär für mich eigentlich logisch das es so ginge mit dem nachfolgenden Code. Geht aber nicht

    Hier der beispiel-code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
    <div id="aussen" style="width:100px; height:100px; background-color:#FF7F7F; margin:0px;">
    	<div style="float:left; background-color:#c4c4c4;height:100%;">1<br />1a<br />1b<br />1c<br />1d<br />1e<br />1f<br />1g<br /></div>
    	<div style="float:left; background-color:#00FFAF;height:100%;">2</div>
    	<div style="float:left; background-color:#E0FAFC;height:100%;">3<br />3a<br />3b</div>
    	<div style="float:left; background-color:#FFFF00;height:100%;">4</div>
    	<div style="clear:both;"></div>
    </div>
    </body>
    </html>
    bine

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: divs nebeneinander alle 100% Höhe

    Soweit ich das einschätzen kann geht das nicht.

  3. #3
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    falsche Antwort

    hoffentlich gehts doch. Das ist doch was ganz normales?
    Ich hab links einen Bereich in einer Farbe und rechts daneben einen content Bereich in einer anderen Farbe.
    Und das Ganze soll immer egal wie lang der content ist, eine einheitliche Länge haben und unten mit der Browser Unterkante abschließen.
    Ist das denn soo ungewöhnlich?

    Würd doch blöd aussehen, wenn die Navi (Hintergrund gelb) bei 500 endet und daneben der content (Hintergrund weiss) 200px weiter runterreicht. Dann erscheint unter dem gelben Navibereich noch ein Stück der Seiten-Hintergrundfarbe grau.

    Im IE geht das ja aber in den anderen Browsern nicht.

    hm. Klar ich könnte eine feste Höhe festlegen und iframes nehmen und wenn der content länger ist wird dann im iframe gescrollt, will ich aber nicht so gerne.
    bine

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: divs nebeneinander alle 100% Höhe

    Vielleicht kann man da was mit JS machen ?

  5. #5
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    phuh, geht doch.
    Weisste woran es gelegen hatte, war der weitere Content
    Hier auf dieser Seite war das wo es nicht ging,
    http://www.art-stylers.de/kiga/konzept6.html
    weil im Content-Bereich nicht nur einfacher Text war sondern images wiederum mit float:left. Das hat sich wohl gebissen.

    und hier gehts dann:
    http://www.art-stylers.de/kiga/konzept6a.html

    zumindest im IE und Mozilla
    Opera hab ich derzeit nicht und deshalb noch nicht probiert.
    Nun mal schaun wie es denn funktioniert mit den Bildern und daneben Text im Content-Bereich.

    Hier nochmal zum ansehen die dazugehörigen styles
    http://www.art-stylers.de/kiga/style6.css
    Geändert von bine (29-08-2004 um 19:45 Uhr)
    bine

  6. #6
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: divs nebeneinander alle 100% Höhe

    also von der logik her arbeiten die anderen borwser richtig und der IE falsch.
    weil was fest ist ist nun mal fest.

    aber zum glück hatte ich mich dem problem auch mal gestellte.
    und bin auf die idee gekommen einen höhen-halten einzubauen.

    der ganz allein für die höhe zuständig ist wenn weniger als gedacht text in dem div ist.
    sprich nirgendswo werden höhen angeben nur bei diesen höhen halter.

    z.b.:

    <div>
    <div style="font-size:1px;line-height:0px;float:left;height:400px;width:1px;"></div>
    <div style="float:left;">
    hallo
    </div>
    <br style="clear:both;font-size:1px;line-height:0px;" />
    </div>

  7. #7
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    jo, der Höhenhalter ist bei mir das div mit der id=aussen Der zieht sich immer auf 100%
    und die innen divs ziehen sich auf die Höhe des aussen divs.

    Das war ja von vornherein schon mein logischer Gedanke. Nur das es halt auf der Konzept-Seite nicht ging, wegen dem folgenden Content.

    Nun muß ich es nur noch hinbekommen, das links ein Bild und daneben der zum Bild gehörige Text kommt.

    Eigentlich will ich ja eh nicht, das der Text um das Bild fließt sondern danebensteht.
    Und jedesmal wenn ein neues Bild kommt dann steht der dazugehörige Text wieder daneben. aber linksbündig neben dem Bild und nicht wenn der Text länger ist als das Bild hoch, das dann der Text unter dem Bild links weitergeht.

    Da hab ich im Moment nicht den Durchblick. Aber mal schaun. Geht nicht gibts nicht.
    Geändert von bine (29-08-2004 um 19:51 Uhr)
    bine

  8. #8
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: divs nebeneinander alle 100% Höhe

    nur das die 100% etwas unterschiedlich immer ausfallen.

    und das mit dem bilchen und dem text .. 2 divs mit float:left ?

  9. #9
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    Hauptsache das Ganze ist unten gerade zuende. Das ist mir am wichtigsten.

    genau das mit den zwei divs drin hab ich auch schon gedacht, aber hab ich dann immer die Höhe von Bild und Text oben zusammen?
    Oder ich muß jeden Textbereich in ein ihre eigenen zwei divs setzen.
    also

    div aussen
    div bild float:left div text
    div bild float:left div text

    nachher probier ich das muß jetzt erstmal wieder weg.
    bine

  10. #10
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: divs nebeneinander alle 100% Höhe

    <div>
    <div style="float:left;margin-right:10px;"><img></div>
    <div style="float:left;">text</div>
    <br style="clear:both;font-size:1px;line-height:0px;" />
    </div>

  11. #11
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    unabhängig vom Schwerpunkt des Themas mal abgesehen ist
    Code:
    <br font-size:1px;line-height:0px;
    eine geschickte Variante, logisch aber ich wär gedanklich nicht so drauf gekommen. In meinem Code hab ichs allerdings ohne diesen Zusatz gelassen, weil ich den Abstand dort haben möchte.

    OK zum Thema, welches sich mittlerweile leider als recht kompliziert und durch reines lesen des Threads kaum nachvollziehbar erweist:
    Das img könnte in diesem Fall direkt den float:Befehl beinhalten. Braucht glaub ich nicht in ein extra div!?

    Aber ob so oder so: nee, kann man machen was man will, das erste clear:both hebt ja auch das float:left zwischen Navi und Content-Bereich auf und der gesamte Content rutscht dann nach links und unter den Navi Bereich.
    Und im Mozi wird auf diese Weise der Text unter dem Bild angezeigt.

    Ich habs jetzt einfach mal mit float:right probiert (von mir aus kann das Bild ruhig nach rechts) und anschließend jeweils clear:right gesetzt, damit das float:left von Navi und Content-Bereich nicht berührt wird.
    Das ist soweit schon OK im IE, dann bleibt der Content-Bereich insgesamt noch an der richtigen Stelle und rutscht nicht nach links unten.
    Aber nützt ja auch nichts, weil im Moz halt der Text unter dem Bild erscheint.

    Ganz mal davon abgesehen, das sowie ich in dem Inhaltsbereich noch divs mit float verschachtele, wird die height:100% und margin:0px Angabe der Bereiche Navi und Content gar nicht berücksichtigt und ich hab zwei verschieden hohe Bereiche.

    Fazit: ich bastel noch weiter dran, vielleicht fällt mir was ein.
    Falls Jemand da noch durchsteigt oder sich das ausprobieren antun mag, bin ich für Tips und Tricks offen.
    Es geht um dieses Seitenlayout: http://www.art-stylers.de/kiga/konzept6.html
    Geändert von bine (30-08-2004 um 00:49 Uhr)
    bine

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: divs nebeneinander alle 100% Höhe

    In der Not kann man auch ruhig mal ein <table> nehmen...

  13. #13
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    ja klar, da hast du recht, doch was tut man nicht alles um zu probieren was geht
    So kann ich halt feststellen wann es sinnvoll ist es anders zu machen.
    Diese Entscheidung des wie geh ich nun da ran, wär doch schön wenn man das vorher schon wüßte.

    OK da kann man sagen nimm doch gleich Tabellen, da weiß man wies geht, aber nun ja, es gilt das auszuloten.

    für heut sag ich gute Nacht
    bine

  14. #14
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    AW: divs nebeneinander alle 100% Höhe

    naja, im grunde ist ja der seiten aufbau nicht gerade schwer, ich denke einfach das einige angaben etwas quer gesetzt sind.

    ich würde überlegen ob ich den ganzen header nicht als grafik mache und den rest als 1 pixel streifen als background-image repeaten lasse.

  15. #15
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: divs nebeneinander alle 100% Höhe

    Also Knuddels, es hat mir keine Ruhe gelassen.
    Hab drüber geschlafen und nochmal neu gemacht. Es mußte doch gehen.
    Siehe auf der Seite Einblicke.

    http://www.art-stylers.de/kiga/einblicke.html

    Es geht juhuu. Bilder links Text rechts daneben und der Navi und Content-Bereich schliesst unten gerade ab.

    Ist jetzt zwar grad etwas überlang, aber das schau ich später. Bin schon froh, das endlich nach tausend Versuchen das mit dem gefloate klappt.

    Ein grundlegener Fehler, den ich gemacht hatte lag in dem zweiten folge style für #inhalt * Mit den margins und paddings, da muß man höllisch aufpassen.

    Fazit: Das mit dem Positionieren erscheint wenns mal fertig ist zwar einfach, aber das Prinzip will erstmal richtig verstanden werden. Im Moment ist es für mich eher endlose Fummelei von Sachen die mir logisch erscheinen aber denn doch nicht funktionieren. Es gibt ja soo viele Varianten
    bine

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Höhe von iFrame an Höhe von Quelldatei anpassen
    Von Amatron im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 12-11-2005, 15:19
  2. form-tag und dargestellte höhe im ie
    Von antiheld2000 im Forum Allgemeines
    Antworten: 12
    Letzter Beitrag: 17-03-2004, 16:30
  3. Antworten: 12
    Letzter Beitrag: 22-10-2003, 03:20

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •