• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

document.height Problem mit Divs

B

bender

Neues Mitglied
Hallo zusammen,

ich habe ein Problem beim ermitteln, wie hoch der Inhalt der Seite ist.

Bisher hat es immer prima mit "document.height" geklappt, aber jetzt wollte ich mal von den Tabellenlayouts weg und stattdessen mit DIVs arbeiten.
Sobald ich für die DIVs 'float' angebe, ist die Höhe 0 ???

Hier mal mein Code

Code: 
<html>
  <head>
    <title>Content1</title>
        <style>
            div.classX  { float: left; padding:0px;margin:0px; width:50%;}
        </style>
  </head>
  <body>

    <div class="classX">
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
    </div>
    
    <div class="classX">
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
    </div>

    <div class="classX" style="clear: both;">
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
    </div>
    
    <div class="classX">
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
    </div>

  </body>
        <script type="text/javascript">
            alert(document.height);
        </script>
</html>

Wenn ich um den ganzen Inhalt eine einfache Tabelle packe funktioniert es wieder ?!

Kann mir vlt. jemand auf die Sprünge helfen!

Danke und Gruß
Chriz
 
Hängt sicher damit zusammen, dass die Elemente so aus dem Textfluss genommen werden. Wozu muss man denn die Höhe des Dokuments wissen?

Ach und DIV sind kein Ersatz für Layout-Tabellen.
 
bender schrieb:
jetzt wollte ich mal von den Tabellenlayouts weg und stattdessen mit DIVs arbeiten.
Zum Vergrößern anklicken....
Hey, das ist mal ne gute Entscheidung, von den Tabellenlayouts, die man nun seit bestimmt 10 Jahren nicht mehr nutzen muss, wegzukommen.

Aber was soll der Sinn dabei sein, statt des <table>-Tags das <div>-Tag fürs Layout zu benutzen? Das ist beides exakt der selbe Unsinn. Ist Dir das bewusst?
 
Das ist beides exakt der selbe Unsinn. Ist Dir das bewusst?
Zum Vergrößern anklicken....
Hmm,nee, das ist mir dann wohl nicht bewusst!

Was soll man denn für den Header, Content, Footer.... stattdessen nutzen, wenn man keine DIVs oder Tabellen nutzen soll? Irgendwie will man doch irgendwelche Elemente ausrichten?!
 
  • <h1> für eine Überschrift erster Ordnung (was auf einen Header zutreffen würde)
  • <p> für Textabsätze
  • <ul> für ein Menü
  • <ul>, <ol> oder <dl> für Listen
  • <table> für tabellarische Daten
  • <div> zum gruppieren mehrerer Elemente
  • <em> für wichtiges
  • <strong> für sehr wichtiges
  • <address> für Adressen
  • <fieldset> für Eingabefelder und deren <label>
  • usw

Kurz gesagt, semantisches HTML für die Auszeichnung deines Inhaltes und CSS für die Gestaltung.

bender schrieb:
Irgendwie will man doch irgendwelche Elemente ausrichten?!
Zum Vergrößern anklicken....
Jedes Element wird per CSS ausgerichtet, denn CSS alleine ist für das Layout der Seite verantwortlich, HTML hat damit nichts zu tun.

Auch die Wahl des Tags hängt nicht von dem Verhalten im Browser ab, denn das lässt sich ebenfalls per CSS verändern.
 
Ja klar, soweit habe ich das verstanden. Jedes Tag hat seinen bestimmten Zweck und man kann alles schön mit CSS formatieren...

Den Beitrag von Efchen habe ich nur so verstanden, das DIV Layouts genau so was fürn Ar*** sind wie Tabellen Layouts?! Was ist denn mit den -> hier beschriebenen Layouts?

Wie soll man das denn dann eleganter Lösen? Oder hab ich das falsch verstanden?
 
bender schrieb:
Den Beitrag von Efchen habe ich nur so verstanden, das DIV Layouts genau so was fürn Ar*** sind wie Tabellen Layouts?!
Zum Vergrößern anklicken....
Das ist auch richtig so. Denn Layout macht man weder mit Tabellen noch mit div. Am Anfang jeder Seite steht die Semantik. Wenn du deinen Inhalt korrekt ausgezeichnet hast, kannst du anfangen ihr ein Layout zu verpassen, dazu formatierst du deine Tags. Was dabei viele nicht zu verstehen scheinen ist, dass es keinen Sinn macht, um eine Liste noch ein div zu packen und dieses dann zu formatieren, statt gleich die Liste zu formatieren. Das kommt aber dabei raus, wenn man sich erst das Layout mit divs erstellt und dann die Elemente in die jeweiligen divs schreibt. Das ist einfach unnötig.

Was ist denn mit den -> hier beschriebenen Layouts?
Zum Vergrößern anklicken....
Was soll damit sein? Wenn du in einer Spalte z.B. nur Text stehen hast, verwendest du dafür ein <p>, wenn dort ein Menü stehen soll, verwendest du <ul>.

Wie soll man das denn dann eleganter Lösen? Oder hab ich das falsch verstanden?
Zum Vergrößern anklicken....
Wie schon gesagt, semantisches HTML und divs nur zum gruppieren mehrerer Elemente verwenden.

Hier wird nichts gruppiert, also ist das div hier falsch, weil man die Liste genau so formatieren kann, wie das div. Das wäre wie doppelt eingepackte Geschenke.
HTML: 
<div id="navigation">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
 
Hmm, ich hab glaub ich grad nen 'Aha-Effekt' ich befürchte ich habs die ganze Zeit nicht richtig kapiert und muss wohl nochmal von vorn Anfangen.

Nochmal kurz zu meinem zweispaltigen Beispiel ganz am Anfang. Eigentlich isses doch richtig (durch Zufall :oops: ). Ich hab mehre Elemente mit einem Div gruppiert. Dieses Div hab ich dann mit CSS (float) positioniert. Eine Tabelle anstatt der DIVs ist nicht richtig/vorgesehen.

Zwar klappt es mit document.height immer noch nicht, aber stattdessen hab ich was anderes gelernt... ;)

THX
 
bender schrieb:
Hmm, ich hab glaub ich grad nen 'Aha-Effekt' ich befürchte ich habs die ganze Zeit nicht richtig kapiert und muss wohl nochmal von vorn Anfangen.
Zum Vergrößern anklicken....
Dann sollte dir HTML jetzt viel einfacher vorkommen als du bisher gedacht hast.

Nochmal kurz zu meinem zweispaltigen Beispiel ganz am Anfang. Eigentlich isses doch richtig (durch Zufall :oops: ). Ich hab mehre Elemente mit einem Div gruppiert. Dieses Div hab ich dann mit CSS (float) positioniert.
Zum Vergrößern anklicken....
Ja, so wie du sie oben eingesetzt hast, um mehrere Absätze zu gruppieren ist es richtig.

Eine Tabelle anstatt der DIVs ist nicht richtig/vorgesehen.
Zum Vergrößern anklicken....
Auch richtig, Tabellen sind nur für die Auszeichnung tabellarischer Daten.

Zwar klappt es mit document.height immer noch nicht, aber stattdessen hab ich was anderes gelernt... ;)
Zum Vergrößern anklicken....
Um sehen zu können, ob deine Elemente eine Höhe haben, also ob du richtig gecleart hast, kannst du ihnen einen Rahmen geben, das vereinfacht die Arbeit um einiges.
 
bender schrieb:
Hmm, ich hab glaub ich grad nen 'Aha-Effekt' ich befürchte ich habs die ganze Zeit nicht richtig kapiert und muss wohl nochmal von vorn Anfangen.
Zum Vergrößern anklicken....
Diesen A-ha-Effekt kenne ich. Womöglich ist das der, der Dir auf einmal darlegt, was HTML eigentlich ist, wieso man Inhalt und Layout trennt und was das ganze eigentlich soll :-)
Ich hatte diese Erleuchtung und hab einigen diese bringen können. Es ist wirklich mit einem Mal alles klar und einfach.

Viel Spaß mit endlich total logischer und einfacher Web-Entwicklung :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben