двухцветный фон в HTML? - PullRequest
Новая
       7

двухцветный фон в HTML?

0 голосов
/ 29 марта 2009

Итак, я хочу сделать фон моего сайта двухцветным. Я имею в виду темно-серый в центре, идущий вниз, но затем по бокам - светло-серый Может быть, 80-85% ширины страницы. Могу ли я пойти на это?

Итак, я хочу, чтобы середина была одного цвета, а две стороны - другого цвета. Есть ли способ установить bgcolor, а затем установить его ширину на 80% или что-то подобное?

Ответы [ 4 ]

1 голос
/ 29 марта 2009

CSS 

<style type="text/css">
    body { background-color: #ccc; }
    div.page { margin: 0 auto; width: 85%; background-color: #ddd; }
</style>

HTML 

<div class="page">
    <h1>Your page</h1>
    <p>Coming soon...</p>
</div>
1 голос
/ 29 марта 2009

Тебе было бы намного лучше использовать фоновое изображение, приятель; предполагая, что вы знаете размер основного монитора вашей целевой аудитории, вы можете просто сделать, скажем, изображение 1024x1 с требуемыми параметрами. Однако, если (и это, скорее всего, так), вы пытаетесь сделать это динамичным, почему бы просто не использовать элемент div, например: 

<style type="text/css">
#main
 {
   width: 84%; 
   background-color: #666666;
   border: 1px solid #cccccc;
   border-width: 0 8% 0 8%;
 }
</style>
<div id="main">#content#</div>

Я заберу это ... Правда ?! Нет процентной ширины для границ?

1 голос
/ 29 марта 2009

Если ваша центральная область имеет фиксированную ширину, вы можете создать изображение с этой шириной, высотой в один пиксель, и затем написать следующий код CSS: 

body {
    background-color: #ccc;
    background-image: url('some-image.jpg');
    background-position-x: center;
    background-repeat: repeat-y;
}

Если нет, вам придется определить <div>. Скорее всего, вам придется определить <div> для хранения вашего контента в любом случае, если вы хотите, чтобы ваш контент центрировался на странице ...

0 голосов
/ 29 марта 2009

Нет. Вам нужно будет создать элемент с темно-серым фоном отдельно от светло-серого элемента.

Что-то вроде: 

<body style="background-color:#ccc;">

<div style="margin:0 auto;background-color:#555;width:85%;">

<!-- rest of the page contents -->

</div>

</body>

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

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

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

...