Mmax
Threadersteller
Dabei seit: 18.10.2011
Ort: Stuttgart
Alter: -
Geschlecht: 
|
Verfasst Mo 06.02.2012 23:43
Titel Tumblr: Probleme mit HTML |
  |
|
Hi,
gleich zu Beginn... ja ich bin Anfänger.
Ich habe mit meiner Tumblr Seite, die ich auf Basis einer anderen versuche meinen Anforderungen anzupassen, diverse Schwierigkeiten und bräuchte ein bisschen Unterstützung.
Hier erst mal der Code:
[quote]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<!--
'DIASPORA KOLLEKTIV' theme by Max Rieger (c) 2012
-->
<head>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</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="#fff"/>
<meta name="color:Border" content="#f8f8f8"/>
<meta name="color:Title" content="#777777"/>
<meta name="color:Description" content="#777777"/>
<meta name="color:Text" content="#333333"/>
<meta name="color:Nav" content="#777777"/>
<meta name="color:Links" content="#777777"/>
<meta name="color:Hover" content="#4d4d4d"/>
<meta name="image:Background" content="0">
<meta name="if:Description" content="0"/>
<meta name="if:Show Random Link" content="1" />
<meta name="if:Endless Scrolling" content="0" />
<meta name="if:Notes" content="0" />
<meta name="text:Custom Link URL" content="" />
<meta name="text:Custom Link Title" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics" content=""/>
<link rel="apple-touch-icon" href="{PortraitURL-96}"/>
<link rel="stylesheet" href="http://static.tumblr.com/n2yg7bp/0xvkkpend/reset.css" media="all" type="text/css" />
<div style="background-image:url(http://i.imgur.com/OLmxW.jpg); background-width="100%" background-height="100%" background-repeat:repeat">
<div align="center">
<style>
* {
margin:0;
padding:0;
outline:0;
border:0
}
body { color: {color:Text};
font:12px arial;helvetica;non-serif
background:{color:background};
border-top:solid 0px {color:border}
}
#container {
width:795px;
margin:0 auto;
padding-bottom: 100%;
}
a {text-decoration:none; color: {color:links};}
a:hover { -webkit-transition:all 0.2s ease-in-out; color:{color:Hover};}
li { list-style-bullet:square; margin:0 0 10px 30px}
blockquote,ol,ul,p,h6,h5,h4,h3,h2,h1 {margin:0 0 0px 0}
.main {padding-bottom: 50px; width: 795px;}
#title h1 {color: {color:title};
text-align:center;
font: 36px/20px arial;helvetica;non-serif
margin-top:800px
}
#description {color: {color:Description}; text-align: center;
font:300 12px arial;helvetica;non-serif
weight:none;
margin:10px 0 10px;}
.links {
text-align:center;
margin:15px 0 30px 0;
}
.links a {padding: 7px 12px;}
.post {text-align: center; float:left; height:300px; margin: 0px 15px 15px 0px;width:250px;height:300px;width:250px;overflow:hidden;}
.post .photo, .post .video, .post .audio {clear:both;display:block;overflow:hidden;}
.post .link h1, .text h1 {font-size: 24px; font-weight: none;}
.post .link .linkdescription h1 {font-size: 12px;}
.post img {max-height: 400; max-width: 400px; padding-bottom: 0px;}
.post .link img {max-height: auto; max-width: 250px; padding-bottom: 0px;}
.post .audio .artwork {width:250px; height: 250px;padding-bottom: 1px;}
.single {padding-top: 40px;}
.single .audio .artwork {max-width:230px; max-height: 230px; padding: 20px 5px 20px 5px;}
.single {text-align: center; width: 800px; margin: 0 auto}
.single .text {text-align: left;}
.single .video {width-max: 800; height: auto}
.single .link h1{font-size: 24px; padding-bottom: 20px}
.single ol,ul,p,h6,h5,h4,h3,h2,h1 {text-align: left;}
.single .link p {Text-Align: center;}
.info {Text-Align: center;}
.single .quote {padding-top: 50px;}
.quotes {
text-align: left;
padding-top: 5px;
font-size:32px;
color:#666;
line-height: 25px;
}
..quotes a:hover { -webkit-transition:all 0.2s ease-in-out; color:{color:Hover};}
.long_quote {font-size: 24px; line-height: 10px; padding-bottom: 10px}
.medium_quote{font-size: 28px; line-height: 25px; padding-bottom: 10px}
.short_quote {font-size: 32px; line-height: 35px; padding-bottom: 10px}
.source {right: 0; padding-top: 10px}
.nav {color: {color:nav};padding: 20px 0px; width: 780px;}
.navleft,.navright {display: block;}
.date,.meta { margin:10px 0 10px 0; height: 10px;}
.date,.navright a { float:left; height: 10px;}
.meta,.navleft a {
float:right; height: 10px;}
.singlebottom {height: 50px;}
.navpost {padding-top: 30px; width: 800px; height: 30px;}
.caption {width: 500px; margin:0 auto;
text-align: left; padding:20px 0;
}
.push {height:25px; padding-top:25px;}
.clear {clear:both}
.footer {font-size: 10px; text-align: center; font:12px georgia,"times new roman",times,serif;
padding-bottom: 20px;}
.question {font-size: 30px}
.tumblrAutoPager_page_info {display: none;}
.overlay {width:250px; height:300px; position:absolute; z-index:999;}
@media screen and (max-device-width: 1024px) {}
{CustomCSS}
</style>
</head>
<body>
<div style="background-image:url(http://i.imgur.com/OLmxW.jpg); width:100% background-repeat:repeat">
<div align="center">
<a href="http://diasporakollektiv.tumblr.com">
<img src="http://i.imgur.com/qALev.png" align="middle" />
</a>
<div class="links">
{block:HasPages}{block:Pages}
<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}
<a href="/archive"></a>
{block:ifShowRandomLink}<a href="/random"></a>{/block:ifShowRandomLink}
<a href="{RSS}"></a>
{block:ifCustomLinkTitle}<a href="{text:Custom Link URL}">{text:Custom Link Title}</a>{/block:ifCustomLinkTitle}
</div>
<div class="clear"></div>
<div class="main">
{block:Posts}
{block:PermalinkPage}
<div class="date">{block:Date}<a href="{Permalink}"> {DayOfMonth}{ShortMonth} {Year}</a>{/block:Date}</div>
<div class="meta">
<a href="{Permalink}#notes"></a><br />
</div><!--/meta-->
{/block:PermalinkPage}
<div class="{block:IndexPage}post {/block:IndexPage}{block:PermalinkPage}single{/block:PermalinkPage}">
{block:Text}
<!-- TEXT -->
<div class="text">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
</div>
{/block:Text}
{block:Quote}
<!-- QUOTE -->
<div class="quote">
<a href="{permalink}"><p class="quotes"><span class="{Length}_quote">{Quote}</span></p></a>
{block:Source}<span class="source"><cite>— {Source}</cite></span>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<!-- LINK -->
<div class="link">
<h1><a href="{URL}">{Name}</a></h1>
{block:Description}
<span class="linkdescription">{Description}</span>
{/block:Description}
</div>
{/block:Link}
{block:Video}
<!-- VIDEO -->
<div class="video">
{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}
{block:PermalinkPage}<div class="caption">{caption}</div>{block:PermalinkPage}
</div>
{/block:Video}
{block:Photo}
<!-- PHOTO -->
<div class="photo">
<a href="{block:IndexPage}{permalink}{/block:IndexPage}{block:PermalinkPage}{LinkURL}{/block:PermalinkPage}">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" style="opacity: 1;" />
</a>
{block:PermalinkPage}<div class="caption">{caption}</div>{block:PermalinkPage}
</div>
{/block:Photo}
{block:Photoset}
<!-- PHOTOSET -->
<div class="photoset">
{block:IndexPage}<a href="{permalink}"><div class="overlay" width="250px" height="300"></div></a>{/block:IndexPage}
{block:IndexPage}</a>
{Photoset-250}</a>{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:PermalinkPage}<div class="caption">{caption}</div>{/block:PermalinkPage}
</div>
{/block:Photoset}
{block:Conversation}
<!-- CONVERSATION -->
<a href="{permalink}">
{block:Title}<h2>{Title}</h2>{/block:Title}
<p>
{block:Lines}
{block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
{/block:Lines}
</p>
{/block:Conversation}
</a>
{block:Audio}
<!-- AUDIO -->
<div class="audio">
{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" class="artwork"/></a>{/block:AlbumArt}
<span class="player">{AudioPlayerWhite}</span>
{block:ExternalAudio}
<p><a href="{ExternalAudioURL}">Download this
audio clip.</a></p>
{/block:ExternalAudio}
{block:Artist}
<p class="info">{Artist} -{/block:Artist}{block:TrackName} {TrackName}{/block:TrackName}</p>
{block:PermalinkPage}{block:Caption}
<a href="{Permalink}"><div class="caption">{caption}</div></a>
{/block:Caption}{/block:PermalinkPage}
</div>
{/block:Audio}
{block:Answer}
<div class="answer">
<h1 class="question"><a href="{Permalink}">Question:</a></h1>
<h1>{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{Question}{block:IndexPage}</a>{/block:IndexPage}</h1>
<p class="askedBy">Asked By: {Asker}</p>
<h1 class="question"><a href="{Permalink}">Answer:</a><h1>
{Answer}
</div>
{/block:Answer}
{block:IfNotes}
{block:IndexPage}<div class="bottom">
<div class="date">{block:Date}{/block:Date}</div>
</div><!--/bottom-->
{/block:IndexPage}
{/block:IfNotes}
</div><!-- end post -->
{block:Posts}
<div class="clear"></div>
{block:IfNotEndlessScrolling}{block:Pagination}
<div class="nav">
{block:PreviousPage}
<div class="navright" style="text-transform:lowercase;">
<a href="{PreviousPage}">{lang:Previous}</a>
</div>
{/block:PreviousPage}
{block:NextPage}
<div class="navleft" style="text-transform:lowercase;">
<a href="{NextPage}">{lang:Next}</a>
</div>
{/block:NextPage}
<div class="navcenter">
</div>
</div>
{/block:Pagination}
{/block:IfNotEndlessScrolling}
{block:PermalinkPagination}
{block:PreviousPost}
<div class="navpost">
<div class="navleft" style="text-transform:lowercase;">
<a href="{PreviousPost}">{lang:Previous post}</a>
</div>
{/block:PreviousPost}
{block:NextPost}
<div class="navright" style="text-transform:lowercase;">
<a href="{NextPost}">{lang:Next post}</a>
</div>
{/block:NextPost}
</div>
{/block:PermalinkPagination}
<div class="clear"></div>
{block:PermalinkPage}
{block:IfDisqusShortname}
<div id="disqus_thread" class="content"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
{/block:IfDisqusShortname}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/n2yg7bp/gJjkq6rfn/all.js"></script>
<!-- Disqus -->
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<span><script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
<!--/Disqus-->
<!-- Google Analytics -->
{block:IfGoogleAnalytics}
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{text:Google Analytics}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{/block:IfGoogleAnalytics}
<!--/Google Analytics -->
<!-- Endless Scrolling -->
{block:IfEndLessScrolling}
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
{/block:IfEndLessScrolling}
<!--/Endless Scrolling -->
</div>
</body>
</html>[/quote]
Und hier der [url=http://diasporakollektiv.tumblr.com]Link.[/url]
Was ich umsetzen will: Wenn man auf eine der Unterseiten der Linkleiste geht, dann füllt der Hintergrund nicht mehr den gesamten Bildschirm. [url=http://diasporakollektiv.tumblr.com/releases]Beispiel.[/url] Ein weißer Balken ist klar erkennbar. Ich weiß nicht wo hier der Fehler liegt, da ich dem Hintergrund definiert habe, den gesamten Bildschirm einzunehmen.
Mein zweites Problem ist, dass ich auf der Seite keine Schriftschnitte angezeigt kriege, obwohl diese im HTML Code der jeweiligen Unterseite definiert sind. Blockt hier irgendeine Codezeile Schriftschnitte? Ich habe im Web keine Informationen zu soetwas gefunden.
Für eure Hilfe wäre ich euch sehr dankbar.
Liebe Grüße
Max
|
|
Willkommen auf dem Portal für Mediengestalter
