0

Doc type:

<!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" xml:lang="en">

Body:

<body>
    <div class = "site-container span-24">
        <div class="page-header-heading heading-font span-24">
                    <h1>Heading</h1>
        </div>
        <div class="page-header span-24">

        </div>
        {% block content %}{% endblock content %}
        {% block footer %}{% endblock %}
    </div>

    {% block js %}
        <script src="/media/js/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script>
        <script src="/media/js/main.js" language="javascript" type="text/javascript"></script>
    {% endblock %}
</body>

It doesn't work even if I put margin: 0 auto to .site-container. Why?

.site-container doesn't have anything yet.

4

2 に答える 2

1

The outermost <div> should have a class of container, not site-container. Also, for the outermost <div>, you don't need to specify the number of columns. It is the whole number (24 by default) automatically.

See the the Blueprint website's demo page, for example:

<body>
    <div class="container">
    ....
    </div>
</body>

See these links for more about how to use Blueprint:

于 2011-01-29T01:13:56.940 に答える
0

Did you set a width on the div? It won't center otherwise since it would just expand to the width of the page.

于 2011-01-29T01:09:30.367 に答える