H1 Textverschiebung

  • Hallo,
    ich mache gerade eine neue website und bin auf ein problem gekommen.
    1.
    Im header habe ich überschrifen mit h1, dabei wird aber der text
    der Überschrift h1 in die nächste Textzeile verschoben, wenn ich eine kleinere Bildschirmgröße habe.
    Das problem ist dabei, er überschreibt dabei die nächste Textzeile, die überlagern sich also.


    2.
    ich habe noch ein allgemeines problem mit diesem forum.
    die maximale größe der anlage ist 150 kb.
    ein einfacher hardcopy mit pdf hat aber mehr.
    wie mache ich dann einen hardcopy (zip habe ich nicht) für eine kleine datei?
    viele grüße
    gerhard

  • Entweder per CSS:


    CSS: 13
    h1 {
      white-space: nowrap;
    }


    Oder per HTML:


    HTML: 7
    <h1 class="ausricht">H1&nbsp;Ueberschrift&nbsp;Test&nbsp;Test&nbsp;Test</h1>


    Mehr zur CSS white-space Eigenschaft: w3schools white-space property
    &nbsp; , non-breaking-space stellt wie der Name impliziert ein Leerzeichen dar ohne eine neue Zeile zu beginnen. Eher Oldschool und die CSS Variante ist vorzuziehen.


    Die Dateigröße ist ausreichend. Wenn deine Dokumente zu groß sind musst du sie konvertieren (z.B. in ein JPEG Bild) oder kleinere Ausschnitte verwenden. Alternativ könntest du Tools wie zum Beispiel codepen.io nutzen.

  • Hallo Basi,
    das hatte geklappt, super, danke.
    ich habe aber extra nochmals in meinem neuen buch html & css geschaut,
    da steht das nicht drinnen.
    ich vermute, dass ist neu mit html5.
    viele grüße
    gerhard :)

  • Hi, die white-space Eigenschaft existiert seit CSS1. &nbsp; ist beinahe älter als das Internet :D


    Was für ein Buch hast du denn wenn ich fragen darf? Ein Buch kann selbstverständlich nicht alles abdecken was es an Möglichkeiten gibt, das wären zu viele Seiten.

  • Hallo Basi,
    ich habe nochmals geschaut, aber es steht nicht im buch HTML & CSS von Jon Duckett.
    Das Buch ist neu und die haben das auch gut gemacht, es wurde anders aufgebaut,
    eignet sich gut zum einlesen. zum nachschlagen ist es etwas schwieriger.
    trotzdem bin ich jetzt verblüfft dass so ein befehl fehlt.
    da kann ich lange suchen.
    ich werde doch mehr das internet nutzen, um nachzuschlagen.


    aber ich habe noch eine frage zu der funktion "element untersuchen" wenn ich mit der maus-taste das bei firefox auslöse.
    ich will damit eine andere bildschirmgröße darstellen, das geht auch sehr gut.
    aber da sehe ich nicht wie sich der verschwundene text darstellt, da ich da nicht scrollen kann.
    ich haber noch nicht resposible eingestellt, das will ich mir erst anschauen, ist noch eine baustelle für etwas später.
    ich frage mich, wird der text ggf. ganz abgeschnitten oder ist er auf den kleineren bildschirm einfach zu scrollen?


    viele grüße
    gerhard

  • Mach dir nicht zu viele Gedanken über dein Buch. Man muss als Autor imer abwägen was man aufschreibt. HTML und CSS in einem Buch ist meiner Ansicht nach schon fast zu viel Input auf ein mal, das sind 2 Sprachen die man unbedingt getrennt lernen sollte. Beide Themen zusammen sind so unglaublich umfangreich, dass nicht alle Details in ein einzelnes Buch passen würden. Da muss man ganz klar zwischen Lehrbuch und Referenz unterscheiden. Eine Referenz ist eine vollständige Sammlung aller vorhandenen Elemente mit teils spärlichen Beschreibungen, ein Lehrbuch ist im Spektrum wesentlich kleiner, geht dafür natürlich mehr auf die Basics ein.


    Für HTML empfiehlt sich die w3schools Referenz, zu finden hier. Dort findest du auf der linken Seite weitere Referenzen, zum Beispiel HTML Global Attributes für eine Attribut-Übersicht.
    Äquivalent dazu gibt es auch eine w3schools Referenz für CSS, siehe hier.


    Dort sind für fast jede Kleinigkeit auch Beispiele welche sich in Echtzeit testen und bearbeiten lassen. Zum Beispiel findet sich auf der white-space Eigenschaft Unterseite ein Codeausschnitt mit einem "Try it yourself" Button, welcher in den Editor führt: Tryit Editor mit white-space


    Dein Problem mit den Fenstergrößen kann einige Ursachen haben. Die Emulatoren über die Konsole von z.B. Firefox oder Google Chrome spinnen manchmal von Haus aus herum. Es kann allerdings auch an deiinem Code liegen, da müsste man dann eventuell den Fluss des Dokumentes ein wenig umstellen oder mit overflow herumspielen. Könntest du dafür noch mal deinen aktuellen und möglichst vollständigen Code zeigen?


    Kleiner Tipp von mir noch:
    Wenn du deine Seite mit einer bestimmten Breite testen willst kann man das mit der Konsole auch anders herbeiführen. Dafür musst du lediglich die Konsole öffnen und an den rechten Rand bringen, dafür gibt es folgenden Button:


    html-seminar.de/woltlab/attachment/808/


    Wenn du jetzt die Konsole am linken Rand breiter oder schmaler ziehst, kannst du die Breite der Seite dynamisch verändern. Klickst du im Inspektor Im Dokumentenbaum auf den HTML Tag und auf der rechten Seite auf die Registerkarte Box-Modell, so kannst du die Breite der Seite ablesen:


    html-seminar.de/woltlab/attachment/809/


    So löse ich das zumindest häufig. Sollte auch in anderen Browsern funktionieren. In Chrome geht das glaube ich z.B. nur bis von der Seite noch 150px oder so übrig sind aber das überprüft ja auch kein Mensch mehr :D

  • Hallo Basi,
    ich habe mal eine Hardcopy gemacht, wie meine TEST-Seite aussieht, wenn ich das verkleinere. Siehe Anlage X1_Klein.
    Leider sehe ich das nicht, ob sich das auch richtig scrollen läßt, ein kleines Gerät habe ich nicht.


    Die Überschrift H1 schneidet er bei meiner kleineren Sicht ab, wenn er das Bild scrollt wäre es richtig.


    Bei der Menüleiste "Start" "MMMMM werden" usw. nimmt er aber eine paar Menüepunkte schon in die 2. zeile,
    das sollte er auch scrollen.


    Bei den grünen Überschriften in der Mitte "A - können Sie.." verschiebt er den Text in die 2. zeile (endet dort mit "a-end").
    Das macht er auch bei dem schwarzen fetten Text.


    Bei dem schwarzen Text ganz unten, macht er das richtig, da habe ich den Text für 2 zeilen vorgesehen.


    Ich sehe, ich muß mich darauf einstellen, dass ich alle Texte und die Menüs richtig scrollen kann, sonst zieht sich die Anzeige nach unten.


    Als Anlage noch die beiden Code-Dateien, die THL1-dateien enden normal mit .html und .scc, mußte ich aber mit .txt umsetzen, zum hochladen.


    Viele Grüße
    Gerhard

  • Hallo,


    du hast leider offensichtlich ganz falsche Vorstellungen wie eine Webseite benutzerfreundlich erstellt wird.


    Das Buch geht aber davon aus, das die Webseitenersteller sinnvolle benutzerfreundliche Seiten erstellen wollen und geht deshalb auf unsinnige Lösungen nicht ein.


    So ist es zum Beispiel ein absolutes No-Go Seiten so zu erstellen, das der Besucher seitlich scrollen muss um den Text zu lesen. Von daher sollte auf geschützte Leerzeichen so weit wie möglich verzichtet werden. Sinnvoll sind die nur wenn zusammengehörige Begriffe wie z. B. "3 kg" auch zusammen in einer Zeile stehen sollen.


    Weiterhin solltest du bei Test-Texten nur Wörter in der üblichen Länge und nicht unsinnig lange Wörter benutzen. Damit man sich die nicht immer selbst ausdenken muss gibt es im Internet sogenannte Blindtext-Generatoren. Die erzeugen zwar unsinnigen Text, der aber Wörter in den gängigen Längen enthält.


    Zu einem float gehört auch immer ein clear. Ich kann mir nicht vorstellen das darauf im Buch nicht eingegangen wird. Durch ein fehlendes clear ergeben sich einige deiner Probleme, da durch float Elemente "aus dem Fluss" genommen werden. Was das bedeutet sollte auch in dem Buch stehen.


    Schlechter Stil ist es auch Abstände durch leere Elemente wie


    Code
    <p></p>
    <p>&nbsp;</p>


    oder


    Code
    &nbsp;&nbsp;&nbsp;


    zu erzeugen. Abstände werden grundsätzlich mit CSS erzeugt. Eine der Grundlagen der Trennung von Inhalt und Aussehen ist, das im body-Bereich keine Elemente eingefügt werden die nur dafür gedacht sind das Aussehen der Seite zu ändern.


    Ähnliches gilt für das hr-Element. Das ist nicht dazu gedacht optisch eine Linie darzustellen sondern hat eine semantische Bedeutung. Wenn es nicht um die semantische Bedeutung (der Begriff sollte auch im Buch erklärt werden) geht ist das hr-Element auch nicht angebracht.


    Gruss


    MrMurphy

  • Hier gibt es eine Übersicht über verschiedene Blindtexte..: http://meettheipsums.com/
    Oder hier auch typische HTML Elemente wie die Navigation o.ä. http://html-ipsum.com/


    zuerst solltest du dir wirklich eine HTML Struktur anlegen, die semantisch korrekt ist, zum Beispiel so: (Ergebnis siehst du hier: http://hcp-forum.lima-city.de/website-guide/basics/)


    Erst dann machst du dich an's Design

  • o.k., danke für die info.
    ich hatte schon vor, mich erst an die struktur zu orientieren, die hatte ich aber mit Test-texten gefüllt, damit ich die auswirkungen besser erkennen kann.
    das werde ich mit dem obigen beispiel nochmals gründlich ausprobieren.
    mir ist klar, ich muss noch viel ausprobieren, um das richtig umsetzen zu können.
    die richtige struktur ist sicher die Basis auf die man aufbauen kann.


    mir ist übrigens auch aufgefallen:
    <meta charset="utf-8">
    Das hatte ich auch schon in meinem code, da hatte er aber die umlaute dann nicht dargestellt.
    obwohl das damit eigentlich bezweckt werden soll.
    deshalb habe ich dann <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1 verwendet, da gingen die Umlaute.


    viele grüße
    gerhard

  • HTML
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    Das da ist die "alte" version sozusagen, das neue ist 'besser'


    Wenn dir die Struktur fertig genug erscheint, fängst du an das grobe Erscheinungsbild deiner Website zu erstellen (Anordnung der Boxen, Maße, Responsive Wirkung...), dannach machst du dich an das 'feine' Design (Farben, Schrift, Interaktion ...) - Fertig ist die Website..

  • hallo , noch eine hinweis zu meinem hardcopy weiter oben.
    natürlich will ich es benutzerfreundlich machen, das war ein hardcopy der verkleinerten sicht,
    damit ich die auswirkungen besser erkennen, der text ist dabei wirklich nur test-text.
    hier nochmals die normalgröße als anlage.
    da ist der text vollständig auf der seite zu sehen, bei einem normalbildschirm.
    mit der verkleinerten sicht wollte ich nur testen, wie es sich auf einem kleinen bildschirm ausschaut.
    aber wie gesagt, ich muss noch an der struktur arbeiten.


    übrigens bin erst seit ein paar tagen neu in dem forum, ich freue mich,
    dass ich so gute rückmeldungen bekomme.


    mfg
    gerhard

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!