| 

.NET C# Java Javascript Exception

2
Habe Probleme mit der unterschiedlichen Interpretation von verschiedenen Browsern, in Chrome läuft alles super, aber in Firefox ist die Größe der Bilder völlig anders, wie kann man das Problem lösen? Hier die Seite: http://lovelyght.tumblr.com/ Achja und bitte komplizierte Sachen erklären, bin absoluter Anfänger! :D
09.12.2013
lovelyght
lovelyght
1 ● 1 ● 2
Bzgl. "bin absoluter Anfänger" ich habe mich eben, beim durchlesen deiner tumblr-about-Seite, gefragt welche HTML und CSS-Kenntnisse du hast. Bist du mit den Grundlagen von HTML/CSS vertraut oder muss ich meine Antwort wesentlich ausführlicher formulieren?
– phg 10.12.2013
5 Antworten
1
Das mixen von DOCTYPEs ist generell nicht sinnvoll. Im Quelltext ist in der ersten Zeile DOCTYPE html und in der dritten Zeile ist dann der DOCTYPE HTML 4.01 Transitional angegeben.

Das da die Browser verwirrt sind und sich unterschiedlich verhalten ist nicht erstaunlich und darf ihnen auch nicht übel genommen werden ;-)
09.12.2013
Roland Bär
Roland Bär
338 ● 6
1
Ok, offensichtlich baut tumblr beim beim Ausliefern der Seite an den Browser die beiden Zeilen mit dem HTML5-Doctype (<!DOCTYPE html>) und dem tumblr-spezifischen JavaScript ein.

1. Entferne die Zeile 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

aus deinem Code im tumblr-Editor

2. Füge hinter </head> ein <body> ein, das hast du anscheinend vergessen. Das kann Browser verwirren.

3. Entferne 
<FONT FACE="">
und 
</FONT>

Das FONT-Tag gibt es in HTML5 nicht mehr, auch wenn das eher Quellcode-kosmetischer Natur ist.

4. Stelle sicher, dass dein generierter HTML-Code (so wie er beim Browser ankommt) valide ist. Im Moment steht z.B. in Zeile 397 ein </a> zu dem kein <a> an zulässiger Stelle existiert. Solche Fehler verwirren Browser auch. Mach dir am besten ein paar HTML-Kommentar in den Code, damit du dich leichter im tublr-Editor orientieren kannst.

Wenn irgendetwas unklar ist, kommentiere bitte diese Antwort. Dann werde ich das ausführlicher erklären.

Update, der etwas aufgeräumte Code. Keine Garantie, dass der funktioniert (Netbeans mag die Template-Sprache nicht so gern) 
<html lang="en">
  <head>
    <!--
    Theme NTA by villenoire, 2011.
    http://villenoire.tumblr.com/
    -->

    <title>{Title}</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <link rel="shortcut icon" href="{Favicon}"/>

    <meta name="color:Blog title" content="#000000"/>
    <meta name="color:Text" content="#000000"/>
    <meta name="color:Links" content="#5C5C5C"/>
    <meta name="color:Links Hover" content="#B1B1B1"/>
    <meta name="color:Title" content="#000000"/>
    <meta name="color:Background" content="#FFFFFF"/>
    <meta name="color:Scrollbar" content="#FFFFFF"/>

    <meta name="if:One Column" content="0">
    <meta name="if:Two Columns" content="0">
    <meta name="if:Three Columns" content="1">
    <meta name="if:Four Columns" content="0">
    <meta name="if:Show Blog Title" content="1"/>
    <meta name="if:Show Background Image" content="1">
    <meta name="if:Use Banner" content="0">
    <meta name="if:Show Home Link" content="1">
    <meta name="if:Show Message Link" content="1">
    <meta name="if:Show Submit" content="1"/>
    <meta name="if:Show Archive Link" content="1">
    <meta name="if:Rounded Scrollbar" content="0"/>
    <meta name="if:Underline Hover" content="0"/>

    <meta name="font:Title" content="Georgia"/>
    <meta name="font:Body" content="Georgia"/>

    <meta name="image:Background" content="">
    <meta name="image:Banner" content="">

    <meta name="text:Link One" content=""/>
    <meta name="text:Link One Title" content=""/>
    <meta name="text:Link Two" content=""/>
    <meta name="text:Link Two Title" content=""/>
    <meta name="text:Link Three" content=""/>
    <meta name="text:Link Three Title" content=""/>
    <meta name="text:Link Four" content=""/>
    <meta name="text:link Four Title" content=""/>
    <meta name="text:link Five" content=""/>
    <meta name="text:link Five Title" content=""/>
    <meta name="text:link Six" content=""/>
    <meta name="text:link Six Title" content=""/>
    <meta name="text:link Seven" content=""/>
    <meta name="text:link Seven Title" content=""/>
    <meta name="text:link Eight" content=""/>
    <meta name="text:link Eight Title" content=""/>

    <meta name="text:Title font size" content="22"/>
    <meta name="text:Post title font size" content="18"/>
    <meta name="text:Body font size" content="11"/>

    <!--{block:Description}-->
    <meta name="description" content="{MetaDescription}"/>
    <!--{/block:Description}-->

    <script type="text/javascript" src="http://static.tumblr.com/is5f0mm/B45lrpvaa/one.txt"></script>

    <style type="text/css">
      iframe#tumblr_controls {
        top: 0% !important;
        right:0% !important;
        position: absolute !important;
      }

      h1 {
      color:{color:Blog title};
      padding-bottom:0px;
      font-weight: normal;
      font-size:{text:title font size}px;
      text-transform: uppercase;
      font-family:{font:Title};
      line-height: 0px;
      {block:ifusebanner}display:none;{/block:ifusebanner}
      }

      h1 a {
        color:{color:Blog title};
      }

      body {
        height: 100%;
        background-color:{color:Background};
      color: {color:Text};
      font-size: {text:Body font size}px;
      font-family:{font:Body};
      line-height: 0px;
      padding: 0px 0 200px 0;
      {block:ifShowbackgroundImage}background-attachment: fixed;
      background-image:url('{image:Background}');
      {/block:ifshowbackgroundimage}
      }

      a {
       color: {color:Links};
      text-decoration:none;
      padding-left: 0;
      }

      a:hover {
        color: {color:Links Hover};
      {block:IfUnderlineHover}text-decoration: underline;{/block:IfUnderlineHover}
      -webkit-transition-duration: 0.5s;
      }

      a.title {
        color: {color:Links};
      text-decoration:none;
      }

      ::-webkit-scrollbar-thumb:vertical {
        background-color:{color:Scrollbar};
      height:0px;
      {block:IfRoundedScrollbar}
      -moz-border-radius:0px;
      -webkit-border-radius:0px;
      {/block:IfRoundedScrollbar}
      }

      ::-webkit-scrollbar-thumb:horizontal {
        background-color:{color:Scrollbar};
      height:0px;
      {block:IfRoundedScrollbar}
      -moz-border-radius:0px;
      -webkit-border-radius:0px;
      {/block:IfRoundedScrollbar}
      }

      ::-webkit-scrollbar {
        height:10px;
        width:8px;
        background-color:{color:background};
      {block:IfRoundedScrollbar}
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      {/block:IfRoundedScrollbar}
      }

      #container {
        width: 1050px;
        margin: auto auto auto auto;
        position: relative;
      }


      #container .header {
        width: 1050px;
        margin: 0 0;
        color:#bdbdbd;
      }



      #container .posts {
        max-width: 100%;
        width: 1050px;
        width: 1050px;
        clear: both;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        padding-top:0px;
      }

      #container .box {
        width: 345px;
        {block:ifonecolumn}width: 600px; padding-left:21%;{/block:ifonecolumn}
      {block:iftwocolumns}width: 500px;{/block:iftwocolumns}
      {block:iffourcolumns}width: 250px; margin-bottom:20px;{/block:iffourcolumns}
      margin-left: 5px;
      margin-left: 5px;
      float: left;
      margin-bottom: 30px;
      margin-bottom: 30px;
      position: fixed;
      }

      #container .box a{
        -webkit-transition-duration: 0.5s;
      }

      #container .box img {
        border:0px;
        -webkit-transition-duration: 0.5s;

        opacity:1;
      }



      #container .ask {
        font-size:{text:Post title font size}px;
      line-height: 18px;
      text-decoration: none;
      display: block;
      color:{color:Title};
      padding: 8px;
      }

      #container .audio {
        width: 207px;
      }

      #container .columnHolder {
        width: 800px;
        margin: 0px 0 0 0px;
        overflow: hidden;
      }

      #container .columnHolder .column {
        width: 225px;
        min-height: 1px;
        float: left;
      }

      #container .columnHolder .column.middle {
        margin: 0 0px;
      }

      #arrow {
        font-size:15px;
        padding-left:20px;
        color:{color:background};
      margin-top:-5px;
      padding-bottom:5px;
      }

      {block:PermalinkPage}

      .box {
        width: 600px !important;
        padding-left: 21%;
      }

      p.answer_form_container {
        width: 580px;
      }

      ol.notes {
        width: 600px;
        position:relative;
        padding-left:21%;
        list-style-type: none;
        margin: 0px 0 10px 0;
        padding: -10px -90px;
      }

      ol.notes li.note {
        margin: 0px 0 2px 0;
        padding: 0;
      }

      ol.notes a {color:Links}

      ol.notes img.avatar {
        display: true;
        padding:2px 0 0 2px;
        border:0px;
      }

      ol.notes blockquote {
        margin: 0;
      }

      ol.notes blockquote a {
        text-decoration: none;
      }

      {/block:PermalinkPage}

      .video{
        text-align: center;
        background-color:black;
      }

      .vignette {
        -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.7);
        -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.7);
        box-shadow:         inset 0px 0px 10px rgba(0,0,0,0.7);

        line-height: 0;         /* ensure no space between bottom */

        display: inline-block;  /* don't go wider than image */
      }
      .vignette img {
        position: relative;
        z-index: -1;            /* position beneath */
      }

      #top-link {
        position: fixed;
        right:0x;
        bottom:0x;
        color:white;
        font-weight:bold;
        text-decoration:none;
        padding:20px;
        border:0px;
      }

      #audiotest {
        background-image:url('http://static.tumblr.com/2w7y46r/gPklc94jg/play.png');
        margin-top: -27px;
        display:block;
        height:27px;
        z-index:-1000;
        width:250px;
      }

      #adam {
        position:absolute;
        top:26px;
        right:3px;}

      .box:hover .back {
        {block:indexpage}{/block:indexpage}z-index:1000;
      }

      .back {
        margin-top: -25px;
        width:100%;
        opacity: 0;
        z-index: 1000;
      }

      {block:PermalinkPage}

      .back img{
        width:500px;
        height:20px;
      }

      {/block:PermalinkPage}

      {block:ifonecolumn}
      .back img{width:600px; height:20px;}
      {/block:ifonecolumn}

      {block:iftwocolumns}
      .back img{width:500px; height:20px;}
      {/block:iftwocolumns}

      {block:iffourcolumns}
      .back img{width:100%; height:20px;}
      {/block:iffourcolumns}

    </style>

    <style type="text/css">{CustomCSS}</style>

    <script src="http://static.tumblr.com/ubmlcww/CVqlrvww0/two.txt"></script>
    <script src="http://static.tumblr.com/is5f0mm/oBolrpvgf/infinite_scroll.txt"></script>
    <script src="http://static.tumblr.com/ubmlcww/Bhflrvwwe/three.txt" type="text/javascript"></script>
    <script src="http://static.tumblr.com/is5f0mm/JOdlrpvsh/four.txt" type="text/javascript"></script>
    <script src="http://static.tumblr.com/is5f0mm/cuOlrpvzp/five.txt" type="text/javascript"></script>


  </head>
  <body>

    {block:indexpage}
    <script src="http://static.tumblr.com/is5f0mm/PT0lrpwjq/six.txt" type="text/javascript"></script>
    {/block:indexpage}
    <br />

    <div id="container">
      <div class="header">
        <div style="text-align: left;">
          <img style="max-width:500px; max-height:130px; padding-top: 40; padding-left: 30; padding-right: 15; padding-bottom: 20; margin: -22" src="{image:banner}" />
          <h1 class="bebas"><a href="/">{block:ifshowblogtitle}{Title}{/block:ifshowblogtitle}</a></h1>
          <div style="text-align: right; width: 200; padding-bottom: 10; padding-left: 750; font-size:13px; margin-top:0px; margin-bottom:10px; text-transform: lowercase;">
            {block:ifshowhomelink}<a href="/">Home</a>   {/block:ifshowhomelink}
            {block:ifshowmessagelink}<a href="/about">About</a>   {/block:ifshowmessagelink}
            {block:Pages}
            <a href="{URL}" title="{Label}">{Label}</a>
            {/block:Pages}
            {block:ifshowarchivelink}
              <a href="/contact">contact</a>
            {/block:ifshowarchivelink}
          </div>
          <hr size="1" width="1025" />
          <div class="description">{description}<br style="clear:both" /></div>
        </div>
        <div class="posts" id="allposts">
          {block:Posts}
          <div class="box">
            {block:Photo}
            {block:IndexPage}
              <a href="{Permalink}" target="_blank">
            {/block:IndexPage}
            {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
              <div class="vignette">
                <img style="min-width:100%;" class="vignette" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
              </div>
              <div class="back"></div>
              <div class="perma">
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a>
                <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
              {/block:Photo}
              {block:Audio}
                <div class="curve">
                  <div style=" width:100%; height:27px; font-size:1px; color:black; background-color:black;">
                    {AudioPlayerBlack}
                  </div><a href="{Permalink}" target="_blank" id="audiotest"></a></div><div id="arrow" style="color:black;">&#9660;</div>
                {block:AlbumArt}<img style="border:1px solid white; width:50px; margin-left:5px;" src="{AlbumArtURL}"/>{/block:AlbumArt}
                {block:IndexPage}<div style="{block:AlbumArt}min-height:40px; padding-left:70px;margin-top:-60px;{/block:AlbumArt}">{block:Caption}{Caption}{/block:Caption}</div>{/block:IndexPage}
                {block:IndexPage}
                <div class="back"></div>
                <div class="perma">
                  <a href="{Permalink}" target="_blank"></a>
                  {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a>
                  <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a>{block:ExternalAudio}<a href="{ExternalAudioURL}"></a>{/block:ExternalAudio}
                </div>
                {/block:IndexPage}
              {/block:Audio}
              {block:Video}
              <div class="video">
                {block:iffourcolumns}{Video-250}{/block:iffourcolumns}
                {block:ifthreecolumns}{Video-250}{/block:ifthreecolumns}
                {block:iftwocolumns}{Video-500}{/block:iftwocolumns}
                {block:ifonecolumn}{Video-500}{/block:ifonecolumn}
                {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
              </div>
              <div class="back"></div>
              <div class="perma"><a href="{Permalink}" target="_blank"></a>
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a>
              </div>
              {/block:Video}

              {block:Text}
              <div class="curve">{block:Title}<a href="{Permalink}" class="title"> {Title} </a>{/block:Title}</div>{block:Title}<div id="arrow">&#9660;</div>
              {/block:Title}

              <div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Body}</div>
              <div class="back"></div>
              <div class="perma"><a href="{Permalink}" target="_blank"></a>
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>

              {block:More}<br /><br /> <a href="{Permalink}" class="readMore">Read More</a>{/block:More}
              {/block:Text}

              {block:Answer}

              <div class="curve"><a href="{Permalink}" class="ask"> {Question} </a></div><div id="arrow">&#9660;</div>

              <img style="border:1px solid white;" src="{AskerPortraitURL-16}"/><span style="vertical-align: 25%;">  {Asker}</span>
              <div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Answer}</div>

              <div class="back"></div>
              <div class="perma"><a href="{Permalink}" target="_blank"></a>
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a></div>
              {/block:Answer}

              {block:Link}
              <div class="curve"><a href="{URL}" class="title" {Target}> {Name} </a>
              </div><div id="arrow">&#9660;</div>
              {block:Description}<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Description}</div>{/block:Description}

              <div class="back"></div>
              <div class="perma"><a href="{Permalink}" target="_blank"></a>
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
              {/block:Link}

              {block:Quote}<div class="curve"><a href="{Permalink}" class="title">"{Quote}"</a></div><div id="arrow">&#9660;</div>{block:Source}  {Source}<br />{/block:Source}
              <div class="back"></div>
              <div class="perma"><a href="{Permalink}" target="_blank"></a>
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>{/block:Quote}

              {block:Chat}
              <div class="curve">{block:Title}<a href="{Permalink}" class="title"> {Title} </a>{/block:Title}</div>{block:Title}<div id="arrow">&#9660;</div>{/block:Title}

              <table class="chat" style="padding-left:5px;"cellspacing="0">{block:Lines}<tr>{block:Label}<td class="name line{UserNumber}">{Label}</td>{block:Label}<td class="words line{UserNumber}">{Line}</td></tr>{/block:Lines}</table>

              <div class="back"></div>
              <div class="perma"><a href="{Permalink}" target="_blank"></a>
                {block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
              {/block:Chat}

              {block:PermalinkPage}<block:Caption>
                <br />{Caption}</block:Caption><br /><br />
              {block:NoteCount}{notecountwithlabel}{/block:NoteCount}{/block:PermalinkPage}

              {block:PermalinkPage}</div>
              {block:PostNotes}{PostNotes}{/block:PostNotes}
              {/block:PermalinkPage}

              </div>{/block:Posts}
            </div>
            <hr size="1" width="1025" />
            {block:IndexPage}
            <div class="columnHolder footer"><div class="column navigation" id="navigation">
                {block:Pagination}
                {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
                {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
                {block:PermalinkPagination}
                {block:NextPost}<a href="{NextPost}" class="navigate">{/block:NextPost}{block:NextPost}</a>{/block:NextPost}
                {block:PreviousPost}<a href="{PreviousPost}" class="navigate">{/block:PreviousPost}{block:PreviousPost}</a>{/block:PreviousPost}{/block:PermalinkPagination}</div>
            </div>
            {/block:IndexPage}
    </div>

    <script type="text/javascript" src="http://static.tumblr.com/is5f0mm/T5klrpwms/autoscale.txt"></script>
  </body>
</html>
10.12.2013
phg
phg
1,6k ● 4
Editiert 18.12.2013
phg
phg
1,6k ● 4
Hab das jetzt alles gemacht, allerdings finde ich die Stellen nicht die mir der validator anzeigt, bzw. weiß ich nicht was er meint, wenn er ein < als Fehler anzeigt, dass dort aber meines Erachtens bleiben sollte ( das muss nun nicht direkt was heißen, habe es aber weggenommen und nichts hat sich verändert). Naja mit dem Rest hatte ich kein Problem, vielen Dank dafür schonmal :)
– lovelyght 10.12.2013
Ich sehe im Moment folgendes Problem:

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#"><body>

Das <body> muss nach dem </head> kommen nicht nach dem <head>

Und dann sind da noch ein paar <a ...></a></a> Wobei es jetzt in FF und Chrome schon recht ähnlich aussieht...

Vorschlag: Aktualisiere mal deine Antwort mit dem aktuellen HTML-Code aus dem tumblr-Editor (am besten zwischen [code]...dein code hier...[/code] und ich kopier mir das mal in ne IDE und lass das etwas aufräumen.
– phg 11.12.2013
Hey, ich hab die Antwort jetzt aktualisiert, siehst dus dir mal an?
– lovelyght 14.12.2013
Ich habs geschafft!! Das Problem war nur die Vignette die ich um die Bilder gesetzt habe, ich habe die Größenvorgabe der Vignette einfach von inline-block auf 345 gesetzt, was ja der Größe der Bilder entspricht. Scheint so als konnte Firefox einfach nichts mit inline-block anfangen :D Aber ich möchte dir für deine große Hilfsbereitschaft und Geduld mit mir danken!
– lovelyght 14.12.2013
1. Sorry, bin die letzten Tage nicht dazu gekommen hier rein zu schauen (und ich kann mich an keine Mail erinnern... komisch)
2. Ich sollte die Kommentare erst zu ende lesen ;) Hab eben einen geänderten Code in meine Antwort rein editiert und dann erst gelesen, dass du es schon gelöst hast.

Sieht für mich in FF und Chrome jetzt auch gleich aus. Auch wenn der W3C-Validator nicht so glücklich damit ist... Ich denke in diesem Fall kann man ein "Haupsache es funktioniert" durchaus gelten lasen ;)
– phg 18.12.2013
0
hmmm bei mir sieht das aber so aus:

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html lang="en">
4 <head>
5 .....

was muss ich denn dann ändern?
09.12.2013
lovelyght
lovelyght
1 ● 1 ● 2
1. <!DOCTYPE html>
2. <script>var __pbpa = true;</script><script>...
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
4. "http://www.w3.org/TR/html4/loose.dtd">
5. <html lang="en">
6. ...

In FF und Chrome, der W3C-Validator verschluckt sich auch http://validator.w3.org/check?uri=http%3A%2F%2Flovelyght.tumblr.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Und beim durchscrollen sehe ich noch ein paar andere Probleme im HTML-Code...

Kannst du noch ein paar mehr Infos liefern?
– phg 10.12.2013
1
"hmmm bei mir sieht das aber so aus: (...)"

Wo sieht es bei dir so aus? Im hochgeladenen Code oder im Browser. tumblr liefert evtl. etwas anderes aus als Du hochgeladen hast, relevant für die Anzeige ist, was der Browser erhalten hat.
– Roland Bär 10.12.2013
0
So, das ist jetzt der aktuelle Code. Übrigens, ähnlicher geworden sind sich die Darstellungen, indem ich die Größe der Posts geändert habe, möchte aber eigentlich 3 columns haben. Deshalb hab ich das hier jetzt auch mit der ursprünglichen Größe (345) statt der Vergrößerung (500) reingeschrieben.

<html lang="en">
<head><body>

<!-- --------------------------
Theme NTA by villenoire, 2011.
http://villenoire.tumblr.com/
------------------------------>

<title>{Title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}" />

<meta name="color:Blog title" content="#000000"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Links" content="#5C5C5C"/>
<meta name="color:Links Hover" content="#B1B1B1"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Scrollbar" content="#FFFFFF"/>

<meta name="if:One Column" content="0">
<meta name="if:Two Columns" content="0">
<meta name="if:Three Columns" content="1">
<meta name="if:Four Columns" content="0">
<meta name="if:Show Blog Title" content="1"/>
<meta name="if:Show Background Image" content="1">
<meta name="if:Use Banner" content="0">
<meta name="if:Show Home Link" content="1">
<meta name="if:Show Message Link" content="1">
<meta name="if:Show Submit" content="1"/>
<meta name="if:Show Archive Link" content="1">
<meta name="if:Rounded Scrollbar" content="0"/>
<meta name="if:Underline Hover" content="0"/>

<meta name="font:Title" content="Georgia"/>
<meta name="font:Body" content="Georgia"/>

<meta name="image:Background" content="">
<meta name="image:Banner" content="">

<meta name="text:Link One" content="" />
<meta name="text:Link One Title" content="" />
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Four" content="" />
<meta name="text:link Four Title" content="" />
<meta name="text:link Five" content="" />
<meta name="text:link Five Title" content="" />
<meta name="text:link Six" content="" />
<meta name="text:link Six Title" content="" />
<meta name="text:link Seven" content="" />
<meta name="text:link Seven Title" content="" />
<meta name="text:link Eight" content="" />
<meta name="text:link Eight Title" content="" />

<meta name="text:Title font size" content="22"/>
<meta name="text:Post title font size" content="18"/>
<meta name="text:Body font size" content="11"/> 

{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

<script type="text/javascript" src="http://static.tumblr.com/is5f0mm/B45lrpvaa/one.txt"></script>

<style type="text/css">

iframe#tumblr_controls {
    top: 0% !important;
    right:0% !important; 
    position: absolute !important;
    }

h1 { 
color:{color:Blog title}; 
padding-bottom:0px; 
font-weight: normal; 
font-size:{text:title font size}px; 
text-transform: uppercase; 
font-family:{font:Title}; 
line-height: 0px;
{block:ifusebanner}display:none;{/block:ifusebanner}
}

h1 a {
color:{color:Blog title};
}

body {
height: 100%; 
background-color:{color:Background}; 
color: {color:Text};
font-size: {text:Body font size}px;
font-family:{font:Body}; 
line-height: 0px; 
padding: 0px 0 200px 0; 
{block:ifShowbackgroundImage}background-attachment: fixed; 
background-image:url('{image:Background}');
{/block:ifshowbackgroundimage}
}

a {
color: {color:Links}; 
text-decoration:none;
padding-left: 0;
}

a:hover { 
color: {color:Links Hover}; 
{block:IfUnderlineHover}text-decoration: underline;{/block:IfUnderlineHover}
-webkit-transition-duration: 0.5s; 
}

a.title {
color: {color:Links}; 
text-decoration:none;
}

::-webkit-scrollbar-thumb:vertical { 
background-color:{color:Scrollbar};
height:0px;
{block:IfRoundedScrollbar}
-moz-border-radius:0px;
-webkit-border-radius:0px;
{/block:IfRoundedScrollbar}
}

::-webkit-scrollbar-thumb:horizontal { 
background-color:{color:Scrollbar};
height:0px;
{block:IfRoundedScrollbar}
-moz-border-radius:0px;
-webkit-border-radius:0px;
{/block:IfRoundedScrollbar}
}

::-webkit-scrollbar { 
height:10px;
width:8px; 
background-color:{color:background};
{block:IfRoundedScrollbar}
-moz-border-radius:20px;
-webkit-border-radius:20px;
{/block:IfRoundedScrollbar}
}

#container { 
width: 1050px;
margin: auto auto auto auto; 
position: relative;
}


#container .header {
width: 1050px;
margin: 0 0;
color:#bdbdbd;
}



#container .posts {
max-width: 100%;
width: 1050px; 
width: 1050px;
clear: both; 
position: relative; 
margin-left: auto; 
margin-right: auto; 
padding-top:0px; 
}

#container .box {
width: 345px;
{block:ifonecolumn}width: 600px; padding-left:21%;{/block:ifonecolumn}
{block:iftwocolumns}width: 500px;{/block:iftwocolumns}
{block:iffourcolumns}width: 250px; margin-bottom:20px;{/block:iffourcolumns}
margin-left: 5px; 
margin-left: 5px; 
float: left; 
margin-bottom: 30px; 
margin-bottom: 30px;
position: fixed; 
}

#container .box a{
-webkit-transition-duration: 0.5s; 
}

#container .box img {
border:0px; 
-webkit-transition-duration: 0.5s; 

opacity:1;
}



#container .ask { 
font-size:{text:Post title font size}px;
line-height: 18px; 
text-decoration: none; 
display: block; 
color:{color:Title}; 
padding: 8px;
}

#container .audio {
width: 207px;
}

#container .columnHolder {
width: 800px; 
margin: 0px 0 0 0px; 
overflow: hidden;
}

#container .columnHolder .column { 
width: 225px; 
min-height: 1px; 
float: left;
}

#container .columnHolder .column.middle { 
margin: 0 0px; 
}

#arrow {
font-size:15px; 
padding-left:20px; 
color:{color:background}; 
margin-top:-5px; 
padding-bottom:5px;
}

{block:PermalinkPage}

.box { 
width: 600px !important; 
padding-left: 21%;
}

p.answer_form_container { 
width: 580px; 
}

ol.notes { 
width: 600px; 
position:relative; 
padding-left:21%; 
list-style-type: none; 
margin: 0px 0 10px 0; 
padding: -10px -90px; 
}

ol.notes li.note { 
margin: 0px 0 2px 0; 
padding: 0;
}

ol.notes a {color:Links}

ol.notes img.avatar { 
display: true; 
padding:2px 0 0 2px; 
border:0px;
}

ol.notes blockquote { 
margin: 0; 
}

ol.notes blockquote a { 
text-decoration: none; 
}

{/block:PermalinkPage}

.video{
text-align: center; 
background-color:black;
}

.vignette {
        -webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.7);
        -moz-box-shadow:    inset 0px 0px 85px rgba(0,0,0,0.7);
        box-shadow:         inset 0px 0px 10px rgba(0,0,0,0.7);

        line-height: 0;         /* ensure no space between bottom */

        display: inline-block;  /* don't go wider than image */
}
.vignette img {
        position: relative;
        z-index: -1;            /* position beneath */
}

#top-link { 
position: fixed; 
right:0x; 
bottom:0x; 
color:white; 
font-weight:bold; 
text-decoration:none; 
padding:20px; 
border:0px; 
}

#audiotest {
background-image:url('http://static.tumblr.com/2w7y46r/gPklc94jg/play.png');
margin-top: -27px;
display:block;
height:27px;
z-index:-1000;
width:250px;
}

#adam {
    position:absolute;
    top:26px;
    right:3px;}

.box:hover .back {
{block:indexpage}{/block:indexpage}z-index:1000;
}

.back { 
margin-top: -25px; 
width:100%; 
opacity: 0;
z-index: 1000;
}

{block:PermalinkPage}

.back img{
width:500px; 
height:20px;
}

{/block:PermalinkPage}

{block:ifonecolumn}
.back img{width:600px; height:20px;}
{/block:ifonecolumn}

{block:iftwocolumns}
.back img{width:500px; height:20px;}
{/block:iftwocolumns}

{block:iffourcolumns}
.back img{width:100%; height:20px;}
{/block:iffourcolumns}

</style>

<style type="text/css">{CustomCSS}</style>

<script src="http://static.tumblr.com/ubmlcww/CVqlrvww0/two.txt"></script>
<script src="http://static.tumblr.com/is5f0mm/oBolrpvgf/infinite_scroll.txt"></script>
<script src="http://static.tumblr.com/ubmlcww/Bhflrvwwe/three.txt" type="text/javascript"></script>
<script src="http://static.tumblr.com/is5f0mm/JOdlrpvsh/four.txt" type="text/javascript"></script>
<script src="http://static.tumblr.com/is5f0mm/cuOlrpvzp/five.txt" type="text/javascript"></script>


</head>

{block:indexpage}
<script src="http://static.tumblr.com/is5f0mm/PT0lrpwjq/six.txt" type="text/javascript"></script>

{/block:indexpage}
<br>




<div id="container">
<div class="header">



<div style="text-align: left;"><img style="max-width:500px; max-height:130px; padding-top: 40; padding-left: 30; padding-right: 15; padding-bottom: 20; margin: -22" src="{image:banner}"/><h1 class="bebas"><a href="/">{block:ifshowblogtitle}{Title}{/block:ifshowblogtitle}</a></h1>

<div style="text-align: right; width: 200; padding-bottom: 10; padding-left: 750; font-size:13px; margin-top:0px; margin-bottom:10px; text-transform: lowercase;">


{block:ifshowhomelink}<a href="/">
Home</FONT></a>&nbsp;&nbsp;&nbsp;{/block:ifshowhomelink}

{block:ifshowmessagelink}<a href="/about">About</a>&nbsp;&nbsp;&nbsp;{/block:ifshowmessagelink}



{block:Pages}
<a href="{URL}" title="{Label}">{Label}</a>&nbsp;&nbsp;&nbsp;
{/block:Pages}


{block:ifshowarchivelink}<a href="/contact">
contact</a>&nbsp;&nbsp;&nbsp;{/block:ifshowarchivelink}

    

    
</div>



<hr size="1" width="1025">









<div class="description">{description}<br style="clear:both"></div></div>







<div class="posts" id="allposts">
{block:Posts}
<div class="box">



{block:Photo}
{block:IndexPage}
<a href="{Permalink}" target="_blank">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<div class="vignette"><img style="min-width:100%;" class="vignette" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}"></div>







<div class="back"></div>
<div class="perma">
<a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a>
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Photo}



{block:Audio}
<div class="curve">
<div style=" width:100%; height:27px; font-size:1px; color:black; background-color:black;">
{AudioPlayerBlack}
</div><a href="{Permalink}" target="_blank" id="audiotest"></a></div><div id="arrow" style="color:black;">&#9660;</div>


{block:AlbumArt}<img style="border:1px solid white; width:50px; margin-left:5px;" src="{AlbumArtURL}"/>{/block:AlbumArt}

{block:indexpage}<div style="{block:AlbumArt}min-height:40px; padding-left:70px;margin-top:-60px;{/block:AlbumArt}">{block:Caption}{Caption}{/block:Caption}</div>{/block:IndexPage}

{block:IndexPage}
<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a>
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a>{block:ExternalAudio}<a href="{ExternalAudioURL}"></a>{/block:ExternalAudio}</div>{/block:IndexPage}

{/block:Audio}

{block:Video}
<div class="video">
{block:iffourcolumns}{Video-250}{/block:iffourcolumns}
{block:ifthreecolumns}{Video-250}{/block:ifthreecolumns}
{block:iftwocolumns}{Video-500}{/block:iftwocolumns}
{block:ifonecolumn}{Video-500}{/block:ifonecolumn}
{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</div>

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Video}

{block:Text}
<div class="curve">{block:Title}<a href="{Permalink}" class="title">&nbsp;{Title}&nbsp;</a>{/block:Title}</div>{block:Title}<div id="arrow">&#9660;</div>{/block:Title}

<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Body}</div>
<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>

{block:More}<br><br> <a href="{Permalink}" class="readMore">Read More</a>{/block:More}
{/block:Text}

{block:Answer}

<div class="curve"><a href="{Permalink}" class="ask">&nbsp;{Question}&nbsp;</a></div><div id="arrow">&#9660;</div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="border:1px solid white;" src="{AskerPortraitURL-16}"/><span style="vertical-align: 25%;">&nbsp;&nbsp;{Asker}</span>
<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Answer}</div>

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a></div>
{/block:Answer}

{block:Link}
<div class="curve"><a href="{URL}" class="title" {Target}>&nbsp;{Name}&nbsp;</a>
</div><div id="arrow">&#9660;</div>
{block:Description}<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Description}</div>{/block:Description}

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Link}

{block:Quote}<div class="curve"><a href="{Permalink}" class="title">"{Quote}"</a></div><div id="arrow">&#9660;</div>{block:Source}&nbsp;&nbsp;{Source}<br>{/block:Source}
<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>{/block:Quote}

{block:Chat}
<div class="curve">{block:Title}<a href="{Permalink}" class="title">&nbsp;{Title}&nbsp;</a>{/block:Title}</div>{block:Title}<div id="arrow">&#9660;</div>{/block:Title}

<table class="chat" style="padding-left:5px;"cellspacing="0">{block:Lines}<tr>{block:Label}<td class="name line{UserNumber}">{Label}</td>{block:Label}<td class="words line{UserNumber}">{Line}</td></tr>{/block:Lines}</table>

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Chat}

{block:PermalinkPage}<block:Caption>
<BR>{Caption}</block:Caption><BR><BR>
{block:NoteCount}{notecountwithlabel}{/block:NoteCount}{/block:PermalinkPage}

{block:PermalinkPage}</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:PermalinkPage}

</div>{/block:Posts}
</div>

<hr size="1" width="1025">


{block:IndexPage}
<div class="columnHolder footer"><div class="column navigation" id="navigation">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}



{block:PermalinkPagination}
{block:NextPost}<a href="{NextPost}" class="navigate">{/block:NextPost}{block:NextPost}</a>{/block:NextPost}
{block:PreviousPost}<a href="{PreviousPost}" class="navigate">{/block:PreviousPost}{block:PreviousPost}</a>{/block:PreviousPost}{/block:PermalinkPagination}</div></div>
{/block:IndexPage}</div>


<script type="text/javascript" src="http://static.tumblr.com/is5f0mm/T5klrpwms/autoscale.txt"></script>
10.12.2013
lovelyght
lovelyght
1 ● 1 ● 2
Editiert 12.12.2013
lovelyght
lovelyght
1 ● 1 ● 2
0
There are simple method to know about how to hack twitter accounts online within minute. These twitter hacker are 100% safe and secure for use.
19.06.2017
bruno99
bruno99
1

Stelle deine Html-Frage jetzt!