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

Wie kann ich in einem Blog den Abstand zwischen 2 Posts verringern?

morbidbody

morbidbody

Neues Mitglied
Hallo dies ist mein erster Eintrag hier (ganz frisch angemeldet)
Ich beschäftige mich seit einiger Zeit mit meinem Tumblr-Blog und versuche ihn persönlicher zu gestalten.
Nach einiger Zeit bei Google und dem rauskramen von alten Erinnerungen aus der Schulzeit bin ich nun am Ende angekommen und brauche eure Hilfe.
Ich möchte gerne den Abstand zwischen den Post's verringern das sie ganz nah bei einander liegen.
Hier habe ich euch meinen Body kopiert.

Ich hoffe ich habe es soweit richtig beschrieben und das richtige für euch rausgesucht.
Vielen Dank schonmal.


<style type="text/css">
body {
background-image: url('http://i41.tinypic.com/2ez2o1t.gif');
margin: 50px 0px 0px 50px;
font-family: Arial, Helvetica, sans-serif;
background-color: #151515;
color: #EBD38B;
font-size: 18px;
}
a {
text-decoration: none;
color: #a6812d;
}
a:hover {
color: #080807;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
color: {color:Title Colour};
text-align: right;
margin-bottom: 0px;
margin-top: 0px;
text-transform: uppercase;
}
h2 {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
margin-top: 0px;
margin-bottom: 0px;
font-size: 32px;
}
#wrapper {
width: 820px;
}
#sidebar {
width: 230px;
float: left;
margin-right: 50px;
position: fixed;
}
#sidebar a:active {
position: relative;
top: 2px;
}
#rss-archive {
text-align: right;
display: block;
font-size: 12px;
}
#rss-archive a {
color: #EBD38B;
text-shadow: 1px 2px 2px #000;
}
#rss-archive a:hover {
color: #6B6B6B;
}
#page-navigation {
display: block;
margin: 50px 0px 50px 0px;
text-align: center;
}
#credit {
display: block;
font-size: 10px;
text-align: right;
}
#content {
width: 516px;
margin: 0px 0px 0px 280px;
position: absolute;
top: 58px;
}
.caption {
padding: 8px;
line-height: 1.2em;
}
.caption a {
border-bottom: 1px #444 solid;
}
.byline {
text-align: right;
font-size: 12px;
margin-bottom: 80px;
padding: 5px;
}
.byline a {
color: #4f4f4f;
text-shadow: 1px 2px 2px #000;
margin-left: 10px;
}
.byline a:hover {
color: #686868;
}
.photo-picture {
padding:7px;
border: 1px #444444 solid;
}
.photo-picture:hover {
border: 1px #6e6e6e solid;
}
.link-link {
/*background-color: #0b0b0b;*/
padding: 7px;
font-size: 26px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
text-shadow: 0px 2px 2px #000;
/*-moz-box-shadow: 0px 2px 2px #000;
-webkit-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;*/
color: #686868;
}
.link-link:hover {
background-color: #131313;
}
.link-link:active {
position: relative;
top: 2px;
}
.lnk {
margin-top: 0px;
}
.the-quote {
font-size: 26px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
.jewelcase {
background-image: url('http://static.tumblr.com/kw9ut5n/OEvl1q6do/jewel.png');
padding: 3px 0px 0px 13px;
width: 90px;
height: 82px;
background-repeat: no-repeat;
float: left;
}
.jewelcase img {
width: 71px;
height: 73px
}
.music {
height: 82px;
}
{CustomCSS}
</style>
</head>

<body>
 
da wir nicht wissen, was genau für code pro post ausgegeben wird, ist die einzige antwort, die man dir geben kann, dass abstände mit margin (außen) und padding (innen) erzeugt werden.
du musst also nachsehen, welche classes oder IDs am anfang und ende von zwei posts aufeinandertreffen und überprüfen, was dort für abstandseigenschaften hinterlegt sind.
 
Ich glaube, das würde eher noch mehr verwirren!
Zumal du die Code-Tags des erweiterten Editors nicht nutz und alles in Plane-Text postest!

Ein link zum Blog hingegen wäre hilfreich ;)
 
ich hab jetzt das gefunden^^

.caption {
padding: 8px;
line-height: 1.2em;
}
.caption a {
border-bottom: 1px #444 solid;
}
.byline {
text-align: right;
font-size: 12px;
margin-bottom: 80px;
padding: 5px;
}
.byline a {
color: #4f4f4f;
text-shadow: 1px 2px 2px #000;
margin-left: 10px;
}
.byline a:hover {
color: #686868;
}
.photo-picture {
padding:7px;
border: 1px #444444 solid;
}
.photo-picture:hover {
border: 1px #6e6e6e solid;
}
 
denk link hatte ich mir mal angeschaut aber verstehen tu ich das nicht wirklich deswegen wende ich mich ja an euch damit ihr mir sagen könnt was ich austauschen muss
 
Ok - Dann lerne es jetzt ein wenig. Denn eigentlich wurde dir schon alles gesagt.
Das Lernen erspart dir in 5 Minuten die nächste Frage zu stellen. Oft ist es einfacher 10 Minuten zu lesen als 1 Stunde vor dem Rechner wartend auf Antwort zu sitzen.

Die Tutorials hier Tutorials - HTML.net sind eigentlich ganz gut gemacht.

Wie schon gesagt deine Elemente sind div-Elemente. ein Div-Element hört mit einem </div> auf. Die Elemente haben Klassen zur Unterscheidung.
Im CSS spricht man dann die Klassen mit ihrem Namen an und ändert dort die Eigenschaften, in deinem Fall willst du den Abstand verringert haben.
Dein letztes Element hat die Klasse byline. Diese Klasse steht auch im CSS mit Eigenschaften drin.

Dein HTML:
HTML: 
<div class="post photo">             
            <a href="http://gofuckingnuts.tumblr.com/">
                <img alt="" class="photo-picture" src="http://27.media.tumblr.com/tumblr_lwd7kgyzmN1qi23vmo1_500.jpg" /></a>                      
            <div class="caption">                 
                <p>(via 
                    <a href='http://gofuckingnuts.tumblr.com/post/14718438591'>gofuckingnuts</a>)
                </p>             
            </div>                      
            <div class="byline">                 
                <a href="http://morbidbody.tumblr.com/post/14718493651">3 hours ago</a>&nbsp;&nbsp;
                <a href="http://morbidbody.tumblr.com/post/14718493651">1,211 notes</a>             
            </div>             
        </div>

Dein CSS für die Klasse byline:
HTML: 
.byline {
    text-align: right;
    font-size: 12px;
    margin-bottom: 80px;
    padding: 5px;
}

Jetzt musst du nur herausfinden welches dieser 4 Attribute für den Abstand nach unten zuständig ist und dort den Wert verkleinern.
Google mal ein wenig.
 
yesssss danke genau die stelle hatte ich gesucht :)
ich glaub ich hab vor lauter bäumen den wald nicht gesehen :)

die lösung ist

-50px ;) anstatt 80px
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben