Не могу разобраться в коде

@jack_london · Регистрация: 26.07.2013

Author24 — интернет-сервис помощи студентам

Доброго всем времени суток. Хочу сделать шапку сайта из трёх картинок общий размер шапки 1000х200 (1я картинка 130, вторая (центральная) 200 и третья 670)

Использую такой вот код, всё отображается вроде бы корректно, но центральная картинка, которая должна быть всё же левее стоит строго по центру, тем самым закрывая часть третей картинки (та которая справа)

Я только осваиваю, поэтому строго не судить. Помогите разобраться.

HTML:

HTML5

<html>
<head>
 
<link href="styles.css" type="text/css" media="screen" rel="stylesheet" />
 
</head>
<body>
 
<div class="head">
 
</div>
 
</body>
</html>

CSS:

CSS

.head{
background:url(logoleft.jpg), url(logocenter.jpg), url(logoright.jpg);
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: left top, center top, right top;
height:200px;
margin:10px 0px;
}

@vanyakilkil · 26.07.2013, 01:08

jack_london, а вы не пробовали каждую картинку в отдельном блоке сделать?

CSS

1
2
3

background:url(logoleft.jpg), url(logocenter.jpg), url(logoright.jpg);
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: left top, center top, right top;

- ну и извращение

можно в одном все что нужно писать (конечно тут бред, много лишнего)
например

CSS

1	background: url(kok.png) no-repeat top left

Вы задаете фон блоку. Сделайте картинку в фотошопе как одну и как фон сделайте ее

@jack_london · 26.07.2013, 01:21 **[ТС]**

это всё хорошо, но мне нужно чтобы шапка состояла именно с 3-х картинок - я бы мог их слепить в фотошопе да не мучатся, но нужно именно так

мне нужно для центральной картинки сделать индивидуальное позициирование, если можно так сказать - строго влево или центр не катит

@vanyakilkil · 26.07.2013, 01:29

jack_london, нельзя кроссбраузерно добавлять несколько фонов к одному элементу. Можно слепить три в одну а не извращаться над кодом

Мне честно говоря приходила мысль добавлять несколько фонов разными картинками но реализовывать ее как-то не думал

Да и код такой вижу первый раз, наверное поэтому и не думал

@Andeangl · 26.07.2013, 03:24

Сообщение от jack_london

Хочу сделать шапку сайта из трёх картинок общий размер шапки 1000х200 (1я картинка 130, вторая (центральная) 200 и третья 670)

Итак, нужно сделать шапку из трёх картинок, стоящих рядом, впритык.

Вариант 1

Таблица. Добавляешь таблицу, граница = 0, без отступов. Один ряд, 3 ячейки. Таблицу выравниваешь по центру (всю), после чего добавляешь картинки по одной в ячейку и они выравниваются как надо. Рекомендую делать это в DreamWeaver, в нём при задании таблицы можно указать точную ширину. Рекомендую это сделать, чтобы таблица не растягивалась.

Вариант 2

С помощью CSS, абсолютного позиционирования, задаёшь координаты средней картинки (чтобы она была чуть правее чем по центру, это нужно делать в %, иначе с изменением разрешения будет съезжать. После того, как координаты средней заданы, цепляешь к ней по бокам две других. Сразу скажу, этот способ - примерно как микроскопом колоть орехи. Рекомендую первый.

Вариант 3

Ты сливаешь все изображения в одно, после чего задаёшь области, каждая из которых (или одна из которых, или ещё как) будет ссылкой. Для этого воспользуйся ЭТИМ способом. А в ЭТОМ редакторе очень удобно задавать области, которые будут ссылками.

P.S. Если тебе нужен быстрый результат и мало проблем, рекомендую не заморачиваться и выбрать первый способ, но если ты хочешь стать профи, лучше попробовать реализовать самый сложный способ (с помощью позиционирования), а при наличии времени, все три. Это позволит тебе в будущем не возвращаться к этому вопросу и быстро решать поставленные задачи, применяя на практике необходимый метод.

P.P.S. Если методы не подойдут напиши, может ещё чего придумаю

@jack_london 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 20
	26.07.2013, 01:21 [ТС]	3
	это всё хорошо, но мне нужно чтобы шапка состояла именно с 3-х картинок - я бы мог их слепить в фотошопе да не мучатся, но нужно именно так мне нужно для центральной картинки сделать индивидуальное позициирование, если можно так сказать - строго влево или центр не катит 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	26.07.2013, 01:29	4
	jack_london, нельзя кроссбраузерно добавлять несколько фонов к одному элементу. Можно слепить три в одну а не извращаться над кодом Мне честно говоря приходила мысль добавлять несколько фонов разными картинками но реализовывать ее как-то не думал Да и код такой вижу первый раз, наверное поэтому и не думал 0

@Andeangl 6 / 6 / 1 Регистрация: 18.07.2013 Сообщений: 176
	26.07.2013, 03:24	5
	Сообщение от jack_london Хочу сделать шапку сайта из трёх картинок общий размер шапки 1000х200 (1я картинка 130, вторая (центральная) 200 и третья 670) Итак, нужно сделать шапку из трёх картинок, стоящих рядом, впритык. Вариант 1 Таблица. Добавляешь таблицу, граница = 0, без отступов. Один ряд, 3 ячейки. Таблицу выравниваешь по центру (всю), после чего добавляешь картинки по одной в ячейку и они выравниваются как надо. Рекомендую делать это в DreamWeaver, в нём при задании таблицы можно указать точную ширину. Рекомендую это сделать, чтобы таблица не растягивалась. Вариант 2 С помощью CSS, абсолютного позиционирования, задаёшь координаты средней картинки (чтобы она была чуть правее чем по центру, это нужно делать в %, иначе с изменением разрешения будет съезжать. После того, как координаты средней заданы, цепляешь к ней по бокам две других. Сразу скажу, этот способ - примерно как микроскопом колоть орехи. Рекомендую первый. Вариант 3 Ты сливаешь все изображения в одно, после чего задаёшь области, каждая из которых (или одна из которых, или ещё как) будет ссылкой. Для этого воспользуйся ЭТИМ способом. А в ЭТОМ редакторе очень удобно задавать области, которые будут ссылками. P.S. Если тебе нужен быстрый результат и мало проблем, рекомендую не заморачиваться и выбрать первый способ, но если ты хочешь стать профи, лучше попробовать реализовать самый сложный способ (с помощью позиционирования), а при наличии времени, все три. Это позволит тебе в будущем не возвращаться к этому вопросу и быстро решать поставленные задачи, применяя на практике необходимый метод. P.P.S. Если методы не подойдут напиши, может ещё чего придумаю 0