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

[ERLEDIGT] Überfordert mit Div Verschachtelung

Status
Für weitere Antworten geschlossen.
I30R6

I30R6

Neues Mitglied
Hi,

Ich versuche gerade ein Seitenlayout mit Divs zu erstellen, welche alle ein festes Seitenverhältnis zueinander haben, sprich egal auf welchem Monitorformat die Seite angezeigt wird, alles immer dasselbe Größenverhältnis zueinander haben.

Ich habe mich dabei an folgendem Tool orientiert. Dort lassen sich Divboxen bequem per Schieberegler generieren.
http://go-lux.de/go-lux-stellt-sich-vor/webtec/46-flexible-divs-mit-festem-seitenverhaeltnis

Den daraus entsehenden Code verstehe ich nur in Ansätzen, und arbeite daher vorwiegend mit copy/paste und etwas rumspielen an den CSS Eingaben.
Aber selbst das ist anscheinend zu anspruchsvoll für mich. Was ist aktuell die einfachste Möglichkeit ein komplexes Seitenlayout zu erstellen. Sollte ich mich da an irgendeinen Baukasten wie Jimdo oder Wix wenden und die dort erstellten Ergebnisse dann einfach in meine Seite einbinden, was empfehlt ihr mir?

Vielleicht kann auch jemand das Problem in meinem aktuellen Seitenaufbau finden. Den Code, den ich zusammengebastelt habe, sieht aktuell so aus.


Code: 
-----CSS-----

.aspect-box {width: 80%; border: 1px solid red; padding: 1rem 1rem 0 0; margin: 0 auto; position: relative;}
.block-aspect {float:left; width:calc(100% / 2); position:relative;}
.aspect-spacer {content:""; display:block; padding-top:100%;}
.tile {position: absolute; top:0; right:0; bottom: 2rem;left: 2rem; border: 1px solid #ccc;}
.tile2 {position: absolute; top:2%; right:2%; bottom: 75%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}
.tile3 {position: absolute; top:27%; right:2%; bottom: 2%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}
.tile4 {position: absolute; top:27%; right:2%; bottom: 2%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}

.aspect-box2 {width:100%; border: 1px solid blue; padding: 1rem 1rem 0 0; margin: 0 auto; position: relative;}
.block-aspect2 {float:left; width:calc(100% / 3); position:relative;}
.aspect-spacer2 {content:""; display:block; padding-top:100%;}


-----HTML------

<div class="aspect-box">

<div class="block-aspect">
<div class="aspect-spacer">&nbsp;</div>
<div class="tile"></div>
</div>


<div class="block-aspect">
<div class="aspect-spacer">&nbsp;</div>
<div class="tile">
<div class="tile2">XXX</div>
<div class="tile3">

<div class="aspect-box2">

<div class="block-aspect2">
<div class="aspect-spacer2">&nbsp;</div>
<div class="tile"></div>
</div>


<div class="block-aspect2">
<div class="aspect-spacer2">&nbsp;</div>
<div class="tile"></div>
</div>

<div class="block-aspect2">
<div class="aspect-spacer2">&nbsp;</div>
<div class="tile"></div>
</div>

</div><!-- Tile3 Ende  -->
</div>
</div>

</div><!-- Aspektbox Ende  -->

<div style="clear:both;"></div>


Ich will das in der Blauen Div Box 4 Reihen mit 5 Spalten an quadratischen Boxen gleichmäßig zueinander ausgerichtet sind.

Hier ein Beispielbild:



Viele Grüße
I30R6
 
I30R6 schrieb:
Was ist aktuell die einfachste Möglichkeit ein komplexes Seitenlayout zu erstellen.
Zum Vergrößern anklicken....
"Einfach" ist relativ. Liegt immer im Auge des Betrachters.

Als allererstes gilt: So eine DIV-Suppe hat ein ganz schlechtes Standing, denn das allgemeine Blockelement <div> besitzt semantisch überhaupt keine besondere Bedeutung; es definiert nur einen allgemeinen Bereich.
Ziel sollte es aber sein, den Seiteninhalt semantisch aussagekräftig zu formen.

Eine Überschrift wird je nach ihrer Rangordnung mit <h1> bis <h6> ausgezeichnet (<h1> = Hauptüberschrift).

So kann z.B. ein Textreader dem Sehbehinderten mitteilen, dass nun die Hauptüberschrift "Foobar" folgt.

Für den Sehstarken erscheint am Bildschirm die Überschrifthierachie dann entsprechend in abgestuften Größen; <h1> am größten, <h6> am kleinsten.

Da das da oben auf dem Bild eine Bildergallerie darstellt, in der Bilder über Thumbnails ausgewählt/geladen werden, ist neben den Elementen zur generellen Seitenstrukturierung (<header>, <main>, <section>, <nav>, <footer>), jenes gefragt, das die Grafiken semantisch (https://de.wikipedia.org/wiki/Semantik) im Dokument strukturiert:
und die optionale Möglichkeit bietet, den Bildern noch zusätzlich eine Beschriftung (Bildunterschrift, Caption) zu gönnen:
Es bedarf hier also keiner <div>'s, um ein "komplex(er)es" Seitenlayout auf die Beine zu stellen. Die Komplexität steckt nicht im Element (<div>), sondern im Stylesheet.
 
Danke für den Input und die Links, aber das ist in meinem Fall meckern auf bereits zu hohem niveau^^

Ich kann versuchen div boxen einzusparen nachdem ich es geschaft habe diese überhaupt richtig zu händeln, aktuell scheitere ich ja schon daran.

Divs in CSS und veraltete HTML Tabellen sind meines Wissens die einzigen Möglichkeiten eine Seite gestalterisch zu unterteilen. Wo willst du bei meinem Beispiel Div Unterteilungen weg lassen? Wie würdest du bspw. Einen Bereich der Seite in 5X5 Zeilen/Spalten aufteilen ohne auf etliche Div Boxen oder Tabellen zurück zu greifen? Ich wüsste jetzt bspw. wie ich div boxen einspare wenn der Seitenaufbau nicht flexibel sein müsste. Aber die Methode auf der Seite

http://go-lux.de/go-lux-stellt-sich-vor/webtec/46-flexible-divs-mit-festem-seitenverhaeltnis

Funktioniert nur über div boxen.
 
I30R6 schrieb:
Divs in CSS und veraltete HTML Tabellen sind meines Wissens die einzigen Möglichkeiten eine Seite gestalterisch zu unterteilen.
Zum Vergrößern anklicken....
Dann ist es an der Zeit, Dein (stagnierendes) Wissen auf den Stand der heutigen Technik zu bringen, denn diese längst überholte Aussage traf einst auf HTML 4.01 und XHTML 1.0/1.1 zu, als Elemente wie <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> noch nicht existierten.

Welcher Webentwickler kennt noch aus diesen(Gründer)Zeiten nicht solche "Seitenkonstrukte" wie <div id="header">, <div id="nav">, <div id="main">, <div id="footer">, und hat drei Kreuze geschlagen, als mit Einführung von HTML5 dieser Spuk ein Ende hatte?
I30R6 schrieb:
Wo willst du bei meinem Beispiel Div Unterteilungen weg lassen?
Zum Vergrößern anklicken....
Überall. Die Auflösung folgt gleich im Anschluß :cool:
I30R6 schrieb:
Wie würdest du bspw. Einen Bereich der Seite in 5X5 Zeilen/Spalten aufteilen ohne auf etliche Div Boxen oder Tabellen zurück zu greifen?
Zum Vergrößern anklicken....
Die Frage lässt sich nicht pauschal beantworten, da es immer auf den Kontext des Seiten-/Elementinhalts ankommt, was da nun semantisch opportun ist (siehe in meiner ersten Antwort die Empfehlung, für die abgebildete Bildergallerie auf <figure> zurückzugreifen).
I30R6 schrieb:
Aber die Methode auf der Seite

http://go-lux.de/go-lux-stellt-sich-vor/webtec/46-flexible-divs-mit-festem-seitenverhaeltnis

Funktioniert nur über div boxen.
Zum Vergrößern anklicken....
Vorsicht: Du bist gerade dabei, Dich gekonnt zu weit aus dem Fenster zu lehnen, weil Du hier Behauptungen aufstellst, die jeglicher Grundlage entbehren - sprich: die Du nicht zuvor seriös validiert hast, um einem alten Hasen in der Webentwicklung wirklich noch was Neues beibringen zu können.

Um Dich vom Gegenteil zu überzeugen, hab ich den generierten Code des Demos, zuzüglich <div class="vert-align"></div> und der übrigen erforderlichen CSS-Regeln (aus custom.css), in ein Fiddle kopiert, und alle <div>'s ausnahmelos ersetzen können, ohne irgendwelche Einbußen zu erleben:
HTML: 
<main class="aspect-box">
  <section class="block-aspect">
    <header class="aspect-spacer">&nbsp;</header>
    <article class="tile">
      <aside class="vert-align">
        <h2>1 2 3 4 5 6 7 8 9</h2>
      </aside>
    </article>
  </section>
  <section class="block-aspect">
    <header class="aspect-spacer">&nbsp;</header>
    <article class="tile">
      <aside class="vert-align">
        <h2>Bisschen text!</h2>
        <p>1 12 113 11114 111115 11114</p>
      </aside>
    </article>
  </section>
</main>
Wie ich schon im letzten Post angedeutet habe, spielt es keine Rolle, ob die Elemente im Dokumentkörper gleichermaßen <div> lauten, oder mittels <main>, <header>, <section>, usw. differenzierter benannt werden, um einen semantischen Kontext herzustellen.

Selbstverständlich kann es vorkommen, dass ein alternativ gewähltes HTML-Element nicht die typische Grundeigenschaft des Blockelements <div> besitzt. Ist sie aber zwingend erforderlich, lässt sich der Mangel ganz einfach im CSS per display:block ausgleichen/regulieren.
 
I30R6 schrieb:
Was ist aktuell die einfachste Möglichkeit ein komplexes Seitenlayout zu erstellen.
Zum Vergrößern anklicken....
Wer Arbeit + Zeit sparen will, das Ganze von Grund auf selbst zu entwickeln, nutzt ganz klar ein CSS-Framework, wie Bootstrap (https://getbootstrap.com | http://holdirbootstrap.de), weil es auf unterschiedlichster Ebene Automatismen bereitstellt, wie z.B. ein Raster-System (incl. diverser Optionen),oder Hilfsklassen (mit diversen speziellen Eigenschaften), und bei allem, was ansonsten noch so im Portfolio steckt, immer "Mobile-First" gilt.

Zusätzliche/nachträgliche Aufbereitung/Entwicklung der responsiven Version für alles Mobile mit unterschiedlich(st)er Display-Auflösung entfällt :cool:

Aber Achtung: Die Komplexität dieses Frameworks setzt vom Anwender fundierte Kenntnisse und Praxiserfahrung voraus, um direkt loslegen zu können, ohne je die Dokumentation gesehen zu haben .
 
Nach langer Unterbrechung habe jetzt doch noch mal das Ganze in Angriff genommen und aus den Vorschlägen und dem ursprünglichem Script der flexiblen Divboxen von

http://go-lux.de/go-lux-stellt-sich-vor/webtec/46-flexible-divs-mit-festem-seitenverhaeltnis

folgendes zusammengeschustert.

https://jsfiddle.net/ubygmfyx/

Semantisch ist es wahrscheinlich weiterhin eine Katastrophe und als Div Suppe zu betrachten aber erst mal will ich optisch einfach den Aufbau hin bekommen.

dieses Bootstrap sieht gut aus, ich denke damit werde ich langfristig glücklicher ;)

Hier jedenfalls das aktuelle Script. Ab einem gewissen minimierungsgrad bei der Seitenskalierung verliert die Bildergalerie leider irgendwie die Formatierung, allerdings erst wenn die Seite extrem klein minimiert wird und anscheinend auch nur innerhalb des JSfiddle Editors ... merkwürdig O_O

... kann ich aber mit Leben, da die Seite ohnehin nicht für Handys und andere kleine Displays optimiert ist.

Großes Danke auf jedenfall für die Hilfe
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben