Logo (Frontend Modul, eigener HTML Code) Responsive Gestaltung

Hallo zusammen,

auf der Seite www.kettwigersv.de die ich betreue will ich den kompletten Header mit einer IMG Datei füllen, welche sich responsiv anpasst.

Aktuell wird das Logo oben Links (Kettwiger SV 70/86) durch ein Modul als eigener HTML Code beschrieben.
Wenn ich dort als Quelle mein Bild nehme passt sich das entsprechend an, bei mobiler Betrachtung allerdings verändert sich das Bild nicht.

Hier mein HTML Code:

<div id="logo">
<div class="logo_streifen"></div>
<a href="startseite_kettwig.html">
<img src=" files/theme_files/logo/logo.png" alt="Logo" border="0" class="responsive img" />
</a>
</div>

Was muss ich noch an Attributen in den Code hinzufügen?

VG
Amra

Am HTML mußt Du nichts ändern.
Wenn dann wäre es CSS.
Allerdings bringt es nichts das Logo auf die ganze Breite auszudehnen, denn dann ist es verzerrt.

Darüber hinaus kommt hinzu dass das der Link um das Logo absolut positioniert ist.
Dem ist damit "egal was Du tust".

Ich würde Dir empfehlen Dich mit CSS zu beschäftigen.

Also grundsätzlich kann so ein responsives Verhalten eines Bilds auf z.B. folgende Weise erreicht werden:
1) Zunächst sagen wir dem Bild mal, dass es die volle Breite des umgebenden Containers nutzen soll, aber nicht größer dargestellt werden soll, als es ist. Man könnte statt "max-width: 100%;" auch "width: 100%;" setzen, dann würde das Bild allerdings möglicherweise größer gerechnet, was selten gut aussieht. Die Höhe des Bild soll proportional zur Breite angepasst werden (ich benutze hier mal die responsive Klasse deines Bildelements):

HTML-Code:

---

img.responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

---

2) Jetzt muss nur noch dafür gesorgt werden, dass der umgebende Container seine größe proportional zur Breite des Headers ändert. Das könnte z.B. so passieren:

HTML-Code:

---

#logo {
    width: 15%;
}

---

Wichtig ist eben, dass hier eine prozentuale Breite angegeben wird.

Kontraproduktiv ist das hier:

HTML-Code:

---

    #logo a {
    left: 0;
    top: 20px;
    position: absolute;
}

---

Die Positionierung würde ich da eher dem div#logo geben. Eine feste Höhe in Pixel (170px) für dieses Logo funktioniert natürlich auch nicht. Kann man natürlich so setzen, aber wie soll sich dann die Bildgröße jemals ändern, ohne dass hier das Logo verzerrt dargestellt wird?

Du musst halt eine korrekte CSS-Formatierung deklarieren. Z. B. so:

Code:

---

#logo {
  float: left;
  height: auto;
  max-width: 216px;
  min-width: 100px;
  position: relative;
  width: 20%;
}

---

Prozentwert und Mindestbreite ggf. nach Wunsch anpassen. Wozu hattest Du das DIV im Übrigen absolut formatiert, und was versprachst Du Dir von der so völlig wirkungslosen float-Anweisung? Den Textblock weiter unten versahst Du mit einem clear. Auch suboptimal. Wie überhaupt das CSS Deines ganzen Layouts noch reichlich Nachbesserung benötigt.

Doch bzgl. Deiner Frage jetzt erstmal egal. Und dann noch das Image auf 100 % Breite setzen. Kannst Du auch inline machen:

Code:

---

<img class="responsive img" border="0" alt="Logo" src="    files/theme_files/logo/logo.png" style="width: 100%">

---

Für ein skalierendes Logo dieser Machart wäre daneben als Grafik das SVG-Format besser geeignet. U. a. wäre dann der Schriftzug in jeder Größe stets gestochen scharf. Falls auch noch Uraltbrowser unterstützt werden sollen, kann man eine Pixelgrafik als Fallback einbinden. Dazu mal googeln.

Edit: Hach Jungs, hättet ihr auch gleich sagen können, dass ihr schneller sein wollt. Dann hätte ich nämlich nicht nochmal dasselbe tippen brauchen. ;)

Vielen Dank schon mal für die Antworten.

Ich habe mich etwas undeutlich ausgedrückt:
Das aktuelle Logo (klein, oben links auf www.kettwigersv.de) soll ersetzt werden durch ein dem Container angepasstes, was also dementsprechend gestaltet wurde.

<div id="logo">
<div class="logo_streifen"></div>
<a href="startseite_kettwig.html">
<img src=" files/theme_files/logo/logo.png" alt="Logo" border="0" class="responsive img" />
</a>
</div>

Mein css sieht aktuell so aus:
Logo
////////////////////////////////////////////////////////////////////
#logo {
min-width:100%;
max-width:100%;
position:relative;
float:left;
}

.logo_streifen {
width:100%;
height:87%;
min-width:100%;
min-height:100%;
max-width:100%;
max-height:100%;
left:0;
top:0;
position:absolute;
background-color:#$col_1;
}

Ich bin mir jetzt nicht ganz sicher welchen code ich davon ändern muss, bzw. inwiefern, da im HTML ja beide Klassen aufgerufen werden.

Könnt ihr mir dabei noch weiter helfen?

VG
Amra

Leider bin ich mir noch immer nicht sicher was Du erreichen willst, weshalb ein konkretes Beispiel, zb auf einer Unterseite mit einem abgewandelten Layout super wäre.
" ein dem Container angepasstes, was also dementsprechend gestaltet wurde." kann einfach alles bedeuten, oder nichts.

Anhang 17367

So soll das danach aussehen. Die Grafik die erstellt wurde soll dann den ganzen Header ausfüllen.
Leider verhält sich diese nicht responsive und verhaut mir somit die mobile Ansicht.

Lös das Logo aus dem Hintergrund.
Leg den Hintergrund in den Header .
Positionier das Logo nicht absolut, sondern zB via Float und mit einer flexiblen Breite wie zB 15%.

Dann sollte die relative Ausrichtung passen und Du mußt nur die mobile Ansicht überarbeiten.

Hm, so wie ich das jetzt verstanden habe, soll jetzt der gesamte Inhalt des Header ein einziges Bild sein. Also das Logo, die Balken mit den Texten usw?!? Du hättest dann im Header praktisch nur noch dieses Bild? Das ginge dann einfach. Das Bild als img-Element bzw ce_image in den Header, z.B. wie im Wiki beschrieben (... erste Website ...)

HTML-Code:

---

#header img {
  display: block;
  max-width: 100%;
  height: auto;

---