Guten Tag,
ich habe ein Tumblr und man arbeitet da am Theme/Design mit HMTL.
Wie man sieht ist bei mir der Abstand zwischen den Bildern aber ziemlich groß, wie kann ich diesen verringern?
http://loveweedsmokeeveryday.tumblr.com/
Hier mal der Template Code:
HTML
<!DOCTYPE html>
<!-- -------------------------------------------------------------
Theme Six Caps By Max Davis.
Get this free theme: http://themes.themaxdavis.com/theme/six_caps
More Themes: http://themes.themaxdavis.com
PROMOTE YOUR TUMBLR: http://themes.themaxdavis.com/spotlight
------------------------------------------------------------- -->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Titles" content="#000000"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Link Hover" content="#000000"/>
<meta name="color:Border" content="#F5F5F5"/>
<meta name="image:Header Logo" content="" />
<meta name="if:Infinite scrolling" content="1" />
<meta name="text:Ask Title" content="Ask" />
<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />
<script type="text/javascript" src="http://themaxdavisthemes.com/code/jQuery.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
{block:IfInfinitescrolling}
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>
{/block:IfInfinitescrolling}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#social').containedStickyScroll();
});
</script>
<style type="text/css"> body { padding:0; margin:0; font-family:'Helvetica', arial; font-size:11px; color:{color:text}; background-color:{color:background};} a { text-decoration:none; color:{color:link}; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease;} a:hover { text-decoration:none; color:{color:link hover}; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease;} a:active{outline: none;} a:focus{-moz-outline-style: none;} :-moz-any-link:focus{outline: none;} img{border:none;} .clear {clear:both;} #center{ width:1080px; margin: 0 auto 15px;} .top{ margin:30px 0; width:715px;} .top .logo{ max-width:655px;} /**** Header styles ****/ #header{ margin: 0 auto; position: relative; width: 1080px; background-color: {color:background};} #header h1{ font-family: 'Helvetica neue',arial; font-size: 70px; font-style: italic; font-weight: bold; height: 65px; letter-spacing: -6px; line-height: 50px; margin: 50px 0; text-align: center; color:{color:Titles};} #header .logo{ max-height:250px; margin:0 0 20px 0;} #header .description{ margin: 0 auto 25px; text-align: center; width: 400px;} #header .links_box{ overflow:hidden;} #header .links{ list-style: none outside none; margin: 0 auto; padding: 0; text-align: center; color:{color:Titles}} #header .links li a{ color:{color:Titles}} #header .links li{ display: inline; font-weight:bold; font-size: 10px; letter-spacing: 0px; margin: 0 15px; text-transform: uppercase; color:{color:Titles}} #header .border{ clear: both; margin: 25px auto; width: 450px; border-top: 1px solid {color:border};} #container{ width: 1080px; overflow-y: hidden;} #container .post{ float: left; margin: 0 25px 50px; overflow: hidden; position: relative; width: 220px; background-color: {color:background}; {block:PermalinkPage} width:800px; padding: 5px 0 30px; margin:auto; float:none; {/block:PermalinkPage}} #container .post img{ {block:IndexPage} max-width:200px; height: auto; {/block:IndexPage} {block:PermalinkPage} max-width:800px; {/block:PermalinkPage}} #container h3{ font-family: Helvetica Neue; margin:0; padding:0; line-height:19px; font-weight:bold; text-transform:uppercase; color:{color:Titles};} #container .quote{ text-align:center; {block:PermalinkPage} margin:auto; min-height:52px; text-align:center; width:500px; {/block:PermalinkPage}} #container .quote .quote_symbol{ font-family: Impact,Charcoal,sans-serif; font-size: 200px; margin: -170px 0 0; opacity: 0.07; position: absolute;} #container .quote .source{ margin-top:10px} #container .album{ margin:0; height:28px;} #container .albumart{ margin:0; min-height:height:28px;; width: 220px;} #container .albumart img{ height: auto; max-width: 220px !important; width: 220px;} #container .audio{ background: none repeat scroll 0 0 black; border-left: 45px solid black; border-right: 45px solid black; float: left; height: 27px; margin: -39px 0 0; opacity: 0.8; overflow: hidden; padding: 5px 0 4px; position: absolute; width: 27px;} #container .plays{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); color: white; font-size: 9px; font-weight: bold; height: 11px; margin: -39px 0 0 117px; padding: 15px 15px 10px; position: absolute; text-align: right; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); text-transform: uppercase; width: 73px;} #container .caption{ text-align:center;} #container .video{ position: relative; {block:PermalinkPage} width:500px; margin:auto; {/block:PermalinkPage}} #container .video .header{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); height: 13px; top:0; opacity:0; padding: 9px 10px 6px; position: absolute; width: 200px; -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; transition: all 1.0s ease;} #container .video:hover .header{ opacity:1; -webkit-transition: all 1.0s ease-in; -moz-transition: all 1.0s ease-in; transition: all 1.0s ease-in;} #container .video .header h1{ color: white; float: left; font-size: 12px; margin: 0; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);} #container .video .header .note{ color: white; float: right; font-size: 9px; font-weight: bold; margin: 2px 0 0; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);}{block:IndexPage} #container .video iframe{ width:220px !important; height:123px !important;}{/block:IndexPage} #container .photo_set{ width:220px; position:relative; overflow:hidden; {block:PermalinkPage} width:500px; {/block:PermalinkPage}} #container .photo_set .view{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); bottom: 3px; opacity: 0; position: absolute; top: 0; width: 220px; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; transition: all 0.7s ease;} #container .photo_set:hover .view{ opacity:1; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; transition: all 1.5s ease;} #container .photo_set .view .link{ color: white; font-size: 12px; font-weight: bold; height: 11px; line-height: 13px; margin: -6px 0 0; position: absolute; text-align: center; text-transform: uppercase; top: 50%; width: 220px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);} #container .photo_set .header{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); height: 13px; padding: 9px 10px 6px; position: absolute; width: 200px; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; transition: all 1.5s ease;} #container .photo_set:hover .header{ opacity:0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; transition: all 0.7s ease;} #container .photo_set .header h1{ color: white; float: left; font-size: 12px; margin: 0; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);} #container .photo_set .header .note{ color: white; float: right; font-size: 9px; font-weight: bold; margin: 2px 0 0; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);} {block:PermalinkPage} #container .answer_post{ width:500px; margin:0;} {/block:PermalinkPage} #container .question { line-height: 11px; margin: 0; padding: 5px 0; width: 210px;} #container .question strong{ text-transform:capitalize} #container .answer{ clear: both; display: block; font-style: italic; line-height: 11px; margin: 7px 0 0; padding: 14px 0 0; border-top: 1px solid {color:border};} #container .answer p{ padding:0; margin:0;} #container blockquote { margin: 10px 0px 10px 15px; padding: 2px 5px;} {block:IndexPage} #container iframe.photoset{ margin:0 0 0 -15px;}{/block:IndexPage} #container iframe.photoset img{ display:block !important;} #container .answer_form_container iframe{ height:75px !important} #container .chat{ margin:5px 0; padding:0; list-style:none;} #container .chat li{ margin: 5px; padding: 5px 2px 10px; border-bottom: 1px solid {color:border};} #container .chat li:last-child{ border:0; padding: 5px 5px 0;} #container .chat .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, .user_7 .label, .user_8 .label, .user_9 .label { font-weight:bold;} /**** Posts: Photos ****/ #photo { overflow:hidden; {block:IndexPage} width:220px; {/block:IndexPage} {block:PermalinkPage} width: 800px; {/block:PermalinkPage}} #photo a, #photo a:hover{ color:white;} #photo img { display:block; {block:IndexPage} width:220px; max-width:220px !important; {/block:IndexPage} {block:PermalinkPage} max-width:800px; {/block:PermalinkPage}} div#photo div#picture { position:relative;} div#photo div#picture div#info { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 220px; z-index: 998; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; transition: all 0.7s ease;} div#photo:hover div#picture div#info { opacity:1; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; transition: all 1.5s ease;} div#photo div#picture div#info div#holder { height: 134px; margin-top: -67px; position: absolute; text-align: center; top: 50%; width: 220px; z-index: 999;} div#photo div#picture div#info div#holder .note{ font-family: 'Six Caps',sans-serif; font-size: 90px; height: 80px; line-height: 74px; margin: 0; text-align: center; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);} div#photo div#picture div#info div#holder .border { border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 15px auto; width: 40px;} div#photo div#picture div#info div#holder .date { font-size: 14px; font-weight: bold; height: 11px; letter-spacing: 0; margin: 11px 0 7px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); text-transform: uppercase;} div#photo div#picture div#info div#holder .reblog { color: white; font-size: 6px; letter-spacing: 3px; margin: 0 auto; overflow: hidden; text-align: center; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); text-transform: uppercase; width: 40px;} div#photo div#picture:hover div#info {visibility:visible;} .permalink_audio { margin: auto; width: 500px;} .permalink_audio .albumart_box { float: left; height: 220px; margin-right: 30px; position: relative; width: 220px;} .permalink_audio .albumart_box .albumart { position:absolute; width: 220px;} .permalink_audio .albumart_box .albumart img { display:block} .permalink_audio .no_albumart { border: 2px dashed rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.07); font-size: 14px; font-weight: bold; height: 111px; letter-spacing: -1px; line-height: 14px; padding: 105px 0 0; text-align: center; text-transform: lowercase; width: 216px;} .permalink_audio .audio_player_perma { background: none repeat scroll 0 0 black; border-right: 224px solid black; float: left; height: 30px; margin: 89px 0 0 -15px; opacity: 0.7; overflow: hidden; padding: 7px 10px 4px; position: relative; width: 21px; z-index: 999;} .permalink_audio .audio_player_perma_art { background: none repeat scroll 0 0 black; border-right: 370px solid black; float: left; height: 30px; margin: 89px 0 0 -161px; opacity: 0.7; overflow: hidden; padding: 7px 10px 4px; position: relative; width: 21px; z-index: 999;} .permalink_audio .audio_info { border-left: 1px solid rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.7); float: left; font-weight: bold; height: 84px; line-height: 18px; list-style: none outside none; margin: 0; padding: 8px 0 0 15px; width: 234px;} .permalink_audio .audio_info li {} .perma_width{ {block:PermalinkPage} width:500px; margin:auto; overflow:hidden; {/block:PermalinkPage}} .post_info_2, div.notes { margin:0 auto 30px; overflow: hidden; position: relative; width: 400px;} .post_info_2 { font-size: 10px; font-weight: bold; line-height: 14px; padding: 24px 25px 0; text-transform: uppercase; border-top: 1px solid {color:border};} .post_info_2 a{font-weight:bold;} .post_info_2 p{margin:0 0 5px;} .post_info_2 .tags{ margin:5px 0 0; padding:0; list-style:none;} .post_info_2 .tags li{ float:left; margin:0 5px 0 0;} .post_info_2 .tags li a:hover{ text-decoration:underline;} div.notes{ padding:24px 25px 0; border-top: 1px solid {color:border};} ol.notes { padding: 0; margin: 0; list-style-type: none;} ol.notes li.note { float: left; height: 16px; margin: 3px; overflow: hidden; width: 16px;} ol.notes li.more_notes_link_container{ clear: both; font-family: 'Source Sans Pro',sans-serif; font-size: 9px; font-weight: bold; height: 7px; margin: -24px 0 0 !important; padding: 22px 0; text-align: center; text-transform: uppercase; width: 400px; background-color:{color:background};} ol.notes li.note img.avatar { display: block; float: left; height: 16px; margin-right: 10px; vertical-align: -4px; width: 16px;} ol.notes li.note span{ display:none;} ol.notes li.note span.action a{ font-weight: bold;} ol.notes li.note .answer_content { font-weight: normal; display:none;} ol.notes li.note blockquote { padding: 4px 10px; margin: 10px 0 10px 30px; display:none;} ol.notes li.note blockquote a { text-decoration: none; display:none;} #container .navigation{ margin: 0 25px 50px; overflow: hidden; width: 200px; padding: 10px; float:left; border-top: 1px solid {color:border};} #container .previous,#container .next { padding: 2px 5px; font-size:10px; text-transform: uppercase; font-weight: bold; font-style:italic;} #container .previous {float:left;} #container .next {float:right;} </style>
{block:IndexPage}<script>
$(window).load(function(){
var $wall = $('#container');
$wall.masonry({
itemSelector: '.post, .navigation',
columnWidth:270
});
$wall.infinitescroll({
navSelector : ".nav",
nextSelector : ".nav a",
itemSelector : ".post",
loading : "",
donetext : ""
},
function( newElements ) {
var $newElems = $( newElements ).css({
opacity: 0
});
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$wall.masonry( "appended", $newElems, true );
});
});
});
</script>{/block:IndexPage}
</head>
<body>
{block:IfInfinitescrolling}
{block:Pagination}<div class="nav">
{block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}
</div>{/block:Pagination}{/block:IfInfinitescrolling}
<div id="header">
{block:ifHeaderLogoimage}
<center><a href="/" title="Home"><img src="{image:Header Logo}" class="logo"/></a></center>
{/block:ifHeaderLogoimage}
{block:ifNotHeaderLogoimage}
<center><a href="/" title="Home"><h1>{Title}</h1></a></center>
{/block:ifNotHeaderLogoimage}
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
<div class="links_box">
<ul class="links">
<a href="/"><li>Home</li></a>
{block:AskEnabled}<a href="/ask"><li>{block:ifasktitle}{text:Ask Title}{/block:ifasktitle}
{block:ifnotasktitle}{AskLabel}{/block:ifnotasktitle}</li></a>{/block:AskEnabled}
{block:ifShowSubmit}<a href="/submit"><li>Submit</li></a> {/block:ifShowSubmit}
{block:HasPages}{block:Pages}<a href="{URL}"><li>{Label}</li></a>{/block:Pages}
{/block:HasPages}
{block:ifLink1Title}
<a href="{text:Link 1}" title="{text:Link 1 Title}"><li>
{text:Link 1 Title}</li></a>
{/block:ifLink1Title}
{block:ifLink2Title}
<a href="{text:Link 2}" title="{text:Link 2 Title}"><li>
{text:Link 2 Title}</li></a>
{/block:ifLink2Title}
{block:ifLink3Title}
<a href="{text:Link 3}" title="{text:Link 3 Title}"><li>
{text:Link 3 Title}</li></a>
{/block:ifLink3Title}
{block:ifLink4Title}
<a href="{text:Link 4}" title="{text:Link 4 Title}"><li>
{text:Link 4 Title}</li></a>
{/block:ifLink4Title}
{block:ifLink5Title}
<a href="{text:Link 5}" title="{text:Link 5 Title}"><li>
{text:Link 5 Title}</li></a>
{/block:ifLink5Title}
</ul>
</div>
<div class="border"></div>
</div><!-- End Header-->
<div id="center">
<div id="container">
{block:Posts}
<div class="post">
{block:Text}
{block:Title}
<a href="{Permalink}"><h3>{Title}</h3></a>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<div id="photo">
<div id="picture">
{block:IndexPage}
{block:Date}
<div id="info">
<div id="holder">
<a href="{Permalink}">
{block:NoteCount}<div class="note">
{NoteCount}
</div>{/block:NoteCount}
<div class="border"></div>
<div class="date">
{DayOfMonthWithZero} {ShortMonth} {Year}
</div>
</a>
<a href="{ReblogURL}" target="blank">
<div class="reblog">
reblog
</div></a>
</div>
</div>
{/block:Date}
<img src="{PhotoURL-500}" />
{/block:IndexPage}
{block:PermalinkPage}
<center><img src="{PhotoURL-HighRes}"
class="permalink_photo" /></center>
{/block:PermalinkPage}
</div>
</div>
{/block:Photo}
{block:Photoset}
{block:IndexPage}
<div class="photo_set">
<div class="header">
<a href="{Permalink}"><h1>photoset</h1></a>
{block:NoteCount}<a href="{Permalink}">
<div class="note">{NoteCountWithLabel}</div></a>
{/block:NoteCount}
<div class="clear"></div>
</div>
<div class="view">
<a href="{Permalink}">
<div class="link">View Photoset ↦</div></a>
</div>
{Photoset-250}
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="perma_width">{Photoset-500}</div>
{/block:PermalinkPage}
{/block:Photoset}
{block:Quote}
<div class="quote">
<div class="quote_symbol">,,</div>
<a href="{Permalink}"><h3>{Quote}</h3></a>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<a href="{URL}" class="link" {Target}><h3>
{Name}</h3></a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}
{block:Audio}
{block:IndexPage}
<div class="album{block:AlbumArt}art{/block:AlbumArt}">
{block:AlbumArt}
<a href="{Permalink}"><img src="{AlbumArtURL}" /></a>
{/block:AlbumArt}</div>
<div class="audio">
{AudioPlayerBlack}
</div>
<a href="{Permalink}">
<div class="plays">{PlayCountWithLabel}</div></a>
{/block:IndexPage}
{block:PermalinkPage}
<div class="permalink_audio">
<div class="albumart_box">
{block:AlbumArt}<div class="albumart">
<img src="{AlbumArtURL}" />
</div>{/block:AlbumArt}
<div class="no_albumart">
No album art
</div>
</div>
<div class="audio_player_perma{block:AlbumArt}_art{block:AlbumArt}">
{AudioPlayerBlack}
</div>
<ul class="audio_info">
{block:TrackName}
<li>Title: {TrackName}</li>
{/block:TrackName}
{block:Artist}
<li>Artist: {Artist}</li>
{/block:Artist}
{block:Album}
<li>Album: {Album}</li>
{/block:Album}
{block:PlayCount}
<li>Played: {PlayCount} times</li>
{/block:PlayCount}
</div>
<div class="clear"></div>
</div>
{/block:PermalinkPage}
<div class="clear"></div>
{/block:Audio}
{block:Chat}
{block:Title}
<a href="{Permalink}"><h3>{Title}</h3></a>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Video}
<div class="video">
{block:IndexPage}
<div class="header">
<a href="{Permalink}"><h1>video</h1></a>
{block:NoteCount}<a href="{Permalink}">
<div class="note">{NoteCountWithLabel}</div></a>
{/block:NoteCount}
<div class="clear"></div>
</div>
{Video-250}{/block:IndexPage}
{block:PermalinkPage}{Video-500}{/block:PermalinkPage}
</div>
{/block:Video}
{block:Answer}
<div class="answer_post">
<div class="question">
<strong>{Asker}:</strong><br>
{Question}
</div>
<a href="{Permalink}"><div class="answer">
{Answer}
</div></a>
</div>
{/block:Answer}
</div>
{block:PermalinkPage}
{block:Date}
<div class="post_info_2">
{block:Caption}{Caption}{/block:Caption}
{block:NoteCount}{NoteCountWithLabel}<br />
{/block:NoteCount}
{block:RebloggedFrom}
Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>.<br />
0riginally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>.<br />
{/block:RebloggedFrom}
Posted {TimeAgo} on {DayOfWeek} {DayOfMonth} {Month} {ShortYear}.<br/>
{block:HasTags}<ul class="tags">filed under:{block:Tags}
<li><a href="{TagURL}">#{Tag}</a></li>
{/block:Tags}</ul>{/block:HasTags}
</div>
{/block:Date}
{block:PostNotes}
<div class="notes">{PostNotes}<div class="clear"></div></div>
{/block:PostNotes}
{/block:PermalinkPage}
{/block:Posts}
{block:IfNotInfinitescrolling}
{block:IndexPage}
{block:Pagination}
<div class="navigation">
{block:PreviousPage}
<a href="{PreviousPage}" class="previous">Previous page</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" class="next">Next Page</a>
{/block:NextPage}
<div class="clear"></div>
</div>
{/block:Pagination}
{/block:IndexPage}
{/block:IfNotInfinitescrolling}
</div>
</div>
</body>
</html>