CSS трюки для оформления страницы - PullRequest
Новая
       0

CSS трюки для оформления страницы

1 голос
/ 19 августа 2010

Мне нужно оформить страницу с изображениями границ на каждой стороне. Мне нужно, чтобы страница соответствовала разрешениям 1280x1024 и 1024x768. Можно ли иметь фиксированный размер для центрального делителя и обрезать изображения границ в более низком разрешении?

  • 1280x1024: border-200px center-840px border-200px
  • 1024x768: border-72px center-840px border-72px

Я сделал два изображения с 200px X 5px. Я пытался использовать свойство float без успеха. Итак, я сделал это до сих пор, он работает в 1280x1024, но не в 1024x768 (это слишком широко).

HTML: 

<body>
  <div id="right"></div>
  <div id="left"></div>
  <div id="center">
    <h1>Title</h1>
    <p>Content here</p>
  </div>
</body>

CSS: 

html {
  margin: 0px;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0;
  width: 100%;
  background-color: white;
  overflow: auto; /*to clear the floats*/
}

#right {
  clear: both;
  position: absolute;
  right: 0;
  background-image: url('/site_media/images/border-right.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#left {
  clear: both;
  position: absolute;
  left: 0;
  background-image: url('/site_media/images/border-left.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#center {
  width: 840px;
  margin: 0px auto;
  padding-left:10px;
  padding-right:10px;
}

Спасибо!

Ответы [ 2 ]

1 голос
/ 19 августа 2010

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

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

<style type="text/css">
body { /* can also use your own div */
   background:url(path_to_the_single_image) repeat-y top center;
}

#center {
   width:840px;
   margin:0 auto; /* centered the div */
   background:green;
}
</style>

<body>
   <div id="center">center content</div>
</body>

вот и все!Теперь у вас должен быть элемент фиксированной ширины в центре, а боковые границы - на заднем плане.если вы загрузите его в 1280, вы должны увидеть полную границу, а если вы измените размер до 1024, ваш центрированный элемент должен остаться там, а ваша боковая граница только что должна быть обрезана браузером.

Позвольте мнезнаю, если это то, что вы ищете ..:)

0 голосов
/ 19 августа 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...