Как добиться следующего макета в HTML + CSS? - PullRequest
Новая
       21

Как добиться следующего макета в HTML + CSS?

3 голосов
/ 15 июня 2009

Я начну с иллюстрации искусства ASCII того, чего я хочу достичь: 

   Category title

  Title       Title
+-------+   +-------+
|       |   |       |
|       |   |       |
| Image |   | Image |
|       |   |       |
|       |   |       |
+-------+   +-------+
 Subtitle    Subtitle

   Category title

  Title       Title
+-------+   +-------+
|       |   |       |
|       |   |       |
| Image |   | Image |
|       |   |       |
|       |   |       |
+-------+   +-------+
 Subtitle    Subtitle

Итак, у меня есть эти категории, которые содержат предметы. Каждый элемент состоит из заголовка, подзаголовка и изображения. Изображения имеют разные размеры. Их ширина постоянна 150px, но высота варьируется от 150px до 252px. И я не могу предсказать, какие размеры будут в будущем, хотя они должны быть где-то около этого размера. Вы можете предположить, что ширина постоянна 150px, а высота может варьироваться от 150px до 300px.

Количество категорий и предметов в каждой категории, конечно, произвольно. Хотя в каждой категории будет хотя бы один элемент (иначе я не покажу категорию). Длина заголовков и субтитров также является переменной, хотя в основном они довольно короткие.

Эффект, который я хочу создать, следующий:

  • Заголовок и подзаголовок элемента отображаются прямо рядом с изображением (сверху и снизу) без каких-либо значительных пробелов между ними.
  • Когда элементов в категории слишком много, они начинают переносить и создают больше строк. Горизонтальной прокрутки нет. Ряды должны быть четко друг под другом. При изменении ширины окна элементы автоматически перестраиваются.
  • Если заголовок или подзаголовок элемента немного длиннее, они должны быть перенесены. Они не должны значительно расширяться за пределы ширины изображения;
  • Заголовок категории должен иметь чистый пробел между ним и строками элементов выше и ниже.
  • Заголовок категории центрируется на странице; Названия элементов и субтитры центрированы относительно их изображений.

Мне все равно, достигнут ли эффект TABLEs, DIVs или The Force. Я просто хочу, чтобы это выглядело так. :) Возможно ли это и если да, то как это сделать?

Если нет, может ли кто-нибудь предложить альтернативную компоновку, которая бы инкапсулировала одну и ту же информацию и выглядела бы хорошо для браузеров разных размеров?

Ответы [ 4 ]

1 голос
/ 15 июня 2009

Стивен победил меня, но я зарядлю немного больше ;-). Вот разметка для быстрого решения, которое соответствует вашим требованиям (CSS должен быть в отдельном файле). Открытые номера:

  • Кросс-браузер? Попробуйте перевести браузеры в строгий режим, чтобы иметь дело только с одной блочной моделью (особенно важно в IE6)
  • Как указал Стивен, высоту изображения нужно будет фиксировать (или высоту контейнера), но большая проблема - ваше требование оборачивать более длинные заголовки. Разметка и CSS, которые я предоставил, не очень хорошо справляются с этим, но для правильной работы с этим вам нужно выбрать максимальную высоту заголовков или отказаться от требования автоматически оборачивать элементы (чтобы мы могли использовать таблицу). Вместо этого я предлагаю поместить все изображения под фиксированную высоту контейнера.

разметка и CSS: 

<style type="text/css">

    h3.category { clear: both; }
    div.item { float: left; width: 83px; margin-right: 20px; }
    div.item img { width: 83px; height: 125px; }
    div.item h4 { margin-bottom: 3px; }
    div.item h5 { margin-top: 3px; }

</style>

<h3 class="category">Category <strong>title</strong></h3>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

<div class="item">
    <h4>Longer Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Longer Subtitle</h5>
</div>

<div class="item">
    <h4>Very Long, Wrapping Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Very Long, Wrapping Subtitle</h5>
</div>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

<h3 class="category">Category <strong>title</strong></h3>

<div class="item">
    <h4>Very Long, Wrapping Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Very Long, Wrapping Subtitle</h5>
</div>

<div class="item">
    <h4>Longer Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Longer Subtitle</h5>
</div>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>
1 голос
/ 15 июня 2009

ОБНОВЛЕНИЕ: Этот код работает и протестирован в Opera 9.51, FF 3.0 и IE7. Мне платят за это? ;)

Есть много способов достичь этого. Одно можно сказать наверняка. Вы не можете иметь разные высоты. Если у вас разные высоты на ваших изображениях, ваши div'ы не будут правильно выровнены. Вот HTML-код: 

<div id="outerContainer">
  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">Square image </div>
    <div class="myImage"> <img class="myImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/8/85/20060705145122!Smiley.svg/120px-Smiley.svg.png" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">High Image</div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/fashion_shows/2009/Moods%20-%20feb/_SPS7281.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">High Image </div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/regine_mowill/_SPS7094.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">Wide Image </div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/pling/_SPS7181_copy.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>   
</div>

CSS: 

#outerContainer {
  width: 350px;
  border: solid 1px #777;
  overflow: auto;
  text-align: center;
}

.categoryTitle {
  font-weight: bold;
}
.container {
  float: left; 
  border: solid 1px #ccc;
  height: 270px;
  width: 150px;
  margin: 10px 5px 10px 5px;
}

#outerContainer .myImage {
  max-height: 200px;
  max-width: 150px;
  height: expression(this.height > 200 ? 200 : true);
  width: expression(this.width > 150 ? 150 : true);    
}

.imgContainer {
  overflow: hide;
}
0 голосов
/ 15 июня 2009

Я думаю, что самый простой способ для такого типа макета - это использование CSS-фреймворка. Лучший выбор для простых макетов сетки - http://960.gs/

Простота в использовании и никаких проблем с совместимостью с браузером.

0 голосов
/ 15 июня 2009

Пропускает в rpflo комментарий для span. Это работает в ie7 / 8, ff3 и chrome / safari. 

<div class="cat">
  <h2>Category 1</h2>
  <span class="img">
    <h3>Title 1 with a long title wider than 150px</h3>
    <img src="yourimage.png" />
    <h4>Subtitle 1</h4>
  </span>
</div>

И CSS: 

div.cat { 
  overflow:auto;
  margin-bottom:15px; 
}
div.cat span.img { 
  display:inline-block;
  vertical-align:top; 
  width:150px;
  margin-right:15px;
  text-align:center; 
}
div.cat span.img h3, div.cat span.img h4 { 
  margin:0; 
}
...