Рамка из картинок - как правильно?

Molotov · 14.11.2011

Здравствуйте!
Веб дизайном занимаюсь по мере необходимости, т.о. верстка не относится к числу моих талантов.
Я работаю сейчас над фансайтом компьютерной игры. В качестве оформления я решил использовать элементы интерфейса собственно самой игры.
Один из ключевых элементов - рамка вокруг контента, сделанная из изображений.
Проблема в том, что она разваливается, как оказалось, в браузере chrome и в IE (если не включен режим совместимости). Возможно, в опере также плохо отображается - не пробовал.
Вот например страница регистрации: http://lastcitadel.ru/Registration.aspx
А вот страница новостей, тут все хорошо и так как задумывалось: http://lastcitadel.ru/News.aspx

Хочу узнать как сделать чтобы все было хорошо. Почему все разваливается?
Я тут недавно узнал еще, что таблицами структурировать контент - это моветон и вообще неправильно, и нужно применять вместо таблиц дивы. Можно ли сделать такую рамку дивами, и как?

Спасибо

sanek · 14.11.2011

вроде бы все хорошо выглядит.

Molotov · 14.11.2011

sanek сказал(а):
вроде бы все хорошо выглядит.

а какой у вас браузер?
Я увидел косяки когда был у друга в гостях и он открыл мой сайт - у него браузер Chrome. Я себе тоже поставил хром, и ту же картину увидел неприятную. А именно вот это:

sanek · 14.11.2011

firefox. выглядит нормально. никаких косяков.
попробуйте поэкспериментируйте с шириной, видимо это зависит от монитора

ScripT · 14.11.2011

дивами не можно а нужно.когда сделаете дивами: поставить обтекание, убрать отступы и будет цельная рамка.

htmlbook.ru/css3-na-primerakh/dekorativnye-ramki
для примера

Molotov · 14.11.2011

Спасибо, интересно.
Но, я так понимаю, для эксплорера этот пример не работает?

A-F · 14.11.2011

забудь IE

хотя все можно решить и для него

Molotov · 15.11.2011

Мне хотелось бы чтобы сайт работал во всех браузерах.
Экспериментировал с дивами, вот что получилось:

Код такой:

Код:

<body>
  <div class="framed">
	<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cornerLT"></div>
<div class="cornerRT"></div>
<div class="cornerRB"></div>
<div class="cornerLB"></div>
<div class="centerTop">
<div class="content">
   <p align="justify">Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.</p>
   </div>
   </div>
</body>

т.е. просто куча дивов с position: absolute и соответствующими background-image и background-position.

Это работает в эксплорере но не работает в хроме и фоксе

Подскажите как правильно сделать,
чтобы везде работало.

Или хотя бы в хроме и фоксе
Суть в том что border-image позволяет задать углы и стороны, но не позволяет блямбы в центре верхней и нижней стороны. Так что он не подходит видимо.

Спасибо!

Jackito · 15.11.2011

Почему background-image и background-position не работает в хроме и фоксе, там это в первую очередь работает?

Molotov · 15.11.2011

работают, но не так как в эксплорере.
получается каша какая-то.
вот можете посмотреть:

http://www.sendspace.com/file/be334i

Jackito · 15.11.2011

А не легче ли сделать верхнюю часть одним блоком, по бокам полоски это два других блока с атрибутом repeat-y и один нижний блок и не мучаться с миллионом картинок

Molotov · 15.11.2011

спасибо за идею, сейчас попробую

Jackito · 15.11.2011

Если не получится, ссылку кидай на то что сделаешь подправим.

Molotov · 15.11.2011

Уже лучше но все равно плохо. Правая граница не отображается нормально ни в одном браузере, левая не дорисовывается в эксплорере.
посмотреть можно тут: http://www.sendspace.com/file/84r6eb

верх и низ выводятся хорошо, проблема с центральным блоком:

Код:

  <div class="leftSide">
   <div class="rightSide"></div>
   <div class="content">
<p align="justify">Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te
feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.</p>
   </div>
  </div>

Стили:

Код:

   .leftSide
   {
background-image: url("ver.bmp");
background-position: left;
background-repeat: repeat-y;
width: 100%;
   }
   .content
   {
  overflow-y: auto; 
  margin-left: 70px;
  margin-right: 20px;
  float: left;
  border: solid 1px;
   }
    .rightSide
{
background-image: url("ver.bmp");
width: 50px;
float: right;
background-repeat: repeat-y;
}

Jackito · 15.11.2011

То эту ссылку приводите в пример, то сейчас что то непонятное верстаете, что тот же пример нельзя редактировать?

Molotov · 16.11.2011

в примере углы имеют разные размеры, поэтому я начал тренироваться на том что попроще.
вообще проблема решена.
центральную часть я сделал из двух дивов вместо трех, бекграунд первого показывает левую сторону, второй вложен в первый и показывает правую сторону а также в нем помещается контент.

спасибо всем!

Рамка из картинок - как правильно?

Molotov

Member

sanek

Member

Molotov

Member

sanek

Member

ScripT

Fighter

Molotov

Member

A-F

Well-Known Member

Molotov

Member

Jackito

Designer

Molotov

Member

Jackito

Designer

Molotov

Member

Jackito

Designer

Molotov

Member

Jackito

Designer

Molotov

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей