13:46 

towelie
a million little fibers
Здравствуйте, заранее извините за нубский вопрос, но я еще учусь =)
Дали задание сверстать макет, при условии что каждая картинка должна быть обернута в div. Моя головушка не может додуматься, как от самой левой и самой правой картинки сделать большие отступы,а между изображениями поменьше.
апд. кроссбраузерность начиная от IE 7

@темы: HTML, CSS

Комментарии
2013-03-12 в 14:30 

alhames
alhames.ru
towelie, плз, код вставляйте через кнопку CODE или Unicode.
Насколько я понял вам это нужно:
htmlbook.ru/css/first-child
htmlbook.ru/css/last-child

2013-03-12 в 14:42 

towelie
a million little fibers
alhames, спасибо:rotate: ну просто когда как такового к этим элементам пока что нет, или я опять что-то не так поняла)

2013-03-12 в 22:24 

fual
alhames, first-child и last-child тут не нужны. Так как они не кроссбраузерны.
А главное что тут достаточно обернуть картинки в блок с фиксированным размером и поставить отступы у блока-родителя.

towelie, Рад видеть знакомое лицо))
Если по существу.
1) Тебе надо обернуть каждую картинку в блок
2) Все получившийся блоки сделать с float: left; overflow: hidden; и думаю было бы норм задать фиксированные размеры.
overflow: hidden; чтобы даже если картинка большая - она не будет превышать размеры блока.
3) Все блоки обернуть в один. и указать у него ширину и него отступы.
вообщем вот - jsfiddle.net/rmP8g/1/

2013-03-12 в 23:38 

alhames
alhames.ru
first-child и last-child тут не нужны. Так как они не кроссбраузерны.
я думаю пора бы уже переходить на css3 - потому и сказал первое что пришло в голову.
Для IE8 можно хак использовать, если он так необходим..

А по задаче - судя из описания просто родительскому элементу можно было задать padding - и по краям был бы отступ больше чем между элементами.
Я просто не понял задачи..

2013-03-13 в 00:35 

towelie
a million little fibers
fual, привет))Спасибо за вариант))) Правда я косипор и не указала что мне нужна кроссбраузерность от IE7, если верить htmlbook то там только с 8+? Пока я шаманила у меня вот так все получилось,вроде бы как надо отображается, во всяком случае у меня =)

html

css
alhames, простите,я наверное не очень корректно описала. В следующий раз исправлюсь, спасибо =)

2013-03-13 в 01:49 

alhames
alhames.ru
towelie, тег IMG одинарный, использовать </img> не нужно.

  1. <div class="image-group">
  2. <div>
  3. <img src ="html/tz/images/4.jpg" />
  4. </div>
  5. <div>
  6. <img src ="html/tz/images/3.jpg" />
  7. </div>
  8. <div>
  9. <img src ="html/tz/images/5.jpg" />
  10. </div>
  11. <div >
  12. <img src ="html/tz/images/2.jpg" />
  13. </div>
  14. <div>
  15. <img src ="html/tz/images/1.jpg" />
  16. </div>
  17. </div>


  1. .image-group {padding: 10px;float:left;}
  2. .image-group div {padding: 5px;float: left;}
  3. .image-group div img {display: block;}


К примеру..

2013-03-13 в 08:40 

fual
towelie, впринципе тут свесверстано норм jsfiddle.net/rmP8g/1/.
alhames тоже правильно показал. как вариант.
А вот у тебя довольно косячно сделано=) лучше попробуй наши варианты или еще почитай.

2013-03-13 в 10:18 

towelie
a million little fibers
alhames, fual, спасибо :beg::gigi:

2013-07-16 в 11:45 

Reuniko
раз задача решена, начинаю флудить!

как же я ненавижу комбинации марджинов-педдингов в ксс вместе с процентной шириной арарарар))) 30%-70% блоки норм ровно до тех пор пока по нулям отступы

2013-07-16 в 13:08 

alhames
alhames.ru
Reuniko, ну в подобных случаях отступы делаются у вложенного элемента. Либо конечно можно извратиться и поменять режим подсчета ширины.

2013-07-16 в 16:53 

Reuniko
слишком много вложенных элементов >_<

   

@web-программирование

главная