• Страница 1 из 1
  • 1
Модератор форума: dotbot  
Сообщество uCoz » Архивариус » Корзина » Отображение по горизонтали
Отображение по горизонтали
KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 1 | 15:27:50
Здравствуйте.
Нужна помощь.
http://test1siegmein.ucoz.ru/
Как сделать чтоб картинки отображались горизонтально а не вертикально.
Вот так:

Добавлено (14 Ноя 2014, 15:27:50)
---------------------------------------------
Можно с помощью таблиц.Но тогда при меньшем изображении экрана изображения обрезаются.
Помогите пожалуйста.


http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 2 | 16:01:08
Цитата KOKS99 ()
Как сделать чтоб картинки отображались горизонтально а не вертикально.
создаем отдельные классы и завертываем каждое изображение в отдельный див, а не как вы сейчас для таблицы задали класс и выводите все через - background

KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 3 | 15:01:08
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)
---------------------------------------------
Ucoz_fan, Пишу display: inline; не делается по горизонтали.


http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 4 | 16:17:29
Цитата KOKS99 ()
Пишу display: inline; не делается по горизонтали.
почему не делается, я вот перешел и вижу совсем все наоборот отображается все корректно как вы и хотели по горизонтали, только в Таблице стилей 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

KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 5 | 16:44:34
Ucoz_fan, Спасибо.
Тему не удаляйте.

Добавлено (16 Ноя 2014, 16:44:34)
---------------------------------------------
KOKS99, Почему не через backgraund, потому что этот тег задаёт фоновое изображение?


http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 6 | 16:55:37
Цитата KOKS99 ()
Почему не через backgraund, потому что этот тег задаёт фоновое изображение?
потому, классами манипулировать лучше чем с багроундами и извращаться потом через repeat или другие инструменты

KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 7 | 16:59:01
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 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 8 | 17:11:19
KOKS99, мда, бред, я вроде выше пример привел или вы уже по примеру для своих стилей не можете корректно задать требуемые параметры.
Вы сделали все совсем наоборот, задали просто для классов. но не для айди в которые завернуты изображения, в стили добавьте:
Цитата
#fotoirinapc img {max-width:100%;}
#fotoirinaxbox img {max-width:100%;}
все!

KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 9 | 17:15:46
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 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 10 | 17:22:35
Цитата KOKS99 ()
правая картинка переезжает под первую.
какая кнопка не вижу??

KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 11 | 17:26:31
При уменьшении окна браузера 2 картинка уходит под 1

http://siegmein.ru/_ph/1/3123824.png

Добавлено (16 Ноя 2014, 17:26:31)
---------------------------------------------
Результат
http://siegmein.ru/_ph/1/160937242.png


http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 12 | 17:44:14
Цитата KOKS99 ()
При уменьшении окна браузера 2 картинка уходит под 1
ясн, в таком случае вам все эти три изображения нужно завернуть в один класс:
Код
<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;
}
Конечно для разного разрешения монитора можно дополнительно написать условия media, вот вам документация - http://htmlbook.ru/css/media изучайте

KOKS99
Сообщений: 228
Репутация: 12

Сообщение # 13 | 18:02:03
Ucoz_fan, Все рамно.

Добавлено (16 Ноя 2014, 18:02:03)
---------------------------------------------
Ucoz_fan,

HTML


http://siegmein.ru - торрент трекер новинки
http://siegmein.ru/forum/4 - Вопрос по игре
Если помог нажми +
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 14 | 18:16:15
KOKS99, за адаптацией обращаемся на - http://partner.ucoz.ru/board

Сообщество uCoz » Архивариус » Корзина » Отображение по горизонтали
  • Страница 1 из 1
  • 1
Поиск: