HTML HTML Strukturierung, wie angehen?

Hallo,

ich benötige eine Struktur in einem HTML und weiß nicht wie ich das erreiche.

Habe es erstmal mit DIV und P probiert, aber das klappt nicht.

Die Strukturierung habe ich angehängt.
In den ersten Bereich soll ein Bild mit einer fixen Größe Rein
In Bereich 2 Tabelle 2
In Bereich 1 Tabelle 1
Bereich 4, Textbereich
Bereich 5 wird dynamisch aufgebaut und kann von 1 bis 100 Zeilen alles haben (es ist ein XML Report den ich dynamisch befüllt)
Bereich 6 ist wieder ein Textbereich

Wie strukturiere ich das HTML Dokument richtig?

Wichtig ist, dass das HTML später in ein PDF umgewandelt wird, und zwar in ein DIN a4 Dokument.

Danke und lg,

Alex

Normalerweise von oben links nach unten rechts, aber es gibt auch noch andere Lösungen dafür.

Soll die Seite nur mit HTML und (einfachem) CSS erstellt werden oder hast du vor ggf. ein CSS-Framwork oder etwas anderen einzusetzen?

Zeig uns einfach mal das, was du jetzt schon fertig hast?

ich habe von der struktur (abgesehen von Fettschrift und Tabellen) noch garnichts fertig.

Ich baue mir halt aus dem XML Datenstrom per XSLT Transformation das HTML aus.

Wichtig wäre für mich jetzt ein Ansatz wie ich die HTML Elemente nun korrekt positionieren, also in die entsprechende Bereiche zu positionieren.

Ich setze KEIN Framework ein.

nimm es mir nicht übel aber ich glaube du solltest dir erst mal ein paar html sowie css grundlagen aneignen. ich glaube "mal so eben erklären" wird schwierig es sei denn jemand erklärt sich bereit das gerüst fix zusammenzubasteln. mehr know how hast du dann aber auch bloß nicht. eine gute anlaufquelle ist hier http://de.selfhtml.org/.

bei der pdf geschichte kann ich dir gleich mal den zahn ziehen. aus einer html datei lässt sich nicht ohne weiteres eine druckbare pdf generieren. das ist aber ein thema für sich. das geht dann in richtung php mit tcpdf.

pizza4ever schrieb:

Wichtig wäre für mich jetzt ein Ansatz wie ich die HTML Elemente nun korrekt positionieren, also in die entsprechende Bereiche zu positionieren.

Zum Vergrößern anklicken....

Dafür ist HTML eigentlich nicht gedacht. HTML ist für den Inhalt, CSS für das Layout. Der Ansatz mit div-Containern ist schon recht zielführend.
Für Einsteiger wäre z.B. http://little-boxes.de/little-boxes-teil1-online.html ganz empfehlenswert, auch wenn es nicht aus CSS3 setzt sondern schon etwas älter ist. Aber wie man div-Container anordnet lernt man da.

Täusche ich mich, oder sieht mir dieses Beispiel:

http://www.html-seminar.de/beispielwebsite-1-spalten-layout/

nicht ganz brauchbar aus? Auf den Quelltext habe ich ja Zugriff

pizza4ever schrieb:

ich benötige eine Struktur in einem HTML und weiß nicht wie ich das erreiche.

Zum Vergrößern anklicken....

HTML ist Semantik, CSS ist Layout... und CSS lernt man nicht in 10 Minuten

Habe es erstmal mit DIV und P probiert, aber das klappt nicht.

Zum Vergrößern anklicken....

<p> ist KEIN Ich-Spiel-Damit-Rum-Element. <p> ist ein Absatz, nur ein Absatz und nichts als ein Absatz. <p> darf z.B. keine weiteren Block Elements enthalten, nur Inline Elements (also im weitesten Sinne: Text und <img>) sind gestattet.

In Bereich 1 Tabelle 1

Zum Vergrößern anklicken....

HTML fließt immer von oben links nach unten rechts. Eine Positionierung am unteren Rand ist kaum machbar. Versuch es gar nicht mit absoluter Positionierung, das würde nach hinten los gehen.
Deine beste Chance ist das Flexbox Model, unter Verwendung von align-self. Tja, wie gesagt: CSS lernt man nicht in 10 Minuten....

Wie strukturiere ich das HTML Dokument richtig?

Zum Vergrößern anklicken....

Semantik, Semantik, Semantik.
Schnapp dir die offizielle Dokumentation des W3C und guck, welche DOM Elements semantisch für die jeweilige Aufgabe zulässig sind, oder welche sogar noch semantische Vorteile bringen.

Wichtig ist, dass das HTML später in ein PDF umgewandelt wird, und zwar in ein DIN a4 Dokument.

Zum Vergrößern anklicken....

Vergiss es. Das funktioniert nicht. Selbst die Königsklasse, wkhtmltopdf, bietet bestenfalls halbgare Resultate. Ich hab den Kram grad gegen mein letztes Projekt (massiver Einsatz von CSS3) laufen lassen. Das Ergebnis sieht schlimmer aus als im IE8...

pizza4ever schrieb:

Täusche ich mich, oder sieht mir dieses Beispiel:
http://www.html-seminar.de/beispielwebsite-1-spalten-layout/

Zum Vergrößern anklicken....

Furchtbar, einfach furchtbar...
Wer einen Schlagschatten heute noch ans Background-Image umsetzt, der gehört ausgepeitscht. Außerdem stimmen da die Abstände in der Navigation nicht im Traum, das Headerbild ist abgeschnitten (weil wohl niemand an FullHD gedacht hat...), mit IDs wurde mehr als verschwenderisch umgegangen,...

Das ist ein gutes Beispiel, wie man es NICHT macht.