Jump to content
  • 0

Рамка из картинок вокруг контента на слоях


DelpH
 Share

Question

Всем доброго дня!

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

Пример того, что есть сейчас (только рамка) вот тут:

http://www.elfworld.ru/eryn/design/hibernia/content.htm

Стили прямо там что бы проще и нагляднее.

Верхняя и нижняя линия вроде бы везде хорошо. А вот с центром (3 слоя в общем слое content_main) проблема. Высоты контента я не знаю. Центр в красной рамке. Нужно что бы фон в слое слева и справа от слоя контента тянулся, его же вообще нет. Как я понял, дело в высоте. Слева для пример задал height: 100px - немного фона появилось)

Можно ли как-то не большой кровью вернуть это дело в рабочее состояние?

Таблицами было проще, но хочу слоями)

Пример со скругленными углами видел, но углы и у меня работают. Смотрел пример слоев одинаковой высоты. Тоже мало помогло.

Надеюсь, более менее понятно объяснил :o Буду благодарен за ответы и советы.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

я в соседнем топе выкладывал логику написания данных структур

http://forum.htmlbook.ru/viewtopic.php?pid=35327#p35327

ознакомьтесь, пожалуйста с предоставленным кодом.

вот такой структурой вы можете описать верх, центр, низ и все будет красиво,

и что главное кроссбраузерно и не требует использования float.

если не разберетесь, могу выслать шаблончик на мыло :o

Link to comment
Share on other sites

  • 0

не сочтите за флуд, но мне кажется такие вещи все же лучше делать таблицами. есть неплохая общеобразовательная статья на тему таблиц и слоев. http://webtest.chebykin.ru/articles/sophistication/

Link to comment
Share on other sites

  • 0

да. ето вполне можно зделать таблицей.

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

я б не стал помещать весь сайт в таблицу.

Link to comment
Share on other sites

  • 0

a.e.koshelev, на привед?нной вами ссылке есть одна фраза, которая очень точно, на мой взгляд, определяет мой вектор работы над сайтом.

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

Link to comment
Share on other sites

  • 0

Постараюсь разобраться, если что - обращусь. Спасибо за ссылку.

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

Link to comment
Share on other sites

  • 0

Посмотрел код. Не совсем понял, как он может мне помочь. Там пример 3х столбцов, да и при этом точно указана высота. Мне же нужно сверстать мои 8 картинок в 8 слоев + слой с контентом)

Link to comment
Share on other sites

  • 0

Нашел отличный пример.

http://www.alistapart.com/articles/customcorners/

Во многих случаях поможет.

Но в моем нет. Если в ширину картинку я могу сделать 1600 что бы на все разрешения подошла, то по высоте там ограничение тоже картинкой. А у меня будет порой большие длинные статьи, увы. Но сама идея супер.

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

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