Laden...

Was ist State of the Art um mit HTML und CSS ein Layout zu erstellen?

Erstellt von Buchstabensuppe vor 3 Jahren Letzter Beitrag vor 3 Jahren 1.880 Views
B
Buchstabensuppe Themenstarter:in
88 Beiträge seit 2016
vor 3 Jahren
Was ist State of the Art um mit HTML und CSS ein Layout zu erstellen?

Hallo liebe Entwicklergemeinde,

letztes Jahr habe ich mich ein wenig mit ASP.Net beschäftigt, das war spannend hat sich aber wieder im Sande verlaufen erstmal.
Super, dass es in dem Unterforum hier auch um HTML und CSS allgemein geht, dann brauch ich mir kein Forum extra für Webdesign raussuchen 😉

Ich möchte erstmal einen Schritt zurück machen und meine Kenntnisse in HTML5 / CSS / JavaScript / PHP auffrischen bzw. überhaupt mal systematisch erlernen.
Das letzte mal, als ich mich mit HTML beschäftigt habe dürfte locker 15 Jahre her sein, damals wurde noch alles mit Tabellenlayouts gemacht, die habe ich noch gerade so verstanden als junger Teenager.
CSS begann da gerade seinen Siegeszug, wenn ich mich recht erinnere.
HTML5 ging komplett an mir vorbei, weshalb ich in den letzten Tagen und Wochen als erstes mal das HTML5 Handbuch durchgelesen habe.

So weit, so gut. Leider ist das Kapitel über Praxisbeispiele für Webseitenlayouts nicht mehr verfügbar.
Bei meinem ersten Versuch das simpelst mögliche Layout zu erstellen (2 Spalten: links eine schmale Navigation, rechts content) hab ich schon Grundsatzfragen.

Mein Ansatz mit iFrames funktioniert zwar, aber ist das "state of the art"?
Ich weiß es sind nicht mehr die verpönten Framesets aus HTML4, aber benutzt man sie überhaupt zur Layoutgestaltung oder nur um externe Inhalte einzubinden?
Und muss ich mir Gedanken um die Sicherheit machen, wenn ich lediglich HTML Seiten von dem eigenen Webserver damit einbinde? (Ich frage wegen dem sandbox Attribut, aber wenn ich das richtig verstanden habe geht es bei der SameOriginPolicy ja nur darum was fremde Webseiteninhalte - die ich gar nicht vorhabe einzubinden - mit der eigenen machen könnten?).

index.html mit den zwei iFrames:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>

    <body style="background-color: lightblue;">

        <div id="left" style="width: 150px; margin-right: 25px; float: left;">
            <iframe name="navigation" src="menu.html" width="150">
                <a href="menu.html">Navigation anzeigen</a>
            </iframe>
        </div>

        <div id="right" style="width: 600px; float: left;">
            <iframe name="content" src="overview.html" width="600">
                <a href="overview.html">Übersicht anzeigen</a>            
            </iframe>
        </div>

    </body>
</html>

Die Navigation (menu.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="overview.html" target="content">Übersicht</a></li>
                <li><a href="page1.html" target="content">Page1</a></li>
                <li><a href="page2.html" target="content">Page2</a></li>
            </ul>
        </nav>
    </body>
</html>

Ich gebe also dem iFrame einen Namen, den ich im Navigationslink "targette".
Kann man das so machen oder sollte ich schnell wieder vergessen?

Irgendwie sträubt sich etwas in mir gegen iFrames, weiß auch nicht warum.
Aber wie macht man es denn sonst?
In den Tutorials, die ich so gefunden habe sehe ich die Leute immer nur einen Heidenaufwand betreiben ihre CSS Boxen wunderschön zu stylen, aber es wird nie so richtig gezeigt wie das ganze dann "interagiert" bzw. ich finde die Stelle nicht in 45min+ Videos.

Den iFrame kann ich ja "targetten" über das name Attribut. Bei einem <div> Container scheint das nicht zu gehen (bzw. ich glaub nur mit JS und getElementById dann oder wie?).

Wie macht man es denn, dass die Links aus der Navigation sich in der richtigen DIV Boxen öffnen und nicht in einer neuen Seite?
Und angemommen ich würde das hinkriegen, und ich hätte links einen DIV Container mit der Navigation und rechts einen DIV Container mit dem Inhalt - ohne iFrames.
Dann müsste ich ja jedesmal alle HTML Seiten verändern, wenn ich einen neuen Navigationspunkt hinzufüge? Oder inkludiert man die navi dann mit php? Das würde eigentlich Sinn machen.

Ich hoffe es ist nicht zu wirr geschrieben, ich merke ich hab Schwierigkeiten mein Problem überhaupt zu formulieren. Aber vielleicht ganz simpel ausgedrückt: Sind iFrames üblich / empfehlenswert zum layouten und wie macht man es ohne?
Bei diesen ganzen verschiedenen Konzepten wie -Grid/-Box/-Float/-Flex/-Whatever scheint es immer nur um die Anordnung von Boxen zu gehen bzw. um Responsive Design und nicht um die "Interaktion". 🤔

Versteht ihr ungefähr wo es hakt bei mir?

Danke und ich hoffe ihr seid alle gesund!

5.657 Beiträge seit 2006
vor 3 Jahren

Vergiß das mit den Frames. Die brauchst du nur, wenn du externe Inhalte auf deiner Webseite einbinden willst. Fürs Layout gibt es andere Möglichkeiten, z.B. über Flexbox: A Complete Guide to Flexbox . Und Styles definiert man üblicherweise in einer CSS-Datei.

Weeks of programming can save you hours of planning

5.657 Beiträge seit 2006
vor 3 Jahren

Nachtrag:

In reinem HTML gibt es keine Möglichkeit, Templates für wiederkehrende Elemente wie Header, Menüs oder Footer zu definieren. Früher gab es mal Framesets, aber die sind inzwischen obsolet. IFrames sind dagegen nur zum Einbinden externer Resourcen zu verwenden, also meistens Werbung, und werden daher auch gerne mal von AdBlockern ignoriert.

Lösungen dafür gibt es je nach verwendeter Technologie:

Werden die Seiten auf dem Server gerendert, gibt es bei ASP.NET MVC PartialViews, bei PHP Includes etc. Man kann auch ein CMS wie WordPress etc. verwenden, dort kann man dann Templates für bestimmte Seitenbereiche definieren.

Wird die Seite auf dem Client gerendert, z.B. mit Angular, wird die Seite auch in Komponenten aufgeteilt, die dann kontextabhängig angezeigt oder nicht angezeigt werden können. Auch mit reinem JavaScript kann man Seitenelemente austauschen.

Willst du eine rein statische HTML-Seite erstellen, dann kannst du den CSS :target Selector verwenden, um Inhalte ein- oder auszublenden (und dabei sogar animierte Überblendungen anzeigen). Die URL www.deineseite.de#contact blendet dann das Kontaktformular ein und alles andere aus, www.deineseite.de#about die "Über mich"-Seite, und www.deineseite.de die Homepage. Der Rest der Seite (Header usw.) bleibt dabei stehen.

Weeks of programming can save you hours of planning

B
Buchstabensuppe Themenstarter:in
88 Beiträge seit 2016
vor 3 Jahren

Vielen Dank MrSparkle!

Ich werde dann also die iFrames wieder entfernen und mich genauer mit dem Flex Layout in deinem Link beschäftigen 8)
Der CSS target Selektor wird dafür bestimmt noch nützlich und mit (reinem) JavaScript / JQuery wollte ich mich ohnehin mal beschäftigen!

Wäre doch gelacht, wenn ich kein sauberes 2 Spalten Layout hinkriegen würde 🙂

Gruß

B
Buchstabensuppe Themenstarter:in
88 Beiträge seit 2016
vor 3 Jahren

Guten Abend zusammen,

also ich habe mich an dem Flex Layout in der Zwischenzeit mal ein wenig ausprobiert.
Ich glaube der Ansatz sieht jetzt so wesentlich besser aus, oder?
Also mobile first oder großartig responsive ist da jetzt vermutlich noch nichts, aber so ganz grundsätzlich passt das glaube ich. Oder fällt euch irgendwas "grobes" daran auf?

Sonst wäre mein nächster Schritt glaube ich XAMMP zu installieren und meine Content Section anstatt mit dem CSS Target Selektor mit PHP und include zu befüllen. Denn PHP werde ich eh benötigen.
Das müsste ich dann eigentlich hoffe ich alleine hinkriegen 🙂

Trotzdem würde mich der auskommentierte Teil in der CSS Datei noch interessieren, falls ich doch mal nur mit statischen HTML Seiten auskommen möchte? Hab versucht es zu googlen, aber das war nicht so erfolgreich.

<!DOCTYPE html>
<html>
    <head>
        <title>Flexbox Test</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <h1>Header</h1>
        </header>
    
        <main class="flex-container">
        
            <section class="navigation">
                <nav>
                    <ul>
                        <li><a href="#overview">Übersicht</a></li>
                        <li><a href="#page1">Page1</a></li>
                        <li><a href="#page2">Page2</a></li>
                    </ul>
                </nav>
            </section>
        
            <section class="content">
                <h3 id="overview">
                    Content coming soon..
                </h3>
                <h3 id="page1">
                    Page 1
                </h3>
                <h3 id="page2">
                    Page 2
                </h3>
            </section>
        
        </main>
    
        <footer>
            <h1>Footer</h1>
        </footer>    
    </body>
</html>

style.css


#page1, #page2 {
    display: none;
}

/*
Kann ich innerhalb dieses Blocks das <h3> Element mit der ID "overview" referenzieren / ausblenden?
#overview.display: none; funktioniert nicht.
\*/ 
#page1:target, #page2:target {
    display: block;
} 

body {
    padding: 10px;
    margin: 10px;
}

header {
    border-style: solid;
    padding: 10px;
    margin: 10px;
}

footer {
    border-style: solid;
    padding: 10px;
    margin: 10px;
}

 .flex-container {
    display: flex;
    border-style: solid;
    padding: 10px;
    margin: 10px;
}

.navigation {
    width: 100px;
    height: 100px;
    border-style: solid;
    background-color: chartreuse;
    padding: 10px;
    margin: 10px;
}

.content {
    height: 200px;
    width: 100%;
    border-style: solid;
    background-color: blueviolet;    
    padding: 10px;
    margin: 10px; 
}

h1 { 
    font-size:300%;
    color: orange;
    font-style:italic;
 }

Schönen Sonntag! =)

5.657 Beiträge seit 2006
vor 3 Jahren

#overview.display: none; funktioniert nicht.

Probier mal:


#overview {
  display: none;
}

Weeks of programming can save you hours of planning

B
Buchstabensuppe Themenstarter:in
88 Beiträge seit 2016
vor 3 Jahren

Nope, das funktioniert leider nicht.
Also jedenfalls, falls du meintest ich soll es verschachteln?

#page1:target, #page2:target {
    display: block;
    #overview {
        display: none;
      }
} 

Ein allgemeines, isoliert stehendes:

#overview {
    display: none;
}

funktioniert natürlich, so mache ich es ja auch am Anfang mit page#1 und page#2:

#page1, #page2 {
    display: none;
}

Aber ich dachte ich kann möglicherweise andere HTML Elemente innerhalb des
#page1:target, #page2:target { } Blocks referenzieren, scheint aber nicht so zu sein?

5.657 Beiträge seit 2006
vor 3 Jahren

Dann verstehe ich nicht, was du erreichen möchtest. So, wie du es geschrieben hast, ist es jedenfalls kein gültiges CSS, daher kann es nicht funktionieren.

Weeks of programming can save you hours of planning

B
Buchstabensuppe Themenstarter:in
88 Beiträge seit 2016
vor 3 Jahren

Dann verstehe ich nicht, was du erreichen möchtest. So, wie du es geschrieben hast, ist es jedenfalls kein gültiges CSS, daher kann es nicht funktionieren.

Es gibt ja drei <h3> Überschriften: page1, page2, overview
und drei links: <a href="#page1"> bzw. #page2 und #overview

Klickt jetzt jemand auf diesen link: <a href="#page1"> wird dieser Codeblock ausgeführt:

#page1:target, #page2:target {
    display: block
}

Dadurch wird dann das <h3> Element mit der ID "page1" auf "display: block" gesetzt und damit eingeblendet (weil der link mit dem href="#page1" angeklickt wurde).
(Bzw. wird das <h3> Element mit der id=page2 eingeblendet, falls jemand den link mit <href="#page2" gewählt hätte.)

So weit so gut.
Jetzt hätte ich aber noch zusätzlich gerne, dass das <h3> Element mit der id=overview ausgeblendet wird. Aber nicht grundsätzlich, sondern nur wenn dieser "Event-Handler" für page1 oder page2 ausgeführt wird.
Ich möchte also innerhalb dieses Block:

#page1:target, #page2:target {
    display: block
}

noch weitere HTML Elemente (in diesem Fall halt <h3 id="overview">) "refenzieren" und etwas damit machen.
Ich fand den Gedanken naheliegend und habe mich gewundert, dass das nicht geht - schließlich haben ja alle eine ID.

Aber ich glaube ich habe den :target selector einfach missverstanden.
Man gibt einfach einem Link eine ID von einem HTML Element mit und kann dann die Erscheinung von diesem Element manipulieren, so verstehe ich es jetzt.

Ich danke dir für deine Mühe und Input hat mir geholfen!

5.657 Beiträge seit 2006
vor 3 Jahren

Das ist kein Code und es gibt auch keine Event-Handler in CSS, daher ist es schwierig, deine Gendanken nachzuvollziehen.

Es sind Styles, und du kannst sie mit einer Kombination von Selektoren auf jedes beliebige Element anwenden:


#page1:target, 
#page2:target {
    /* Style for selected pages */
}

#page1:target #overview, 
#page2:target #overview {
    /* Style for overview inside selected pages */
}

#page1:not(:target) #overview, 
#page2:not(:target) #overview {
    /* Style for overview inside unselected pages */
}

/* usw. */

Hier gibt es eine Übersicht der Selektoren: CSS Selector Reference

Schöner geht es nur noch mit SCSS, das müßtest du aber vorher zu CSS kompilieren:


#page1, 
#page2 {
  /* Style for unselected pages */

  #overview {
    /* Style for overview inside unselected pages */
  }

  &:target {
      /* Style for selected pages */
  
    #overview {
        /* Style for overview inside selected pages */  
    }
  }
}

Du wirst aber niemals erreichen können, daß ein Element innerhalb eines unsichtbaren Elternelements wieder sichtbar wird. In dem Fall mußt du das Element außerhalb des Elternelements definieren.

Weeks of programming can save you hours of planning