HTML Code spielt verrückt

[donaldax]

Hallo Zusammen,

soeben wollte ich ein Bild zur Seite der Newsletter Anmeldung verlinken. Das gelingt mir auch sehr gut, allerdings spielt der HTML Code völlig verrückt. Denn, wenn ich die Verlinkung einrichte, dann vergrößert sich das Bild, siehe Grafik

Der Code ist folgender:

Ausgang:

<img src="{$tpl_path}img/10Euro_Button.png" alt="10Euro" width="50" height="50" align="left" border="0"></a>

Mit Verlinkung

<a href="http://permoda.de/newsletter.php"><img src="{$tpl_path}img/10Euro_Button.png" alt="10Euro" width="50" height="50" align="left" border="0"></a>

Ebenso ist es mir nicht gelungen, genau neben dieses Bild welches ich verlinken wollte ein weiteres Bild direkt daneben zu platzieren. Eventuell ist dies im HTML gar nicht möglich? Vielleicht in CSS?

Ich würde mich sehr freuen, wenn jemand mir hierbei behilflich sein könnte, bedanke mich sehr herzlich im Voraus

Liebe Grüße

Andrea

Linkback: https://www.modified-shop.org/forum/index.php?topic=35155.0

[webald]

width="50" height="50":

50 was? Bratwürste? px? em? %?

Schreib mal px dazu: width="50px" height="50px"

[donaldax]

Hallo webald,

vielen Dank für diesen wichtigen Hinweis, habe es geändert, aber dennoch ist die Situation gleich

[hpzeller]

Hallo Andrea.

nimm folgneden Code

Code: XML  [Auswählen]

<a href="{$smarty.const.FILENAME_NEWSLETTER|xtc_href_link}" style="display:inline;"><img src="{$tpl_path}img/10Euro_Button.png" alt="10Euro" width="50" height="50" align="left" border="0"></a>

Gruss
Hanspeter

[donaldax]

Hallo Hanspeter,

schicke Dir einen ganz heftigen Drücker...es funktioniert.

Darf ich Dich noch darauf ansprechen wie man direkt neben dieses Bild ein anderes Bild platziert?

[hpzeller]

Zum Beispiel so, diesen Code an den von mir geposteten anhängen.

Code: XML  [Auswählen]

<img width="50" height="50" border="0" align="left" alt="10Euro" src="templates/Permoda/img/10Euro_Button.png">

Jetzt hast du zwei mal das gleiche Bild unmittelbar nebeneinander, einmal mit und einmal ohne Link.

Gruss
Hanspeter

[donaldax]

Hallo Hanspeter,

nochmals ganz herzlichen Dank. Bin jetzt richtig glücklich und dankbar für Deine Hilfe

Liebe Grüße und ein Drücker bis die Knochen knacken

Andrea

[hpzeller]

width="50" height="50":

50 was? Bratwürste? px? em? %?

Schreib mal px dazu: width="50px" height="50px"

Zur Info, width="50" height="50" ist korrekt -> http://www.w3schools.com/tags/att_img_width.asp

Gruss
Hanspeter

[donaldax]

Hallo Zusammen,

ich antworte auf dieses Posting, da es sachlich hierzu passt. In meiner ursprünglichen Anfrage ging es um das Einbringen von Bildern auf die index.html. Dies hat auch einwandfrei funktioniert.

Doch ist mir aufgefallen, daß nach einrichten des Bildes (roter Pfeil) sich die Menüpunkte (roter Kasten) und der Warenkorb (roter Kreis) verschoben haben. Der Warenkorb sollte eigentlich über dem Satz "Ihr Warenkorb ist leer" stehen, die Menübefehle sollte weiter links stehen um mit dem Logo eine Flucht zu bilden.

Lässt sich per HTML hier etwas tun?

Bedanke mich herzlich im Voraus

Liebe Grüße

Andrea

[wiesenwaldi]

Sieht ja gruselig unaufgeräumt aus...

Da flüchtet nicht nur das Logo sondern gleich noch der Kunde mit. 

Du siehst aber schon mal, dass der verschobene Warenkorb mit dem Text des Newsletter-Logos nicht viel zu tun hat. Der sitzt in der grid.css um Zeile 544 herum als Hintergrund im warenkorb und da ist die Ausrichtung als float:left definiert. Also klebt der am linken Rand deines boxcartbody, wie es sich gehört. Ohne deine <p></p>-Absätze würde es dir ausserdem den Text "Ihr Warenkorb ist leer" glatt in die Grafik reinschreiben.

Gehört aber zu deinem speziellen Template, im Standard-Shop gibt es keine grid.css.

Kannst Du mal danach suchen und den Ausschnitt posten? Oder einfach den Dateipfad, dann fummel ich mir das selbst raus.

Was deine Menuleiste angeht: da musst Du damit leben, dass sie bei der Länge deines Newsletter-Textes nicht mehr auf jeden Bildschirm passt. Wie du an meinem Screenshot siehst rutscht da sogar die Sprachauswahl für englisch auf die nächste Zeile (und da dann natürlich artig zentriert...)

Abstrakt gesagt: bei vorwiegend css-basierten Formatierungen am HTML rumfummeln ist ganz schlechter Stil.

[donaldax]

Hallo wiesenwaldi,

ganz herzlichen Dank für Deine Informationen. Habe zur Ansicht die grid.css beigefügt, würde mich freuen, wenn Du dir das mal ansehen könntest

Liebe Grüße

Andrea

[wiesenwaldi]

Hatte sie auch so schon gefunden.

Ok, die warenkorb-formatierung hast Du da drin dreimal vereinbart.

Einmal grundsätzlich:

Code: CSS  [Auswählen]

#warenkorb {
        clear: both;
        float: right;
        margin-left: 0;
        width: 30%;
        display: block;
        background-repeat: no-repeat;
        background-position: 101% 7px;
}

Da wäre der Warenkorb nun irgendwo rechts am Rand. Aber...

Code: CSS  [Auswählen]

@media only screen and (min-width: 481px)

...bei Geräten, die mindestens 481 px Bildschirmbreite haben kommt der Hintergrund dann:

Code: CSS  [Auswählen]

#warenkorb {
        clear: none;
        float: left;
        margin-left: 2.5641%;
        color:#fff;
        width: 35.8974%;
        display: block;
                background: url(images/warenkorb.png) left top no-repeat;
}

nach links. Ganz nach links. Und ganz nach oben. Da wo er steht. Und danach kommt noch...

Code: CSS  [Auswählen]

@media only screen and (min-width: 769px)

Also auch bei Geräten mit mehr als 769px Bildschirmbreite. (Logischerweise haben die dann auch mehr als 481px Breite...)

Code: CSS  [Auswählen]

#warenkorb {
        clear: none;
        float: left;
        margin-left: 1.6949%;
        width: 22.2033%;
        display: block;
}

Da wird nun gar nichts mehr über den Hintergrund gesagt. Es bleibt also bei der Position oben links, ausser bei Drüberwisch-Mäusekinos, dort klebt er rechts am Rand.

Mach mal aus dem
background: url(images/warenkorb.png) left top no-repeat;
ein
background: url(images/warenkorb.png) center top no-repeat;

Dann suchst Du in deinem Template die Datei styles.css und dort änderst Du in Zeile 418 (müsste das sein)

Code: CSS  [Auswählen]

.boxcartbody{
        text-align: right; color:#fff;
}
 

ab in

Code: CSS  [Auswählen]

.boxcartbody{
        text-align: center; color:#fff;
}
 

Dann sollten eigentlich Warenkorbgrafik und Text zentriert sein.

Das Problem mit der nicht mehr fluchtenden Menueleiste dagegen liegt definitiv an der Breite deiner "Kassieren"-Grafik. Eventuell stellst Du das etwas um. Fehlende physische Bildschirmbreite lässt sich weder mit HTML noch mit css abfangen. Aus dem Grund teste ich immer auf "Minimalkonfiguration". Was da geht geht anders (meistens*) auch.

*) Wenn man nicht gerade versucht, unbedingt ein Template für xtc3 auf mod2 umzubasteln... ,)

[donaldax]

Lieber wiesenwaldi,

ganz herzlichen Dank für deine Unterstützung, glaube mit deiner Anleitung komme ich weiter...

UND --> Du hast Recht, dieses Template habe ich gekauft, war eigentlich für Gambio GX2 gedacht 
Es wurde eigens für mich angepasst...

Vielen lieben dank für deine Hilfe

Andrea