Ergebnis 1 bis 2 von 2

Thema: Landing page - Verlinkung durch Buttons

  1. #1
    HTML Newbie
    Registriert seit
    17.08.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Landing page - Verlinkung durch Buttons

    Hallo miteinander,

    ich hatte vor ein paar Wochen schon mal einen Thread eröffnet und leider keine Antworten erhalten - wahrscheinlich, weil meine Fragen da noch etwas zu vage waren. Mittlerweile bin ich ein bisschen weiter, zumindest ist die Website, auf der sich alles abspielen soll, jetzt vorhanden.

    Zu meiner Frage:
    Ich möchte die Navigation auf meiner Landingpage (http://maisondunotricks.tumblr.com/) durch 4 Kacheln (bzw. Buttons) gestalten, durch die man auf eine jeweilige Unterseite gelangt. Darüber soll sich der Header befinden, über welchen man auch von jeder Unterseite wieder auf die Landing Page zurück kommt. Ich habe das ganze mal grob skizziert:
    s86ewd4v16q6.jpg

    Der Hintergrund soll ein ganzflächiges Bild sein, damit komme ich zur eigentliche Frage. Ich will dieses Bild an den Stellen der vier Buttons ein wenig abdunkeln (oder anders färben), um diese besser hervorzuheben.
    1. Wie bekomme ich es hin, dass die Buttons (wenn ich sie als Bild mit Hyperlink einfüge) genau an den Stellen sind, an denen ich auf dem Hintergrundbild die Abdunklung gesetzt habe?
    2. Wie lasse ich die Elemente (Hintergrund und Buttons) immer relativ zueinander an der gleichen Stelle erscheinen, ohne dass sie für jemanden mit einer anderen Bildschirmauflösung eventuell verzogen werden?

    Ich bedanke mich schon mal für jede Hilfe
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    17.08.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Landing page - Verlinkung durch Buttons

    Kleines Update:
    - Habe den Hintergrund jetzt gesetzt, Größe beträgt 1920 x 1080 px: http://www11.pic-upload.de/13.09.14/hdx64wxo9wgn.png
    - meine 4 Buttons sind ebenfalls fertig, jeweils 85 x 126 px groß und sind hier zu finden: http://www.pic-upload.de/gal-680570/ds1zo/1.html

    Ich würde die Buttons jetzt gerne im weißen Bereich auf dem Bild (also zwischen den Häusern oben und dem Himmel unten) platzieren. Bin dabei auf diese Seite gestoßen, die wohl grob das beschreibt, was ich machen will: http://de.selfhtml.org/html/grafiken/verweise.htm

    Aber wie bekomme ich die Buttons jetzt genau an diese Stelle der Landing page?

    Anbei noch der Code meiner Seite (bzw. der aus dem Template):
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <!-- 
            
            theme:      Impulse
            version:    2.0 (July 6, 2014)
            from:       adorablethemes.com
            
            -->
            <meta charset="UTF-8">
            
            <title>{block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
            {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
            
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="apple-touch-icon" href="{PortraitURL-128}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
    
    
            <meta name="viewport" content="width=device-width, initial-scale=1">
            
            {block:Hidden}
            <meta name="image:Background" content="">
            
            <meta name="select:Post Body Font" content="sans-serif" title="sans-serif">
            <meta name="select:Post Body Font" content="serif" title="serif">
            
            <meta name="select:Background Image Style" content="tile" title="tile">
            <meta name="select:Background Image Style" content="cover" title="cover">
            <meta name="select:Background Image Style" content="center" title="center">
    
    
            <meta name="color:Post Borders" content="#ffffff">
            <meta name="color:Post Background" content="#f6f6f6">
            <meta name="color:Post Text" content="#444444">
    		
    		<meta name="text:Disqus Shortname" content="">
            <meta name="text:Google Analytics ID" content="">
    		
            <meta name="if:Collapse Photosets" content="1">
            <meta name="if:Show Archive Link" content="1">
            <meta name="if:Show Random Link" content="0">
            <meta name="if:Show Search Box" content="0">
            <meta name="if:Index Photo Captions" content="0">
            <meta name="if:Index Video Captions" content="1">
            <meta name="if:Infinite Scrolling" content="1">
            <meta name="if:Use Real Dates" content="0">
            {/block:Hidden}
            
            <!--[if lt IE 9]><script src="//static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script><![endif]-->
            
            <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
            
            <style type="text/css">
            body {
    			color: {color:Post Text};
    			background-color: {BackgroundColor};
    			{block:IfBackgroundImage}
    			background-image: url('{image:Background}');
    			background-position: center center;
    			background-attachment: fixed;
    			{/block:IfBackgroundImage}
    			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                margin: 0;
                padding: 0;
            }
            
    
    
            
            #adorablethemesdotcom {
                margin-bottom: 80px;
                -webkit-transition: opacity 0.3s linear;
                transition: opacity 0.3s linear;
            }
            .wrapper {
                margin: 16px auto;
            }
            .main {
                float: left;
            }
            .layout-3col .wrapper, .layout-3col .main {
    			width: 834px;
            }
            
            
            /* Background settings */
            .background-cover {
                background-position: center center;
                background-size: cover;
            }
            .background-tile {
                background-repeat: repeat;
            }
            .background-center {
                background-position: center center;
                background-repeat: no-repeat;
            }
            
            /* Avatar styles */
            .avatar-header { visibility:hidden; }
                margin: 20px 0;
                box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
            }
            .avatar-header:hover {
                box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.33);
            }
            .avatar-square {
                border-radius: 3px;
            }
            .avatar-circle {
                border-radius: 128px;
            }
            
            
            /* Responsive layout styles */
        	@media screen and (min-width:308px) {
                .layout-3col .wrapper, .layout-3col .main {
                	width: 278px;
            	}
        	}
        	@media screen and (min-width:586px) {
                .layout-3col .wrapper, .layout-3col .main {
                	width: 556px;
            	}
        	}
        	@media screen and (min-width:864px) {
                .layout-3col .wrapper, .layout-3col .main {
                	width: 834px;
            	}
        	}
            
            a, a:hover {
                text-decoration: none;
            }
            
            h1,h2,h3,h4,h5,h6 {
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-weight: normal;
            }
            
            h1.blog-title {
                color: {TitleColor};
                font-family: {TitleFont};
                font-weight: {TitleFontWeight};
    			font-size: 36px;
    			text-decoration: none;
    			margin-top: 0;
    			margin-bottom: 0;
            }
            .blog-description {
                color: {TitleColor};
    			font-size: 14px;
    			margin-top: 12px;
    			margin-bottom: 12px;
    			line-height: 140%;
            }
            
            ul {
    			list-style-type: none;
    			padding-left: 0;
            }
            
            header {
    			text-align: center;
    			display: table;
    			width: 100%;
    			margin: 40px 0;
            }
            .header-content {
                display: table-cell;
                vertical-align: middle;
                width: 75%;
            }
            .blog-description a, .blog-description a:hover {
        		color: {AccentColor};
    			text-decoration: none;
            }
            .blog-description a:hover {
        		color: {AccentColor};
    			text-decoration: underline;
            }
            .header-navbar {
    			text-align: center;
    			clear: both;
    			width: 100%;
            }
            ul.header-links {
                margin: 0 auto;
            }
            ul.header-links li {
                text-align: center;  
                display: inline-block;
                padding: 15px 10px;
                border-radius: 2px;
            }
            ul.header-links li:hover {
                background-color: rgba({RGBAccentColor},0.1);
            }
            .header-link {
                font-size: 12px;
                color: {AccentColor};
            }
            nav {
    			padding: 7px;
    			clear: both;
            }
            
            .search-info {
    			background-color: {color:Post Background};
    			border: 8px solid white;
    			margin-bottom: 12px;
    			margin-left: 6px;
    			margin-right: 6px;
    			overflow: hidden;
    			box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
            }
            
            .post {
    			width: 250px;
    			float: left;
    			background-color: {color:Post Background};
    			border: 8px solid {color:Post Borders};
    			margin-bottom: 12px;
    			margin-left: 6px;
    			margin-right: 6px;
    			overflow: hidden;
    			box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
            }
            
    		.post-content {
    			padding: 20px;
    			font-size: 13px;
    			line-height: 140%;
            }
            
            .font-sans-serif .post-content {
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            }
            .font-serif .post-content {
                font-family: Georgia, serif;
            }
            
            .post a, .post a:hover {
        		color: {AccentColor};
    			text-decoration: none;
            }
            .post-content a:hover {
        		color: {AccentColor};
    			text-decoration: underline;
            }
            .post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
                color: {color:Post Text};
    			font-size: 16px;
            }
            .post p {
    			font-size: 12px;
    			line-height: 150%;
            }
            .post ul {
    			list-style-type: square;
    			font-size: 12px;
    			padding-left: 20px;
            }
            .post ol {
    			font-size: 12px;
    			padding-left: 20px;
            }
            .post blockquote {
    			font-size: 12px;
    			padding: 0 8px;
    			margin: 16px 0;
    			font-style: italic;
    			background: rgba({RGBcolor:Post Text}, 0.025);
    			border: 1px solid rgba({RGBcolor:Post Text}, 0.05);
            }
            .post figure {
                margin: 0;
            }
            .quote-text {
                font-family: Georgia, serif;
                font-style: italic;
            }
            
            /* control images in text posts */
            .post p img {
        		max-width: 100%;
            }
            
            .index-page .photo img, .index-page .video img {
    			max-width: 250px;
    			width: 250px;
    			height: auto;
    			display: block;
            }
            
            ul.chat {
                list-style-type: none;
                padding-left: 0;
            }
            
            .chat li {
                padding-top: 5px;
                padding-bottom: 5px;
                border-bottom: 1px solid rgba({RGBcolor:Post Text},0.05);
            }
            
            .chat li:last-child {
                border-bottom: none;   
            }
            
    		.chat-label {
    			font-weight: bold;
    		}
            
            .post-meta {
    			font-size: 13px;
    			padding: 8px;
    			line-height: 15px;
    			font-style: normal;
                min-height: 16px;
                border-top: 2px solid {color:Post Borders};
            }
            .post-share {
                border-top: 0;
            }
            
            .tag:before {
                content: "#";
            }
            .clear {
                clear: both;
            }
            
            ol.notes {
    			list-style-type: none;
    			padding-left: 0;
            }
            .note {
    			padding: 4px;
            }
            .note:last-child {
                margin-bottom: 10px;
            }
            
            .post .post-index-meta {
    			width: 230px;
    			font-size: 11px;
    			line-height: 25px;
    			font-weight: normal;
    			padding-left: 10px;
    			padding-right: 10px;
                background-color: rgba({RGBcolor:Post Text},0.03);
            }
            .post-index-meta a {
                color: rgba({RGBcolor:Post Text}, 0.5);
            }
            .post-index-meta a:hover {
                color: rgba({RGBcolor:Post Text}, 0.75);
            }
            
            .photo .post-index-meta {
                display: none;
            }
            
            .photo-hover {
    			position: absolute;
    			top: 0;
    			left: 0;
    			width: 100%;
    			height: 100%;
    			padding: 0;
    			font-size: 11px;
    			line-height: 30px;
    			font-weight: normal;
    			background: rgba(0,0,0,0);
                border-top: 0;
    			z-index: 100;
    			opacity: 0;
    			-webkit-transition: all 0.15s ease-in-out;
    			transition: all 0.15s ease-in-out;
            }
            .photo:hover .photo-hover {
                background: rgba(0,0,0,0.45);
                opacity: 1;
            }
            .photo-hover a, .photo-hover a:hover {
                font-size: 18px;
    			color: white;
    			text-shadow: 1px 2px 5px rgba(0,0,0,0.5);
            }
            
            .photo-hover .inside {
                text-align: center;
                position: absolute;
                top: 50%;
                width: 100%;
                transform: scale(0.5, 0.5);
                transition: all 0.15s ease-in-out;
                margin-top: -18px;
            }
            .photo:hover .photo-hover .inside {
                transform: scale(1, 1);
            }
            
            /* Remove blank space from bottom of iframes */
            .post iframe, figure img {
    			display: block;
                max-width: 100%;
            }
            
            /* Permalink page styles */
    		.permalink-page .wrapper {
    			width: 524px;
    		}
    		.permalink-page .main {
    			width: 524px;   
    		}
    		.permalink-page .post {
    			width: 500px;
    		}
    		.permalink-page .page {
    		    margin: 0 auto;
    			float: none;
    		}
    		.permalink-page .not-page {
    		    float: left;
    		}
    		.permalink-page .photo img {
    			max-width: 500px;
    			width: 500px;
    			height: auto;
    		}
            
            .post hr {
    			clear: both;
    			border: 0;
    			border-bottom: 1px solid rgba(0,0,0,0.05);
            }
            
            .post .asker-avatar {
                width: 16px;
                height: 16px;
                vertical-align: middle;
                border-radius: 2px;
                margin-right: 5px;
            }
            
            .post img.avatar, .photo img.avatar {
    			width: 16px;
    			height: 16px;
    			vertical-align: middle;
    			display: inline;
                border-radius: 3px;
                margin-right: 10px;
            }
            
            /* Note icons */
            ol.notes .reblog {background: transparent url('http://static.tumblr.com/anzluor/Gw5n6ay0z/reblog.png') right center no-repeat;}
        	ol.notes .like {background: transparent url('http://static.tumblr.com/anzluor/0yrn6ay0n/like.png') right center no-repeat;}
        	ol.notes .reply {background: transparent url('http://static.tumblr.com/anzluor/n70n6ay1a/reply.png') right center no-repeat;}
        	
        	.note blockquote {
        	    border: 0;
        	    background: transparent;
        	    border-left: 2px solid {color:Post Text};
        	}
            
            /* Pagination */
            .pagination {
    			clear: both;
    			text-align: center;
            }
            #previous, #next, .page-info {
                font-size: 13px;
                background-color: rgba({RGBcolor:Post Background},0.8);
                color: {color:Post Text};
                padding: 10px 15px;
                border-radius: 2px;
            }
            #previous:hover, #next:hover {
                background-color: rgba({RGBcolor:Post Background},1);
            }
            
            /* Infinite scroll loading indicator */
            .loading {
                background: white;
                color: black;
                box-shadow: 0px 0px 25px rgba(0,0,0,0.15);
                border-radius: 5px;
                padding: 10px;
                position: fixed;
                top: 49%;
                left: 49%;
                z-index: 999;
            }
            
            /* Button to open/close the search box */
            #openMenu {
                background-color: {color:Post Background};
                color: {color:Post Text};
                position: fixed;
                top: 0;
                left: 0;
                z-index: 999;
                padding: 10px;
                border-radius: 0 0 3px 0;
                -webkit-transition: left 0.1s ease-in;
                transition: left 0.1s ease-in;
                cursor: pointer;
                height: 20px;
            }
            
            /* Back-to-top button */
            .back-to-top {
                box-shadow: 0px 0px 25px rgba(0,0,0,0.15);
                display: none;
                background-color: black;
                color: white;
                position: fixed;
                bottom: 12px;
                right: 12px;
                z-index: 100;
                padding: 10px;
                border-radius: 3px;
                cursor: pointer;
            }
            
            /* Search box container */
            .sidebar {
                background-color: {color:Post Background};
                position: fixed;
                width: 250px;
                height: 40px;
                left: -250px;
                top: 0;
                z-index: 999;
                overflow: hidden;
                -webkit-transition: left 0.1s ease-in;
                transition: left 0.1s ease-in;
            }
            
            /* Open state for search box */
            .sidebar-open {
                left: 0px;
            }
            .openmenu-open {
                left: 250px !important;
            }
            
            /* Search box */
            input.search {
                font-family: 'Segoe UI', 'Lucida Grande', sans-serif;
                background-color: rgba({RGBcolor:Post Text},0.1);
                color: {color:Post Text};
                border: 0;
                border-bottom: 1px solid rgba({RGBcolor:Post Text},0.15);
                border-radius: 2px;
                padding: 5px;
                margin: 5px 20px 6px 20px;
                width: 210px;
            }
            input.search:focus {
                background-color: rgba({RGBcolor:Post Text},0.05);
                color: {color:Post Text};
            }
            
            /* Only show first photoset photo */
            .index-page .photoset-content a {
                display: none;
            }
            .index-page .photoset-content a:first-child {
                display: block;
            }
            
            /* Read more link */
            a.read_more:after {
                content: " \2192";
            }
            
            /* Hide posts before they load */
            .posts-hidden {
                opacity: 0.01;
            }
            
            /* Indicator for collapsed photosets */
            .photoset-note {
                position: absolute;
                top: 0;
                border-radius: 0 0 5px 0;
                left: 0;
                background-color: black;
                background-color: rgba(0,0,0,0.33);
                color: white;
                font-size: 11px;
                padding: 15px;
            }
            
            /* Audio player sizing */
            .index-page .spotify_audio_player {
                height: 290px;
            }
            .index-page .soundcloud_audio_player {
                height: 230px;
            }
            
            /* Responsive styles */
            @media screen and (max-width:359px) {
    		    #tumblr_controls {
    		        display: none;
    		    }
    		}
    		@media screen and (max-width:550px) {
    		    .permalink-page .wrapper {
    		        -moz-box-sizing: border-box;
                    box-sizing: border-box;
        			width: 100%;
        		}
        		.permalink-page .main {
        		    -moz-box-sizing: border-box;
                    box-sizing: border-box;
        			width: 100%;   
        		}
        		.permalink-page .post {
        		    -moz-box-sizing: border-box;
                    box-sizing: border-box;
        			width: 100%;
        			margin-left: 0;
        			margin-right: 0;
        			border-radius: 0;
        		}
        		.permalink-page .photo img {
        			max-width: 100%;
        			width: auto;
        			height: auto;
        		}
        		h1.blog-title {
        		    font-size: 24px;
        		    padding: 0 10px;
        		}
        		.blog-description {
        		    font-size: 11px;
        		    padding: 0 10px;
        		}
        		.sidebar-link {
        		    font-size: 12px;
        		}
        		.post-meta {
        		    font-size: 11px;
        		    line-height: 13px;
        		}
        		.post p {
        		    font-size: 11px;
        		}
        		.post ol.notes {
        		    font-size: 10px;
        		}
    		}
    		@media screen and (max-width:864px) {
    		   .photo .post-index-meta {
    		       display: block;
    		   }
    		   .photo-hover {
    		       display: none;
    		   }
    		}
    		@media (hover:none) {
    		    .photo .post-index-meta {
    		       display: block;
    		   }
    		   .photo-hover {
    		       display: none;
    		   }
    		}
    		@media screen and (min-width:1080px) {
    		    .permalink-page .wrapper {
        			width: 1056px;
        		}
        		.permalink-page .main {
        			width: 1056px;   
        		}
    		}
            
            /* Clearfix */
            .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
            .clearfix:after { clear: both; }
            .clearfix { zoom: 1; }
            
            /* Remove border on linked images in IE */
            a img {
    			border: 0;   
            }
            
            {CustomCSS}
            </style>
            
            <script type="text/javascript">
                var impulse = {{block:IfInfiniteScrolling}infScroll: true,{/block:IfInfiniteScrolling}{block:IfNotInfiniteScrolling}infScroll: false,{/block:IfNotInfiniteScrolling} {block:IndexPage}indexPage: true{/block:IndexPage}{block:PermalinkPage}indexPage: false{/block:PermalinkPage}, prefill: false};
            </script>
        </head>
        <body class="{block:IndexPage}index-page{/block:IndexPage}{block:PermalinkPage}permalink-page{/block:PermalinkPage} font-{select:Post Body Font} layout-3col background-{select:Background Image Style}">
        
            {block:IfShowSearchBox}
            <div id="sidebar" class="sidebar">
                
                
                <form action="/search" method="get" id="search-form">
        			<input class="search" type="text" placeholder="{lang:Search}" name="q" value="{SearchQuery}" />
    			</form>
    			
    	    </div>
        
            <div id="openMenu"><i class="fa fa-lg fa-search"></i></div>
            {/block:IfShowSearchBox}
            
            {block:IndexPage}
            <div id="backToTop" class="back-to-top" title="Back to top">
                <i class="fa fa-2x fa-angle-up"></i>
            </div>
            {/block:IndexPage}
            
            <header class="header clearfix">
            
            <div class="header-content">
                {block:ShowAvatar}
                <a href="/">
                    <img class="avatar-header avatar-{AvatarShape}" src="{PortraitURL-96}" />
                </a>
                {/block:ShowAvatar}
                
                {block:ShowTitle}
    			<h1 class="blog-title">{Title}</h1>
    			{/block:ShowTitle}
                
                {block:ShowDescription}
                {block:Description}
                    <div class="blog-description">{Description}</div>
                {/block:Description}
                {/block:ShowDescription}
                </div>
    
    
            </header>
            
            <div class="header-navbar">
            <ul class="header-links">
                <a class="header-link" href="/"><li><i class="fa fa-fw fa-home"></i> {lang:Home}</li></a>
                {block:IfShowArchiveLink}<a class="header-link" href="/archive"><li><i class="fa fa-fw fa-calendar-o"></i> {lang:Archive}</li></a>{/block:IfShowArchiveLink}
                {block:IfShowRandomLink}<a class="header-link" href="/random"><li><i class="fa fa-fw fa-question-circle"></i> {lang:Random}</li></a>{/block:IfShowRandomLink}
                {block:AskEnabled}<a class="header-link" href="/ask"><li><i class="fa fa-fw fa-envelope-o"></i> {AskLabel}</li></a>{/block:AskEnabled}
               
                {block:HasPages}
                    {block:Pages}<a class="header-link" href="{URL}"><li><i class="fa fa-fw fa-file-o"></i> {Label}</li></a>{/block:Pages}
                {/block:HasPages}
              
            </ul>
            </div>
            
            <div id="wrapper" class="wrapper">
            
            <div class="main">
            
            {block:SearchPage}
                {block:SearchResults}
    			<div class="search-info">
    			    <div class="post-content">
    				    <h2>{lang:SearchResultCount results for SearchQuery 2}</h2>
    				</div>
    			</div>
                {/block:SearchResults}
                
                {block:NoSearchResults}
    			<div class="search-info">
    			    <div class="post-content">
    				    <h2>{lang:No search results for SearchQuery 2}</h2>
    				</div>
    			</div>
                {/block:NoSearchResults}
            {/block:SearchPage}
                
            {block:TagPage}
                <div class="search-info">
                    <div class="post-content">
    				    <h2>#{Tag}</h2>
    				</div>
                </div>
            {/block:TagPage}
    
    
            <div id="adorablethemesdotcom"{block:IndexPage} class="posts-hidden"{/block:IndexPage}>
            
                {block:Posts}
    				<article id="post-{PostID}" class="post {PostType}{block:PermalinkPage} {block:Date}not-{/block:Date}page{/block:PermalinkPage}">
    								
                    {block:Text}
                        <div class="post-content">
    					{block:Title}<h2>{Title}</h2><hr>{/block:Title}
    
    
    					{Body}
    					</div>
                    {/block:Text}
                    
                    
                    {block:Answer}
                        <div class="post-content">
    					<p><img class="asker-avatar" src="{AskerPortraitURL-16}" /> <b>{Asker}:</b></p><p>{Question}</p>
    					
    					<hr>
    					
    					{block:Answerer}
        					<p><img class="asker-avatar" src="{AnswererPortraitURL-16}" /> <b>{Answerer}:</b></p>
        					
        					{Answer}
        					
        					<hr>
    					{/block:Answerer}
    
    
    					{Replies}
    					</div>
                    {/block:Answer}
                    
    
    
                    {block:Photo}
                        <figure class="photo-content" width="{PhotoWidth-250}" height="{PhotoHeight-250}">
    					{block:PermalinkPage}
                        {LinkOpenTag}<img src="{PhotoURL-500}" data-retina="{PhotoURL-1280}" alt="{PhotoAlt}" />{LinkCloseTag}
                        {/block:PermalinkPage}
    					{block:IndexPage}<a target="_blank" href="{Permalink}"><img src="{PhotoURL-250}" data-retina="{PhotoURL-500}" alt="{PhotoAlt}" /></a>{/block:IndexPage}
    					</figure>
    					
    					{block:IfIndexPhotoCaptions}
    					{block:IndexPage}
                        {block:Caption}
    						<div class="post-content"><figcaption>{Caption}</figcaption></div>
    					{/block:Caption}
                        {/block:IndexPage}
                        {/block:IfIndexPhotoCaptions}
    
    
    					{block:PermalinkPage}
                        {block:Caption}
    						<div class="post-content"><figcaption>{Caption}</figcaption></div>
    					{/block:Caption}
                        {/block:PermalinkPage}
                    {/block:Photo}
                    
    
    
                    {block:Photoset}
    					{block:IndexPage}
    					{block:IfCollapsePhotosets}
    					<div class="photoset-note"><i class="fa fa-picture-o"></i> Photoset ({PhotoCount} images)</div>
    					<figure class="photoset-content" width="{PhotoWidth-250}" height="{PhotoHeight-250}">
    					    
    					    {block:Photos}<a target="_blank" href="{Permalink}"><img src="{PhotoURL-250}" data-retina="{PhotoURL-500}" alt="{PhotoAlt}" /></a>{/block:Photos}
    					    
    					</figure>
    					{/block:IfCollapsePhotosets}
    					{block:IfNotCollapsePhotosets}
    					<figure class="photoset-content">{Photoset-250}</figure>
    					{/block:IfNotCollapsePhotosets}
    					{/block:IndexPage}
    					
    					{block:IfIndexPhotoCaptions}
    					{block:IndexPage}
                        {block:Caption}
    						<div class="post-content"><figcaption>{Caption}</figcaption></div>
    					{/block:Caption}
                        {/block:IndexPage}
                        {/block:IfIndexPhotoCaptions}
    
    
    					{block:PermalinkPage}
    						<div class="post-content">
    						<figure class="photoset-content">{Photoset}</figure>
    						{block:Caption}<figcaption>{Caption}</figcaption>{/block:Caption}
    						</div>
    					{/block:PermalinkPage}
                    {/block:Photoset}
                    
    
    
                    {block:Quote}
    					<div class="post-content"><h2 class="quote-text">"{Quote}"</h2>
    
    
    					{block:Source}
    						<p style="text-align: right">&mdash; {Source}</p>
    					{/block:Source}
    					</div>
                    {/block:Quote}
                    
    
    
                    {block:Link}
                        <div class="post-content">
    					<h3><a href="{URL}" class="link-post-link"{block:Host}title="{Host}"{/block:Host} {Target}>{Name} &raquo;</a></h3>
    
    
    					{block:Description}<hr>{Description}{/block:Description}
    					</div>
                    {/block:Link}
                    
    
    
                    {block:Chat}
    					<div class="post-content">
    					{block:Title}<h2>{Title}</h2><hr>{/block:Title}
    					<ul class="chat">
    						{block:Lines}
    							<li class="{Alt} user_{UserNumber}">
    								{block:Label}
    									<span class="chat-label">{Label}</span>
    								{/block:Label}
    
    
    								<span class="chat-line">{Line}</span>
    							</li>
    						{/block:Lines}
    					</ul>
    					</div>
                    {/block:Chat}
                    
    
    
                    {block:Video}
                        <figure class="video-content">
    					{block:IndexPage}
    					    {VideoEmbed-250}
    					{/block:IndexPage}
    					{block:PermalinkPage}{VideoEmbed-500}{/block:PermalinkPage}
    					</figure>
    					
    					{block:IfIndexVideoCaptions}
    					{block:IndexPage}
                        {block:Caption}
    						<div class="post-content"><figcaption>{Caption}</figcaption></div>
    					{/block:Caption}
                        {/block:IndexPage}
                        {/block:IfIndexVideoCaptions}
    
    
                        {block:PermalinkPage}
    					{block:Caption}
    						<div class="post-content"><figcaption>{Caption}</figcaption></div>
    					{/block:Caption}
    					{/block:PermalinkPage}
                    {/block:Video}
                    
    
    
                    {block:Audio}
                        <div class="post-content">
                        <figure class="audio-content">
                        {AudioEmbed}
                        </figure>
                        
    					{block:Caption}
    						<figcaption>{Caption}</figcaption>
    					{/block:Caption}
    					</div>
                    {/block:Audio}
                    
                    {block:PermalinkPagination}
                    {block:HasTags}
                    <div class="post-meta post-tags">
                        {block:Tags}
                            <a class="tag" href="{TagURL}">{Tag}</a>&nbsp;&nbsp;
                        {/block:Tags}
                    </div>
                    {/block:HasTags}
                    {/block:PermalinkPagination}
                    
                    {block:IndexPage}
                    <div class="post-index-meta">
                        {block:Date}<a href="{Permalink}">{NoteCount}</a>{/block:Date}
                        
                        <a title="Reblog" target="_blank" style="float:right; text-align: right" class="reblog-button" href="{ReblogURL}"><i class="fa fa-retweet"></i></a>
                    </div>
                    {block:Photo}
                    <div class="photo-hover">
                        <div class="inside">
                            <a href="{Permalink}">{NoteCount}&nbsp;&nbsp;&nbsp;<i class="fa fa-link"></i></a>&nbsp;&nbsp;&nbsp;<a href="{ReblogURL}"><i class="fa fa-retweet"></i></a>
                        </div>
                    </div>
                    {/block:Photo}
                    {block:Photoset}
                    <div class="photo-hover">
                        <div class="inside">
                            <a href="{Permalink}">{NoteCount}&nbsp;&nbsp;&nbsp;<i class="fa fa-link"></i></a>&nbsp;&nbsp;&nbsp;<a href="{ReblogURL}"><i class="fa fa-retweet"></i></a>
                        </div>
                    </div>
                    {/block:Photoset}
                    {/block:IndexPage}
                    
                    </article>
                    
                    {block:PermalinkPage}
                    {block:Date}
                    
                    <article class="post sidecar not-page">
                    
                    <div class="post-meta post-share">
                        <a href="{ReblogURL}" class="share-item link-tumblr-reblog" target="_blank"><i class="fa fa-retweet"></i> Reblog</a> &bull; <a href="http://facebook.com/sharer.php?u={URLEncodedPermalink}&amp;t={URLEncodedTitle}" class="share-item link-facebook-share" target="_blank"><i class="fa fa-facebook"></i> Share</a> &bull; <a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" class="share-item link-twitter-tweet" target="_blank"><i class="fa fa-twitter"></i> Tweet</a>
                        <span style="float:right; text-align: right">
                            <span class="postnotes">{NoteCountWithLabel}</span>{/block:PostNotes}
                        </span>
                    </div>
    				
                    <div class="post-meta">
                    {block:IfUseRealDates}
    				    <span class="timeago" title="{12Hour}:{Minutes} {AmPm}, {DayOfWeek}, {Month} {DayOfMonth}, {Year}">{ShortMonth} {DayOfMonth} {Year}</span>
                    {/block:IfUseRealDates}
                    {block:IfNotUseRealDates}
    				    <span class="timeago">{TimeAgo}</span>
                    {/block:IfNotUseRealDates}
    				
    				<span style="float:right; text-align: right">
    				{block:ContentSource}{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
    				{block:RebloggedFrom}{block:ContentSource} &bull; {/block:ContentSource}{lang:Via}: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
    				</span>
    				
                    </div>
                    
                    {block:IfDisqusShortname}
                    <div class="post-meta post-comments">
                        <div class="post-content">
                        <div id="disqus_thread"></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>
                        </div>
                    </div>
                    {/block:IfDisqusShortname}
                    
                    {block:PostNotes}
                    <div class="post-meta post-notes-list">
        				{PostNotes-16}
                    </div>
    				{/block:PostNotes}
                    </article>
                    {/block:Date}
                    {/block:PermalinkPage}
    				
                {/block:Posts}
            </div>
          </div>
        </div>
        <div class="pagination">
    		{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}" id="previous">&larr; {lang:Previous}</a>{/block:PreviousPage}
    		<span class="page-info">{lang:Page CurrentPage of TotalPages}</span>
    		{block:NextPage}<a href="{NextPage}" id="next">{lang:Next} &rarr;</a>{/block:NextPage}{/block:Pagination}
    	</div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    	<script src="//static.tumblr.com/anzluor/z2tn74e8h/masonry.pkgd.min.js"></script>
    	{block:IfInfiniteScrolling}<script src="//static.tumblr.com/anzluor/ycPn74dop/jquery.infinitescroll.min.js"></script>{/block:IfInfiniteScrolling}
    	<script src="//static.tumblr.com/anzluor/z2tn74e8h/masonry.pkgd.min.js"></script>
        <script src="//static.tumblr.com/anzluor/lmen89y2n/impulse.min.js"></script>
            {block:IfGoogleAnalyticsID}
                <script>
                  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                
                  ga('create', '{text:Google Analytics ID}', 'tumblr.com');
                  ga('send', 'pageview');
                
                </script>
            {/block:IfGoogleAnalyticsID}
            {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('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
                    })();
                    //]]>
                </script>
            {/block:IfDisqusShortname}
        </body>
    </html>

Ähnliche Themen

  1. Frage zu Adwords und Landing Page
    Von nadjak im Forum Promotion - SEO - Suchmaschine (Google & Co) – Mitarbeiter & Linkpartnersuche
    Antworten: 2
    Letzter Beitrag: 06.05.2013, 10:41
  2. buttons verändern sich farblich durch maushinüberfahren
    Von Skjaldulf im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 29.06.2009, 20:51
  3. Hilfe bei Verlinkung durch Anker auf sehr breiten Site
    Von Julian23 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 01.11.2007, 19:22
  4. Weiße Linien durch die Page
    Von Commander im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 28.04.2007, 12:15
  5. "Weiter" nur durch Button nicht durch "Enter&
    Von OJMD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 27.02.2007, 17:16

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •