dynamischen Header erzeugen

    Hallo Zusammen,


    habe mich mittlerweile schon relativ gut in Joomla 3.4 eingearbeitet. Ich verwende auf meiner noch lokalen Homepage
    das Template JoomSpirit76.
    Nun habe ich einen Header den ich gern verwenden möchte. Dieser soll die Breite der Homepage haben (siehe soll.png).
    Hab das Modul " Eigene Inhalte (Leeres Modul)" gewählt, Position "logo",
    und dann das Bild so skaliert, dass es passt... das Problem ist jetzt
    halt dass es sich nicht der Seitenbreite anpasst wenn man zum Beispiel
    heranzoomt oder herauszoomt (siehe ist2.png).


    So wie ich das in dem Bild der Module Postions sehe (module-positions.jpg), ist das Template so
    gedacht, dass das Logo nur linksbündig sein soll und nicht über die ganze Breite.


    Habt ihr eine Idee wie ich das jetzt am besten anstelle,
    im zweifelsfall muss ich halt das kleine Logo verwenden.
    Mir würde es halt über die ganze Breite besser gefallen.


    Bin über jede Antwort dankbar, falls noch ne Information fehlt, sagt es ruhig.


    Besten Dank!!!


    Edit: Link zur Template Demo http://www.template-joomspirit…plate-joomla/template-76/

  • Zum hilfreichsten Beitrag springen

    Vielen Dank Euch Beiden für die schnelle Antwort.


    Könntet ihr Eure Antworten evtl. bisschen konkretisieren?
    Muss dazu sagen dass ich mich mit den CSS-Dateien etc. noch nicht so beschäftigt habe und auch noch nicht so fit darin bin.
    Habe lediglich in der Template.css paar Farbcodes geändern.


    In welche CSS Datei muss ich das genau einfügen?


    Danke!!

    Habe es da eingefügt und abgespeichert, meine Seite neu geladen aber das Problem besteht immer noch... ?(


    Edit: Nicht dass wir aneinander vorbeireden. Es gibt mehrere Themes in dem Template, und ich habe es jetzt in der Template.css abgeändert, die ich veränder..
    ist das so korrekt? (Bild im Anhang)

    lade die Seite im Browser
    dann mit rechtsklick auf das logo und "ELEMENT UNTERSUCHEN"
    es sollte sich ein Fenster mit den CSS angaben öffnen. Rechts ist meist die CSS datei benannt.
    Merken mit Pfad und im template ändern.


    in Crome, Firefox und einigen anderen Browsern ist diese Funktion standard

    das Logo hat eine class tag. Das ist gut


    Code
    img.pull-center {max-width: 100%;width: auto \9;height: auto;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}


    wenn du in der main css das img tag änderst veränderst du alle Bilddateien im Style. das kann zu ungewollten Ergebnissen führen.
    wenn möglich über class oder id direkt ansprechen und im css verändern
    class="logo" ... im css mit einem .logo {style...}
    id="logo" ... im css mit einem #logo {style...}


    die class kann oft verwendet werden
    die id wird nur ein einziges mal angesprochen


    Beim einfügen des Bildes in Joomla über einen Editor darauf achten das die width und height angaben leer bleiben

    Hallo,


    ob's relevant ist, weiß ich nicht. Auf der Demo gibt es für Logo eine Inline-CSS:


    Code
    <div class="logo">
                                        <p><img border="0" style="margin: 40px 0 0 0;" title="" alt="free template Joomla" src="images/76/logo_blacktheme.png"></p>            
                </div>


    wegen dem margin (?)


    Sorry, wenn i mich da reingemischt habe :)


    Grüß Dich Anka,


    Christine


    OT: Kann den screenshot von post numero "vor 27 minuten" net lesen. Brille hab ich im anderen Forum vergessen :)

    Also, habe die .logo Einträge in der main.css gefunden. An die habe ich die Configurationen mit max-width, height, etc. eingefügt und jetzt bleibt der Header zumindest beim hinzoomen auf 100%.
    Beim herauszoomen jedoch wird er trotzdem kleiner.


    Bin Euch Beiden schonmal sehr dankbar ihr habt mir gut weitergeholfen,
    falls ihr noch einen Tipp habt, wie sich das Problem beim herauszoomen beheben lässt,
    würde ich mich freuen.

    Genau darum ist es schön, Seiten online zu setzen, damit die Supporter hier punktgenau ansetzen können und nicht quer mit Gedanken-Pfeilen durch den Raum schießen.


    Wenn dein HTML für das Bild dem Link zum Template Demo entspricht müsste ankas Regel so modifiziert werden:


    Code
    div.logo img {
     width: 100%;
}

    @Julian Arnold
    Ich habe mir nochmal Gedanken gemacht.
    Das skalieren von großen Bildern ist nicht unbedingt ratsam wenn es sich vermeiden lässt.
    Große Bilder verursachen viel Traffic


    Was passiert dann in der Höhe mit dem Modul?
    Ein Strecken des Bildes verändert die Proportionen der eigentlichen Graphik.
    Das sieht oft schlecht aus.


    Ich würde das Logo extrahieren. das ist zwar ein wenig mehr Aufwand aber sauber gelöst.
    html

    Code
    <div class="modul-header">    <p class="font-header">Freiwilige Feuerwehr ...</p>    <img class="logo=> href=".../logo-warthausen.jpg></img>    <div class="redline"></div></div>


    css:

    Code
    .modul-header{width: 100%:;height:100px;}
.font-header{ font: 40px/98px Logo Schriftart benennen ; color:black;}
.logo{width: 200px; height:98px;float:right;}
.redline{width:100%;height:2px;display:block;background-color:red;}


    dieses würde ich auf jeden Fall in der templateCSS einbinden.
    In diesem Fall bin ich von einer Gesamthöhe von 100px ausgegangen.
    HTML und CSS ist ja Variabel :rolleyes:




    @anka ein freundliches HALLO