Создание галереи. Наложение border на border

Вадим · April 10, 2008

Добрый день, друзья!

Существую 6 фотографий на одной линии - это галерея, превью (маленькие картиночки). Каждая из фотографией является также ссылкой, которая открывает большое изображения (стандартная схема). Задача в том, что вокруг изображения - рамка в 6px, а между фотографиями должно быть тоже 6px. Т.е. если вокруг фото - рамка, то получается расстоянием между фотографиями в 12px.

Зачем я так делаю? Я хочу, чтобы когда наводишь на фото, то рамка (в 6px) вокруг этого фото становилась красного цвета. Поэтому если я сдвигаю вторую фотографию влево (margin-left: -6px;), то у первой фотографии рамка уже будет не полная, так как вторая фотография перекрывает своей рамкой первую.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" >
<head>
<title>al</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {
 background: #000;
 }
*img {
 border: 0;
 }
a:link {
 border: 6px solid #fff;
 }
a:visited {
 border: 6px solid #fff;
 }
a:active, a:hover {
 border: 6px solid red;
 }
.left1 {
 margin-left: -10px;
 }
</style>
</head>
<body>
<a href="hh.html"><img src="1.png" alt="" /></a>
<a href="sss.html" /><img class="left1" src="1.png" alt="" /></a>
</body>
</html>

Вот пример в Сети: http://aliveit.ru/ (смотреть в IE6.0).

Можно как-то сделать, чтобы не в зависимости от фотографии рамка не перекрывалась? Может наколдовать с position?

Postal · April 10, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"><head><title>KUBAN-KAMEN.RU</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><style>
body {
 background: #000;
 }
img {
 border: 0;
 display:block;
 }
a {
 border: 6px solid #000;
 display:block;
 float:left;
}
a:hover {
 border: 6px solid red;
}
.clear {
 clear:both;
}
</style></head><body>



<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<div class="clear"></div>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<div class="clear"></div>
</body></html>

Вадим · April 10, 2008

Спасибо. Я так тоже сделал, почти. (Твой пример работает в Opere! Как ты так сделал? Задал стиль для ссылки и все стало ок?.)

В общем вопрос АКТУАЛЬНЫЙ. Необходимо, чтобы между фотографиями было 6 px + рамка в 6px изменяла свой цвет. Прикладываю пример: http://aliveit.ru/2.png

Postal · April 10, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"><head><title>KUBAN-KAMEN.RU</title><meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
 background: #000;
 margin:0;
 padding:0;
}
img {
 border: 0;
 display:block;
 }
a.link1 {
 display:block;
 position:absolute;
 left:6px;
 top:6px;
}
a.link1:hover {
 border: 6px solid red;
 top:0px;
 position:absolute;
 left:0px;
}
a.link2 {
 display:block;
 position:absolute;
 left:112px;
 top:6px;
}
a.link2:hover {
 border: 6px solid red;
 top:0px;
 position:absolute;
 left:106px;
}
a.link3 {
 display:block;
 position:absolute;
 left:218px;
 top:6px;
}
a.link3:hover {
 border: 6px solid red;
 top:0px;
 position:absolute;
 left:212px;
}
a.link4 {
 display:block;
 position:absolute;
 left:324px;
 top:6px;
}
a.link4:hover {
 border: 6px solid red;
 top:0px;
 position:absolute;
 left:318px;
}
a.link5 {
 display:block;
 position:absolute;
 left:430px;
 top:6px;
}
a.link5:hover {
 border: 6px solid red;
 top:0px;
 position:absolute;
 left:424px;
}
a.link6 {
 display:block;
 position:absolute;
 left:536px;
 top:6px;
}
a.link6:hover {
 border: 6px solid red;
 top:0px;
 position:absolute;
 left:530px;
}
.clear {
 clear:both;
}
.block {
 position:relative;
}

</style></head><body>


<div class="block">
<a class="link1" href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a class="link2" href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a class="link3" href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a class="link4" href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a class="link5" href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a class="link6" href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
</div>
</body></html>

кода многовато но работает.

ZoNT · April 10, 2008

Вот универсально (везде работает):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"><head><title>KUBAN-KAMEN.RU</title><meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
 background: #000;
 margin:0;
 padding:0;
}
img {
 border: 0;
 display:block;
 }
a, a:hover {
 display: block;
 float: left;
 padding: 6px;
 margin-left: -6px;
 width: 100px;
 height: 200px;
}
a:hover {
 background: #F00;
}
.block {
 position: absolute;
 left: 6px;
 clear: both;
}

img {
 background: #ff0;
 width: 100%;
 height: 100%;
}

</style>
</head>
<body>
<div class="block">
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/hh.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
<a href="http://aliveit.ru/sss.html"><img src="KUBAN-KAMEN.RU_files/1.png" alt=""></a>
</div>
</body>
</html>

Postal · April 10, 2008

это хорошо, но если картинка будет с полупрозрачностью или просто местами прозрачной?

ZoNT · April 10, 2008

гм... А зачем в галере прозрачные картинки? Ну положи кариинку в див, а ему выстави фон.

Postal · April 10, 2008

малоли .

а вообще да это получше будет.

Вадим · April 10, 2008

Postal, ZoNT - Друзья, большое спасибо! Молодцы! Я бы ни за что не догадался, что так можно сделать! Фекнс!

Осталься только маааленький вопрос. Как сделать так, чтобы я видел белую рамку не зависимо от body? Я уже попытался .block впихнуть в другой div, но толку нет. Получается так: http://aliveit.ru/

А должно быть так: http://aliveit.ru/prime.png

Подскажите?

Postal · April 10, 2008

используй мой метод + установи для ссылки бэкграунд #fff;

Вадим · April 10, 2008

используй мой метод + установи для ссылки бэкграунд #fff;

а как в твоем методе реализовать id="self"

т.е. выделенная картинка не может быть уже ссылкой, так как она уже открыта, но мне надо е? выделить красной рамкой (как на примере). Я не смог этого сделать, поэтому взял код ZoNT. Можешь подсказать?

Postal · April 10, 2008

щас посмотрю

Вадим · April 10, 2008

щас посмотрю

Вот смотри код на сайте. Я добовляю твой код в контейнер, который центрирует блок по центру:

body {
 background: url(bg4.png) repeat 0 0;
 margin:0;
 padding:0;
 font-size: x-small;
 font-family: Verdana, Arial, sans-serif;
 text-align: center;
 }
#container {
 text-align: left;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -256px;
 margin-left: -321px;
 width: 642px;
 }
#content {
 width: 630px;
 height: 400px;
 background-color: black;
 border-top: 6px solid #fff;
 border-left: 6px solid #fff;
 border-right: 6px solid #fff;
}

Далее сам html:

<div id="container">
 <div id="content">текст или большая фотка</div>
 <div class="block">
 <a class="link1" href="http://aliveit.ru/hh.html"><img src="1.png" alt="" /></a>
 ...
 <a class="link1" href="http://aliveit.ru/hh.html"><img src="6.png" alt="" /></a>
 </div>
</div>
</body>
</html>

ZoNT · April 10, 2008

Не заморачивайся: добавь в стиль #container ОДНУ СТРОКУ background-color: #fff;

Dimitry Wolotko · April 10, 2008

Не заморачивайся: добавь в стиль #container ОДНУ СТРОКУ background-color: #fff;

Лучше так:

background:#ffffff;

1 - писать color - необязательно.

2 - лучше писать вс?-таки все 6ть символов кода цвета, бывают глюки в IE6 и старых Мозиллах.

Вадим · April 10, 2008

Не заморачивайся: добавь в стиль #container ОДНУ СТРОКУ background-color: #fff;

Добавлял! Толку нет. Влияет только, когда для body указываю. Но для body у меня другой цвет. Сам не пойму, почему в контейнере цвет не изменяется (кстати это касается и твоего примера).

Вадим · April 10, 2008

Не заморачивайся: добавь в стиль #container ОДНУ СТРОКУ background-color: #fff;
Лучше так:
background:#ffffff;
1 - писать color - необязательно.
2 - лучше писать вс?-таки все 6ть символов кода цвета, бывают глюки в IE6 и старых Мозиллах.

Ок, спасибо. Не знал про такие приколы. Но все же в моем примере это не работает. Может посмотришь? )

Postal · April 10, 2008

признаю мой метод в данном случае хреновый.

что касается background-color: #fff; то у меня покрайне мере все работает в "святой тройце".

Вадим · April 10, 2008

признаю мой метод в данном случае хреновый.
что касается background-color: #fff; то у меня покрайне мере все работает в "святой тройце".

Спасибо, дружище! Твой метод хороший! Потому что он работает, я только что придумал как сделать рамку и как сделать id="self". Рамка делает просто - создается новый div с стилем #content (... height: 112px; background: #fff;). Далее беру твой .block и заменяю его на абсолютное значение (top: 406px;) - рамка готова.

Теперь для того, чтобы создать id=self (красная рамка на открытой фотке) я добовляю новый класс без определения ссылки, т.е. link3 {border: 6px solid red;} и присваиваю его img!

Готово!

Спасибо всем за участие!

Postal Гуру! )

Dimitry Wolotko · April 10, 2008

признаю мой метод в данном случае хреновый.
что касается background-color: #fff; то у меня покрайне мере все работает в "святой тройце".

Знаешь, пару раз сталкивался с тем, что ос?л не понимал fff - почему я не знаю. Потому я допишу три буквы и буду спокоен в этом ключе.

ZoNT · April 10, 2008

ни разу в 6 осле не сталкивался, чтобы он три буквы не понимал...

Dimitry Wolotko · April 10, 2008

Я вот сижу и вру тебе сейчас

ZoNT · April 10, 2008

Может дело то было и не в тр?хбуквеном цвете, а в синтаксисе. Может где двоеточие вместо точки с запятой поставил и т.д. Всякое бывает, а потом селекторы не работают... Я сразу в фаербаге смотрю соответствие стиля тому, что в css написано: если свойств не хватает - значит в них банальная описка...

Вадим · April 10, 2008

ZoNT - знаешь в чем трабл? http://aliveit.ru/

В IE link1 срезается border-left...

yopopt · April 11, 2008

Я советую Вам вс? переверстать.

Для IE добавьте в a свойство position:relative;.

Sign In

Создание галереи. Наложение border на border

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information