Jump to content
  • 0

Border. Самый удобный путь для достижения эффекта.


Dezmont
 Share

Question

В общем етсь у меня вот такая страница:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
<meta name="description" content="Красивые картинки на рабочий стол и многое другое. Бесплатно, удобно, быстро." >
<meta name="keywords" content="Красивые обои на рабочий стол, скачать обои, обои для рабочего стола, бесплатные обои" >
<link href="design/style.css" type=text/css rel=stylesheet >
<title>Красивые обои на рабочий стол</title>
</head>
<body>
<img src="design/laminat.jpg" alt="" class="bg">

<div id="glass1">
<div id="glass2">
</div>
</div>


<div id="head">
<img src="design/logo.png" width="338" height="228">
</div>

<div id="two-in-one">
<div id="category">
<h3><a href="other.php?cat=abstraction">Абстракция</a></h3>
<h3><a href="other.php?cat=aviation">Авиация</a></h3>
<h3><a href="other.php?cat=auto">Автомобили</a></h3>
<h3><a href="other.php?cat=anime">Аниме</a></h3>
<h3><a href="other.php?cat=city">Города</a></h3>
<h3><a href="other.php?cat=girls">Девушки</a></h3>
<h3><a href="other.php?cat=animals">Животные</a></h3>
<h3><a href="other.php?cat=games">Игры</a></h3>
<h3><a href="other.php?cat=cinema">Кинофильмы</a></h3>
<h3><a href="other.php?cat=space">Космос</a></h3>
<h3><a href="other.php?cat=men">Мужчины</a></h3>
<h3><a href="other.php?cat=cartoons">Мультфильмы</a></h3>
<h3><a href="other.php?cat=nature">Природа</a></h3>
<h3><a href="other.php?cat=sport">Спорт</a></h3>
<h3><a href="other.php?cat=fantasy">Фантастика</a></h3>
</div>

<div id="pictures">

<table cellspacing=0 cellpadding=0 width=100% border=0>
<tr>
<td class=img><a href="other.php?cat=abstraction"><img src="design/index/thumbs/abstraction.jpg" width="180" height="115" class="shadow"></a>></td>
<td class=img><a href="other.php?cat=aviation"><img src="design/index/thumbs/aviation.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img>><a href="other.php?cat=auto"><img src="design/index/thumbs/auto.jpg" width="180" height="115" class="shadow"></a></td>
</tr>
<tr>
<td class=img><a href="other.php?cat=anime"><img src="design/index/thumbs/anime.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=city"><img src="design/index/thumbs/city.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=girls"><img src="design/index/thumbs/girls.jpg" width="180" height="115" class="shadow"></a></td>
</tr>
<tr>
<td class=img><a href="other.php?cat=animals"><img src="design/index/thumbs/animals.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=games"><img src="design/index/thumbs/games.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=cinema"><img src="design/index/thumbs/cinema.jpg" width="180" height="115" class="shadow"></a></td>
</tr>
<tr>
<td class=img><a href="other.php?cat=space"><img src="design/index/thumbs/space.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=men"><img src="design/index/thumbs/men.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=cartoons"><img src="design/index/thumbs/mult.jpg" width="180" height="115" class="shadow"></a></td>
</tr>
<tr>
<td class=img><a href="other.php?cat=nature"><img src="design/index/thumbs/nature.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=sport"><img src="design/index/thumbs/sport.jpg" width="180" height="115" class="shadow"></a></td>
<td class=img><a href="other.php?cat=fantasy"><img src="design/index/thumbs/fantasy.jpg" width="180" height="115" class="shadow"></a></td>
</tr>
</table>

</div>
</div>

<div id="footer">
<p>Данный сайт представляет собой частную коллекцию. Размещённые на сайте фотографии, обои для рабочего стола и другие материалы являются собственностью их авторов. Коммерческое использование возможно только с их разрешения. Любая фотография, размёщённая на сайте <a href="index.php">wpwh.ru</a>, может быть удалена по запросу автора.</p>
<p align="center"><em>©</em> <a href="index.php">wpwh.ru</a> 2010</p>
</div>

</body>
</html>

Вот стили:

* {
margin: 0;
}

img.bg {
height: 100%;
min-width: 1000px;
min-height: 500px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -2;
}

#head {
width:670px;
height:228px;
padding: 5px 0px 0px 350px;
margin-left:auto;
margin-right:auto;
}

#glass1 {
position:fixed;
z-index:-1;
width: 1000px;
height: 100%;
background-color: #FFF;
left:50%;
margin:0 0 0 -500px;
opacity: 0.7;
-webkit-box-shadow:#333 10px 0px 4px;
}

#glass2 {
position:fixed;
z-index:-1;
width:1000px;
height:100%;
left:50%;
margin:0 0 0 -500px;
-webkit-box-shadow:#333 -10px 0px 4px;
}

#two-in-one {
width: 1000px;
margin-left:auto;
margin-right:auto;
padding: 0px 0px 0px 20px;
}

#category {
width: 200px;
float:left;
padding:10px 0px 0px 0px;
}

#pictures {
margin-left:200px;
text-align:center;
}

#footer {
text-align: justify;
padding:15px 15px 15px 15px;
text-indent:20px;
clear:both;
}

img.shadow {
-webkit-box-shadow:#333 20px 20px 4px;
border-radius:20px;
margin:0px 0px 30px 0px;

}


h3 {
margin-bottom: 5px;
font-family: Verdana, Geneva, sans-serif;
font-weight: 100;
font-size:15px;
text-shadow:#333 20px 20px 3px;
}

a {
color: #000;
text-decoration:none;
}

Всё внимание к блоку <div id="pictures">. Мне нужно применить свойство border-radius и border для одного из элементов <div id="pictures">.Чтобы получить рамку вокруг изображения с возможностью регулировки отступа от этой рамки до изображения.

К самому <img> рамку никак не приделать, потому что сдвигается тень. К <a> тоже не получается, потому что вся область под рамкой позиционируется как ссылка. Остаётся <td class="img">.

Рамка получается, но она идёт по границе ячейки и примыкает к рамке следующей ячейки. Можно ли как-нибудь отодвинуть ячейки друг от друга? Чтобы рамки были на каком то расстоянии друг от друга.

P.S.

А если пустой див слой вставить в ячейку и сделать на нём рамку, можно ли как-нибудь подогнать эту рамку в нужное место. Через абсолютное позиционирование не получается, потому что оно относительно краёв окна задаётся. А мне бы относительно ячейки...=/

Edited by Dezmont
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

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

×
×
  • 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