CSS для почтового ящика входящих сообщений

Question

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

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

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

Answer 1

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

Answer 2

Вот некоторые три раскладки колонки я бы доверять:

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

Честно, хотя, в то время как эти " может «работать», вы, вероятно, хотите использовать таблицу. gasp Да, таблица, таблица является наиболее семантически правильным выбором для размещения табличных данных с повторяющимися столбцами. Естественно, есть много вариантов Javascript для выполнения табличных данных. Flexigrid is a good one worth considering.

Answer 3

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

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

И вот много CSS Макеты для вашего выбора:

http://layouts.ironmyers.com/

Answer 4

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

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

<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 5

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

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

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

Answer 6

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

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

Это будет отображать объект как WWWWWWWWWW... вместо.