2015-06-29 9 views
0

Я пытаюсь создать сгенерированный фид из API Tumblr. Моя страница тестирования здесь:Заполнение пустого пространства цветом фона?

http://www.nevermorestudiosonline.com/youtubetest

Не стесняйтесь игнорировать URL. Я сделал вещь на YouTube и не стал менять имя файла, когда начал тестировать Tumblr. Я не могу понять, что я делаю неправильно с цветом фона моих div. Я хочу, чтобы раздел «Отправлено» заполнялся вниз, а фон содержимого контента - справа. (Цвета просто заполнители на данный момент. Я планирую настроить, когда я получаю вещи на самом деле, на моей первой странице.)

Вот сценарий, который я выполняю, чтобы вытащить мои сообщения, а затем создать их в разных div.

jQuery.ajax({url: "http://api.tumblr.com/v2/blog/nevermorestudiosonline.tumblr.com/posts?api_key={api_key}&limit=5&jsonp=log_me", dataType: "jsonp"}); 

    function log_me(data){ 
     console.log(data); //So I can keep an eye on how things are coming in. Will be removed in live version. 

     for(i=0; (i < data.response.total_posts) && (i < 5); i++){ 

      if (data.response.posts[i].type == "text"){ 
       if (data.response.posts[i].hasOwnProperty('body_abstract')){ 
        $('<div class="blogpost"></div>').append(
         '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + 
         '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
         '<div class="postbody">' + data.response.posts[i].body_abstract + '<p>Read More...</p></div>' 
        ).appendTo('#blogblock'); 
       } 
       else { 
        $('<div class="blogpost"></div>').append(
         '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + 
         '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
         '<div class="postbody">' + data.response.posts[i].body + '</div>' 
        ).appendTo('#blogblock'); 
       }; 
      } 
      else if (data.response.posts[i].type == "photo"){ 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>Photos and Images</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody">' + data.response.posts[i].caption + '</div>' 
       ).appendTo('#blogblock'); 
      } 
      else if (data.response.posts[i].type == "quote"){ 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>Words of Wisdom</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody"><p>&ldquo;' + data.response.posts[i].text + '&rdquo; --' + data.response.posts[i].source + '</p></div>' 
       ).appendTo('#blogblock'); 
      } 
      else if (data.response.posts[i].type == "link"){ 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>Check this link out!</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody"><p>' + data.response.posts[i].url + '</p></div>' 
       ).appendTo('#blogblock'); 
      } 
      else if (data.response.posts[i].type == "chat"){ 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody"><p>' + data.response.posts[i].body + '</p></div>' 
       ).appendTo('#blogblock'); 
      } 
      else if (data.response.posts[i].type == "audio"){ 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>Listen to this!</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody">' + data.response.posts[i].player + '<p>' + data.response.posts[i].caption + '</p></div>' 
       ).appendTo('#blogblock'); 
      } 
      else if (data.response.posts[i].type == "video"){ 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>Watch this!</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody">' + data.response.posts[i].player[1].embed_code + '<p>' + data.response.posts[i].caption + '</p></div>' 
       ).appendTo('#blogblock'); 
      } 
      else { 
       $('<div class="blogpost"></div>').append(
        '<div class="blogtitle"><h2>This post type is broken!</h2></div>' + 
        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
        '<div class="postbody"><p>Please contact the webmaster to add support for displaying this post!</p></div>' 
       ).appendTo('#blogblock'); 
      }; 

     }; 
    }; 

Сценарий отлично работает. Я планирую оптимизировать после того, как я получу все, чтобы все работало правильно. Вот CSS, что я (в настоящее время) применение к стойкам:

.blogpost { 
    clear: both; 
} 

.blogtitle { 
    background: -webkit-linear-gradient(left, #444444 , black); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #444444 , black); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #444444 , black); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #444444 , black); /* Standard syntax */ 
    width: 968px; 
    height: 40px; 
} 

.blogtitle h2 { 
    padding: 5px; 
} 

.postedby { 
    text-align: center; 
    width: 100px; 
    float: left; 
    background: #888888; 
} 

.postedby p { 
    margin-top: 5px; 
} 

.postedby img { 
    margin-top: 5px; 
} 

.postbody { 
    float: left; 
    background: #bbbbbb; 
    padding: 5px; 

} 

.postbody p{ 
    margin: 5px 0px 5px 0px; 
} 

Я просто не уверен, что положить, где, чтобы получить цвет, чтобы заполнить пробелы. Это все, что я ищу, но я предоставил сценарий и так в случае необходимости корректировки конструкции каждого сообщения.

ответ

1

Что касается тела отправления, как только вы плаваете: оставите div, он перестанет занимать 100% от ширины и будет только шириной, чем контент. Вам нужно удалить поплавок на тело сообщения. Вы заметите, что когда вы это сделаете, он будет расширяться до ширины всей страницы. Вы должны поместить ВСЕ записи внутри контейнера div, чтобы это не происходило.

Что касается опубликованных, занимая всю высоту, можно сделать несколько вещей, но я расскажу о своем любимом.

Сначала мы установили мин-высоту для блога и постион: относительная (я объясню, что)

.blogpost { 
    clear: both; 
    position: relative; 
    min-height: 165px; 
} 

Затем нам нужно позиционировать вывешен быть абсолютным. Это ИМО - лучший способ сделать это на 100% от высоты постов. Мы сделали сообщение в блоге относительным положением, так что абсолютное позиционирование размещено по отношению к сообщению в блоге.

.postedby { 
    text-align: center; 
    width: 100px; 
    background: #888888; 
    bottom: 0; 
    top: 40px; 
    position: absolute; 
} 

Для этого необходимо, чтобы ваше тело сообщения имело запас, чтобы компенсировать абсолютную позицию размещенного раздела.

.postbody { 
    background: #bbbbbb; 
    padding: 5px; 
    margin-left: 100px; 
} 

Эти вещи должны сделать все хорошо выглядеть!

EDIT: Есть несколько других правок, если вы хотите, чтобы выглядеть следующим образом: http://i.imgur.com/c3JmkmM.png

Пожалуйста посоветуйте :)

+0

Спасибо большое! Это сработало отлично.^_ ^ –

Смежные вопросы