Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jack Johnny

Problema com Layout de 3 Colunas

Por , em Desenvolvimento frontend

Recommended Posts

Jack Johnny    0

Jack Johnny
Postado

Bem, eu possuo uma conta no Tumblr e estou desenvolvendo um theme que possui layout de 3 colunas, porém os posts ficam com um espaço enorme em branco quando o post da outra coluna é maior. Por exemplo, vamos supor que na coluna 1 tenha 5 posts pequenos e na coluna 2 tenha apenas 1 post, mas este é grande. Então vai aparecer o primeiro texto da coluna 1 e o segundo só vai aparecer quando acabar o primeiro post da coluna 2, deixando um espaço em branco enorme na coluna 1. Alguém sabe como resolver?

 

Screenshot:

28w1jmb.png

Layout:

 

<html>
<head>
    <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    
    <meta name="if:Mostrar Titulo" content="1">
    
    <meta name="text:Titulo Link 1" content=""/>
    <meta name="text:URL Link 1" content=""/>
    <meta name="text:Titulo Link 2" content=""/>
    <meta name="text:URL Link 2" content=""/>
    <meta name="text:Titulo Link 3" content=""/>
    <meta name="text:URL Link 3" content=""/>
    <meta name="text:Titulo Link 4" content=""/>
    <meta name="text:URL Link 4" content=""/>
    <meta name="text:Titulo Link 5" content=""/>
    <meta name="text:URL Link 5" content=""/>
    
    <meta name="image:URL da Capa" content="http://static.tumblr.com/3zzflna/aZSm9emd0/calmdown.jpg"/>

    <meta name="color:Cor dos Links" content="#000000"/>
    <meta name="color:Cor dos Links on Hover" content="#AAAAAA"/>
    <meta name="color:Cor do Background" content="#EEEEEE"/>
    <meta name="color:Cor da Sombra do Title" content="#AAAAAA"/>
    <meta name="color:Cor da Fonte do Perfil" content="#000000"/>
    <meta name="color:Cor dos Links do Perfil" content="#FFFFFF"/>
    <meta name="color:Background do Perfil" content="#FFFFFF"/>
    <meta name="color:Bordas" content="#87CEFA"/>
    <meta name="color:Background dos Posts" content="#FFFFFF"/>
    
    <link href='http://fonts.googleapis.com/css?family=Amethysta' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Capriola' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'>
    <style type="text/css">
        h1 {
            font-family:Capriola, Arial;
            font-size:18px;
            text-align:center;
            text-shadow: 4px 4px 4px {color:Cor da Sombra do Title};
        }
        h2 {
            font-family:Quantico;
            font-size:11px;
        }
        h3 {
            font-family:Quantico, Arial;
            font-size:14px;
            font-weight:100;
        }
        a {
            font-family:Quantico;
            font-size:10px;
            text-decoration:none;
            color:{color:Cor dos Links};
        }
        a:hover {
            color:{color:Cor dos Links on Hover};   
        }
        body {
            font-family:Quantico, Verdana;
            font-size:12px;
            background:{color:Cor do Background};
        }
        img {
            -webkit-transition-duration:.50s;
            border:none;
        }
        img:hover {
            opacity: .7;
        }
        #profile {
            padding:2px;
            width:150px;
            color:{color:Cor da Fonte do Perfil};
            background:{color:Background do Perfil};
            display:block;
            position:fixed;
            top:30%;
        }
        #posts {
            background:{color:Background dos Posts};
            margin:10px;
            margin-left:150px;
        }
        .posts {
            width:300px;
            margin:10px;
            padding:10px;
            background:url(http://static.tumblr.com/3zzflna/qSIm9doh5/background-posts.jpg);
            border-left:15px solid {color:Bordas};
            float:left;
        }
        .post-text {
            font-size:14px;
        }
        .date, .date a {
            font-family:Source Sans Pro, Arial;
            font-size:12px;
            color:#555555;
            padding:3px;
        }
        .tags {
            font-family:Source Sans Pro;
            font-size:11px;
        }
        .links {
            color:{color:Cor dos Links do Perfil};   
        }
        .label {
            font-weight:bold;
            font-size:10px;
            font-family:Verdana;
        }
        

        ::-webkit-scrollbar{width:8px;height:6px;}
        
        ::-webkit-scrollbar-button:start:decrement
        
        ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
        
        ::-webkit-scrollbar-track-piece{background-color:#FFFFFF;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
        
        ::-webkit-scrollbar-thumb:vertical{height:50px; background-color: #000;-webkit-border-radius:px;}
        
        ::-webkit-scrollbar-thumb:horizontal{width:50px; background-color: {color:scrollbar};-webkit-border-radius:px;}

    </style>
</head>
<body>

<br /><br />
<div id="profile">
    {block:IfMostrarTitulo}
        <h1>{Title}</h1>
    {/block:IfMostrarTitulo}
    <center>
    <a href="/" class="links">Início</a>
    {block:AskEnabled}
        <a href="/ask" class="links">{AskLabel}</a>
    {/block:AskEnabled}
    {block:SubmissionsEnabled}
        <a href="/submit" class="links">{SubmitLabel}</a>
    {/block:SubmissionsEnabled}
    </center>
    <img src="{PortraitURL-128}" style="border:10px solid #FFFFFF;" />
    <center>
    {block:IfTituloLink1}
        {block:IfURLLink1}
            <a href="{text:URL Link 1}" class="links" target="_blank">{text:Titulo Link 1}</a>
        {/block:IfURLLink1}
    {/block:IfTituloLink1}
    {block:IfTituloLink2}
        {block:IfURLLink2}
            <a href="{text:URL Link 2}" class="links" target="_blank">{text:Titulo Link 2}</a>
        {/block:IfURLLink2}
    {/block:IfTituloLink2}
    {block:IfTituloLink3}
        {block:IfURLLink3}
            <a href="{text:URL Link 3}" class="links" target="_blank">{text:Titulo Link 3}</a>
        {/block:IfURLLink3}
    {/block:IfTituloLink3}
    {block:IfTituloLink4}
        {block:IfURLLink4}
            <a href="{text:URL Link 4}" class="links" target="_blank">{text:Titulo Link 4}</a>
        {/block:IfURLLink4}
    {/block:IfTituloLink4}
    {block:IfTituloLink5}
        {block:IfURLLink5}
            <a href="{text:URL Link 5}" class="links" target="_blank">{text:Titulo Link 5}</a>
        {/block:IfURLLink5}
    {/block:IfTituloLink5}
    <h2>{Description}</h2>
    </center>
    {block:Pagination}
        <center>
        {block:PreviousPage}
            <a href="{PreviousPage}" class="links" style="font-size:18px;">-</a>
        {/block:PreviousPage}
        {block:NextPage}
            <a href="{NextPage}" class="links" style="font-size:18px;">+</a>
        {/block:NextPage}
        </center>
    {/block:Pagination}
</div>
<div id="posts">

    {block:Posts}
    <div class="posts">
        {block:Text}
            <div class="post-text">
                <h3>{Title}</h3>
                {Body}
            </div>
        {/block:Text}

        {block:Photo}
            <div class="post-photo">
                {LinkOpenTag}
                    <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
                {LinkCloseTag}
                {block:HighRes}
                    <br />
                    <a href="{PhotoURL-HighRes}" target="_blank" id="highres">Ver em HQ</a>
                {/block:HighRes}
                {block:Caption}
                    <div class="caption">{Caption}</div>
                {/block:Caption}
            </div>
        {/block:Photo}

        {block:Photoset}
            <div class="post-photoset">
                {Photoset-400}
                {block:Caption}
                    <div class="caption">{Caption}</div>
                {/block:Caption}
            </div>
        {/block:Photoset}

        {block:Quote}
            <div class="post-quote">
                <h3>"{Quote}"</h3>
                {block:Source}
                    <h5>- {Source}</h5>
                {/block:Source}
            </div>
        {/block:Quote}

        {block:Link}
            <div class="post-link">
                <h4>{Name}</h4>
                {block:Description}
                    <div class="description">{Description}</div>
                    <a href="{URL}" class="link" {Target}>Clique para visitar este link</a>
                {/block:Description}
            </div>
        {/block:Link}

        {block:Chat}
            <div class="post-chat">
                {block:Title}
                    <h3>{Title}</h3>
                {/block:Title}
                    {block:Lines}
                        <p class="user_{UserNumber}">
                            {block:Label}
                                <span class="label">{Label}</span>
                            {/block:Label}
                            {Line}
                        </p>
                    {/block:Lines}
            </div>
        {/block:Chat}

        {block:Audio}
            <div class="post-audio">
                {AudioPlayerBlack}
                {block:Caption}
                    <div class="caption">{Caption}</div>
                    <div class="played">{PlayCountWithLabel}
                        {block:ExternalAudio} - <a href="{ExternalAudioURL}">Download</a>
                        {/block:ExternalAudio}
                        </div>
                {/block:Caption}
            </div>
        {/block:Audio}

        {block:Video}
            <div class="post-video">
                {Video-400}
                {block:Caption}
                    <div class="caption">{Caption}</div>
                    <div class="played">{PlayCountWithLabel}</div>
                {/block:Caption}
            </div>
        {/block:Video}

        {block:Answer}
            <div class="post-answer">
                <div class="asker">{Asker}: "{Question}"</div>
                <div class="answer">Eu: "{Answer}"</div>
            </div>
        {/block:Answer}

        {block:HasTags}
            <div class="tags">
            {block:Tags}
                <a href="{TagURL}" class="tags">#{Tag}</a>
            {/block:Tags}
            </div>
        {/block:HasTags}
        {block:Date}
            <div class="date">
                <a href="{Permalink}">{TimeAgo}</a>
                    {block:NoteCount}
                        . <a href="{Permalink}">{NoteCountWithLabel}</a>
                    {/block:NoteCount}
                    {block:IndexPage}
                        . <a href="{ReblogUrl}" target="_blank">Reblog</a>
                    {/block:IndexPage}
                    {block:RebloggedFrom}
                        . Source <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
                    {/block:RebloggedFrom}
                    {block:RebloggedFrom}
                        . Via <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a>
                    {/block:RebloggedFrom}
            </div>
        {/block:Date}
        </div>
    {/block:Posts}
</div>


</body>
</html>

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ner0    6

Ner0
Postado

Não posso afirmar o que está provocante essa reação em seu layout, porem posso tentar ajudar! Me passa apenas o HTML e o CSS das colunas

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito