myCSharp.de - DIE C# und .NET Community
Willkommen auf myCSharp.de! Anmelden | kostenlos registrieren
 
 | Suche | FAQ

» Hauptmenü
myCSharp.de
» Startseite
» Forum
» FAQ
» Artikel
» C#-Snippets
» Jobbörse
» Suche
» Regeln
» Wie poste ich richtig?
» Forum-FAQ

Mitglieder
» Liste / Suche
» Wer ist wo online?

Ressourcen
» openbook: Visual C#
» openbook: OO
» Microsoft Docs

Team
» Kontakt
» Übersicht
» Wir über uns

» myCSharp.de Diskussionsforum
Du befindest Dich hier: Community-Index » Diskussionsforum » Entwicklung » Web-Technologien » Was ist State of the Art um mit HTML und CSS ein Layout zu erstellen?
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | Thema zu Favoriten hinzufügen

Antwort erstellen
Zum Ende der Seite springen  

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

 
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Buchstabensuppe Buchstabensuppe ist männlich
myCSharp.de-Mitglied

Dabei seit: 19.01.2016
Beiträge: 88


Buchstabensuppe ist offline

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

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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 Augenzwinkern

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:

XML-Code:
<!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)

XML-Code:
<!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". verwundert

Versteht ihr ungefähr wo es hakt bei mir?

Danke und ich hoffe ihr seid alle gesund!
Neuer Beitrag 12.05.2020 20:59 Beiträge des Benutzers | zu Buddylist hinzufügen
MrSparkle MrSparkle ist männlich
myCSharp.de-Team

avatar-2159.gif


Dabei seit: 16.05.2006
Beiträge: 5.513
Herkunft: Leipzig


MrSparkle ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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.
Neuer Beitrag 12.05.2020 22:45 Beiträge des Benutzers | zu Buddylist hinzufügen
MrSparkle MrSparkle ist männlich
myCSharp.de-Team

avatar-2159.gif


Dabei seit: 16.05.2006
Beiträge: 5.513
Herkunft: Leipzig


MrSparkle ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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.
Neuer Beitrag 13.05.2020 14:21 Beiträge des Benutzers | zu Buddylist hinzufügen
Buchstabensuppe Buchstabensuppe ist männlich
myCSharp.de-Mitglied

Dabei seit: 19.01.2016
Beiträge: 88

Themenstarter Thema begonnen von Buchstabensuppe

Buchstabensuppe ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

Vielen Dank MrSparkle!

Ich werde dann also die iFrames wieder entfernen und mich genauer mit dem Flex Layout in deinem Link beschäftigen cool
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 smile

Gruß

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Buchstabensuppe am 13.05.2020 19:37.

Neuer Beitrag 13.05.2020 19:33 Beiträge des Benutzers | zu Buddylist hinzufügen
Buchstabensuppe Buchstabensuppe ist männlich
myCSharp.de-Mitglied

Dabei seit: 19.01.2016
Beiträge: 88

Themenstarter Thema begonnen von Buchstabensuppe

Buchstabensuppe ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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 smile

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.

XML-Code:
<!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

XML-Code:
#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! fröhlich

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Buchstabensuppe am 24.05.2020 18:13.

Neuer Beitrag 24.05.2020 17:20 Beiträge des Benutzers | zu Buddylist hinzufügen
MrSparkle MrSparkle ist männlich
myCSharp.de-Team

avatar-2159.gif


Dabei seit: 16.05.2006
Beiträge: 5.513
Herkunft: Leipzig


MrSparkle ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

Zitat von Buchstabensuppe:
#overview.display: none; funktioniert nicht.

Probier mal:

Code:
1:
2:
3:
#overview {
  display: none;
}
Neuer Beitrag 25.05.2020 16:36 Beiträge des Benutzers | zu Buddylist hinzufügen
Buchstabensuppe Buchstabensuppe ist männlich
myCSharp.de-Mitglied

Dabei seit: 19.01.2016
Beiträge: 88

Themenstarter Thema begonnen von Buchstabensuppe

Buchstabensuppe ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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

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

Ein allgemeines, isoliert stehendes:

XML-Code:
#overview {
    display: none;
}

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

XML-Code:
#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?

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Buchstabensuppe am 25.05.2020 17:06.

Neuer Beitrag 25.05.2020 17:05 Beiträge des Benutzers | zu Buddylist hinzufügen
MrSparkle MrSparkle ist männlich
myCSharp.de-Team

avatar-2159.gif


Dabei seit: 16.05.2006
Beiträge: 5.513
Herkunft: Leipzig


MrSparkle ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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.
Neuer Beitrag 25.05.2020 18:10 Beiträge des Benutzers | zu Buddylist hinzufügen
Buchstabensuppe Buchstabensuppe ist männlich
myCSharp.de-Mitglied

Dabei seit: 19.01.2016
Beiträge: 88

Themenstarter Thema begonnen von Buchstabensuppe

Buchstabensuppe ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

Zitat von MrSparkle:
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:

XML-Code:
#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:

XML-Code:
#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!
Neuer Beitrag 25.05.2020 19:41 Beiträge des Benutzers | zu Buddylist hinzufügen
MrSparkle MrSparkle ist männlich
myCSharp.de-Team

avatar-2159.gif


Dabei seit: 16.05.2006
Beiträge: 5.513
Herkunft: Leipzig


MrSparkle ist offline

Beitrag: beantworten | zitieren | editieren | melden/löschen       | Top

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:

Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
#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:

Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
#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.
Neuer Beitrag 25.05.2020 21:26 Beiträge des Benutzers | zu Buddylist hinzufügen
Baumstruktur | Brettstruktur       | Top 
myCSharp.de | Forum Der Startbeitrag ist älter als 5 Monate.
Der letzte Beitrag ist älter als 5 Monate.
Antwort erstellen


© Copyright 2003-2020 myCSharp.de-Team | Impressum | Datenschutz | Alle Rechte vorbehalten. | Dieses Portal verwendet zum korrekten Betrieb Cookies. 25.10.2020 15:22