Первый элемент в карусели не применяет высоту 100% при загрузке? - PullRequest
Новая
       11

Первый элемент в карусели не применяет высоту 100% при загрузке?

1 голос
/ 29 августа 2011

Если вы посмотрите здесь , то при загрузке страницы вы увидите, что вверху находится DIV. Он называется «content» с «content_container», обернутым вокруг него и, наконец, «page» вокруг него. Если щелкнуть стрелку внизу влево или вправо, вы увидите другие DIV с такими же тегами, но они правильно выровнены по вертикали. Самое близкое, что мне удалось исправить - это когда я осмотрел первый элемент карусели (тот, что вверху) и увидел, что он действительно был высотой: 100%; как и должно быть. Однако, если вы идете направо или налево и осмотрите другие DIV, они также имеют высоту: 100%; Когда снимаешь высоту: 100%; DIV движется к вершине. Единственная идея, которая у меня есть, заключается в том, что, возможно, другой DIV вокруг страницы не позволяет "странице" стать высотой: 100% при первой загрузке страницы. Кроме этого я на 100% потерян.

Вы НЕ МОЖЕТЕ смотреть в исходном коде, потому что с темами Tumblr вы создаете код отдельно для каждого поста, поэтому, если вы посмотрите на исходный код с вашей точки зрения, код не такой, как он выглядит на моем конце. Весь код темы приведен ниже: P.S: текстовые и цитатные сообщения являются единственными постами, которые выровнены по вертикали, поэтому, пожалуйста, посмотрите на них Я публикую весь код, если я допустил ошибку, препятствующую росту: 100%; с погрузки. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<!-- Created by roseanneconner, powered by Tumblr. -->

<title>Earl Larson</title>

<link rel="stylesheet" href="http://static.tumblr.com/ux4v5bf/Btelpy2ff/fortheweb.css"    
type="text/css" charset="utf-8" /> 

<link rel="stylesheet" type="text/css" media="screen"  
href="http://jquery.malsup.com/cycle/cycle.css" />

<style type="text/css">

html {
height: 100%;
}

body {
height:100%;
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif;
background:#FFF url('') no-repeat center center fixed;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}

.holder {
height:100%;
margin:auto;
}

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

td a {
margin: 5px;
}

a {
text-decoration:none;
}

#page{height:100%;display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/ 

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

#page{height:100%;width:465px; font-size:13px; line-height:15px;}
#content_container{display:table-cell;vertical-align: middle;}
#content{ border:1px solid #666; padding:10px; padding-top:0px;}

#page li {
list-style:none;
border:1px solid #000;
padding:5px;
padding-top:3px;
padding-left:6px;
margin-bottom:-1px;
}

#page a {
display:inline-table;
height:19px;
margin-bottom:-3px;
}

#page a:hover {
border-bottom:1px solid #000;
height:18px;
}

#page h1 {
padding-top:6px;
padding-bottom:3px;
}

.photo {
position:relative;
overflow: hidden;
width: 620px;
height: 451px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#photo {
max-width:550px;
max-height:510px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.caption {
position:absolute;
right:12px;
margin-top:20px;
margin-bottom:-10px;
background:#9dc6e8 url('http://static.tumblr.com/ux4v5bf/6frlk3kr0/top.png') no-repeat;
padding:3px;
padding-top:1px;
padding-right:10px;
padding-left:7px;
padding-bottom:6px;
width:150px;
text-align:left;
font-size:11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:    0 1px 4px rgba(0,0,0,0.6);
box-shadow:         0 1px 4px rgba(0,0,0,0.6);
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

#bottom {
margin-top:6px;
margin-bottom:-20px;
}

p {margin: 5px 0 0 0;}

h1, h1, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
font-size:20px;
line-height:20px;
}

.source {
font-size:40px;
line-height:40px;
position:absolute;
bottom:0;
right:0;
margin-bottom:40px;
margin-right:11px;
}

blockquote {
margin: 5px 0 0 0;
padding: 0 0 0 8px;
border-left: 2px solid #676d72;
}

blockquote img {
max-height: 100px!important;
max-width: 50px!important;
}

.caption {
position:absolute;
}

#curveLeft {
position:absolute;
margin-top:-3px;
margin-left:-1px;
margin-bottom:-9px;
}

#curveRight {
margin-top:-3px;
margin-left:-9px;
margin-bottom:-9px;
}

#heart {
margin-bottom:-4px;
padding-left:3px;
}

.date {
position:absolute;
bottom:0;
right:0;
padding:11px;
padding-top:10px;
padding-right:10px;
width:100%;
}

.info {
float:right;
font-size:11px;
font-weight:bold;
}

#clock {
margin-bottom:-4px;
padding-left:3px;
}

.nav {
position:absolute;
bottom:-4px;
left:9px;
z-index:5;
}

.next2 {
z-index:2;
margin-left:20px;
}

.prev2 {
z-index:2;
}

.next2 img, .prev2 img {

}

.tags {
position:absolute;
bottom:6px;
margin-left:100px;
font-size:13px;
}

.tags a {
color:#000;
}

.tag {
display:inline-block;
padding:4px;
padding-left:9px;
padding-right:9px;
padding-top:0px;
border:2px solid #000;
margin:0 0 0 9px;
}

.tag:hover {
background:#000;
}

.tag a:hover {
color:#FFF;
}

.audio {
position:absolute;
left:30%;
top:20%;
color:#FFF;
}

#albumArt {
position:absolute;
}

#albumNone {
position:absolute;
}

#albumArt img {
display:block;
width:350px;
height:350px;
}

#albumArtBack img {
display:block;
width:350px;
height:350px;
margin-top:-1px;
}

#albumArtBack {
position:absolute;
margin-left:-8px;
margin-top:0px;
z-index:-1;
}

#albumArtBack img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
opacity:0.2;filter:alpha(opacity=20)
}

.audioHolder {
position:absolute;
width:100%;
height:390px;
}

.audioBox {
position:absolute;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
font-size:14px;
bottom:169px;
margin-left:-31px;
}

@-moz-document url-prefix() {
.audioBox {
bottom:169px;
margin-left:-31px;
}

#song {
margin-left:30px;
}
}

.boxify {
margin:0 0 10px 0;
float:left;
bottom:0;
width:329px;
overflow:hidden;
}

.box {
display:inline-block;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat; 
padding:8px;
padding-left:7px;
padding-right:8px;
padding-top:2px;
}

#song {
margin-left:30px;
}

.playerHolder {
height:11px;
width:5px;
overflow:hidden;
bottom:51px;
margin-left:115px;
float:left;
position:absolute;
z-index:3;
}

.player {
margin-top:-8px;
margin-left:-13px;
overflow:hidden;
}

#audioBubble {
position:absolute;
width:25px;
height:25px;
left:0px;
margin-top:10px;
z-index:5;
padding-bottom:1px;
padding-left:1px;
background:url('http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png') repeat;
}

#nav-list-example {
margin-left:60px;
list-style:none;
margin-top:0px;
}

#nav-list-example li {
width: 350px;
height: 350px;
float: left;
position: relative;
}

#nav-list-example li div {
width: 345px;
height: 345px;
}

#nav-list-example li div.back {
text-align:justify;
width:334px;
height:341px;
padding:8px;
padding-top:1px;
background:#EEE;
z-index:2;
}

</style>

<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">    
</script>
<script type="text/javascript" 
src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"> 
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({ 
fx: 'scrollRight',
speed: 400,
timeout: 0,
next: '#next2',
prev: '#prev2',
easing: 'easeinout'
});

function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log(  $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
    .append('<h3>' + this.alt + '</h3>');
}
</script>

<script type="text/javascript" src="http://www.zachstronaut.com/js/base.js"></script> 
<script type="text/javascript" src="http://www.zachstronaut.com/js/rotate3di.js"> 
</script> 

<script type="text/javascript" language="javascript" charset="utf-8"> 
$(document).ready(function () {
$('#nav-list-example li div.back').hide().css('left', 0);

function mySideChange(front) {
    if (front) {
        $(this).parent().find('div.front').show();
        $(this).parent().find('div.back').hide();

    } else {
        $(this).parent().find('div.front').hide();
        $(this).parent().find('div.back').show();
    }
}

$('#nav-list-example li').hover(
    function () {
        $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise',    
sideChange: mySideChange});
    },
    function () {
        $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
    }
);
});
</script> 


</head> 

 <body>

<div class="nav">
<a class="prev2" id="prev2" href="#"><img    
src="http://static.tumblr.com/ux4v5bf/Uzmlqczfp/left.png"></a>
<a class="next2" id="next2" href="#"><img  
src="http://static.tumblr.com/ux4v5bf/wfqlqczes/right.png"></a>
</div>


<div class="holder">
    <div id="s7" style="height:100%;">

        {block:Posts}
        <div id="posts">
            {block:Text} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {block:Title}<h1>{Title}</h1>{/block:Title}
                    {Body}
    </div>
</div>
</div>
            {/block:Text}

            {block:Photo}
                    <div class="photo">
                    {block:Caption}
                    <div class="caption">
                    {Caption}
                    <img id="bottom"  
src="http://static.tumblr.com/ux4v5bf/0eNlk3m67/bottom.png">
                    </div>
                    {/block:Caption}
                    <img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
                    </div>
            {/block:Photo}

            {block:Quote} 
<div id="page">
<div id="content_container">
    <div id="content">      
                    {Quote}
                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
    </div>
</div>
</div>
            {/block:Quote}

            {block:Link}
                    <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
            {/block:Link}

            {block:Chat}

                    {block:Title}
                        <h1><a href="{Permalink}">{Title}</a></h1>
                    {/block:Title}

                        {block:Lines}
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}

                                {Line}
                        {/block:Lines}
            {/block:Chat}

            {block:Video}
                    <div class="video">{Video-500}</div>

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
            {/block:Video}

            {block:Audio} <div class="audio">
<div class="audioHolder">
<div class="audioBox">

<div class="boxify">
<img id="audioBubble" src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">
</div>

<div class="boxify">
{block:TrackName}
<span class="box" id="song">{TrackName}</span>
{/block:TrackName}
</div>

<div class="boxify">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify">
{block:ExternalAudio}
<span class="box">
<a href="{ExternalAudioURL}">Download</a>
</span>
{/block:ExternalAudio}
</div>

</div>

                    <div class="playerHolder"><div class="player">{AudioPlayerBlack}   
</div> 

</div>


</div>

<ul id="nav-list-example"> 
<li> 
    <div class="front">
<div id="albumNone"><img src="http://static.tumblr.com/ctwb3zj/0Cflqdl2m/poison.png">   
</div>
            {block:AlbumArt}<div id="albumArt"><img src="{AlbumArtURL}"></div>   
{/block:AlbumArt}
    </div> 
    <div class="back">
            {block:AlbumArt}<div id="albumArtBack"><img src="{AlbumArtURL}"></div>  
{/block:AlbumArt}
            <p>{block:Caption}{Caption}{/block:Caption}</p></div> 
</li> 
</ul> 
</div>
            {/block:Audio}

<div class="date">

<div class="tags">
{block:HasTags}{block:Tags}<span class="tag"><a href="{TagURL}">{Tag}</a></span>   
{/block:Tags}{/block:HasTags}
</div>

<div class="info">
{block:NoteCount}{NoteCount} <img id="heart"    
src="http://static.tumblr.com/ux4v5bf/gWmlq420u/heart.png">{/block:NoteCount}
&nbsp;&nbsp;&nbsp;
{block:Date}{MonthNumber} {DayOfMonth} {ShortYear} <img id="clock"    
src="http://static.tumblr.com/ux4v5bf/K5Xlqb2h4/clock.png">{/block:Date}</div> 
</div>  

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

</div>   

 </body>

<script type="text/javascript">_popupControl();</script>
 </html>

1 Ответ

1 голос
/ 29 августа 2011

Нашли это!

Там, где вы установили 

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
}

#s7 #posts {
width:100%; 
min-height:100%; 
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}

, замените его на: 

#s7 {
width:100%;
height:100%:
margin:auto;
overflow: hidden;
z-index:1;
color: #000; 
font-size: 13px; 
text-align:left; 
line-height:16px;
margin:auto;
}
#posts{height:100%;margin:0 auto;width:100%; }

И все готово.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...