вопрос по верстке сайта

Djeak · 23.09.2010, 13:25

Добрый день. Подскажите, пожалуйста, почему так получается, не могу врубится в смысл метода:
Использования трех колонок

Код:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Three Column Layout in CSS</title>
    <link rel="stylesheet" type="text/css" href="ch09_eg5.css" />
  </head> 
  <body>
    <div class="page">
      <div class="header"><h2>My Company Name</h2></div>
      <div class="nav">
        <a href="">Home</a><br /><a href="">Products</a><br /><a href="">Services</a><br /><a href="">About Us</a><br /><a href="">Contact Us</a>
      </div>
      <div class="content">
        <h2>Sample Web Page</h2>
<p> </p>
<p> </p>
      </div>
      <div class="right">.</div>
      <div class="clear">
</div>
    </div>
  </body>
</html>

Код:

body {
  color:#000000;
  background-color:#efefef;
  font-family:arial, verdana, sans-serif;}

.page {
  width:980px;
  border:1px solid #000000;
  background-image:url(images/3columnbackground.gif);
  background-repeat:repeat-y;
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  padding:0px;}

.header {background-color:#ffffff;}

.nav {
  float:left;
  width:100px;}

.content {
  float:left;
  width:600px;}

.right {
  float:left;
  width:278px;}

.clear{clear:both;}

Почему я задаю фоновый рисунок для все странице, а рисунок отображается только для колонок?
Можно ли вместо рисунка, просто использовать фон?

Niemans · 23.09.2010, 13:50

Код HTML:

body {
  color:#000000;
  font-family:arial, verdana, sans-serif;
  background: #efefef url(images/3columnbackground.gif) 0 0 repeat-y;
}

Djeak · 23.09.2010, 13:55

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

Niemans · 23.09.2010, 14:10

Цитата:

Т.е. почему происходит именно такое отображение, что фоновый рисунок задается для всей страницы, а применяется для колонок.

Потому что его не задаете для всей страницы.

Djeak · 23.09.2010, 14:28

Извините, не так выразился, не для всей страницы, а для класса page, в который входят классы: header nav content right. И почему получается так, что фоновый рисунок совпадает с размерами класса nav и right, а для content не применяется.
Хочу понять технологию, чтобы это использовать в дальнейшем.

Niemans · 23.09.2010, 14:37

background-repeat:repeat-y;
изображение растягивается вертикально, соответственно его не хватает на другие контейнеры, без скриншота сложно понять вас.

Djeak · 23.09.2010, 15:14

scrin.JPG

Djeak · 23.09.2010, 15:15

Я имею ввиду левую и правую колонку.

Niemans · 23.09.2010, 15:35

Djeak · 23.09.2010, 16:10

Так почему тогда свойства класса page:
background-image:url(images/3columnbackground.gif);
background-repeat:repeat-y;
Растягивают картинку только на боковые колонки, и прописано это в общем классе page, а не в nav и right.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вопрос по верстке на странице	Ni_Splinter	HTML, CSS, JavaScript	5	19.04.2012 22:01
Вопрос по верстке	Niemans	Кальянная	9	10.05.2010 23:11
Вопрос по верстке	Niemans	HTML, CSS, JavaScript	108	07.05.2010 17:09
Вопрос по CSS верстке	localhost	HTML, CSS, JavaScript	4	26.03.2009 18:47
Вопрос по верстке	sanchez911	HTML, CSS, JavaScript	2	01.03.2006 21:21

23.09.2010, 13:50	#22
Niemans	Код HTML: body { color:#000000; font-family:arial, verdana, sans-serif; background: #efefef url(images/3columnbackground.gif) 0 0 repeat-y; }

23.09.2010, 13:55	#23
Djeak	Вопрос заключался в другом, как работает этот метод. Т.е. почему происходит именно такое отображение, что фоновый рисунок задается для всей страницы, а применяется для колонок.

23.09.2010, 14:28	#25
Djeak	Извините, не так выразился, не для всей страницы, а для класса page, в который входят классы: header nav content right. И почему получается так, что фоновый рисунок совпадает с размерами класса nav и right, а для content не применяется. Хочу понять технологию, чтобы это использовать в дальнейшем.

23.09.2010, 14:37	#26
Niemans	background-repeat:repeat-y; изображение растягивается вертикально, соответственно его не хватает на другие контейнеры, без скриншота сложно понять вас.

23.09.2010, 15:15	#28
Djeak	Я имею ввиду левую и правую колонку.

23.09.2010, 16:10	#30
Djeak	Так почему тогда свойства класса page: background-image:url(images/3columnbackground.gif); background-repeat:repeat-y; Растягивают картинку только на боковые колонки, и прописано это в общем классе page, а не в nav и right.

Опции темы
Версия для печати Отправить по электронной почте

23.09.2010, 13:25
Ссылки

23.09.2010, 15:35	#29
Niemans	И?