Bilder in Content einfügen

amadeus · 11 Juli 2009

Hallo,

auf der suche nach Hilfe bin ich nun hier gelandet, ich habe einen kleinen Shop und möchte mein Content etwas verändern aber ich bekomme es nicht alleine hin, folgende (für mich) probleme:

Die Bilder sind etwas größer als oben eingemalt.

1. ich möchte in die mitte ein Paypal-Logo einfügen, wenn ich das mache erscheint es unten drunter

!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr>
<tr><td align="center"><a href="#" onclick="javascript:window.open('https://www.paypal.com/de/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=500');"><img
src="https://www.paypal.com/de_DE/DE/i/logo/pp_paysafely_100x45.gif
" border="0" alt="PayPal-Logo “Sicher zahlen“"></a></td></tr></table>

Da wo es zwischen soll ist das:

<tbody>
<tr>
<td height="75" align="left" valign="middle"><a href="http://www.kresstech.de" target="_blank"><map name="FPMap0">
<area alt="Eingetragen bei den Web-Charts von KressTech.de!" href="http://www.kresstech.de/cgi-bin/topsites.cgi?klick=xxxx" shape="rect" coords="0,0,88,30" target="_blank" /></map><img height="31" border="0" width="88" src="http://www.kresstech.de/cgi-bin/topsites.cgi?button=show" alt="KressTech.de - Das Portal zur Computerwelt!" usemap="#FPMap0" /></a> </td>
<td align="right" valign="middle">
<script language="Javascript" type="text/javascript" src="http://de-toplist.de/image2.php?id=xxxxxxxxx"></script>
</td>
</tr>
</tbody>
</table>

2. möchte ich 4 Bilder nebeneinander mit etwas abstand voneinander einfügen die dann noch verlinkt werden und wenn man mit der Maus drüber geht ein Text erscheint

_Thor_ · 11 Juli 2009

amadeus schrieb:
1. ich möchte in die mitte ein Paypal-Logo einfügen, wenn ich das mache erscheint es unten drunter

Da es sich hier um ein unschönes Tabellenlayout handelt, musst du eine neue Zelle erstellen, die zwischen den beiden schon vorhandenen Grafiken liegt und dort das neue image einbinden.

Viel einfacherer und vor allem semantisch korrekter wäre der Einsatz einer Liste, denn was du hier hast, ist eine Liste von Grafiken.

HTML:

<ul>
  <li><a href=""><img src="" alt="" /></a></li>
  <li><a href=""><img src="" alt="" /></a></li>
  <li><a href=""><img src="" alt="" /></a></li>
</ul>

Per CSS ordnet man dann die Listenelemente nebeneinander an.

Code:

ul li {float: left;}

HTML ist nur für die Bedeutung deines Inhaltes zuständig, nicht für das Layout und momentan sagt dein Code, dass du nur tabellarische Daten hast und das ist ja nicht richtig.

2. möchte ich 4 Bilder nebeneinander mit etwas abstand voneinander einfügen die dann noch verlinkt werden und wenn man mit der Maus drüber geht ein Text erscheint

Auch dafür ist eine Liste die richtige Wahl, Abstände definiert man mit margin und padding per CSS und wenn du den Bildern einen Titel gibst, erscheint dieser auch, wenn man sich mit der Maus über dem Bild befindet.

HTML:

<img src="" alt="" title="test" />

amadeus · 11 Juli 2009

Hallo Thor,

danke für Deine schnelle Antwort.

Für die Bilder kann ich mir vorstellen wie das geht, aber die unteren 3 Elemente sind ja fertige Codes mit Größen angaben und da weiß ich nicht wie das in Deine Liste eingefügt werden soll?

MfG

_Thor_ · 11 Juli 2009

Breite und Höhe der Bilder kannst du ja noch hinzufügen, ebenso das JavaScript, mehr ist das doch nicht.

HTML:

<ul>
  <li><a href=""><img src="" alt="" width="" height="" onclick="" /></a></li>
  <li><a href=""><img src="" alt="" width="" height="" onclick="" /></a></li>
  <li><a href=""><img src="" alt="" width="" height="" onclick="" /></a></li>
</ul>

amadeus · 11 Juli 2009

Hallo Thor,

aus Deiner Sicht ist es einfach, für mich ist es ein großes Buch mit Rätseln

Also soweit habe ich es erstmal gemacht, die Links funktionieren auch aber die reihenfolge nebeneinander bekomme ich nicht hin:

<ul>
<li><a href="http://www.kresstech.de/cgi-bin/topsites.cgi?klick=xxxxxxxx" shape="rect" coords="0,0,88,30" target="_blank" /></map><img src="http://www.kresstech.de/cgi-bin/topsites.cgi?button=show" alt="KressTech.de - Das Portal zur Computerwelt!" usemap="#FPMap0" width="88" height="31" onclick="http://www.kresstech.de/cgi-bin/topsites.cgi?klick=xxxxxxxx" /></a></li>
<li><a href="#"><img src="https://www.paypal.com/de_DE/DE/i/logo/pp_paysafely_100x45.gif" alt="PayPal-Logo “Sicher zahlen“" width="" height="" onclick="javascript:window.open('https://www.paypal.com/de/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=500');" /></a></li>
</ul>
<tbody>
<tr>
<td align="right">
<script language="Javascript" type="text/javascript" src="http://de-toplist.de/image2.php?id=xxxxxxxxx"></script>
</td>
</tr>
</tbody>

kannst Du mal Dein wissen einfließen lassen, die Reihenfolge ist von oben gelesen von links nach rechts.

_Thor_ · 11 Juli 2009

Was funktioniert denn jetzt nicht?

Ich sehe da nur 2 Listenelemente, wolltest du nicht 3 Grafiken nebeneinander haben?

Für die bessere Lesbarkeit wäre es gut, wenn du die Code-Tags aus der erweiterten Ansicht nutzen würdest und den Code etwas Formatierst, ausserdem wäre ein Link zu deiner Seite viel besser, als nur der Code.

amadeus · 11 Juli 2009

Also zur besseren Verständlichkeit, ich habe so gut wie keine Ahnung von der Materie, ich kann zwar nach einem Vorbild mir etwas zurecht basteln aber dann hört es schon auf.

Die 3 Elemente sollen auf meiner Seite stehen.

Die ersten 2, Kresstech und Paypal habe ich funktionsfähig hinbekommen aber die seitliche Ausrichtung fehlt, das Element "de-toplist" bekomme ich überhaupt nicht in die Vorgabe von Dir, deshalb hatte ich das Script komplett übernommen wie es da stand, auf meiner Seite war es schon auf der rechten Seite, da dachte ich das es dort bleibt, hatte ich aber falsch gedacht:sad:

Mit diesem bin ich total überfordert:

"Für die bessere Lesbarkeit wäre es gut, wenn du die Code-Tags aus der erweiterten Ansicht nutzen würdest und den Code etwas Formatierst, ausserdem wäre ein Link zu deiner Seite viel besser, als nur der Code."

_Thor_ · 11 Juli 2009

amadeus schrieb:
Also zur besseren Verständlichkeit, ich habe so gut wie keine Ahnung von der Materie, ich kann zwar nach einem Vorbild mir etwas zurecht basteln aber dann hört es schon auf.

Das macht das ganze natürlich nicht einfacher, gewisse Grundkenntnisse wäre schon hilfreich.

Die ersten 2, Kresstech und Paypal habe ich funktionsfähig hinbekommen aber die seitliche Ausrichtung fehlt, das Element "de-toplist" bekomme ich überhaupt nicht in die Vorgabe von Dir, deshalb hatte ich das Script komplett übernommen wie es da stand, auf meiner Seite war es schon auf der rechten Seite, da dachte ich das es dort bleibt, hatte ich aber falsch gedacht:sad:

Wie gesagt, wäre jetzt ein Link zur Seite sehr hilfreich.

Mit diesem bin ich total überfordert:
"Für die bessere Lesbarkeit wäre es gut, wenn du die Code-Tags aus der erweiterten Ansicht nutzen würdest und den Code etwas Formatierst, ausserdem wäre ein Link zu deiner Seite viel besser, als nur der Code."

Wenn du eine Antwort erstellst, findest du dort diesen Button

, in diesen solltest du deinen Code schreiben.

amadeus · 11 Juli 2009

Wie gesagt, wäre jetzt ein Link zur Seite sehr hilfreich.

Das hatte ich Missverstanden, Entschuldigung.

Insecticide 2000 - Onlineshop

_Thor_ · 11 Juli 2009

Oh je, so ein durcheinander im Code hab ich ja schon lange nicht mehr gesehen, ist der von einem Tool generiert worden, oder hat den jemand selbst geschrieben?

Es ist zwar absolut falsch, aber das einfachste für dich wird sein, wenn du zwischen die beiden <td> noch eine 3. Zelle einfügst, die dann das Bild enthält.

Grundsätzlich solltest du dir jedoch überlegen, die Seite mal überarbeiten zu lassen oder auf ein anderes Shop-System umzusteigen, denn der Code ist absolut unterirdisch, mal als Beispiel:

HTML:

          </tr>
        </table></td>
      </tr>
    </table></td>
        </tr>
    </table></td>
  </tr>
</table></td>
                    </tr>

                  </table>
                  &nbsp;</td>
                <td valign="top">
                  <table width="100%"  border="0" cellspacing="4" cellpadding="0">
                    <tr>
                      <td>
                        <table width="98%" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td class="main">

                              

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td class="pageHeading"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td class="pageHeading">&nbsp;</td>

  </tr>
  <tr> 
    <td class="main"><h3><span style="color: rgb(51, 102, 255);"></span></h3>
<h2> </h2>

Dieser gesamte Code hat absolut keinen Inhalt. Dort steht nicht ein Wort, welches auf deiner Seite zu sehen ist. ca. 35 Zeilen nur Tabellen.

Tut mir leid, das so hart sagen zu müssen, aber dies ist das beste Beispiel, wofür HTML nicht gedacht ist.

amadeus · 11 Juli 2009

auf ein anderes Shop-System umzusteigen, denn der Code ist absolut unterirdisch,

Hast Du eine Empfehlung für ein anderes Shopsystem, ich bin nämlich schon am überlegen:?:

Grundsätzlich solltest du dir jedoch überlegen, die Seite mal überarbeiten zu lassen

was wäre die bessere Variante:?:

Oh je, so ein durcheinander im Code hab ich ja schon lange nicht mehr gesehen, ist der von einem Tool generiert worden, oder hat den jemand selbst geschrieben?

Soweit ich weiß macht das der XT.Shop selber, ich geb bloß meine Sachen ein.

_Thor_ · 11 Juli 2009

amadeus schrieb:
Hast Du eine Empfehlung für ein anderes Shopsystem, ich bin nämlich schon am überlegen:?:

Da kann ich dir leider keins empfehlen, da ich alles was ich brauche, selber schreibe und die verfügbaren Systeme noch nicht getestet habe. Aber irgendjemand hier im Forum wird da sicher schon Erfahrungen gemacht haben und diese auch wiedergeben.

was wäre die bessere Variante:?:

Den saubersten Code wirst du bekommen, wenn du HTML, CSS, PHP und MySQL lernst und deinen Shop selber schreibst, aber die Zeit wirst du vermutlich nicht haben. Deswegen wäre ein fertiges System wohl am ehesten geeignet.

Soweit ich weiß macht das der XT.Shop selber, ich geb bloß meine Sachen ein.

Das hab ich mit gedacht, denn sonst hätte man den Entwickler ohne Sorgen zum Mond schießen können.

amadeus · 12 Juli 2009

OK- das hilft mir nun erstmal nicht weiter.
Kannst Du mir gegen Bezahlung die 3 Elemente in die gewünschte funktionsfähige Reihenfolge bringen:?:

_Thor_ · 12 Juli 2009

Das schaffst du auch so. In deinem ersten Post hast du ja schon den richtigen Code gefunden, jetzt musst du nur zwischen die beiden Zellen eine weitere einfügen.

HTML:

<td height="75" align="left" valign="middle"><a href="http://www.kresstech.de" target="_blank"><map name="FPMap0">
<area alt="Eingetragen bei den Web-Charts von KressTech.de!" href="http://www.kresstech.de/cgi-bin/topsites.cgi?klick=xxxx" shape="rect" coords="0,0,88,30" target="_blank" /></map><img height="31" border="0" width="88" src="http://www.kresstech.de/cgi-bin/topsites.cgi?button=show" alt="KressTech.de - Das Portal zur Computerwelt!" usemap="#FPMap0" /></a> </td>

<td><a href=""><img src="" alt="PayPal" title="PayPal" /></a></td>  //das ist die neue Zelle.

<td align="right" valign="middle">
<script language="Javascript" type="text/javascript" src="http://de-toplist.de/image2.php?id=xxxxxxxxx"></script>
</td>

amadeus · 12 Juli 2009

Code:

<td height="75" align="left" valign="middle"><a href="http://www.kresstech.de" target="_blank"><map name="FPMap0">
<area alt="Eingetragen bei den Web-Charts von KressTech.de!" href="http://www.kresstech.de/cgi-bin/topsites.cgi?klick=xxxxxx" shape="rect" coords="0,0,88,30" target="_blank" /></map><img height="31" border="0" width="88" src="http://www.kresstech.de/cgi-bin/topsites.cgi?button=show" alt="KressTech.de - Das Portal zur Computerwelt!" usemap="#FPMap0" /></a> </td>

<td align="center" valign="middle"><a href="#"><img src="https://www.paypal.com/de_DE/DE/i/logo/pp_paysafely_100x45.gif" alt="PayPal-Logo “Sicher zahlen“" width="" height="" onclick="javascript:window.open('https://www.paypal.com/de/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=500');" /></a></td>

<td align="right" valign="middle">
<script language="Javascript" type="text/javascript" src="http://de-toplist.de/image2.php?id=xxxxxxx"></script>
</td>

so funktioniert es halbwegs, aber der rechte Butten hat sich unten angeordnet und Paypal klebt an den linke dran

_Thor_ · 12 Juli 2009

Das ist leider noch nicht in deinem Shop zu sehen, hast du eine Testseite?

amadeus · 12 Juli 2009

ich schalte sie mal frei,
Insecticide 2000 - Onlineshop - test

_Thor_ · 12 Juli 2009

Das sieht ja wieder anders aus, als in deinem letzten Beispiel, dort sind jetzt alle Links in einer Zelle.

amadeus · 12 Juli 2009

Code:

<a target="_blank" href="http://www.kresstech.de"><map name="FPMap0">
<area target="_blank" coords="0,0,88,30" shape="rect" href="http://www.kresstech.de/cgi-bin/topsites.cgi?klick=xxxxxx" alt="Eingetragen bei den Web-Charts von KressTech.de!" /></map><img height="31" border="0" width="88" usemap="#FPMap0" alt="KressTech.de - Das Portal zur Computerwelt!" src="http://www.kresstech.de/cgi-bin/topsites.cgi?button=show" /></a>   <a href="#"><img height="" width="" onclick="javascript:window.open('https://www.paypal.com/de/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=500');" alt="PayPal-Logo �Sicher zahlen�" src="https://www.paypal.com/de_DE/DE/i/logo/pp_paysafely_100x45.gif" /></a>
<script src="http://de-toplist.de/image2.php?id=xxxxxxx" type="text/javascript" language="Javascript"></script>

so sieht es aus nachdem ich gespeichert habe!

_Thor_ · 12 Juli 2009

Es sollte aber so aussehen, wie ich es dir weiter oben geschrieben habe.

Bilder in Content einfügen

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied