Tumblrのテーマ：ul、ilのスペースの問題？

私はTumblrのテーマを作成してCSSとHTMLの能力に取り組んでいますが、問題が発生しました。Tumblrのテーマ：ul、ilのスペースの問題？

http://cl.ly/3c0q3X3a0A193z1u2u2V - 写真ポスト

http://cl.ly/3V3R1W2h17100g371W2y - テキストポスト

あなたは上の写真からわかるように、テキストが正しい位置に常にある写真対他のコードせずに自分自身をダウンスクートているようです。

それは私が何をすべきか本当にわからないんだけど、この種のものに来る時はいつでも私はまだ始まったばかりでいます。ここで

は私のCSSとHTMLです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<ul class="header"> 
    <li><a href="/"><h1>{Title}</h1></a> 
    <li><a href="/about">About</a> 
    <li><a href="/message">Message</a> 
    <li><a href="/archive">Archive</a> 
</ul> 

<ul class="content"> 
    {block:Posts} 
    {block:Text} 
     <li class="text_post"> 
      {block:Title} 
        <h3><a href="{Permalink}">{Title}</a></h3> 
       {/block:Title} 
      {Body} 
     </li> 
    {/block:Text} 
    {block:Photo} 
     <li class="photo_post"> 
      <img src="{PhotoURL-500}"> 
     </li> 
    {/block:Photo} 
{/block:Posts} 
</ul> 

<style type="text/css"> 
body { 
    font-family:Georgia, times, serif; 
    font-size:0.7em;} 
h1 { 
    display:inline; 
    font-family:'Lucida Grande', Arial, sans-serif; 
    font-size:100%; 
    color:#00C462; } 
ul, ol { 
    list-style-type:none; 
    margin:0; 
    padding:0;} 
.header { 
    position:fixed; 
    margin-top:1em;} 
.header li { 
    float:left; 
    padding-left:1em;} 
.header li a, a:visited { 
    color:#000000; 
    font-family:'Lucida Grande', Arial, sans-serif; 
    text-decoration:none;} 
.header li a:hover { 
    color:#CCCCCC;} 
.content { 
    float:left; 
    overflow:auto; 
    margin-top:1.3em; 
    width:500px; 
    margin-left:23em;} 
</style>

また、あなたは、私は私のコードを向上させることができる方法上の任意の提案を持っている場合は、共有してください。

あなただけ.headerの幅が欠落しているようですが、私には見えます

出典

2012-04-26 user1357639

を使用するかにありますか？私は勘違いしているが、コードを検査したい。スクリーンショットだけではカットされません。 – kopischke

、あなたの助けをありがとう...

.content ulのは、その後、隣にきれいに浮かぶはずです。

コンテナの内容を計算するだけで済みます。例えば...

#container { 
    width:800px; for example 
    } 
.header { 
    width:300px; 
    float:left; 
    } 
.content { 
    width:500px; 
    float:left; 
    }

希望これは...

出典

2012-04-26 03:51:00 Palle

悲しいことに、それは違いをもたらさなかった... – user1357639

まず、明示的H3さんマージンとパディングが続いてマージン/パディングを追加するために適切なルールを書く0に設定できますh3の底に移動します。

第2に、&のコンテンツクラスを左側にそれぞれ&のように浮かべないのはなぜですか？ここに私が取り組んでいるテーマへのリンクがあります：El Aleph私は自分のブログのタイトルと内容と同様のことをしています。私はちょうど私のタイトルを左に、私のコンテンツを右に浮かべました。私のテーマのCSSを自由に見てください。

さらに、ブロックレベルのコンテンツにはなぜULを使用していますか？最良の方法は、ページへのリンクを提供することができ、コンテンツのブロックを分割するためのdiv要素を使用するかなど、ヘッダー、記事、などのHTML5要素

出典

2012-05-16 07:19:53

Tumblrのテーマ：ul、ilのスペースの問題？

答えて

関連する問題