X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Расположение картинок
Sleepwalker_mw
Sleepwalker_mw
Topic Starter сообщение 29.1.2013, 10:49; Ответить: Sleepwalker_mw
Сообщение #1


Есть 5 картинок - ссылок (20*20px) нужно их расположить в ряд.
И 4 картинки точно таких же их нужно в 2 ряда (квадрат).
В данный момент они вписаны в тег "таблица", но хотелось бы чтоб они были на белом фоне.
Как лучше расположить (каким тегом)?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
webdign
webdign
сообщение 29.1.2013, 10:56; Ответить: webdign
Сообщение #2


не совсем понятно о чем речь.
картинки при перечислении и так вряд будут.
а квадрат можно две картинки - перенос - две картинки

<div style="float:left"></div>...<div></div>

<div style="float:left"></div><div></div>
<div style="float:left;clear:both"></div><div></div>


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 29.1.2013, 18:34; Ответить: isvetlichniy
Сообщение #3


<div style="background:#ffffff;">
<a href="#"><img src="path_to_image"></a>
<a href="#"><img src="path_to_image"></a>
<a href="#"><img src="path_to_image"></a>
<a href="#"><img src="path_to_image"></a>
<a href="#"><img src="path_to_image"></a>
</div>


а квадрат вот так

<div style="background:#ffffff;overflow:hidden;">
<div>
<a href="#"><img src="path_to_image"></a>
<a href="#"><img src="path_to_image"></a>
</div>
<div>
<a href="#"><img src="path_to_image"></a>
<a href="#"><img src="path_to_image"></a>
</div>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sleepwalker_mw
Sleepwalker_mw
Topic Starter сообщение 6.2.2013, 10:25; Ответить: Sleepwalker_mw
Сообщение #4


а как увеличить расстояние между картинками, когда они расположены в квадрат?
сделать padding: 10px во все стороны
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 6.2.2013, 12:08; Ответить: yury_mw
Сообщение #5


а как увеличить расстояние между картинками, когда они расположены в квадрат? сделать padding: 10px во все стороны

Примерно так (поля состоят из 2х частей: 5px — margin между картинками и еще 5px — padding у внешнего блока .white):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
body{
  background: #000;
  text-align: center;
}
.white{
  padding: 5px;
  display: inline-block;
  //display: inline;
  zoom: 1;
  background: #fff;
}
.line_of_img{
}
.line_of_img a{
  display: inline-block;
  //display: inline;
  zoom: 1;
  margin: 5px;
}
.line_of_img a img{
  border: none;
}
</style>
</head>
<body>
<div class="white">
  <div class="line_of_img">
    <a href="#"><img src="aa0.jpg"></a>
    <a href="#"><img src="aa0.jpg"></a>
  </div>
  <div class="line_of_img">
    <a href="#"><img src="aa0.jpg"></a>
    <a href="#"><img src="aa0.jpg"></a>
  </div>
</div>
</html>

На всякий случай отцентровал квадрат с картинками. Если этого не требуется можно убрать свойства
  display: inline-block;
  //display: inline;
  zoom: 1;

у класса .white и
  text-align: center;

у body.
Свойства
  display: inline;
  zoom: 1;
нужны для ИЕ6 и их правильнее подключать отдельным файлом условными комментариями, чтобы их видел только он (а не как у меня, с помощью хака).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMasterOleg
WebMasterOleg
сообщение 29.3.2013, 9:54; Ответить: WebMasterOleg
Сообщение #6


А почему display: inline-block;? У этого свойства проблемы с кроссбраузерностью. Там будут отступы лишние. И еще могут сверху отступы добавиться. Может проще использовать float:left; для каждого изображения? А под ними использовать блог с очисткой пространства clear:both; по всей ширине? Я лишь предложил))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 29.3.2013, 11:15; Ответить: yury_mw
Сообщение #7


* В приведенном примере проблема с кроссбраузерностью решена (о чем кстати сказано специально) комбинацией css-свойств:
display: inline-block;
//display: inline;
zoom: 1;

* Как выше было сказано display: inline-block; использовано для случая последующей центровки, блоки с float:left; отцентровать не получится.
* Блок с clear:both; — лишний с точки зрения семантики.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMasterOleg
WebMasterOleg
сообщение 29.3.2013, 11:59; Ответить: WebMasterOleg
Сообщение #8


А, ну если так то да. Не внимательно прочитал) Хотя еще можно по-изощряться и сделать верстку более удобной.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) [ИЩУ] Человека для сбора картинок
4 rokot 3214 4.9.2018, 10:05
автор: Том77
Открытая тема (нет новых ответов) Ссылки с эро картинок хочется
2 RMak 4061 4.2.2018, 23:19
автор: Kriya
Открытая тема (нет новых ответов) Поиск картинок и описания
Фотошоп или powerpoint
1 scorper 1896 8.9.2017, 10:46
автор: scorper
Открытая тема (нет новых ответов) Работа по поиску картинок и ссылок
Работа для тех, кто онлайн, "между делом", мониторинг
0 nikolenko2008 1693 28.8.2016, 14:26
автор: nikolenko2008
Открытая тема (нет новых ответов) Требуется исполнитель для отрисовки: иконок и картинок.
0 Seo-optimist 2407 3.10.2015, 16:02
автор: Seo-optimist


 



RSS Текстовая версия Сейчас: 29.3.2024, 12:58
Дизайн