CSS для почтового ящика

Question

Я совершенно новичок в CSS. Но я пишу почтовый ящик, где он похож на ваш обычный почтовый ящик, который содержит 3 столбца для От, Тема, Получено.

Могу ли я получить базовый CSS для правильного форматирования этих данных (выравнивание, столбцы и т. Д.), Из которого я могу опираться.

Любые интересные интересные проекты также приветствуются.

Answer 1

Мне кажется, что это один из немногих сценариев, когда макет <table> на самом деле является правильным макетом. Хорошо, что вы думаете о плавающих элементах div для выполнения этого макета стиля, но дело в том, что вы отображаете table данных, что является единственным допустимым использованием оставшегося тега <table>. Это также дает вам преимущество равномерно расположенных столбцов.

Answer 2

Вы пытаетесь отобразить табличные данные, поэтому действительно следует использовать таблицу.

Хотя вы также можете достичь того же, используя div и перемещая их все в одном направлении, как показано ниже

<style>
.clear {clear:both}
#wrapper {width:500px; padding:2px; border:5px solid #000;}
#wrapper .row {border:1px solid #000;}
#wrapper .col {min-width:100px; border-right:1px solid #000; float:left;}
</style>

<div id="wrapper">
    <div class="row">
        <div class="col">From</div>
        <div class="col">Subject</div>
        <div class="col">Date</div>
        <div classs="clear"></div>
    </div>
</div>

Answer 3

Вы можете найти почти весь дизайн на основе сетки в SmashingMagazine, чтобы начать:

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

А вот множество макетов CSS, доступных для вашего выбора:

http://layouts.ironmyers.com/

Answer 4

Из моего опыта создания почтовых ящиков вы должны обрезать длинные строки темы по мере необходимости, чтобы ширина столбцов не изменялась и т. Д.

$message = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW";
if(strlen($message) > 10)
$message = substr($message, 0, 10);
echo $message."...";

Вместо этого объект будет отображаться как WWWWWWWWWW....

Answer 5

Я должен согласиться с <table> предложениями, потому что это так. Или Вы можете считать это <ol>, может быть.

Я не уверен, какой «крутой» дизайн подойдет для почтового ящика, так как большинство из них испортит ожидания пользователей, или я просто недостаточно умел, чтобы переделать функциональный интерфейс. Также я думаю, что большинство переделок будут меняться в контрольном слое MVC, а не в M или V.

Сказав, что ... возможно, что-то похожее на более новую презентацию "Артисты / альбомы" в iTunes может сработать? Но я должен предположить, что это плохая идея.

Answer 6

Вот несколько макетов трех столбцов, которым я бы доверял:

• http://www.alistapart.com/articles/holygrail
• http://designshack.co.uk/gallery/layout/3column/ (у этого есть несколько примеров для вдохновения)
• http://matthewjamestaylor.com/blog/perfect-3-column.htm

Честно говоря, хотя эти "могли" работать, вы, вероятно, хотите использовать стол. gasp Да, таблица, таблица является наиболее семантически правильным выбором для размещения табличных данных с повторяющимися столбцами. Естественно, существует множество вариантов Javascript для создания табличных данных. Flexigrid - хороший вариант, который стоит рассмотреть.