Wie stelle ich eine mehrzeilige H1-Headline neben das Logo?

    Hallo zusammen,


    um meine Frage zu präzisieren:


    Ich möchte (in Jommla 3) eine dreizeilige H1-Headline auf unserer Homepage neben rechts neben dem Logo platziert bekommen.


    Es sollte vom Verlauf her so aussehen wie ich es hier mit fettem Fließtext gemacht habe: http://www.learninginbritain.de/


    Nur mit der H1-Überschrift bekomme ich das eben irgendwie nicht hin. Sie zerstört mir den bündigen Verlauf, lässt die Überschrift nicht bündig mit dem oberen Ende des Logos beginnen, sondern fängt irgendwo mittig zum Logo an und hat viel zu große Zeilenabstände, sodass ich die Überschrift nicht komplett neben das Logo bekomme. Bei H1 geht also nur die erste Zeile neben das Logo, der Rest rutscht dann mit rieisigen Zeilenabständen nach unten.


    Was kann ich tun, dass es mit einer H1-Überschrift zumindest vom Verlauf her genauso aussieht wie unter obigem Link mit dem Fließtext?


    Ich danke Euch für Eure konstruktiven Antworten.

    Hallo Christiane,


    erst einmal danke für Deine Antwort. Das Logo ist ein image, richtig. Aber dahinter will ich dreizeilig (und bündig zum oberen und unteren Rand des Logos) eine H1-Überschrift haben und da steht jetzt, in rotbrauner Schrift, eben der dreizeilige Fließtext, der zwar aussieht wie eine Überschrift, aber in Wirklichkeit keine ist. RankingCoach sagt, dass ich das machen soll und ich hatte es ja auch schon mal hinbekommen, auf unserer alten Joomla 2-Homepage, aber irgendwie klappt es jetzt leider nicht mehr.


    Ich werde mal versuchen, ob ich es mit <span> hinbekomme,, aber ich bin halt kein Webdsigner, sondern nur ein Stümper mit wenig Ahnung.


    Gäbe es denn noch andere Möglichkeiten und muss ich eigentlich jede einzelne der drei Textzeilen in einen <span>-Befehl einbetten? So war es doch gemeint, oder?


    Danke nochmal und Grüße zurück,


    Peter

    Du könntest noch mit <br> Zeilenumbrüche im Text erzeugen und im CSS mit line-height den Abstand anpassen.


    Aber: Wenn die Überschrift so wie in deinem Beispiel aussehen soll, musst du mit <span> und CSS arbeiten. Nun zeigt das Beispiel ja keinen Webfont, also folgen weitere Zusatzarbeiten. Und das Ergebnis wäre nur eingeschränkt responsiv oder mit größerem Aufwand responsiv zu machen.


    Viel einfacher geht es mit einer Grafik, den Text solltest du dann als Alterantivtext in der Grafik (img) platzieren.

    OT: Das Logo aus deinem Beispiel sieht für mich aus wie schwedische Gardinen und hat damit nichts mit Lernen zu tun bzw. freiwilligem Lernen.
    Ich denke mal das soll eine Schiene sein. Über das Logo würde ich mir an deiner Stelle, sofern es von dir ist, nochmal sehr viele Gedanken machen!


    Viele Grüße

    Erstmal vielen Dank für alle Antworten.


    Das Logo steht nicht zur Debatte. Denn darum ging es mir ja nicht. Ich weiß, dass es einige gut finden, andere wiederum nicht. Das ist eben Geschmackssache. Man kann es als Zaun oder Schienen oder auch als schwedische Gardinen interpretieren, je nachdem, ob man es mag oder nicht.


    Eigentlich war es mal ein stilisierter Zaun, den ich mit der britischen Flagge gemixt habe. Egal.


    Die Idee mit dem Text als Grafik und dem Alternativtext finde ich auch interessant. Würde Google denn die Überschrift erkennen, wenn ich den Alternativtext als H1-Überschrift anlege? So wars doch gement, oder?

    Zitat von Silanov

    Würde Google denn die Überschrift erkennen, wenn ich den Alternativtext als H1-Überschrift anlege? So wars doch gement, oder?


    Nein, denn der Alternativtext ist im Image und ein Image solltest Du nicht als H1 deklarieren.
    Notlösung (Alternative) ist eine H1 zu machen und diese über text-intend aus den Sichtbare bereich zu schieben. Mittlerweile ist aber auch das schon eine fragwürdeige Lösung, da Google gerne "alles Wichtige" im Sichtbaren Bereich ohne Aktion bzw. Scrollen haben will.


    Wie Du siehst gibt es viele Ansatzmöglichkeiten.