Beiträge von Sailor

  • Horizontales Menu wird Mobile nicht angezeigt

    Mir ist das im Zusammenhang mit deinem horizontalen Menü noch etwas aufgefallen.
    Mit den derzeitigen Formaten wird der letzte Menüpunkt 'Kontakt' in die nächste Zeile verschoben und da diese Zeile einen weißen Hintergrund hat, ist dieser Menüpunkt beinahe unsichtbar.
    Um den Zeilenumbruch an dieser Stelle (vor dem letzten Menüpunkt) zu verhindern, müsstest du in deiner 'template.css' Zeile 20 den Eintrag
    #nav ul li a {
    padding: 20px 50px 10px 10px;
    }
    ändern in
    #nav ul li a {
    padding: 20px 40px 10px 10px;
    }
    Dadurch werden die Menüpunkte jeweils um 10 Pixel schmaler und passen dann wieder alle in eine Zeile!

  • Horizontales Menu wird Mobile nicht angezeigt

    Die Frage ist, was möchtest du erreichen?
    Die Seite komplett responsive und damit handytauglich zu machen, wird so wie ich es einschätze mit einfachen Mitteln nicht gehen.
    Wenn du jetzt 'nur' das Menü sichtbar machen willst, wenn die Displaygröße/Breite kleiner als 980 Pixel, dann musst das 'none' durch 'block' ... ggf auch durch 'inline-block' ersetzen.
    Also so...

    HTML
    @media all and (max-width: 980px) {
  div#nav {
    display: block;
  }
}


    Wie du das allerdings in deine Seite einbauen kannst, kann ich nicht wirklich sagen, denn mit dem 'Joomla - CMS', das du offensichtlich nutzt, kenne ich mich nicht aus!

  • Horizontales Menu wird Mobile nicht angezeigt

    Mal abgesehen davon, dass die Seite nicht wirklich 'responsive' ist, sich also nur wenig bis gar nicht an kleinere Displaygrößen anpasst, hast du in einem der Stylesheets folgendes vorgegeben..

    HTML
    @media all and (max-width: 980px) {
  div#nav {
    display: none;
  }


    Damit verschwindet das div#nav, wenn die Displaybreite kleiner als 980px wird.

  • Textfeld gestalten

    Wenn es dir nur um den blinkenden Schreibcursor geht, dann schreibe einfach autofocus in deinen Input Tag...

    HTML
    <input type="text" id="text_input" maxlength="12" class="textfeld" autofocus>


    und lass, wenn du den Unterstrich nicht willst, das 'placeholder' weg!
    Mit der CSS Anweisung 'caret-color: #deineFarbe;' - hinzugefügt zur Klasse .textfeld - könntesdt du den Cursor auch bunt machen! Das funktioniert aber nur bei FF und Chrome, macht also eigentlich keinen Sinn für dich (Safari?).

  • Textfeld gestalten

    Habe kein IPhone und kann das also auch nicht testen - aber teste doch mal, ob es mit diesem CSS anders/besser ist.


    Einfach das Vorhandene hiermit ersetzen.

  • Textfeld gestalten

    ,,, fast richtig ;)! Aber die Grundlagen solltest du dir schon aneignen... denn das hier..
    <div id="container">
    <img src="images/en.png"</img>
    <input type="text" class="textfeld">
    </div>
    ist definitiv falsch und du hast nur Glück, dass dein Browser nicht so pingelig ist! Einfügen eines Bilder mit der richtigen Syntax geht so!
    <img src="images/en.png" alt="">
    Das 'alt' ist Pflicht - und sollte nicht weggelassen werden. Dazu sollte/könnte man ggf noch Größenangaben für die Grafik hinzufügen.
    Ansonsten funktioniert deine Lösung ja - besser wäre aber die Variante mit dem <label>

    <div id="container">
    <label for="text_input"><img src="images/en.png" alt="Name eingeben"></label>
    <input type="text" id="text_input" class="textfeld">
    </div>

  • CSS wird nicht richtig erkannt

    3 Dinge fallen mir auf:
    1. du solltest <!DOCTYPE html> schreiben und nicht <!DOCKTYPE html>
    2. du solltest, auch wenn es gemäß Spezifikation nicht zwingend vorgeschrieben ist, dein HTML Tags schließen... hier fehlen 4 von 5 </li>'s
    3. lösche aus deinem CSS die Formatierung

    HTML
    ul li:active
{
        color: #fff;
        text-decoration: none;
    display:block;
    padding:20px;
}


    die Pseudoklasse :active gibt es nicht für <li> Elemente, sondern nur für Hyperlinks <a>

    Ansonsten macht das CSS, soweit ich das sehen kann, genau das, was drin steht!

    Sollte mit diesen Änderungen keine Verbesserung eintreten, melde dich wieder.

  • Scheinbar Probleme mit media queries

    Es ist schwierig nachzuvollziehen, was sich genau hinter deiner Fehlerbeschreibung verbirgt, deswegen hier noch mal der Hinweis auf einen 'Einzelfehler' der mir aufgefallen ist.
    Ob das allerdings dann letztlich alle deine Probleme löst, kann ich so nicht sagen... erst den beseitigen und dann nochmal nachschauen.
    ... das eingebettete YouTube Video!
    Da solltest du mal prüfen, ob das mit den im CSS vorgegebenen Dimensionen alles so seine Richtigkeit hat.
    Du hast da einen <div class="iframe"> mit width: 50%; - aber der Iframe in diesem div hat eine feste Breite von 600px? Das passt irgendwie nicht - das Video wird immer aus div herausragen! Und bei kleineren Displays die Breite 'aufblasen' !
    Schau doch mal bei der Breitfestlegung des Videos, ob du da nicht mit CSS Angaben wie vw (Viewport Width) und vh (Viewport Height) etwas besseres hinzaubern kannst?
    https://web-design-weekly.com/2014/11/18/vie…w-vh-vmin-vmax/

  • Scheinbar Probleme mit media queries

    Oh je... da sind auf dem ersten Blick mehrere Dinge, die du mal prüfen solltest!
    zB... im Header fängst du an mit FlexBox....
    .header {
    display: flex;
    ....
    }
    Aber die internen div's, die doch dann gemäß dem display: flex; angeordnet werden sollen(?), positionierst du mit 'position: absolute;'
    Absicht?

  • CSS Problem im style sheet

    Ja... hat ganz gewiss was mit den 0m zu tun! Was soll das sein... Meter? Meines Wissens gibt es diese Einheit im CSS nicht.
    Schreib stattdessen einfach 0... wenn es eh 0 sein soll, ist die Einheit dahinter sowieso egal!

  • Warum machr meine Klasse im Stylesheet nicht das was ich erwarte?

    Versuchs mal so:

    HTML
    <details>
<summary>SEK I</summary>
<summary class="subsummary">Haupt und Realschule KC und Thementabellen</summary>
</details>


    oder so:

    HTML
    <details>
<summary>SEK I</summary>
<p>Hallo...</p>
</details>
<details>
<summary class="subsummary">Haupt und Realschule KC und Thementabellen</summary>
<p>Hallo...nochmal</p>
</details>


    oder so:

    HTML
    <details>
<summary>SEK I</summary>
<p>Hallo...</p>
  <details>
  <summary class="subsummary">Haupt und Realschule KC und Thementabellen</summary>
  <p>Hallo...nochmal</p>
  </details>
</details>

  • Komme in meinem Tutorial einfach nicht weiter. Bitte um Hilfe

    basti1012 - hast du gut gut hinbekommen ;)!

    MrDownUnder - WP ist eine etwas andere Baustelle. Und ja, auch da kann man natürlich manuell einiges machen... vorausgesetzt, man weiß was man tut. Ohne HTML und CSS Kenntnisse ist man da dann aber auch sehr schnell am Ende. Kompliziert wird die Sache, weil man da auch PHP so einigermaßen im Griff haben sollte.
    Ansonsten ist die 'footer.php' eines WP Themes aber eine ganz normale Datei, in der man Dinge nach seinen eigenen Vorstellungen ändern kann.

  • Komme in meinem Tutorial einfach nicht weiter. Bitte um Hilfe

    Der Weg ist schon ganz richtig, du hast ein Projekt und setzt es um.
    Was mir nur auffällt, da sind einige unnötige <div></div> Elemente, die keine Funktion haben...
    Beispiel:
    ... <div>
    <div class="feature-icon">
    <i class="fas fa-address-card"></i>
    </div>
    </div>

    <div>
    <div class="feature-text">
    <h5>UI/UX</h5>
    <p>
    Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
    </p>
    </div>
    </div>

    Die rot markierten machen nichts... haben keine Funktion und bringen auch soweit ich sehen kann keine eigenen Formatierungen mit.
    Sie machen den Code nur unübersichtlich und, wie du selber feststellen konntest, sehr schwierig für eine Fehlersuche... manchmal sind sie sogar der Fehler.

    Ich bin aber kein großer Freund von diesen 'fertigen' Lösungen wie dieses Skeleton! Zum Lernen finde ich es besser, sich mit dem CSS selbst zu beschäftigen und nicht Dinge zu nutzen, die man selbst gar nicht wirklich versteht!

  • Komme in meinem Tutorial einfach nicht weiter. Bitte um Hilfe

    Dein Code ist für mich eher nicht tutorialwürdig... der ist zum Lernen viel zu komplex und verschachtelt! Wundert mich nicht, dass du bei dem 'Div-Gewusel' den Fehler nicht findest.
    Hab mal selber versucht und nach dem, was ich so an Struktur erkennen kann, die <div>'s zu ergänzen, dass zumindest kein Fehler mehr angezeigt wird... aber ohne Gewähr.. testen kann ich das nicht wirklich.


    Das ist nur der untere Teil deines Codes.. siehst du ja selber... dahinter kommt nur noch </body></html>.
    Sieht dann lokal bei mir so aus...

  • Komme in meinem Tutorial einfach nicht weiter. Bitte um Hilfe

    Mit Skeleton habe ich noch nicht gearbeitet, aber das sieht nicht nach 'Hexenwerk' aus... ein einfaches Grid Layout, basierend auf einer 12 spaltigen Aufteilung.
    für deine 2 Gruppen sollte da die Grundstruktur etwa so aussehen...

    HTML
    <div class="container">
  <div class="row">
    <div class="six columns">...hier dein Inhalt für die linke Seite...</div>
    <div class="six columns">...hier dein Inhalt für die rechte Seite...</div>
  </div>
</div>


    Ist auf der Seite http://getskeleton.com/ auch ganz nett beschrieben.

    - - - Aktualisiert - - -

    Mir ist da gerade noch etwas aufgefallen...
    Mit deiner Verschachtelung der <div>'s stimmt was nicht - es fehlt mindestens ein schließendes </div> (vielleicht auch mehr). Konkret ist es in deinem Code das erste '<div class="six columns">', welches nicht richtig beendet wird.
    Überprüfe doch mal in diesem Bereich, ob da wirklich alle Tags richtig beendet werden!

    - - - Aktualisiert - - -

    ... der schließende </header> fehlt auch!