[HTML] div in div 2. ist zu groß

Dieses Thema im Forum "Webentwicklung" wurde erstellt von encud, 20. September 2007 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 20. September 2007
    div in div 2. ist zu groß

    hi ich habe hier folgendes prob!
    ich habe 2 divs hintereinander gesetzt:
    HTML:
    <div style="background-color:red;width:702px;height:100% auto;">
     <div id="test" style="filter:Light(1);background-color:#000;width:700px;height:125px;">
    
     <img src="stepbystep.jpg">
    
     </div>
     <div style="text-align:left;background-color:#000;width:700px;height:100%;">
    
     
    
     </div>
    </div>
    allerdings will ich, dass die höhe vom div mit dem bild(height:125px) und der andere zusammen 100% ergeben, also in dem aller ersten div der 100% anzeigt passen! wie mache ich das?!!?

    habe im web leider nix gefunden was von hilfe war:(

    gruß encud
     

  2. Anzeige
  3. #2 20. September 2007
    AW: div in div 2. ist zu groß

    das kannst du nicht so machen wie du denkst.
    falls du einen roten border haben willst kannst ja so machen:

    HTML:
    <div style="background-color:#000;border:1px solid red;width:702px;height:100% auto;"> 
     <div id="test" style="filter:Light(1);background-color:#000;width:700px;height:125px;"> 
     <img src="stepbystep.jpg"> 
     </div> 
     <div style="width: 700px; float: left;"> __ hier kommt dein inhalt rein __ </div> 
    </div>
    
    dann hast du den gleichen effekt.
    dein bilder kannst du mit background-image auch mit css machen:

    Code:
    background-image: url(img/logo.gif);
     background-repeat: no-repeat;
     background-position: left top;
    
    dann wäre es noch vom vorteil wenn deine css auslagerst oder in den header schreibst! anstatt direkt in den tag
     
  4. #3 20. September 2007
    AW: div in div 2. ist zu groß

    Ich habe die erfahrung gemacht, dass dieses in der heutige CSS Umbegung nicht möglich ist. Du hättest aber auch die SuFu dazu anstrengen können, denn das thema wurde schon genauso behandelt. Ich persönlich setze einen guten Standardwert und ändere diesen dann dynamisch beim resize und load mit javascript. Wer es aus hat, hat pech gehabt und sieht nur den standard wert.
     
  5. #4 20. September 2007
    AW: div in div 2. ist zu groß

    1. ich will die border nur an den seiten haben;) so hätte ich sie auch unten und oben:( und was noch hinzu kommt ist, das sie auf jeden fall von von oben bis unten gehen soll, und nur wenn der content größer ist als die seite, sollen die divs größer werden!
    2. warum kann man das nicht so machen?
    3. Css werde ich noch machen, mache nur gerade das layout und dann ist es meiner ansicht nach zunächst so einfacher, und kann später dann alles einteilen!
    4. @ MakenX: kannst du das nochmal genauer beschreiben? habe nicht ganz verstanden was du meintest...
    5. und zum schluss die sufu... ja nur was für stichwörter hätte ich eingeben sollen? div?? dann hätte ich wohlb jeden 2. beitrag angezeigt bekommen-.-

    trotzdem danke an euch beide und bitte um stellungnahme:)

    gruß encud
     
  6. #5 20. September 2007
    AW: div in div 2. ist zu groß


    Erstmal zum Ausgangspunkt:

    WIr haben einen DIV, ich nennen ihn mal "main".
    Dann haben wir 2 Divs (div1 und div2), die in dem main-div drinn sind ja?
    Der main div ist sagen wir mal 900px hoch (ist nur ein beispiel jetzt).
    der div1 ist jetzt 125px hoch und div2 soll nun 900px-125px groß sein ja? das also am ende div1+div1=main ist?

    per CSS alleine, wie MakenX das sagt, nicht möglich.
    Jedoch kann man dies mit Hilfe von JavaScript lösen.
    Erfasse hierzu einfach die Höhe des maindivs und des div1 (am besten den divs eine id geben).
    danach einfach kurz mathe und dem div2 die neue größe geben, sprich div2=maindiv-div1

    das zum beispiel bei window.onload aufrufen und schon sind div1+div2 genausogroß wie maindiv.

    mfg
     
  7. #6 20. September 2007
    AW: div in div 2. ist zu groß

    ok verstanden habe ich alles:) sowas hatte ich auch schon gedacht nur leide hatte ich nur unter css im inet gesucht^^
    öhm nur leider finde ich sowas nicht für javascript...
    @Cydoc: ich weiß ja das du nicht gerne scripte postest, ist auch ok so und dein recht^^ aber hättest du mal ieine schlaue seite wo ich mir durchlesen kann wie das geht?
     
  8. #7 20. September 2007
    AW: div in div 2. ist zu groß

    Mal nach den JavaScript - Events onload und onresize google, in kombination mit dem Style - Node und dem Herausfinden der Viewport - Größe .... solltest dir dann imho alles selbst zusammenfügen können.
     
  9. #8 20. September 2007
    AW: div in div 2. ist zu groß

    also zu punkt 1:

    machst anstatt
    Code:
    border: 1px solid red;
    das hier:
    Code:
    border-left: 1px solid red; border-right:1px solid red;
    es ist möglich das du border-top und bottom auf 0px setzen musst!

    stelle mal deine body höhe auf 100% sowie die div höhe aus 100%
     
  10. #9 20. September 2007
    AW: div in div 2. ist zu groß

    hab ein bissel gegoogelt, und das gefunden: http://www.codingforums.com/archive/index.php?t-57134.html
    ist das was für mich? nicht ads ich mir das alles mühsam überstetze und dann merke ich das es garnicht das richtige ist...
     
  11. #10 21. September 2007
    AW: div in div 2. ist zu groß

    Moin,


    HTML:
     /**
     * function getViewportSize()
     *
     * This function differentiates between browsers to get the viewport size. The size is returned as an array. The first value is the width and the second value is the height.
     *
     * @return array
     */
     function getViewportSize() {
     var size = [0, 0];//basic varray
    
     //browser differentiation for the viewport size
     if (typeof window.innerWidth != 'undefined') {//opera, gecko, netscape etc.
     size = [window.innerWidth, window.innerHeight];
     } else if ((typeof document.documentElement != 'undefined') && (typeof document.documentElement.clientWidth != 'undefined') && (document.documentElement.clientWidth != 0)) {//ie in standard mode through DTD
     size = [document.documentElement.clientWidth, document.documentElement.clientHeight];
     } else {//ie in quirks mode
     size = [document.getElementsByTagName('body')[0].clientWidth,
     document.getElementsByTagName('body')[0].clientHeight];
     }
     return size;
     }//end - function getViewportSize()
    
    Benutze ich so in meinen Scripten.
     
  12. #11 21. September 2007
    AW: div in div 2. ist zu groß

    ok hmm... nur wie kann ich das bei mir benutzen? ich verstehe das prinzip von diesem teil da net so ganz:(
     
  13. #12 21. September 2007
    AW: div in div 2. ist zu groß

    Der Grund, warum ich keine Scripte poste, ist der, dass du suchen sollst. Dadurch, dass du suchst, hast du auch den Willen, es zu verstehen. Und nur dann bringt es dir was. Kopieren und Einfügen bringt dir zwar das, was du willst, aber gelernt hast du dann nichst. :]

    Aber hier ein paar Links:
    SELFHTML: JavaScript / Objektreferenz / window
    SELFHTML: JavaScript / Objektreferenz / document
    SELFHTML: JavaScript / Objektreferenz / style

    Das sollte dir eig. reichen. DU musst dir ebend am besten erstmal klarmachen, wie es funktionieren soll, wenn du keinen Anhaltspunkt hast.
    Sprich erstmal nichts mit ner Sprache, sondern sowas zb:

    - hole höhe des äußeren divs
    - ziehe von der erfassten höhe die höhe des ersten divs ab
    - gebe dem zweiten div die nun errechnete resthöhe

    ist doch im prinzip ganz einfach.
    du brauchst also dir nur die links passend durchlesen und ein bisschen mathe können.

    ich hoffe, mit den paar links und der kurzbeschreibung schaffst du es. nimm dir ne halbe stunde zeit dafür, dann solltest du das verstanden haben und benutzen können.

    leg einfach ne html datei an mit 3 divs, 2divs in einem und probier ein wneig rum ;) bau vllt alerts ein wenn du probs hast und lass dir so einzelne größen etc ausgeben...dann findest du auch die probleme und weißt dann am ende, was falsch war und wie dus richtig machst :]

    mfg
     
  14. #13 22. September 2007
    AW: div in div 2. ist zu groß

    hmm ich komme nicht mehr weiter:( also ich hab das jetzt erstmal so wie in dem einen beispiel versucht, das wenn ich auf einen link drücke, sich die größe verändern soll, das ganze sieht bei mir so aus:
    HTML:
    <div style="background-color:red;width:702px;height:100% auto;">
     <div id="test" style="filter:Light(1);background:url(stepbystep.jpg);width:700px;height:125px;">
    
    
    
     </div>
     <div id="content" style="text-align:left;background-color:#000;width:700px;">
    
     <img src="menu.jpg">
    
     </div>
    </div>
    
     <script type="text/javascript">
    
     function Hoehe (wert) {
     document.getElementById("content").height = wert;
     }
    
     </script>
    
    <a href="javascript:Hoehe('100%')">100%?</a>
    da tut sich dann aber nix... was mache ich falsch?:(
     
  15. #14 22. September 2007
    AW: div in div 2. ist zu groß

    Das war schon fast richtig nur musst du bei der function
    Code:
    .style
    vergessen, deine Funktion müsste so aussehen:
    Code:
    <script type="text/javascript">
    
     function Hoehe (wert) {
     document.getElementById("content").style.height = wert;
     }
    
     </script>
     
  16. #15 22. September 2007
    AW: div in div 2. ist zu groß

    na is falsch, 100% geht nur in nem element das ne feste größe hat.
    du kannst von nem knoten die angezeigt höhe auslesen, von der ziehst du die höhe von div 1 ab und das was rauskommt setzt du in div2 als höhe.

    100% = SELFHTML: JavaScript / Objektreferenz / window

    Code:
    window.onload = function() {
     var fheight = window.innerHeight;
     document.getElementById('da_wo_100proz_al_hoehe_steht').style.height = fheight + 'px';
     document.getElementById('content').style.height = (fheight-125) + 'px';
    }
    
    nicht getestet
     
  17. #16 22. September 2007
    AW: div in div 2. ist zu groß

    hmm also funktionieren tut keine von den möglichkeiten:(
    und das mit dem 100% sollte auch erstmal nur zum testen sein...
    so jetzt zu der version von Murdoc-4D
    diese reihe hier verstehe ich nicht:
    HTML:
     document.getElementById('da_wo_100proz_al_hoehe_steht').style.height = fheight + 'px';
    und allgemein dazu, muss ich ja nix mehr weiter aufrufen, oder? also nicht noch ieine funktion, einfach in den div die id schreiben und fertig, oder?
     
  18. #17 22. September 2007
    AW: div in div 2. ist zu groß

    HTML:
    <script>
    window.onload = function() {
     var fheight = window.innerHeight;
     document.getElementById('main').style.height = fheight + 'px';
     document.getElementById('content').style.height = (fheight-125) + 'px';
    }
    </script>
    <div id="main" style="background-color:red;width:702px;">
     <div id="test" style="filter:Light(1);background:url(stepbystep.jpg);width:700px;height:125px;">
    
     asdf
    
     </div>
     <div id="content" style="text-align:left;background-color:#000;width:700px; color: white;">
    
     asdf2
    
     </div>
    </div>
    
    asdf? bzw es geht. musst halt drauf auchten das man "margin" von der gesammten höhe noch mit abzieht

    wer javascript aus hat, hat pech
     
  19. #18 22. September 2007
    AW: div in div 2. ist zu groß

    sry ich mus ihr doch nochmal wieder öffnen, weil ich bemerkt habe, das wenn ich einen text schreiben der größer ist als der content div, dann wird das ganze auf dem hintergrund geschrieben:( im ie wird es genau so angezeigt wie es sein soll, nur der ff is macht es anders... ha da noch jemand eine idee mir fällt nix ein:(
     
  20. #19 22. September 2007
    AW: div in div 2. ist zu groß

    post mal schön alles^^

    von wegen mit: height:auto; position.....

    mfg
     
  21. #20 22. September 2007
  22. #21 22. September 2007
    AW: div in div 2. ist zu groß

    HTML:
    <script type="text/javascript">
    window.onload = function() {
     var fheight = window.innerHeight;
     if(document.getElementById('main').offsetHeight < fheight) {
     document.getElementById('main').style.height = fheight + 'px';
     document.getElementById('content').style.height = (fheight-235) + 'px';
     }
    }
    </script>
    
    bitte sehr, glück das mir langweilig is
     
  23. #22 24. September 2007
    AW: div in div 2. ist zu groß

    ok vielen dank nochamls!!! aber leider noch ein kleines prob... im ie geht der div nur bis zum ende, wenn auch was dribn steht, aber er soll ja immer egal ob die seite leer ist bis zum rand gehen, gibt es da noch ieinen befehl??? ich habe schon gesucht aber nix gefunden(wie so oft:()
    (hier nochmal der link zur page: stepbystep)
     

  24. Videos zum Thema
Die Seite wird geladen...
Similar Threads - HTML div div
  1. Antworten:
    1
    Aufrufe:
    867
  2. [HTML] Javascript div-Popup

    Fuselmeister , 20. Juni 2012 , im Forum: Webdesign
    Antworten:
    5
    Aufrufe:
    1.301
  3. Antworten:
    1
    Aufrufe:
    662
  4. Antworten:
    3
    Aufrufe:
    1.011
  5. Antworten:
    6
    Aufrufe:
    830