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

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

1280x1024: границы 200px центра 840px 200px границы
1024x768: границы 72px центра 840px границы 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; 
}

Спасибо!

источник

2010-08-19 codea

, так как центральный элемент, если фиксированная ширина, это должно быть легко. боковая граница должна быть помещена как «фон» в тело вместо того, чтобы иметь свой собственный 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, то ваш центрированный элемент останется там, и теперь ваша боковая граница должна быть обрезана браузером.

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

источник

2010-08-19 13:29:12

Вы полностью поняли мою проблему. Это отличное решение! Я дам ему попробовать. Благодаря! – codea

Я пробовал, и он работает. Большое спасибо faizalheesyam! – codea

рад слышать это .. :) –

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

пример:

<style type="text/css"> 
#wrapper { position: relative; } 
#right, #left { width: 200px; position: absolute; background: gray; } 
#right { right: 0; } 
#left { left: 0; } 
#center { width: 840px; margin: 0 auto; background: green; position: relative; } 
</style> 
<body> 
    <div id="wrapper"> 
     <div id="left">left</div> 
     <div id="right">right</div> 
     <div id="center">center</div> 
    </div> 
</body>

источник

2010-08-19 08:55:44 tborychowski

Ваше решение дает почти тот же результат, что и мой. Мне нужно, чтобы боковые панели были на 100% выше, чем в моем коде. Проблема в том, что я показываю сайт с разрешением 1024x768 (я хочу, чтобы боковые панели были вырезаны, а не сжимались). Спасибо. – codea

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

ответ

Смежные вопросы