Jump to content
  • 0

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

Вадим

Asked by Вадим,

 Share

Question

Вадим Explorer

Вадим

Posted
Posted

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

Существую 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?

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0
Postal Explorer

Postal

Posted
Posted 
<!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>

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
Postal Explorer

Postal

Posted
Posted 

<!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>

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

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

<!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>

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

Posted
  • Author
Posted

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

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

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

Подскажите?

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

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

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

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

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

Posted
  • Author
Posted
щас посмотрю

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

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>

Link to comment
Share on other sites
  • 0
Dimitry Wolotko Explorer

Dimitry Wolotko

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

Лучше так:

background:#ffffff;

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

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

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

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

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

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

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

Лучше так:

background:#ffffff;

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

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

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

Link to comment
Share on other sites
  • 0
Вадим Explorer

Вадим

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

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

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

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

Готово!

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

Postal Гуру! )

Link to comment
Share on other sites
  • 0
Dimitry Wolotko Explorer

Dimitry Wolotko

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

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

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept