• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Großer Abstand zwischen Paypal Buttons

Gabriel Kumar

Neues Mitglied
Hey Leute,
habe für meinen kleinen "Onlineshop" zwei Paypal Buttons in meine Website eingefügt. Alles wird auch richtig angezeigt, jedoch ist zwischen dem oberen "In Warenkorb" Button und dem unteren Produktbild (alles untereinander in der mitte angeordnet) ein unheimlich großer Abstand. Ich finde auch nichts, dass in dem Button ein padding festgelegt wurde.

Wie kann ich das beheben?
Danke im vorraus.

...und: wenn ich rechtsklick auf diese freie fläche mach, kann ich eine gif Datei abspeichern die aus einem weißen Pixel besteht.

HTML:
<!DOCTYPE html>

<html>
    <head>
        <link rel="shortcut icon" href="logo icon.ico" >
        <title>G. Kumar | Shop</title>
        <meta charset ="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.menubutton').click(function() {
                    $('nav').slideToggle('slow');
                });
            });
        </script>
    
    </head>
    <body>
        <section id="menubar">
            <ul>
                <li><a class="menubutton" href="#menu"><img src="images/menu.png"/></a></li>
            </ul>
        </section>
        <header>
            <h1><img src="images/logo.png" alt="Logo"</h1>
        </header>
        <nav class="nav">
            <ul>
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="IT.html">IT</a></li>
                <li><a href="Grafikdesign.html">Grafikdesign</a></li>
                <li><a href="More.html">More</a></li>
                <li><a href="Kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
        <section id="main">
            <article>
                <div id="shop">
                <h3>Weihnachtsshop</br></h3>
                <p>Hier können Sie ganz einfach und bequem Ihre Bestellung online aufgeben und gleich bezahlen. Da technisch bedingt die Auswahl nur bis 500g möglich ist, legen Sie einen Artikel gegebenfalls mehrfach in den Warenkorb.</br></br></p>
                <h1>Vanillekipferl</br></h1>
                <img src="images/vanillekipferl.jpg" alt="Bild"></br>
                
                <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="YKD35K8SJUBG4">
<table align="center">
<tr><td><input type="hidden" name="on0" value="Menge">Menge</td></tr><tr><td><select name="os0">
    <option value="50g">50g €1,00 EUR</option>
    <option value="100g">100g €1,99 EUR</option>
    <option value="150g">150g €2,99 EUR</option>
    <option value="200g">200g €3,98 EUR</option>
    <option value="250g">250g €4,98 EUR</option>
    <option value="300g">300g €5,97 EUR</option>
    <option value="350g">350g €6,97 EUR</option>
    <option value="400g">400g €7,96 EUR</option>
    <option value="450g">450g €8,96 EUR</option>
    <option value="500g">500g €9,95 EUR</option>       
</select> </td></tr></tbody>
</table>
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="http://www.gabriel-kumar.de/images/button.png" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>

                <h1>Florentiner</br></h1>
                <img src="images/florentiner.jpg" alt="Bild"></br>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="7SAH62YYYT7N2">
<table align="center">
<tr><td><input type="hidden" name="on0" value="Menge">Menge</td></tr><tr><td><select name="os0">
    <option value="50g">50g €1,00 EUR</option>
    <option value="100g">100g €1,99 EUR</option>
    <option value="150g">150g €2,99 EUR</option>
    <option value="200g">200g €3,98 EUR</option>
    <option value="250g">250g €4,98 EUR</option>
    <option value="300g">300g €5,97 EUR</option>
    <option value="350g">350g €6,97 EUR</option>
    <option value="400g">400g €7,96 EUR</option>
    <option value="450g">450g €8,96 EUR</option>
    <option value="500g">500g €9,95 EUR</option>
</select> </td></tr></tbody>
</table>
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="http://www.gabriel-kumar.de/images/button.png" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>


                
                <p>
            </article>
            <aside>
                <section>
                    <p><img src="images/Profil Kumar.png" alt="BILD"</p>
                </section>
                <section>
                    <h2>NEWS:</h2>
                    <p>Neue Website!</p>
                </section>
                <section>
                    <h2>Kontakt</h2>
                    
                    <ul>
                        <li><a href="Kontakt.html" class="active">Klicken Sie hier</a></li>
                    </ul>
                    
                
                </section>
        </section>
        <footer>
                <ul>
                    <li><a href="Kontakt.html" class="active">Kontakt</a></li>
                    <li><a href="Datenschutz.html">Datenschutz</a></li>
                    <li><a href="Impressum.html">Impressum</a></li>
                    <li><a>&copy; 2017, Gabriel Kumar</a></li>
                </ul>

        </footer>
    </body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Indem du erstmal einen Link schickst, den man sich anschauen kann.

Edit:
Oder Code!

HTML:
<!DOCTYPE html>
 
<html>
    <head>
        <link rel="shortcut icon" href="logo icon.ico" >
        <title>G. Kumar | Shop</title>
        <meta charset ="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.menubutton').click(function() {
                    $('nav').slideToggle('slow');
                });
            });
        </script>
   
    </head>
    <body>
        <section id="menubar">
            <ul>
                <li><a class="menubutton" href="#menu"><img src="images/menu.png"/></a></li>
            </ul>
        </section>
        <header>
            <h1><img src="images/logo.png" alt="Logo"</h1>
        </header>
        <nav class="nav">
            <ul>
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="IT.html">IT</a></li>
                <li><a href="Grafikdesign.html">Grafikdesign</a></li>
                <li><a href="More.html">More</a></li>
                <li><a href="Kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
        <section id="main">
            <article>
                <div id="shop">
                <h3>Weihnachtsshop</br></h3>
                <p>Hier können Sie ganz einfach und bequem Ihre Bestellung online aufgeben und gleich bezahlen. Da technisch bedingt die Auswahl nur bis 500g möglich ist, legen Sie einen Artikel gegebenfalls mehrfach in den Warenkorb.</br></br></p>
                <h1>Vanillekipferl</br></h1>
                <img src="images/vanillekipferl.jpg" alt="Bild"></br>
               
                <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="YKD35K8SJUBG4">
<table align="center">
<tr><td><input type="hidden" name="on0" value="Menge">Menge</td></tr><tr><td><select name="os0">
    <option value="50g">50g €1,00 EUR</option>
    <option value="100g">100g €1,99 EUR</option>
    <option value="150g">150g €2,99 EUR</option>
    <option value="200g">200g €3,98 EUR</option>
    <option value="250g">250g €4,98 EUR</option>
    <option value="300g">300g €5,97 EUR</option>
    <option value="350g">350g €6,97 EUR</option>
    <option value="400g">400g €7,96 EUR</option>
    <option value="450g">450g €8,96 EUR</option>
    <option value="500g">500g €9,95 EUR</option>      
</select> </td></tr></tbody>
</table>
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="http://www.gabriel-kumar.de/images/button.png" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
 
                <h1>Florentiner</br></h1>
                <img src="images/florentiner.jpg" alt="Bild"></br>
 
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="7SAH62YYYT7N2">
<table align="center">
<tr><td><input type="hidden" name="on0" value="Menge">Menge</td></tr><tr><td><select name="os0">
    <option value="50g">50g €1,00 EUR</option>
    <option value="100g">100g €1,99 EUR</option>
    <option value="150g">150g €2,99 EUR</option>
    <option value="200g">200g €3,98 EUR</option>
    <option value="250g">250g €4,98 EUR</option>
    <option value="300g">300g €5,97 EUR</option>
    <option value="350g">350g €6,97 EUR</option>
    <option value="400g">400g €7,96 EUR</option>
    <option value="450g">450g €8,96 EUR</option>
    <option value="500g">500g €9,95 EUR</option>
</select> </td></tr></tbody>
</table>
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="http://www.gabriel-kumar.de/images/button.png" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
 
 
               
                <p>
            </article>
            <aside>
                <section>
                    <p><img src="images/Profil Kumar.png" alt="BILD"</p>
                </section>
                <section>
                    <h2>NEWS:</h2>
                    <p>Neue Website!</p>
                </section>
                <section>
                    <h2>Kontakt</h2>
                   
                    <ul>
                        <li><a href="Kontakt.html" class="active">Klicken Sie hier</a></li>
                    </ul>
                   
               
                </section>
        </section>
        <footer>
                <ul>
                    <li><a href="Kontakt.html" class="active">Kontakt</a></li>
                    <li><a href="Datenschutz.html">Datenschutz</a></li>
                    <li><a href="Impressum.html">Impressum</a></li>
                    <li><a>&copy; 2017, Gabriel Kumar</a></li>
                </ul>
 
        </footer>
    </body>
</html>


...und: wenn ich rechtsklick auf diese freie fläche mach, kann ich eine gif Datei abspeichern die aus einem weißen Pixel besteht.
 
In solchen Fällen hilft der Code meist herzlich wenig, da man das ohne Bilder und CSS nicht nachvollziehen kann. Ein Link zur Seite ist immer besser.
 
Werbung:
In solchen Fällen hilft der Code meist herzlich wenig, da man das ohne Bilder und CSS nicht nachvollziehen kann. Ein Link zur Seite ist immer besser.

http://www.gabriel-kumar.de/shop.html

Code:
body {
    background:#DCDCDC;
    font-size:100%;
    margin:0em;
    padding:0em;
}

h1 {
    font-size:1.5em;
    line-height:1.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#7bb94e;
    margin:0em;
}

h2 {
    font-size:1.563em;
    line-height:1.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
    padding:0.25em;
    text-align:center;
}

h3 {
    font-size:3.0em;
    line-height:1.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#7bb94e;
    margin:0em;
}

h4 {
    font-size:1em;
    line-height:1.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
}

p {
    line-height:1.25em;
    font-family:Helvetica;
    font-weight:100;
    color:#2F2D2C;
    margin:0em;
    padding:1.25em;
    text-align:center;
}

ul {
    margin:0px;
    padding:0px;
}

li {
    list-style:square;
    font-family: Helvetica;
    font-weight:100;
    color:#2F2D2C;
    line-height:1.25em;
    margin:0em;
    padding:0em;
    margin:0.313em 0em 0.313em 0em;
}

img {
    width:90%;
    height: auto;
    max-width:700px;
}

a {
    text-decoration: none;
}

#menubar {
    display:block;
    background:#FFFFFF;
    
}
#menubar ul {
    display:block;
    width:2em;
    padding:0.9em;
}
#menubar ul li {
    display:inline;
}

#menubar ul li a.menubutton {
    display:none;
}

header {
    display: block;
    background:#2F2C2C;
    text-align:center;
}

nav {
    display:block;
    height:2.5em;
    background:#FFFFFF;
    text-align:center;
}

nav ul {
    display:block;
}
nav ul li {
    display: inline;
    margin:0.5em 0.118em 0em 0.188em;
}
nav ul li a:hover {
    background:#DBD9D8;
    border-bottom:0.188em solid #E7590B
}

#main {
    display:block;
    width:96%;
    max-width:980px;
    margin:1.25em auto;
    padding:0em;
}

#main article {
    display:inline-block;
    width:64.3%;
    background:#FFFFFF;
    vertical-align: top;
    margin:0em;
    padding:0em;
    text-align:center;
    padding-top: 15px;
}

#main aside {
    display:inline-block;
    width:30.6%;
    margin-left:3%;
    padding:0em;
    vertical-align:top;
}

#main aside section {
    margin-bottom:1.563em;
    background:#FFFFFF;
    border-bottom: 0.188em solid #E7590B;
}   

#main aside section ul {
    padding:0em 1.875em 1.25em 2.5em;
}

footer {
    display:block;
    background: #2F2C2C;
    text-align:center;
}

footer ul {
    display:block;
    width:100%;
    max-width:980px;
    text-align:left;
    margin:0px auto;
}

footer ul li {
    display:inline;
    font-size:0.8em;
    line-height:2.8em;
    color: #E2DBDB;
    padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
    color: #E2DBDB;
    display:inline;
}

#Datenschutz p {
    text-align: justify;
}

#Datenschutz h3 {
    text-align:center;
}

#Datenschutz li {
    text-align:left;
}


@media screen and (max-width:800px) {
    body {
        font-size:90%;
    }
}
@media screen and (max-width:600px) {   
        #main aside, #main article {
        width:100%;
        display:block;
        margin:0.625em 0em 0.625em 0em;
        }
}
@media screen and (min-width:550px) {
    nav.nav {
        display:block !important;
    }
}
@media screen and (max-width:550px) {
        body {
            font-size:86%;
        }
        #menubar ul li a.menubutton {
            display:block;
        }
        nav {
            display:none;
            height:auto;
        }
        nav ul li {
            display:block;
            margin:0.3em 0em 0.3em 0em;
 
Also da ist ein 1x1 px großes giv, welches aber auf die Größe von 567x567 px gestreckt wurde. Das gif ist einfach ein weißer Pixel... Seltsam. Probiere ihn mal zu entfernen (Zeile 65):
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
Ist der übeltäter. Ich wüsste nicht, warum das objekt wichtig sein sollte. Der Rest müsste immer noch funktionieren.

Edit:
style.css gibt in Zeile 72 folgendes CSS an:

Code:
img {
    width:90%;
    height: auto;
    max-width:700px;
}
Das ist der Grund! Bestimmte style-Attribute für ALLE images zu verwenden ist eine schlechte Idee.
 
Zurück
Oben