CSS - neue und gute Antworten

  • Mehrere Websites in nur einer Html-Datei?
    Antwort von ChrisCat1 ·

    Du kannst z.B. mit JavaScript bestimmte Teile der Webseite ausblenden. Ein link leitet dich dann nicht auf eine andere Seite weiter sondern führt einen JavaScript Befehl aus, welcher den aktuell sichtbaren Teil ausblendet und stattdessen einen anderen Teil der Webseite einblendet.

    Ansonsten kannst du auch mit einer Serverseitigen Programmiersprache arbeiten, z.B. PHP. Hierbei packst du die Bereiche der Webseite (Unterdeiten) dan in if-Abfragen. Wird dann eine bestimmte GET-Variable übergeben wird ein bestimter Abschnitt angezeigt. Die Links rufen dann die gleiche Datei auf aber mit unterschiedlichen Werten der GET-Variablen. So wird die Seite dann jedesmal neu geladen und ein anderer Teil wird angezeigt.
    Anstelle von Links kannst du dies auch über ein Formular realisieren, das ist dann der Teil mit dem <form action=""> welchen du erwähnt hast. Bei der Version mit dem Formular kannst du die Werte auch anstelle von GET per POST übergeben, dies verhindert dann aber, dass direkte Links auf Unterdeiten gesetzt werden können.

  • Mehrere Websites in nur einer Html-Datei?
    Antwort von mastema666 ·

    Nur mit rein HTML/CSS/JS wird das imho extrem unübersichtlich, ist aber natürlich möglich, du packst dann die verschiedenen Inhalte in jeweils eigene Container und blendest die ein/aus bei Klick / Hover / was auch immer auf dem jeweiligen Menüpunkt.

    Sinnvoller wäre es imho aber einfach mit PHP/MySQL zu arbeiten, da braucht man dann ggf auch nur ein HTML-Template, je nachdem wie das nachher halt aussehen soll. PHP (oder eine andere serverseitige Sprache) wirst du aber sehr wahrscheinlich sowieso benötigen wenn du da irgendwas mit Formularen machen willst (aber kA wie das nu dabei helfen soll alles in eine Datei zu packen, aber sowas brauchst du halt um die Eingaben aus diesen Formularen zu verarbeiten).

    Wobei man auch da in der Regel allein der Übersicht halbe schon mehrere Dateien benutzt, aber wenn du unbedingt willst kannst du natürlich auch alles in nur eine Datei packen, wird dann halt wie gesagt extrem unübersichtlich.

    Also es ist möglich, macht aber normalerweise afaik niemand, wenn überhaupt dann vielleicht noch bei "Visitenkarten-Seiten" (die halt sowieso kaum Inhalte haben), aber nicht bei größeren Seiten.

  • Mehrere Websites in nur einer Html-Datei?
    Antwort von Quantm ·

    Wenn du mehrere Seiten mit einem HTML anzeigen willst, dann sprichst du von einer Single-Page Applikation. Es gibt mehrere Möglichkeiten, solch eine Applikation zu erstellen:

    • Verwende ein Framework wie Angular, React oder Vue. Diese Frameworks sind die beliebtesten Frameworks und wird auch in einer professionellen Umgebung verwendet.
    • Benutze Javascript und arbeite mit Events und CSS-Styles. Wenn zum Beispiel ein Button geklickt wird, dann verschwindet das eine Element und eine andere erscheint.
    <button onClick="switchDivs">Switch</button>
    <div class="displayed">...Element</div>
    <div class="hidden">...Element</div>
    

    Wenn du dann auf dem Button drückst, dann verändert sich der Code so:

    <button onClick="switchDivs">Switch</button>
    <div class="hidden">...Element</div>
    <div class="displayed">...Element</div>
    

    Diese CSS Attributen wirst du verwenden:

    .hidden { display: none }
    .displayed {display: block}
    

    Natürlich kannst du ".displayed" weglassen.

    • Wenn du mit PHP arbeitest, dann kannst du einige HTML-Code mit einer if-Bedingung umschliessen. Diese wird nur erscheinen, wenn diese Bedingung zutreffen
    <?php if (hidden) {?>
    <div>...Element</div>  
    <?php }?>
    

    So, das sind die drei Möglichkeiten, die ich dir empfehlen würde, um eine Single-Page App zu machen. Frameworks würde ich dir von diesen drei sehr empfehlen zu lernen.

  • Webseite wird von anderen Browsern anderst angezeigt?
    Antwort von regex9 ·

    Da meine Antwort bei deiner anderen Frage (die ja, wie man sieht, mehrfach von dir gestellt wurde) gelöscht wurde, schreibe ich sie hier nochmals auf.

    ---

    Korrigiere deinen Doctype, es fehlt das Ausrufezeichen.

    <!doctype html>
    

    Gehe folgend mit dem Validator über deine jeweiligen Seiten und korrigiere die Fehler. Selbst für CSS gibt es einen Dienst. Schau auch in der Browserkonsole, bspw. kann deine eingebundene JavaScript-Datei nicht gefunden werden.

    Sollte es danach noch immer zu Problemen kommen, leere deinen Browsercache, schließe alle Browserinstanzen und öffne die Seite danach erneut.

    ---

    Zuletzt noch Anmerkungen zu dem Inhalt deiner Seite:

    Ich habe mehrere Rechtschreibfehler entdeckt, fachliche Fehler gibt es ebenso. Bezüglich Letzerem gehe ich nur auf das ein, was mir beim Überfliegen dieser Seite sofort aufgefallen ist.

    (...) fortgeschrittene User können zusätzlich noch Javascript verwenden(heute wir oft anstelle von Javascript oft auch PHP oder die Programmiersprache Dart verwendet)

    Sofern es um JavaScript-Anwendungen im Browser geht, gibt es keinen wirklichen Ersatz (höchstens Plugin-Krücken wie Silverlight). Nur zur Entwicklungszeit lassen sich andere Sprachen wie TypeScript, Dart, Python oder CoffeeScript einsetzen. Letzten Endes werden sie aber doch wieder zu JavaScript übersetzt, damit der Browser die Anwendung ausführen kann. Chromium zähle ich nicht mit.

    Serverseitig wird PHP schon viel länger als JavaScript angewandt, die Sprache wurde 1995 entwickelt und übernahm Ende der 90er nach und nach den Markt. Erst viele Jahre später kam der Trend auf, auch JavaScript serverseitig einzusetzen, bspw. seit 2009 mit nodejs.

    <!DOCTYPE html> </html>Definiert ein HTML-Dokument und bildet somit das Rahmengerüst.

    Das ist falsch und ich meine, dass ich dir das schon einmal bei einer älteren Frage von dir geschrieben habe (?). Der Doctype stellt keinen Tag dar und er bildet auch keinen Rahmen.

    Dies:

    <!DOCTYPE html>
    <html>
      <!-- ... -->
    </html>
    

    wäre korrekt. Der Doctype muss immer gegeben sein - prüfe dahingehend dein Beispiel unter der Tabelle.

  • Server übernimmt CSS-Background nicht?
    Antwort von regex9 ·

    Der Hintergrund ist sichtbar. Vermutlich wird die Seite bei dir noch gecached.

    Lösungsoptionen:

    • Seite neuladen via Ctrl + F5
    • Browsercache löschen (Chrome: Ctrl + Shift + Entf)
    • Seite in einem neuen Incognito Fenster (Chrome: Ctrl + Shift + N) öffnen

    Die Fehler auf deiner Seite (Doctype, fehlende js-Datei, etc.) solltest du aber dennoch beheben. Dazu habe ich dir in deiner anderen Frage ja schon geschrieben.

    Alle 3 Antworten
    Kommentar von regex9 ,

    Da der letzte Link tot ist, verweise ich nun auf diese Frage.

  • Webseite wird von anderen Browsern anderst angezeigt?
    Antwort von vincent425 ·

    Leider gibt es unterschiede bei der darstellung in Unterschiedliche Browsern.

    Das liegt daran das diese auf unterschiedlicher Software aufgebaut sind und HTML, CSS und JavaSricpt leicht unterschiedlich darstellen.

    Im Grunde gibt es 5 wichtige HTML-Renderer (so heißt der teil des Browser der dafür veranwortlich ist aus deiner Programmierung die Website für den Nutzer zu erzeugen)

    • Blink (wir eingesetzt in Opera ab Version 15, Google Chrome ab Version 28, Vivaldi) Blink hat sehr große Ähnlichkeit mit Webkit und ist daraus hervorgegangen
    • WebKit  (u. a. Apple Safari, Google Chrome bis Version 27, Epiphany, ICab, Midori, JavaFX WebView)
    • Gecko ( Mozilla Firefox, SeaMonkey, Mozilla Camino)
    • EdgeHTML (Microsoft Edge für Windows 10) große änlichkeit zu Trident
    • Trident (Internet Explorer für Windows)

    Wenn du also sicher sein möchtest das es für alle gut aussieht musst du jeweils mit einem Webbrowser aus jeder Kategorie testen.

    In der Regel nimmt man zum testen Chrome, Safari, Firefox, Edge und Internet Explorer (der macht in der regel die größten Schwierigkeiten )

    Zusätzlich gibt es bestimmte funktionen die noch nicht alle Browser unterstützen. Du kannst auf der Website https://caniuse.com/ nachsehen was in welchem browser funktioniert.

    Alle 5 Antworten
    Kommentar von vincent425 ,

    PS: kann es sein das du den hintergrund über Javasript lädst? Diese Datei ist auf jedenfall nicht richtig eingebunden http://www.projektarbeit-webseite.de/java.js

    Kommentar von regex9 ,

    Nein, der Hintergrund wird über die CSS geladen.

  • Server übernimmt CSS-Background nicht?
    Antwort von AbrissApfel ·

    Hast du vielleicht eine Cache am laufen? Ist deine Domain bei Cloudflare angemeldet / verbunden, dann dort die Cache deaktivieren.

    Alle 3 Antworten
    Kommentar von Thrm23 ,

    Sry, aber was ist ein Cache?

    Und die Domain habe ich von Servertown.ch für ein Jahr gemietet

    Kommentar von AbrissApfel ,

    Egal wo die Domain gemietet ist, sie kann trotzdem über Cloudflare laufen.

    Ein Cache speichert die Dateien deines Servers lokal, somit können sie schneller abgerufen werden und deine Seite lädt schneller. Sind diese lokal gespeichert, werden Änderungen die du auf deinen Webserver lädtst nicht wahrgenommen.

    Kommentar von Thrm23 ,

    Wie finde ich heraus ob sie über cloudflare läuft?

    Kommentar von AbrissApfel ,

    Wenn du sie dort nicht angemeldet hast läuft die auch nicht über Cloudflare.

    Kommentar von Thrm23 ,

    Und bedeutet dass, das die Änderungen, welche man auf dem Server vor nimmt eine weile brauchen, bis sie angewendet werden?

    Kommentar von regex9 ,

    Das kommt auf die Konfiguration an, Caching kann man auf mehreren Ebenen betreiben. Für deine Seite wird es aber kaum infrage kommen, denn weder du wirst Caching eingebaut haben, noch der Webhoster. Die Request Header für deine Webseite deuten ebenso daraufhin.

    Wenn deine Webseite keinen aktuellen Stand anzeigt, brauchst du zunächst einmal nur den Browsercache leeren. Wenn das Problem danach noch immer besteht, solltest du deinen Code analysieren, vor allem die gegebenen Dateipfade u.ä..

  • JavaScript: function wird ungewollt ausgeführt?
    Antwort von Dory1 ·

    Dir muss bewusst sein, dass ein <button> in einer Form (der nicht explizit das Attribut type="button" hat), automatisch beim klick die Form absendet (sich also wie ein <input type="submit"> verhält).
    Vermutlich hast du showerror an das submit-Event der Form gebunden, daher wird die Funktion auch aufgerufen.

    Alle 3 Antworten
    Kommentar von Ep1cNinja ,

    Danke habe type="button" vergessen

    ;)

  • JavaScript: function wird ungewollt ausgeführt?
    Antwort von regex9 ·

    Ich kann nur annehmen, dass du die Funktion showerror an ein Event gebunden hast, welches vom Formular getriggert wird, bspw. an das submit-Event. Da das button-Element standardmäßig vom Typ submit ist, wird bei Klick auf ihn, auch das submit-Event ausgelöst.

    Alle 3 Antworten
    Kommentar von Ep1cNinja ,

    ;)

  • Warum hat mein neues Bracket-Dokument keine Farben?
    Antwort von HansBauer007 ·

    Oh mein Gott du hast es ja nichtmal als .html abgespeichert und du wunderst dich?

    Alle 2 Antworten
    Kommentar von asdfsssss ,

    Danke für die Hilfe, auch wenn man das ein bisschen netter hätte formulieren können. Bin halt totaler Anfänger...

    Kommentar von HansBauer007 ,

    Sry aber wenn man nicht einmal das richtige Dateiformat hat, wozu man 0 html Grundwissen braucht...

    Kommentar von HansBauer007 ,

    Übrigends kannst du bei Brackets das ganze auch ohne Dateiendung als html anzeigen lassen...einfach rechts unten html auswählen

  • HTML Navigationsleiste strecken?
    Antwort von EinAlexander ·

    ich habe Deinen gruseligen Code mal repariert:

    <!doctype html>
    <title>X</title>
    <style>
    body {
      background:#d9d9d9
    }
    .container {
      font-family: Verdana,sans-serif;
      font-size: 1em;
    }
    
    #navi {
      list-style-type: none;
    }
    
    #navi li {
      display:inline-block;
    }
    #navi a {
        display: block;
        padding: 5px;
        line-height: 1.5em;
        color: #000000;
        border:2px solid #024c68;
        text-decoration:none;
    }
    
    #navi a:hover {
        background: #56585b;
        color: #000;
    }
    
    div.a {
       text-align: center;
       text-decoration:underline
    }
    
    </style>
    <div class="a">
    <h1>XXXXXXXXXXXXXXXXXX</h1>
    </div>
    <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
    <div class="container">
        <ul id="navi">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        </ul>
    </div>
    

    Alex

    Alle 3 Antworten
    Kommentar von regtnichtauf ,

    Danke, ist für die Schule und wir lernen nichts darüber sondern sollen uns selber schlau machen und uns alles selber beibringen.

    Kommentar von EinAlexander ,

    Na, dann hast Du jetzt einen perfekten Code als Grundlage zum Lernen :)

    Kommentar von regtnichtauf ,

    Die einzelne Buttons sind immernoch alle direkt nebeneinander geklebt. Kann man sie irgendwie auf eine ganze Zeile aufteilen? Dass links und rechts immer der gleiche Abstand ist?

    Kommentar von EinAlexander ,
    Die einzelne Buttons sind immernoch alle direkt nebeneinander geklebt. 

    Was meinst Du mit "nebeneinander geklebt"? Bei mir sind da Abstände zwischen den Buttons.

    Kommentar von regtnichtauf ,

    Ja schon, aber nur wenige pixel. ich will, dass sie über die gesamte seite (von links nach rechts) aufgeteilt sind. Also zentral in der mitte mit mehr abstand zwischen drin

    Kommentar von EinAlexander ,

    Dann machst du es so, wie ich es in diesem Thread beschrieben habe:

    https://www.gutefrage.net/frage/css-navigation-in-die-mitte-oben-fixieren#answer...

    Kommentar von regtnichtauf ,

    Danke :)

  • CSS Scroll-Parallax mit background-position?
    Antwort von EinAlexander ·
    <!doctype html>
    <title>fixed background</title>
    <style>
    body {
      padding:40vH 0 0 0;
      margin:0
    }
    
    #wrapper {
      position:fixed;
      height:40vH;
      top:0;
      left:0;
      width:100%;
      background-image: url(/bilder/bild1.jpg);
      background-size:cover;
      background-position:bottom;
      z-index:10
    }
    
    #content {
       position:relative;
       z-index:20;
       background-color:white;
       }
    </style>
    <div id="wrapper"></div>
    <div id="content">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    ...
    </div>
    

    Alex

    Alle 2 Antworten
    Kommentar von loderges ,

    Hallo Alex, danke! Nur hier bleibt ja das selbe Problem bestehen?!

    Hier mal mein genaueres Problem:

    https://jsfiddle.net/nmu6q5yw/

    Der zweite Parallax Container klappt wunderbar, der Erste aber nicht, da das Bild ja am Viewport orientiert ist und nicht am DIV.

  • CSS Scroll-Parallax mit background-position?
    Antwort von RakonDark ·

    also bei mir funktioniert das tadellos , allerdings verstehe ichnicht warum du cover nimmst und dann aber bottom haben willst, hat dein html auch 100% hoehe etc ?

    wenn ich bei mir background-size: auf 50% setze und position auf bottom, klebt es am unteren rand .

    Alle 2 Antworten
    Kommentar von loderges ,

    Cover sorgt ja dafür dass das DIV immer vom Bild ausgefüllt wird? Sprich das nie eine leere Fläche zu sehen ist. Aus dem Grund, da die Bilder unterschiedliche Dimensionen haben und zum anderen kann der User das Bild auch in voller Größe ansehen (auf 100vh).

    Mein Problem liegt darin, dass auch ein Headerbild vorhanden ist welches als erstes auf der Seite angezeigt wird. Durch Fixed wird das Hintergrundbild am Viewport und nicht am DIV ausgerichtet. Wenn ich position: bottom benutze, wird es am unteren Viewport (in dem Fall bei 100vh) ausgerichtet und nicht an meinem DIV (also 40vh). Die Parallax Container mitten in der Seite funktionieren tadellos.

    Kommentar von loderges ,

    Hier mein genaueres Problem:

    https://jsfiddle.net/nmu6q5yw/

    Das Zweite DIV geht, das erste nicht

  • Was ist der Unterschied zwischen einer Dokumentbeschreibungssprache und einer Metasprache?
    Antwort von qugart ·

    Hmpf...ich sage heir einfach, dass eine Dokumentenbeschreibungssprache ausschließlich für einen bestimmten Zweck vorgesehen sind. Postscript zum Beispiel.

    Metasprachen (auch Auszeichnungs- oder Beschreibungssprachen genannt) können für viele Einsätze verwendet werden. Beispiele SGML, HTML, XML,...

    Aber grundsätzlich seh ich da jetzt auch keinen wirklichen Unterschied zwsichen den beiden Begriffen.

    Alle 3 Antworten
    Kommentar von DreiGegengifts ,

    Metasprache ist nicht äquivalent zu Auszeichnungs- oder Beschreibungssprache

    Eine Metasprache beschreibt eine Sprache wie z.B. eine bestimmte Auszeichnungssprache.

  • Was ist der Unterschied zwischen einer Dokumentbeschreibungssprache und einer Metasprache?
    Antwort von Suboptimierer ·

    CSS bestimmt, wie du etwas formatieren kannst. Mit der Dokumentbeschreibungssprache wendest du die Formatierung an. Du gibst an, wie das Dokument aussehen soll.

    Du kannst CSS-Blöcke ohne Dokumentbezug definieren. Du gibst eine Auswahl an Formatierungsmöglichkeiten, auf die zugegriffen werden kann. Zugegriffen wird dann mit HTML.

    Alle 3 Antworten
    Kommentar von DreiGegengifts ,
    Mit der Dokumentbeschreibungssprache wendest du die Formatierung an.

    Mit der Dokumentbeschreibungssprache wendest du keine Formatierung an. Die Dokumentbeschreibungssprache (z.B. HTML) dient alleine dazu die Struktur eines Dokuments zu beschreiben.

    Kommentar von Suboptimierer ,

    Man kann mit HTML auf die CSS-Schablonen zugreifen. Das hat einen Effekt auf das Dokument. Mit HTML kann man zwar noch mehr machen, aber unter anderem kann man das CSS zur Anwendung bringen. 

    Es ist auch vollkommen klar, dass es irgendwo eine Schnittstelle geben muss, denn CSS ist standalone ziemlich unnütz.

    Kommentar von EinAlexander ,
    Man kann mit HTML auf die CSS-Schablonen zugreifen.

    Den Begriff "CSS-Schablone" gibt es nicht. Was oll das sein? Vermutlich meinst Du "CSS Regelsätze"?

    Das hat einen Effekt auf das Dokument.

    Nein. Wenn Du im HTML schreibst

    <h1>Überschrift</h1> 
    

    und im CSS die Regel

    h1 { color:red } 
    

    festlegst, hat das nicht die geringste Auswirkung und keinen Effekt auf das Dokument. Es hat evtl. eine Auswirkung darauf, wie manche User Agents das Element <h1> darstellen - mehr aber nicht.

    Kommentar von EinAlexander ,
    Die Dokumentbeschreibungssprache (z.B. HTML) dient alleine dazu die Struktur eines Dokuments zu beschreiben.

    HTML ist keine Dokumentenbeschreibungssprache (auch wenn es immer und immer wieder falsch in allen möglichen zweitklassigen Tutorials so genannt wird.)

    HTML ist ein Auszeichnungssprache. Texte werden ausgezeichnet als "Überschrift", "Liste", "Fußzeile", "wichtig" usw. HTML beschreibt nicht das Dokument (Seitenausrichtung, Seitengröße und dgl.)

    Kommentar von regex9 ,

    Natürlich wird mit HTML auch das Dokument selbst beschrieben. Deswegen gibt es den kompletten head-Abschnitt mit seinen Meta-Tags (title, meta für Zeichenkodierung, description, keywords, etc.).

    An der Stelle muss wohl unterschieden werden, was man unter einem Dokument versteht. Üblicherweise ist ein Dokument ein Informationsträger, unabhängig von seiner visuellen Darstellung.

    Kommentar von EinAlexander ,
    Natürlich wird mit HTML auch das Dokument selbst beschrieben.

    Das sehe ich anders (zumindest wird es nicht vollsätndig beschreiben). Allerdings lässt mich mit meiner Ansicht tasächlich selbst das W3C im Stich, das HTML als Sprache defiiiert, mit der (ursprünglich) wissenschaftliche Dokumente beschrieben werden:

    Originally, HTML was primarily designed as a language for semantically describing scientific documents.
  • Was ist der Unterschied zwischen einer Dokumentbeschreibungssprache und einer Metasprache?
    Hilfreichste Antwort von EinAlexander ·

    Eine Metasprache ist eine Sprache, die andere Sprachen definiert. Die Metasprache, die HTML definiert, ist SGML.

    HTML (eine Markupsprache) dagegen beschreibt keine andere Sprache sonder zeichnet die Bedeutung einzelner Texte aus.

    Eine Dokumentenbeschreibungssprache legt dagegen das Aussehen eines Dokuments fest (wie z. B. Postscript)

    Alex

  • HTML Navigationsleiste strecken?
    Antwort von sulox32 ·

    Versuch mal in container das hier einzufügen

    margin-left: 2em

    Alle 3 Antworten
    Kommentar von Rambaldi1988 ,

    Margin-left ist nicht gut...
    Grund: Die Linksbündigkeit geht verloren weil es eingerückt wird.
    Daher mein Vorschlag mit "margin-right" :-)

    Kommentar von regtnichtauf ,

    hat nicht viel gebracht.

    Kommentar von sulox32 ,

    Ok nein nicht bei Container sondern bei #navi a {

    Kommentar von regtnichtauf ,

    Danke :)

    Kommentar von TommyWeb ,

    Oder schau dir mal Flex Box an. Ziemlich interessant und modern. Wird von den meisten Frameworks benutzt.

  • Wieso scrollt die function toObject() wieder nach oben?
    Antwort von Franky12345678 ·

    So ein ähnliches Problem hatte ich letztens auch. Allerdings war das eine App, keine Website. Aber das sollte keinen Unterschied machen (außer, dass ich nicht so sehr auf die Browserkompatiblität achten muss).

    Erstmal hier wegen weichem Scrollen:

    https://www.mediaevent.de/javascript/scroll.html

    Die Koordinaten des Zielelementes bekommst du getBoundingClientRect().

    Für ältere Browser wirst du einen Fallback einbauen müssen (requestAnimationFrame() benutzen und stückchenweise scrollen). Einen Fallback für getBoundingClientRect gibt es sicher auch.

    ScrollIntoView() könntest du auch probieren.

  • Wieso scrollt die function toObject() wieder nach oben?
    Antwort von DomiiAUT ·

    Du gibst einem Div eine ID.
    http://www.Link#ID vom Div und schon bist du bei deiner gewünschten Position.

    Ein Beispiel:

    <a href="#div1">
      <p>Zum Div 1</p>
    </a>
    <a href="#div2">
      <p>Zum Div 2</p>
    </a>
    <a href="#div3">
      <p>Zum Div 3</p>
    </a>
    <a href="#div4">
      <p>Zum Div 4</p>
    </a>
    <hr>
    <div id="div1">
      Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>
    </div>
    <hr>
    <div id="div2">
      Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>
    </div>
    <hr>
    <div id="div3">
      Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>
    </div>
    <hr>
    <div id="div4">
      Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>Text...<br>
    </div>
    <hr>
    
    Alle 2 Antworten
    Kommentar von sky1783 ,

    ja da kann man aber nicht sagen ob man 50px höher als das Div scrollen soll oder sowas

    und man hat kein smooth scroling

    Kommentar von DomiiAUT ,

    Da bin ich gerade auch überfragt. Du kannst aber mit jquery eine smooth scroling Animation hinzufügen. Dann wäre zumindest schon mal ein Problem weniger.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $("a[href^='#']").click(function(e) {
    	e.preventDefault();
    	
    	var position = $($(this).attr("href")).offset().top;
    
    
    	$("body, html").animate({
    		scrollTop: position
    	} /* speed */ );
    });
    </script>
    
    Kommentar von sky1783 ,

    ich benutze kein jQuery

    Kommentar von DomiiAUT ,

    Jquery ist java welches ich in der 1. Zeile mit Google API importiert habe. Du brauchst nur eine Zeile um jquery zu importieren. Darunter folgt der Code der dir die Smooth scrolling Animation verleiht. Möglich, dass es noch einen einfacheren Weg gibt als meinen aber ich bin mir ziemlich sicher, dass du ohne jquery dein Vorhaben nicht erreichen wirst.

    Kommentar von regex9 ,
    1. Nein, mit Java hat jQuery nichts am Hut.
    2. Natürlich geht es auch ohne jQuery. Man könnte die Animation bspw. via setInterval nachbilden.
    Kommentar von DomiiAUT ,

    jQuery ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. jQuery ist die meistverwendete JavaScript-Bibliothek.

    Kommentar von regex9 ,

    Es ist gut, dass du das nachgeschlagen hast, aber posten hättest du es nicht brauchen, denn die Information ist doch nicht neu?

    Kommentar von DomiiAUT ,

    Dann verstehe ich nicht wenn diese Information nicht neu für dich ist wieso du dann das Gegenteil behauptest. Leider scheintest du selbst nicht im Stande gewesen zu sein es nachzuschlagen. Da war ich dann so nett und habe diese Kleinigkeit für dich erledigt. Weil JQuery hat sehr wohl was mit Java am Hut.

    Ich habe weder etwas gegen deinen Vorschlag einer anderen Methode gesagt noch dass ich damit richtig lag. Ich korrigierte nur deine Aussage bezüglich dass Jquery nichts mit Java am Hut habe und wäre dir daher sehr dankbar keine weiteren Rechtfertigungen gegen diese Aussage zu versuchen.

    Es gibt viele Arten wie man im programmieren zu einer Lösung kommt dass nicht jede Lösung die beste ist ist ebenfalls keine neue Informaiton. Nichts desto trotz hat meine Funktion den Wunsch bezüglich der Smooth Scroll Animation erfüllt.

    Ich hoffe, dass das die Missverständise hiermit aufklärt.

    Liebe Grüße Domii

    Kommentar von regex9 ,

    jQuery basiert auf JavaScript, nicht auf Java. Java ist eine vollkommen andere Programmiersprache und hat nichts mit jQuery zu tun.

    Kommentar von sky1783 ,

    jquery verzögert das Seitenladen

  • CSS: animate.css Text duplizieren und animieren, wie?
    Hilfreichste Antwort von RakonDark ·

    dann würde ich mal eine zweite box drunter legen oder drüber , beim klick wirds kopiert und macht dann seine anime .

    Kommentar von TimMagFussball ,

    code

    Kommentar von RakonDark ,

    lernen ?

    Kommentar von TimMagFussball ,

    ne

    Kommentar von milos2 ,

    Ein Tipp an den Fragesteller: Trenne JavaScript und HTML. Und bitte nicht über onclick Funktionen an HTML Elemente binden. Sondern über eine Event in JavaScript.

  • css bei websiten: unterschied zwischen .css und .min.css?
    Hilfreichste Antwort von milos2 ·

    Das min steht für minified, also verkleinert.

    Aus der Datei wurden unnötige Zeilenumbrüche, Kommentare und Leerzeichen ersetzt, sodass die Datei möglichst klein ist. Denselben Ansatz gibt es auch bei anderen Dateien, z. B. für JavaScript script.min.js

    Grundsätzlich sollten im produktiven Einsatz die min Dateien vorgezogen werden.

  • css bei websiten: unterschied zwischen .css und .min.css?
    Antwort von PeterP58 ·

    es sind zwei klassen definiert. je nach anfrage vom abfragegerät wird die eine oder die andere verwendet.

    Alle 3 Antworten
    Kommentar von milos2 ,

    Schwachsinn.

    Kommentar von PeterP58 ,

    begründung?

    Kommentar von milos2 ,

    Weil die Antwort falsch ist.

    Kommentar von PeterP58 ,

    ich behaupte: NEIN! und nun...? o_O

    Kommentar von Isendrak ,

    Nicht unbedingt Schwachsinn, nur eher unüblich.

    Es kann auch durchaus sein, dass der Websitebetreiber (aus welchem Grund auch immer) diese Dateinamen für genau diesen Zweck verwendet.

    Unüblich? Oh ja.

    Schwachsinn, das so zu handhaben? Ein bisschen vielleicht.

    Schwachsinn, auf die vorliegende Frage diese Antwort zu geben? Nein.

  • CSS Navigation in die Mitte oben fixieren?
    Antwort von medmonk ·

    HTML:

    <!doctype html>
    <html lang="de">
     <head>
      <meta charset="utf-8">
      <title>GuteFrage.net - Demo: Fixed Navigation</title>
     </head>
     <body>
      <nav class="m-nav m-nav--fixed m-nav--top">
       <ul class="m-menu m-menu--flex m-menu--primary">
        <li class="m-menu__item"><a class="m-menu__link" href="#">one</a></li>
        <li class="m-menu__item"><a class="m-menu__link" href="#">two</a></li>
        <li class="m-menu__item"><a class="m-menu__link" href="#">three</a></li>
        <li class="m-menu__item"><a class="m-menu__link" href="#">four</a></li>
       </ul>
      </nav>
     </body>
    </html>
    

    CSS:

    /* quick and dirty reset css */
    *, *::before, *::after { 
     padding: 0; margin: 0; outline: 0;
     box-sizing: border-box;
    }
    
    body { min-height: 100vh; }
    
    a { text-decoration: none; }
    
    /* primary styles */
    .m-nav--fixed { position: fixed; }
    .m-nav--top { width: 100%; top: 0px; }
    
    .m-menu { list-style: none; }
    .m-menu--flex { display: flex; }
    .m-menu--primary { max-width: 1140px; justify-content: flex-start; margin: 0 auto; }
    .m-menu__link { display: block; }
    

    LG medmonk

    Alle 4 Antworten
    Kommentar von EinAlexander ,

    Das ist katatstrophal schlechter Code. Das Prinzip von CSS funktioniert nicht so, dass man für jede Eigenschaft eine eigene Klasse erstellt und diese dann jedem Element zuweist. Wo hast Du den Code denn her??

    Kommentar von medmonk ,
    Das ist katatstrophal schlechter Code.

    Dann hast du allen Anschein nach noch nichts von BEM, OOCSS und SMACSS gehört. Sonst würdest du den Sinn und Zweck des Ganze verstehen und das Snippet nicht so pauschal als katastrophal dahinstellen.

    Das Prinzip von CSS funktioniert nicht so, dass man für jede Eigenschaft eine eigene Klasse erstellt und diese dann jedem Element zuweist.

    Das ist richtig und mit dem Snippet auch keineswegs suggeriert werden soll. Ich habe es lediglich aufs wesentliche herunter gebrochen und somit sonstige Eigenschaften weggelassen. Thats it!

    Wo hast Du den Code denn her??

    Woher? Hirnschmalz, Tee und über ein Jahrzehnt Berufserfahrung. 😉

    Es zum besseren Verständnis nicht unerwähnt lasse, das ich in der Vergangenheit überwiegend mit größeren Projekten und Teams zutun hatte. Davon ab ein konsistenter und logisch durchdachter Workflow das A und O ist. Dann spielt auch der Umfang eines Projekts keine große Rolle.

    LG medmonk

    Kommentar von EinAlexander ,

    Richtig würde dieses Snippet

    <nav class="m-nav m-nav--fixed m-nav--top">
       <ul class="m-menu m-menu--flex m-menu--primary">
        <li class="m-menu__item"><a class="m-menu__link" href="#">one</a></li>
        <li class="m-menu__item"><a class="m-menu__link" href="#">two</a></li>
        <li class="m-menu__item"><a class="m-menu__link" href="#">three</a></li>
        <li class="m-menu__item"><a class="m-menu__link" href="#">four</a></li>
       </ul>
      </nav>
    

    so aussehen

    <nav>
      <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
       <li><a href="#">four</a></li>
      </ul>
    </nav>
    

    Denn sämtliche gemachten Klassenangeaben sind hier komplett überflüssig. Das dazu passende CSS würde dann so aussehen:

    nav {
      position: fixed;
      width: 100%;
      top: 0px;
    }
    
    nav ul {
      list-style: none;
      display: flex;
      max-width: 1140px;
      justify-content: flex-start;
      margin: 0 auto;
      }
    
    nav ul a {
      display: block;
    }
    
    Kommentar von medmonk ,
    Denn sämtliche gemachten Klassenangeaben sind hier  komplett überflüssig. Das dazu passende CSS würde dann so aussehen:

    Du es entweder mangels Wissen oder prinzipiell nicht verstehen kannst oder willst. Es steht außer Frage das CSS auch gänzlich ohne ID und Klassen Selektoren funktioniert. Wie bereits erwähnt jedoch sehr gute Gründe gibt, warum man eben nicht die zu allgemeinen Element Selektoren (wenn überhaupt nur für globale Eigenschaften) sondern eben modulare Klassen-Selektoren (Stichwort: BEM, SMACSS) verwendet.

    Die Verkettung von Selektoren durch ihre Spezifität (Scoring) einem spätestens bei umfangreicheren Stylesheets schnell mal um die Ohren fliegen können. Auch was die Performance einer Website angeht, längere "Selektorketten" ebenso wie "schwere" ID Selektoren eher eine schlechte Wahl sind; man jedoch möglichst darauf verzichtet (Stichwort: Best Practice).

    Richtig würde dieses Snippet

    Absolut nichts gegen konstruktive Kritik habe. Nichtsdestotrotz dich darum bitten möcht, Beispiele nicht pauschal als richtig oder falsch hinzustellen - nur weil du scheinbar nicht den Sinn und Zweck verstanden hast. Denn weder dein noch mein Snippet falsch ist. Du aber wohl den modularem Aufbau und den Namens-Konventionen von BEM und SMACSS nichts verstehst.

    LG medmonk

    Kommentar von EinAlexander ,

    Sieh dir mal das Konzept von SMACSS und OOCSS noch mal genau an. Dann wirst Du erkennen, dass das mt dem von Dir geposteten Code kaum etwas gemein hat.

    Die Idee hinter OOCSS ist die Vermeidung von Redundanz und damit verbunden eine Verkleinerung des Codes. Du aber erreichst mit deinem Code-Beispiel genau das Gegenteil.

    Wenn eine gesamte Webseite aus der Zeile "Coming Soon" besteht, würde kaum jemand niemand dafür ein Typo 3 aufestzen. Und genauso unsinnig ist es, im HTML Klassen zu vergeben, die im CSS gar nicht definiert sind.

    OOCSS und SMACSS sind beides keine ausgereiften Konzepte. Beides sind - durchaus interessante - Überlegungen, die aber noch zahlreiche dikussionswürdige Fehlschlüsse enthalten. Mehr nicht.

    Kommentar von medmonk ,
    Sieh dir mal das Konzept von SMACSS und OOCSS noch mal genau an. Dann wirst Du erkennen, dass das mt dem von Dir geposteten Code kaum etwas gemein hat.

    Lies meine erste Antwort nochmal durch. Bereits dort geschrieben habe, das einige Eigenschaften weggelassen wurden und ich das Snippet aufs wesentliche herunter gebrochen habe.

    Die Idee hinter OOCSS ist die Vermeidung von Redundanz und damit verbunden eine Verkleinerung des Codes. Du aber erreichst mit deinem Code-Beispiel genau das Gegenteil.

    Der oben gezeigte Code eben nur ein Snippet ist, der Sinn erschließt sich wenn man das Stylesheet der kompletten Website sieht. Denn Fehler denn ich jedoch gemacht habe ist der, das man die Namens-Konventionen auch konsequent beibehalten sollte. Hier ein kleines Beispiel:

    /* globale styles für alle module vom typ menu */
    .m-menu {
      list-style:none;
      border: 1px solid;
      border-radius: 5px;
      display: flex;  
    }
    
    .m-menu__link {
      font-family: sans-serif;
      text-decoration: none;
    }
    
    /* module eigene (spezifische) styles */
    .m-menu--primary {
      background-color: rgba(0,0,0,0.65);
      border-color: red;
      justify-content: flex-start;
    }
    
    .m-menu--primary__link {
      font-size: 1.25rem;
      line-height: 2;
    }
    
    .m-menu--secondary {
      background-color: rgba(0,0,0,0.45);
      border-color: green;
      justify-content: center;
    }
    

    So setzt sich das Ganze dann weiter fort und dank CSS Preprocessor auch nach Wochen, Monaten oder Jahren noch nachvollziehbar ist. Hinzu kommen entsprechende "Media Objekte" die nochmals dazu beitragen das CSS zu reduzieren und so eigentlich kaum bis keine Redundanzen entstehen. 😉

    Wenn eine gesamte Webseite aus der Zeile "Coming Soon" besteht, würde kaum jemand niemand  dafürein Typo 3 aufestzen. Und genauso unsinnig ist es, im HTML Klassen zu vergeben, die im CSS gar nicht definiert sind.

    Das steht außer Frage, da ganz bei dir bin und wirklich nur dick unterstreichen kann. Im obigen Snippet halt einiges weggelassen habe, deshalb wohl missverstanden wurde und ungenutzte Selektoren definitiv keinen Sinn machen.

    LG medmonk

    Kommentar von EinAlexander ,

    Alleine diese Eingensachftsdeklarationen sind unsinnig:

    .m-menu {
      list-style:none;
      border: 1px solid;
      border-radius: 5px;
      display: flex;  
    }
    
    .m-menu__link {
      font-family: sans-serif;
      text-decoration: none;
    }
    

    da sie ein HTML erfordern wie dieses:

    <nav class="m-menu">
    <a href="" class="m-menu__link">...</a>
    <a href="" class="m-menu__link">...</a>
    <a href="" class="m-menu__link">...</a>
    <a href="" class="m-menu__link">...</a>
    <a href="" class="m-menu__link">...</a>
    </nav>
    

    Welchen Vorteil bietet denn Deiner Meinung nach dieses Vorgehen gegenüber dieser Eigenschaftsdeklaration die

    1. einfacher zu lesen ist
    2. leichter zu warten ist
    3. die Dateigröße des HTML reduziert
    <style>
    .m-menu {
      list-style:none;
      border: 1px solid;
      border-radius: 5px;
      display: flex;  
    }
    .m-menu a {
      font-family: sans-serif;
      text-decoration: none;
    }
    </style>
    
    <nav class="m-menu">
    <a href="">...</a>
    <a href="">...</a>
    <a href="">...</a>
    <a href="">...</a>
    <a href="">...</a>
    </nav>
    
    Kommentar von medmonk ,

    Sorry, ich hätte dazu schreiben sollen das sich Beispiel jetzt nicht explizit auf das vorige Markup bezieht. Mir ging es da primär um den strukturellen Aufbau von CSS.

    Welchen Vorteil bietet denn Deiner Meinung nach dieses Vorgehen gegenüber dieser Eigenschaftsdeklaration die

    Zunächst einmal es sich gerade bei großen Projekten in puncto Performance bemerkbar macht (machen kann). Selbst wenn wir das mal außen vor allen, es bei großen Projekten mit tausenden Zeilen Code meist aus ganz anderen Gründen hakt oder kracht.

    Die Spezifität der einzelnen Selektoren und die der Selektor-Ketten nicht berücksichtigst. Bei kleinen Seiten mit überschaubarem Markup und CSS jetzt nicht so wild ist, bei großen Projekten die skalierbar sein sollen und wichtig ist, genau diese Selektor-Ketten in nem kleinen Super-GAU enden können. Ein ähnliches Problem hat beispielsweise Facebook gehabt, bis man letztendlich vieles auf Media Objects herunter gebrochen hat.

    Ein Menü ja nur eines von vielen möglichen Modulen ist, darum erst allgemein gültige Eigenschaften für diesen Modultyp definiert werden und der Rest daran angeknüpft wird. Diese Bausteine an CSS so unabhängig sind und jederzeit und überall wiederverwendet werden können.

    Durch die Unabhängigkeit jedes weitere Projekt davon profitieren kann und wird, weil du mit der Zeit eine eigene Bibliothek an Modulen bekommst, mit der das Rad nicht ständig neu erfunden wird. Dank Sass, imports und if-Schleifen das Ganze dann auch easy-peasy verwalten wird. >Somit selbst nach Monaten oder Jahren immer sofort weiß an welcher Schraube ich drehen muss, damit Module X das macht was ich will.

    Tim Hartmann von Neoskop hat bereits 2014 alles sehr ausführlich in einem SCSS-Styleguide zusammengefasst. Auch sonst es unzählige und wirklich lesenswerte Artikel zu diesem Thema gibt. Vor allem wenn man Media Objekte (oben verlinkt) mit einbindet. Vielleicht hast du ja Zeit, Lust und Interesse daran und schaust dir einfach mal die verlinkten Artikel an.

    LG medmonk

  • HTML gutes gallery template?
    Hilfreichste Antwort von TommyWeb ·

    Ich glaube auf html5templates.com gab es gute Templates.. aber wenn du selbst schon geguckt hast und nichts ansprechendes gefunden hast, wird es schwer^^ dann vielleicht doch selber machen (Oder mich kostenlos machen lassen).

    Alle 2 Antworten
    Kommentar von RDMACC123 ,

    Ok, danke ich hab grade nochmal geguckt. Nicht gefunden was mir zusagt. Wenn du wirklich bock hast kannst mir gern helfen, es ist ein bisschen knapp, zeitlich, aber machbar. Bin auf Gutefrage, nicht aktiv, kannst mir ja vielleicht ne direkt Nachricht schreiben oder man klärt das irgendwie anders. Ich würds gern selbst machen, hab aber nicht die Zeit. Würd mich also über jede Hilfe freuen :)

  • CSS Navigation in die Mitte oben fixieren?
    Antwort von eddiepoole ·

    position fixed

    google mal

    Alle 4 Antworten
    Kommentar von eddiepoole ,

    ich stell mir das in etwa wie folgt vor:

    <style>
      nav
       {position:fixed; top:0px; left:0px; display:block; width:100%; padding:1 auto 1 auto;}
    </style>
    

    statt der block-sache könnte man vllt bei left mit % angaben arbeiten und width entsprechend anpassen. hab sowas schon lange nicht mehr gemacht. müsste man ein bissi rumprobieren.

    Kommentar von EinAlexander ,
    padding:1 auto 1 auto;
    

    Das gibt's nicht.

    Kommentar von eddiepoole ,

    wegen fehlender einheiten oder meinst du wegen auto in verbindung mit padding?

    Kommentar von EinAlexander ,

    Die CSS Eigenschaft padding kennt als Wert nur

    • absolute Längeneinheiten - (em, ex, px, pt usw.)
    • relative Angaben (%, vW, vH)
    • oder die Angabe inherit

    Zudem muss immer dann, wenn fürs padding ein Wert ungleich 0 angegeben wird, eine Einheit angegeben werden. Zum Beispiel padding:1px 1px 1px 1px