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

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

У меня тема Acquia Marina, фиксированной ширины, с 3 колонками. Там для sidebar определены все параметры для блока с закругленными углами, задним фоном и т.д., а как сделать чтобы таким же образом оформлялась область между правой и левой колонкой, где находится само содержание страницы.

Буду благодарна за любой совет.

Комментарии

Аватар пользователя Spleshka
Spleshka написал:

Я давно уже писал о закруглениях, делать это можно тремя способами:
Закругление уголков пример 1
Закругление уголков пример 2
Закругление уголков пример 3

По сути, вам, Ольга, достаточно открыть файл page.tpl.php своей темы, обрамить необходимое содержимое в <div> (или несколько, в зависимости от способа закругления), и повесить им соответствующий css. Если не разберётесь - пишите, помогу чем смогу.

30.05.2011 21:11
Аватар пользователя Olech__ka
Olech__ka написал:

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

Я совсем запуталась (уроки читала, пыталась повторить, ничего не вышло).

Вот что поняла:
заходишь в файл page.tpl объявляешь там свои div, например

<div id = "content">

в этом div, назначаешь классы

<div class = "br"></div>

Потом идешь в файл style.css и описываешь как должно отражаться в браузере, например,

#content .br {
    background: url(images/br.png) no-repeat;  /* наш уголок. фон без повторений */ 
    position: absolute;  /* абсолютное позиционирование делает наш уголок неуязвимым ;) */ 
    width: 10px;  /* ширина картинки */ 
    height: 10px;  /* высота картинки */ 
    right: 0;  /* расположение: справа.. */ 
    bottom: 0;  /* .. и снизу */ 
    z-index: -1;  /* тоже не забудьте, а то картинки будут поверх контента */ 
}

Вот. А как мне определить где вставлять эти классы, чтобы завернуть весь контент в него. Т.е. как понять как называется то место, которое мне надо обернуть в div?
Я понимаю, что смотришь в firebage (но я больше люблю google, там тоже похожая штука, если не ошибаюсь), но в файле page.tpl несколько "content":

<div id="content">
              <a name="main-content" id="main-content"></a>
              <?php if ($tabs): ?>
              <div id="content-tabs">
                <?php print $tabs; ?>
              </div>
              <?php endif; ?>
<div id="content-wrapper">
 
            <?php if ($messages): ?>
              <?php print $messages; ?>
            <?php endif; ?>
<div id="content-inner">
 
              <?php if ($help): ?>
                <div id="help">
                  <?php print $help; ?>
                </div>
              <?php endif; ?>
 
                <?php if ($title): ?>
                <h1 class="title"><?php print $title; ?></h1>
                <?php endif; ?>
                <div id="content-content">
                  <?php print $content; ?>
                </div>
              </div><!-- /content-inner -->

Пыталась в первые два вставить код с 3 урока (в page.tpl и в style.css) не вышло.
Скорее всего я не понимаю чего элементарного, но не могу разобраться.
Наверное задаю совсем глупые вопросы, просто это мой первый сайт и все знания пока только поверхностные, но очень хочется разобраться. Может подскажите...

01.06.2011 22:17
Аватар пользователя Spleshka
Spleshka написал:

Оля. Объявление собственного div'а - не обязательно, можно найти любой контейнер, который полностью охватывает необходимое содержимое, и к нему применить третий урок по закруглению уголков. В вашем случае это <div id="main-wrapper">. Получится такой код:

<div id="main-wrapper">
 
        <div class = "br"></div>
        <div class = "bl"></div>
        <div class = "tr"></div>
        <div class = "tl"></div>
        <div class = "t"></div>
        <div class = "b"></div>
        <div class = "l"></div>
        <div class = "r"></div>
 
        <!-- и далее уже ничего не меняем -->
 
        <div id="main" class="clearfix">
 
          <?php if ($breadcrumb): ?>
          <div id="breadcrumb">
            <?php print $breadcrumb; ?>
          </div><!-- /breadcrumb -->
          <?php endif; ?>
 
          <?php if ($sidebar_first): ?>
          <div id="sidebar-first">
            <?php print $sidebar_first; ?>
          </div><!-- /sidebar-first -->
          <?php endif; ?>

Не забудьте для

#main-wrapper

прописать в css:

#main-wrapper {
  position: relative;
}
01.06.2011 23:24
Аватар пользователя Olech__ka
Olech__ka написал:

Сделала, весь фон исчез, просто стало все белое.

02.06.2011 14:30
Аватар пользователя Spleshka
Spleshka написал:

Тут надо смотреть код вашего шаблона и css. Скорее всего, вы где-то ошиблись. Обычно белая страница - признак ошибки в коде.

02.06.2011 16:57

Комментировать