Как сделать так, чтобы это резюме работало? - PullRequest
Новая
       1

Как сделать так, чтобы это резюме работало?

0 голосов
/ 14 января 2012

Я делаю веб-сайт для друга-дизайнера, он умеет хорошо проектировать, но не знает, как кодировать сайт. И он слишком дешев для профессионала. : Р

Он хочет, чтобы резюме выглядело так:

Summary

И это должно быть центрировано в контейнере страницы (который имеет фиксированную ширину 800 пикселей).

Я думаю, что лучший / самый эффективный способ сделать это - таблица с отступами, например: 

<html>
<head>
    <style type="text/css">
        body    {background:#141318}
        td      {min-width:266px;padding-top:10px;font-style:italic}
        th      {font-size:14pt;font-family:sans-serif;text-align:left;color:#FFF}
        td div  {text-indent:20px;color:#999FAD}
        td div a{color:#FFF}
    </style>
</head>
<body>
    <table>
        <tr>
            <th>DESIGN</th>
            <th>MEDIA</th>
            <th>ART</th>
        </tr>
        <tr>
            <td><div>- 123</div><div>- <a href="#">456</a></div></td>
            <td><div>- 789</div><div>- <a href="#">012</a></div></td>
            <td><div>- <a href="#">345</a></div><div>- 678</div></td>
        </tr>
    </table>
</body>
</html>

Но я не слишком уверен, поскольку многие люди видят таблицу, которая используется для всего, что не является табличными данными, как плохая практика.

Итак, как лучше всего это сделать? Возможно три DIV рядом друг с другом, с фиксированной шириной и множеством элементов внутри них? (Контейнер страницы уже исправлен)

1 Ответ

3 голосов
/ 14 января 2012

Да, старайтесь не использовать таблицы для этого.Комбинация div и списков будет работать отлично. 

<html>
<head>
    <style type="text/css">
        #example {width:800px;}
        #a {float: left; width: 250px;}
        #b {float: left; width: 250px;}
        #c {float: left; width: 250px;}
    </style>
</head>
<body>
    <div id="example">
    <div id="a">
        <h1>parent</h1>
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </div>
    <div id="b">
        <h1>parent</h1>
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
     </div>
    <div id="c">
        <h1>parent</h1>
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </div>
</div>
</body>
</html>

Стилизация списков будет проста в CSS.

Вот несколько полезных сведений - http://www.alistapart.com/articles/taminglists/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...