Großer Abstand zwischen Paypal Buttons

html.de-Forum HTML, XHTML & CSS
1

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]

G. Kumar | Shop 
</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">
Menge
50g €1,00 EUR 100g €1,99 EUR 150g €2,99 EUR 200g €3,98 EUR 250g €4,98 EUR 300g €5,97 EUR 350g €6,97 EUR 400g €7,96 EUR 450g €8,96 EUR 500g €9,95 EUR 
            <h1>Florentiner</br></h1>
            <img src="images/florentiner.jpg" alt="Bild"></br>
Menge
50g €1,00 EUR 100g €1,99 EUR 150g €2,99 EUR 200g €3,98 EUR 250g €4,98 EUR 300g €5,97 EUR 350g €6,97 EUR 400g €7,96 EUR 450g €8,96 EUR 500g €9,95 EUR 
            <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]
2

[HTML]

G. Kumar | Shop 
</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">
Menge
50g €1,00 EUR 100g €1,99 EUR 150g €2,99 EUR 200g €3,98 EUR 250g €4,98 EUR 300g €5,97 EUR 350g €6,97 EUR 400g €7,96 EUR 450g €8,96 EUR 500g €9,95 EUR 
            <h1>Florentiner</br></h1>
            <img src="images/florentiner.jpg" alt="Bild"></br>
Menge
50g €1,00 EUR 100g €1,99 EUR 150g €2,99 EUR 200g €3,98 EUR 250g €4,98 EUR 300g €5,97 EUR 350g €6,97 EUR 400g €7,96 EUR 450g €8,96 EUR 500g €9,95 EUR 
            <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.

3

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.

4

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;[/CODE]

5

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):

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:

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.