0

I am in the process of creating a Tumblr theme to work on my CSS and HTML abilities and I have run into a problem.

http://cl.ly/3c0q3X3a0A193z1u2u2V - photo post

http://cl.ly/3V3R1W2h17100g371W2y - text post

As you can see from the picture above, the text seems to scoot itself down without any other code versus the photo which is always in the correct location.

I am still in my infancy whenever it comes to this kind of thing so I'm not really sure what to do.

Here's my CSS and 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>

Also, if you have any suggestions on how I can improve my code, please share.

Thank you for your help,

4

2 に答える 2

0

.headerの幅が不足しているように見えます...

.content ulは、その隣にうまく浮かび上がるはずです。

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

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

お役に立てれば...

于 2012-04-26T03:51:00.910 に答える
0

まず、h3のマージンとパディングを明示的に0に設定します。次に、適切なルールを記述して、h3の下部にマージン/パディングを追加します。

次に、ヘッダークラ​​スとコンテンツクラスをそれぞれ左と右にフロートさせないのはなぜですか？これが私が取り組んでいるテーマへのリンクです-ElAleph。私は自分のブログのタイトルとコンテンツと同じようなことをしています。タイトルを左に、コンテンツを右にフロートしました。私のテーマのCSSを自由に見てください。

また、なぜブロックレベルのコンテンツにULを使用しているのですか？最良の方法は、コンテンツのブロックを分割するためにDIVを使用するか、ヘッダー、記事などのHTML5要素を使用することです。

于 2012-05-16T07:19:53.363 に答える