Abstand nach unten
Hallo zusammen,
ich weiss bisschen ein blöder Thementitel, aber ich weiss nicht wie ich das sonst bezeichnen soll.
Nach langem fummeln ist es mir gelungen, einen anschaubaren Beitrag zu gestalten:
Nun habe ich ein Problem, ich möchte zwischen jeder neuen Linie auch einen Zwischenraum haben, so wie er zwischen den Bildern zu sehen ist. Kann mir jemand sagen, womit ich das erreichen kann. In einem anderen Forum ist mir das gelungen, bei uns funktioniert aber der Code leider nicht so, wie hier:
Wie bekomme ich auch einen Abstand zwischen den Zeilen hin? Ich wäre dankbar für jeden Tipp.
Gabriella
http://www.musengarten.com/
http://www.garten-der-poesie.de/
Layout: Business
Naja, so ganz ohne den Code zu kennen mit dem du das realisieren willst ist es schwer darauf zu antworten.
Gnaz allgemein kanz du unten einen Abstand mit der CSS -Anweisung "margin-bottom" festlegen.
wenn du deinen Bildern z.B. die Klasse "meinbanner" gibst würde dass dann so lauten:
.meinbanner{margin-bottom:20px;}
Technik · #4 RE: Abstand nach unten
"Weicher Umbruch" hört sich ja fast so an wie " ein bisschen schwanger "
Gruß
Olaf
#6 RE: Abstand nach unten
#8 RE: Abstand nach unten
Ich hab Deinen Code nur mal schnell in den Editor gepackt, abgespeichert und im Browser geöffnet, da setzt er dann den Forencode natürlich nicht um. Nur zur Erklärung, warum das in den eckigen Klammern als Code angezeigt wird.
Dein Code, so wie Du ihn gepostet hast:
hinter jedem Deiner Codeblöcke zwei "<br>" eingefügt:
Das erzeugt also sehr wohl eine Leerzeile, einen Abstand zwischen den Reihen. Wie groß der wird, hängt davon ab, wieviele Zeilenumbrüche Du einfügst. Ist eine simple Lösung, aber Du hast was Einfaches gesucht. Und es funktioniert, es gehört zu den Grundbefehlen.
Wenn das bei Dir nicht funktioniert, also gar keine Zeilenabstände entstehen, die üblichen Fragen:
- nach der Änderung des Codes in Deinem Forum den Cache sauber gemacht und wirklich neu geladen?
- irgendwelche Code-Zaubereien an anderer Stelle, die eine bestimmte Formatierung in einem bestimmten Bereich erzwingen?
- ganz sicher keine Fehler im Code an ganz anderer Stelle (nicht geschlossene Befehle zum Beispiel), die hier dann für Wirrwarr sorgen?
Zitat von Shogun im Beitrag #9
Ich habe letzte Woche 3 Stunden gebastelt, damit die Banner so nebeneinander angezeigt werden und nicht untereinander und es auch Abstände zwischen den einzelnen Reihen gibt
Ein Tipp von mir:
Bevor du drei Stunden damit verbringst, dass irgendwie so zu basteln, dass es auf deinem PC schick aussieht, beschäftige dich doch das nächste Mal einfach 3 Stunden mit CSS und HTML - dann geht so was in Zukunft auch viel einfacher (und funktioniert im Optimalfall auch noch, wenn das Forum über einen anderen Browser oder ein anderes Endgerät online gehen).
... da die von Rabendolch vorgeschlagene Variante ja wunderbar funktioniert, um die Banner zu postionieren, was hier seltsamerweise angefochten wird, würde mich bei solchen Diskussionen immer interessieren, wie das Problem seitens des Threaderstellers am Ende gelöst wurde.
Einfach zu schreiben "hat sich erledigt" ist ja im Falle wenig hilfreich für andere user, die vielleicht vor der gleichen Frage stehen... 
Also bevor dir jetzt hier jemand eine "Lösung" des Problems mit irgendwelchen <br>- Tags oder -Leerzeichen gibt...
So in etwa könnte der Code ausssehen, wenn man das korrekt macht:
http://codepen.io/bradfrost/pen/xkcBn
Zitat von Ingmar im Beitrag #13
Also bevor dir jetzt hier jemand eine "Lösung" des Problems mit irgendwelchen <br>- Tags oder -Leerzeichen gibt...
So in etwa könnte der Code ausssehen, wenn man das korrekt macht:
http://codepen.io/bradfrost/pen/xkcBn
Das ist ja viiiel zu kompliziert.Da muß man ja auch noch rechnen können...
Da nehme ich doch lieber die "<br>" Lösung.....
Gruß
Olaf
... ich habe mal den Tip von Ingmar aufgegriffen. Danach könnte das beispielhaft etwa so aussehen:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style type="text/css">
.banner {width: 800px; margin: auto;}
.my_banner img {width: 240px; height: 60px; margin: 2px; padding: 2px; Border: 1px solid #191919; border-radius: 4px;}
.my_banner img span { display: inline-block;}
.my_banner li { display: inline-block; width: 240px; margin: 2px;
padding: 2px; vertical-align: top;}
</style>
<div id="banner" class="banner">
<ul class="my_banner">
<li><a target="_blank" href="http://www.frape-fotoforum.de/"><img src="https://files.homepagemodules.de/b624252/a_40_a1518824.jpg" alt="." /></a></li>
<li><a target="_blank" href="http://www.frape-fotoforum.de/"><img src="https://files.homepagemodules.de/b624252/a_40_a1518824.jpg" alt="." /></a></li>
<li><a target="_blank" title="Bernd Rosarius freut sich über Euren Besuch" href="http://www.berndrosarius.de/"><img src="https://files.homepagemodules.de/b82587/pictures_u1493_LCrvJhTH.png" alt="." /></a></li>
<li><a target="_blank" title="Anneliese Leding freut sich über Euren Besuch" href="http://www.anneliese-leding.de/"><img src="https://files.homepagemodules.de/b82587/pictures_u1492_QiZASlFv.png" alt="." /></a></li>
<li><a target="_blank" href="http://www.frape-fotoforum.de/"><img src="https://files.homepagemodules.de/b624252/a_40_a1518824.jpg" alt="." /></a></li>
<li><a target="_blank" title="Bernd Rosarius freut sich über Euren Besuch" href="http://www.berndrosarius.de/"><img src="https://files.homepagemodules.de/b82587/pictures_u1493_LCrvJhTH.png" alt="." /></a></li>
<li><a target="_blank" title="Anneliese Leding freut sich über Euren Besuch" href="http://www.anneliese-leding.de/"><img src="https://files.homepagemodules.de/b82587/pictures_u1492_QiZASlFv.png" alt="." /></a></li>
<li><a target="_blank" href="https://www.hpm-support.de/t538854f11769157-Abstand-nach-unten.html#msg7271704"><img src="https://www.xobor.de/img/xoborDesign/XoborLogo.jpg" alt="." /></a></li>
<li><a target="_blank" title="Gabriella Dietrich-Präsentationsseite für alle Partner. Klick mich" href="http://dreamofswitzerland.jimdo.com/"><img src="https://files.homepagemodules.de/b615910/resize/250x187/pictures_u60_eSPTsagH.png" alt="." /></a></li>
<li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li>
<li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li>
<li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li>
</ul>
</div>
Zumindest hat das im Test jetzt gerade ganz gut funktioniert.
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!