Beiträge von ZeroTricks

ZeroTricks

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):

HTML

<!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>

Alles anzeigen

ZeroTricks

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:

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

ZeroTricks

Hallo zusammen,

ich hoffe mal, dass ich das richtige Unterforum erwischt habe, da mein Anliegen mehrere Themen abdeckt. Es geht um folgendes:
Ich muss vom Studium aus eine Website erstellen, die ich dann später auch selbst nutzen möchte. Es handelt sich um ein Wahlfach, ich bin also kein "studierter" Programmierer in dem Sinne - habe lediglich für eine Soundclick-Seite mal ein bisschen im HTML-CSS-Bereich rumgepfuscht.
Ich möchte meine Website über Tumblr laufen lassen, da mir die Verzahnung mit anderen Social Networks gut gefällt. Bei Verwendung von Tumblr (oder ähnlichen Hostern) muss das verwendete Theme allerdings bearbeitet werden.

Anforderungen an die Website sind:
- Format HTML & CSS
- Index + 4 navigierbare Unterseiten
- mit CSS formatierte Texte
- Bilder für das Web optimierte JPGs mit Alt-Tags
- eine beliebige Animation (z.B. in der Navigation)

Das habe ich grob vor:
- die ganze Seite soll im Kacheldesign gehalten sein (4 Unterseiten als Kacheln auf der Indexseite, weitere Unterseiten dann jeweils auch über Kacheln aufrufbar)
- hier möchte ich direkt auch die Animation als Rollover für die einzelnen Kacheln einbauen

Meine Frage:
- Könnt ihr mir ein möglichst simples Tumblr-Template im Kacheldesign empfehlen, auf welchem ich aufbauen kann?
- hat eventuell schon jemand Erfahrung mit dieser HTML/CSS-Geschichte bei Tumblr und kann mir sagen, worauf man da achten sollte (z.B. wie funktioniert die Verzahnung zwischen regulärerer Website-Navigation und der Blog-Funktion)?

Ich bedanke mich schon mal für eure Antworten!

Beiträge von ZeroTricks

Landing page - Verlinkung durch Buttons

Landing page - Verlinkung durch Buttons

Website mit Tumblr erstellen