1. ホーム
  2. 質問と答え
  3. カルーセルの最初の要素は、装填時に高さ100％を適用していませんか？

カルーセルの最初の要素は、装填時に高さ100％を適用していませんか？

2011-08-29 10 views
1

hereと表示された場合は、ページを読み込むときに上部にDIVが表示されます。それは "content_container"を囲んだ "content"と呼ばれ、最後にはその周りに "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>

出典

2011-08-29 Earl Larson

答えて

1

これが見つかりました！あなたは

#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%; }

そして、あなたが行ってもいいです。

出典

2011-08-29 01:53:24 jQuerybeast

+0

o M G感謝君が私の日を過ごした！ –

 関連する問題

  • 関連する問題はありません^_^