|
|
Модератор форума: dotbot |
Сообщество uCoz » Архивариус » Корзина » Отображение по горизонтали |
Отображение по горизонтали |
Здравствуйте.
Нужна помощь. http://test1siegmein.ucoz.ru/ Как сделать чтоб картинки отображались горизонтально а не вертикально. Вот так: Добавлено (14 Ноя 2014, 15:27:50) http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
создаем отдельные классы и завертываем каждое изображение в отдельный див, а не как вы сейчас для таблицы задали класс и выводите все через - background
|
Ucoz_fan,
Спасибо. Буду думать щас над эти. Прошу не удалять тему. Добавлено (16 Ноя 2014, 14:37:41) --------------------------------------------- Ucoz_fan, Можно пример если не трудно. Добавлено (16 Ноя 2014, 14:43:26) --------------------------------------------- Ucoz_fan, Получилось так. HTML: <div id="container"> <div class="irinapc"></div><div id="fotoirinapc"></div> <div class="irinaxbox"></div><div id="fotoirinaxbox"></div> </div> CSS: .irinapc { width: 600px; height: 200px; } .irinaxbox { width: 600px; height: 200px; } #fotoirinapc { background: url(http://test1siegmein.ucoz.ru/images/igrinapk.jpg) no-repeat; width: 600px; height: 200px; } #fotoirinaxbox { background: url(http://test1siegmein.ucoz.ru/images/igrinaxbox.jpg) no-repeat; width: 600px; height: 200px; } Добавлено (16 Ноя 2014, 14:52:57) --------------------------------------------- KOKS99, Правильно? Добавлено (16 Ноя 2014, 15:01:08) http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
почему не делается, я вот перешел и вижу совсем все наоборот отображается все корректно как вы и хотели по горизонтали, только в Таблице стилей CSS строка номер 15:
Цитата #container { min-height: 100%; } И снова вы выводите через багроунд все изображения, или сообразить совсем уже трудно, создали мы класс: Код <div class="goriz-imgus"><img src="ссылка на изображение" alt="описание для изображения"></div> Код .goriz-imgus img {max-width:100%;} Читаем справочную документацию - http://htmlbook.ru/css/max-width |
Ucoz_fan, Спасибо.
Тему не удаляйте. Добавлено (16 Ноя 2014, 16:44:34) http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
потому, классами манипулировать лучше чем с багроундами и извращаться потом через repeat или другие инструменты
|
Ucoz_fan,
У меня так. HTML: <div id="container"> <div class="irinapc"></div><div id="fotoirinapc"><img src="http://test1siegmein.ucoz.ru/images/igrinapk.jpg" alt=""></div> <div class="irinaxbox"></div><div id="fotoirinaxbox"><img src="http://test1siegmein.ucoz.ru/images/igrinaxbox.jpg" alt=""></div> </div> CSS: body { margin: 0px; padding: 0px; font-size: 12px; font-family: verdana,arial,helvetica; z-index: 10000; } #header { background: url(http://test1siegmein.ucoz.ru/images/werhmenu.jpg) no-repeat; height: 30px; width: 100%; } #container { } .irinapc { } .irinaxbox { } .fotoirinapc img {max-width:100%;} #fotoirinapc { } .fotoirinaxbox img {max-width:100%;} #fotoirinaxbox { } Куда именно нужно вставлять display: inline; http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
KOKS99, мда, бред, я вроде выше пример привел или вы уже по примеру для своих стилей не можете корректно задать требуемые параметры.
Вы сделали все совсем наоборот, задали просто для классов. но не для айди в которые завернуты изображения, в стили добавьте: Цитата #fotoirinapc img {max-width:100%;} #fotoirinaxbox img {max-width:100%;} |
Ucoz_fan, Вооооот спасибо.
Я просто не знал можно писать с # или нет. Ещё везде вставил то что выделено красным. .irinapc { display: inline; } .irinaxbox { display: inline; } #fotoirinapc img {max-width:100%;} #fotoirinapc { display: inline; } #fotoirinaxbox img {max-width:100%;} #fotoirinaxbox { display: inline; } Добавлено (16 Ноя 2014, 17:15:46) http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
|
При уменьшении окна браузера 2 картинка уходит под 1
http://siegmein.ru/_ph/1/3123824.png Добавлено (16 Ноя 2014, 17:26:31) http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
ясн, в таком случае вам все эти три изображения нужно завернуть в один класс:
Код <div id="fotoirinapc"> <img src="http://test1siegmein.ucoz.ru/images/igrinapk.jpg" alt=""> <img src="http://test1siegmein.ucoz.ru/images/igrinaxbox.jpg" alt=""> <img src="http://test1siegmein.ucoz.ru/images/irinaps.jpg" alt=""> </div> Код #fotoirinapc img { max-width: 100%; width: 440px !important; } |
Ucoz_fan, Все рамно.
Добавлено (16 Ноя 2014, 18:02:03) --------------------------------------------- Ucoz_fan, HTML http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре Если помог нажми + |
|
| |||
| |||