Überschrift im Image lässt sich nicht höher setzen

remanso · 6. Dezember 2022

Hallo,

hab da doch lieber ein neues Theama angefangen.

Bin mich immer noch in Joomla 4 am einarbeiten und hab soweit alles hinbekommen.

Nur das mit dem Logo Banner klappt irgendwie nicht auf dem Server...

In Xammp sah alles gut aus...

Also es geht um das Logobanner welches ich gerne mit einer Überschrift h2 versehen habe.

Eingebunden habe ich dieses im eigenen Modul

Der HTML Code:

Code

<div class="text-left"><img src="images/headers/pension-kunterbunt.jpg" alt="Pension Kunterbunt" width="2000" height="240" />
<div class="tagline">
<h2>Pension <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Kunterbunt</h2>
</div>
</div>

Der CSS Code:

Code

.logo.card
<style>
.text-left {
    height: 240px;
    font-family: 'pristina'; 
    position: relative;
    text-align: center;
    color: black;
    background: #FF9733;
    border: 0px;
    border-radius: 5px;
    box-shadow: 6px 4px 6px 0px rgba(0,0,0,0.35);
}

.tagline {
    font-family: 'pristina';
    letter-spacing: -1px;
    text-align: left;
}

.tagline span {
      display: inline-block;
}

.tagline h2 {
      padding:10px 5px 15px 20px;
}
</style>

Alles anzeigen

Webseite: Pension Kunterbunt

Wie bekomme ich das nun hin das der Text im Logobanner höher kommt?

Viele Grüße

Dirk

JoomlaWunder · 6. Dezember 2022

In deiner user.css steht:

Code

.tagline {
      font-family: 'pristina';
      letter-spacing: -1px;
      text-align: left;
}

Da könntest du ein margin-top: -90px; ergänzen. Dann rutscht der Text nach oben. Auswirkungen auf andere Bereiche sollte überprüft und ev. beseitigt werden!!!

Kannst die Formatierung auch unter .tagline h2 { ... } setzen.

Oder du nutzt deinen Text einfach im Logo selber, also ein neues Logo generieren, welches den Text beinhaltet.

Gibt sicherlich noch mehr Möglichkeiten, wenn du die Divs änderst.

Nebenbei: Das ein oder andere Problem gibt es auf der Webseite noch. Analysiere mal mit F12!

Kannst auch mal mit dem Template direkt beim Anbieter vergleichen, wie die das da mit der Überschrift im Logo realisiert haben. Gibt vermutlich irgendwo eine Demoseite.

remanso · 6. Dezember 2022

Hallo,

vielen Dank, das war es im h2 tag.

wie gesagt unter XAMMP verhielt sich das Layout ganz anders als auf dem Webserver.

Bin dran, mache jetzt alles auf dem Server.

Viele Grüße und Danke

Dirk

Re:Later · 6. Dezember 2022

Nur nebenbei. Dein CSS-Code in #1 ist falsch gesetzt! Den hast du in die user.css eingesetzt und deshalb gehören das

Code

<style>

und

Code

</style>

raus. Sonst machst die ganze user.css kaputt.

Wahrscheinlich wolltest du

Code

.logo.card .text-left {...usw....]

Tags