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

Padding

Niklas

Neues Mitglied
Hallo,

Ich möchte jetzt einen Fuß in meine Webseite einbauen mit Impressium,Kategorien,und das dritte weiß ich noch nicht nur die Bilder sind nicht aneinander da ist ein bisschen Luft zwischen und genau das will ich nicht habe mal gehört das man Innenabstände mit Padding bestimmt hab das ganze so versucht klappt aber nicht ...

Habe die Bilder mir div in eine Gruppe gesetzt und mit CSS bestimmt
index.html

Code:
<div id="wrapper1">
<a href="wauies/wauies.html"><img class="klasse" src="bilder/test1.png" alt="wauies" /></a>
<a href="wauies/wauies.html"><img class="klasse" src="bilder/test1.png" alt="wauies" /></a>
<a href="wauies/wauies.html"><img class="klasse" src="bilder/test1.png" alt="wauies" /></a>
</div>

style.css

Code:
#wrapper1 {
padding:35px
}

Jetzt sind die Bilder aber vom Rand 35px entfernt und nicht der Abstand von Bild zu Bild was habe ich Falsch gemacht ?

FG Niklas
 
Erstens ist das eine CSS-Frage, also falsches Forum ;-)

Zweitens gibst Du dem wrapper1 ja das padding, also hat der Inhalt von wrapper1 einen Innenabstand. Wenn Du was am Innenabstand vom Inhalt des wrapper1 ändern willst, dann musst Du diesen Elementen den entsprechenden Innenabstand geben. Ich vermute mal, dass folgendes zum Erfolg (nahtlos aneinander) führt:
Code:
#wrapper1 a {
padding: 0;
margins: 0;
}
Gruß thuemmy
 
Erstens ist das eine CSS-Frage, also falsches Forum ;-)

Stimmt ... sorry

Ist immernoch nicht aneinander aber deine Lösung klingt doch eig ganz Logisch ich mein was soll man den da noch machen ist doch beides auf 0

Code:
#wrapper1 a {
padding: 0;
margins: 0;
}
Was mach hinter wrapper1 das a ?

FG Niklas
 
Damit gibst Du nur den <a>-Tags innerhalb des wrapper1 die Werte für padding und margin mit. Ist das ganze schon hochgeladen? Wenn ja, gib mal den Link.

Gruß thuemmy
 
hmm...

Ich habe dem ganzen mal 35px gegeben

Code:
#wrapper1 a {
padding: 35px;
margins: 35px;
}

Jetzt ist zur Seite und nach unten 35px frei wie es eig sein sollte nur warum ist es bei 0 dann nicht direkt dran das verstehe ich einfach nicht

FG Niklas
 
Habe mal bei Google danach gegoogelt scheint das nich nur ich das Problem habe ist das überhaubt rein technisch möglich oder ist da immer ein Abstand zwischen weil die Browser das so wollen oder so ?

Sorry wegen der doppelpost

FG Niklas
 
Das sind schlicht und ergreifend Leerzeichen zwischen den <a>-Tags. Was du da schreibst, ist äquivalent zu:

HTML:
<div><a href="#">Hallo</a> <a href="#">Welt</a>!</div>

Das wird auch als "Hallo Welt!" mit einem Leerzeichen dazwischen angezeigt.

Wenn du das verhindern willst, musst du entweder die Whitespaces (Leerzeichen, Zeilenumbrüche) zwischen den einzelnen <a>-Tags entfernen oder die <a>-Tags auf display: block; setzen und floaten.

HTML:
<!DOCTYPE html>

<html>
<head>
    <title>demo</title>

    <style type="text/css">

    /* Zur Erklärung hierzu bitte nach "easy clearing" oder "clearfix" suchen */

    * {
        margin: 0;
        padding: 0;
        }

    .clear:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }

    .clear {
        display: inline-block;
        }

    .clear {
        display: block;
        }

    /* --- */

    #test a {
        display: block;
        float: left;
        width: 300px;
        height: 40px;
        border: 3px solid #f00;
        }

    #test {
        border: 3px solid #0f0;
        padding: 10px;
        }
    </style>
</head>

<body>

<div id="test" class="clear">
<a href="./">test</a>
<a href="./">test</a>
<a href="./">test</a>
</div>

</body>
</html>
 
Code:
<a href="wauies/wauies.html"><img class="klasse" src="bilder/test1.png" alt="wauies" /></a>
Da ist irgentwo ein Lehrzeichen zu viel ?

Habe alle Lehrzeichen weggemacht Passiert nichts
Code:
<a href="wauies/wauies.html"><img class="klasse"src="bilder/test1.png"alt="wauies"/></a>
 
Zuletzt bearbeitet:
Zurück
Oben