Grafik im overall_header

Fragen und Antworten zum Thema Style
Antworten
MatthiasM
Beiträge  16
Registriert  Fr 16. Feb 2018, 19:09

Grafik im overall_header

Beitrag von MatthiasM » Fr 30. Mär 2018, 10:34

Hallo,

ich habe eine Frage zum overall_header (Green-Style-Split):
Warum wird dort ein a-Tag eröffnet, danach ein Container angelegt, aber nicht gefüllt; hat das einen bestimmten Grund? (Zeile 250)

Code: Alles auswählen

<a href="<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
	<div class="green-topper"></div><img src="{T_THEME_PATH}/images/greenstyle.jpg" class="greenstyle-image-wrapper" alt="">
</a>
Das Grafik wird dadurch kompliziert für das responsive design. Ich habe das umgemodelt und das Bild in den Container gehievt:

Code: Alles auswählen

<div class="green-topper">
	<img src="{T_THEME_PATH}/images/greenstyle.jpg" class="greenstyle-image-wrapper" alt="">
</div>
Dadurch konnten die ganzen Anweisungen für die unterschiedlichen Bildschirmbreiten wegfallen.

Habe ich etwas übersehen?

Viele Grüße
Matthias

Benutzeravatar
Joyce&Luna
Administrator
Beiträge  621
Registriert  Fr 4. Mär 2016, 05:29
Wohnort  Erkrath

Re: Grafik im overall_header

Beitrag von Joyce&Luna » Fr 30. Mär 2018, 11:26

Hi

Standard ist es, wenn man auf das Logo klickt das man zurück zur Startseite kommt.
Dafür ist dieser Code da.

Code: Alles auswählen

<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
Wenn dies nicht benötigt wird, kannst du dieses weg lassen.
Joyce&Luna

MatthiasM
Beiträge  16
Registriert  Fr 16. Feb 2018, 19:09

Re: Grafik im overall_header

Beitrag von MatthiasM » Fr 30. Mär 2018, 15:08

Ja, das ist mir schon klar. Ich meinte jedoch, dass der div-Container leer ist.

In der Original-Syntax wird ein a-Tag geöffnet mit Link.

Code: Alles auswählen

<a href="<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
Danach wird der div-Container geöffnet und als "green-topper" formatiert. Dieser wird aber gleich wieder geschlossen - es steht nichts drin.

Code: Alles auswählen

<div class="green-topper"></div>
Danach wird der img-Tag geöffnet -"greenstyle-image-wrapper"-, mit Bild und wieder geschlossen. Danach der a-Tag. zu.

Code: Alles auswählen

		<img src="{T_THEME_PATH}/images/greenstyle.jpg" class="greenstyle-image-wrapper" alt="">
</a>
Alles soweit gut. Jedoch befindet sich das Bild nun im div-Container "greenstyle_wrap". Durch den angegebenen Innenrand für diesen Container muss das Bild für jede mögliche Bildschirmbreite relativ umständlich angepasst werden, siehe greestyle.css, fast ganz unten.
Der Container green-topper ist aber mit margin-left und -right: -16px; schon richtig formatiert und passt für alle Breiten. Also habe ich den kompletten Link mit Bild in den Container eingeschlossen. Dadurch entfallen alle @media Anweisungen für das Bild.

Viele Grüße
Matthias

PS.: Ich wünsche übrigens noch schöne Ostertage! :)

Antworten