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

首先，明确地将h3的边距和填充设置为 0。然后编写适当的规则以将边距/填充添加到 h3 的底部。

其次，你为什么不分别向左和向右浮动标题和内容类？这是我正在研究的主题的链接 - El Aleph。我正在对我的博客标题和内容做类似的事情。我刚刚将我的标题向左浮动，我的内容向右浮动。随意看看我的主题的 CSS。

另外，您为什么将 UL 用于块级内容？最好的方法是使用 DIV 来划分内容块或使用 HTML5 元素，例如标题、文章等。

于 2012-05-16T07:19:53.363 回答
0

It looks to me like you are just missing a width on .header...

The .content ul should then float up nicely next to it.

You just have to calculate the contents of your container. eg...

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

Hope this helps...

于 2012-04-26T03:51:00.910 回答