Сайт имеет не такой вид как в примере

@mobilesoft · Регистрация: 18.12.2010

Студворк — интернет-сервис помощи студентам

Делаю пример с книги "Гибкая разработка веб-приложений в среде Rails (Для профессионалов)", вот так должен выглядит сайт: (1 фото). А выглядит так (фото 2). Вот коды:

Rails
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
  <title>Pragprog Books Online Store</title>
  <%= stylesheet_link_tag    "store"%>
  <%= stylesheet_link_tag    "application"%>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body class="<%= controller.controller_name %>">
    <div id="banner">
        <%= image_tag("logo.png") %>
        <%= @page_title || "Pragmatic Bookshelf" %>
    </div>
 
    <div id="colums">
        <div id="side">
            <ul>
                <li><a href="http://www.spaces.ru">Home</a></li>
                <li><a href="http://www.spaces.ru">Questions</a></li>
                <li><a href="http://www.spaces.ru">News</a></li>
                <li><a href="http://www.spaces.ru">Contact</a></li>
            </ul>
        </div>
    <div id="main">
<%= yield %>
    </div>
    </div>
</body>
</html>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
 
<h1>Your Pragmatic Catalog</h1>
 
<% @products.each do |product| %>
    <div class="entry">
        <%= image_tag(product.image_url) %>
        <h3><%= product.title %></h3>
        <%= sanitize(product.description) %>
        <div class="price_line">
            <span class="price"><%= number_to_currency(product.price) %></span>
        </div>
    </div>
<% end %>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
#banner{
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
 
img{
float: left;
}
 
}
 
#notice{
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
 
#colums{
 
 
#main{
 
margin-left: 17em;
padding: 1em;
background: white;
}
 
#side{
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
 
ul{
 
padding: 0;
 
li{
list-style: none;
 
a{
color: #bfb;
font-size: small;
}
}
}
}
}

@Ty4ka · 09.02.2013, 19:23

<div id="colums">

заменить на
<div id="columns">

@mobilesoft · 09.02.2013, 19:32 **[ТС]**

Сообщение от Ty4ka

<div id="colums">

заменить на
<div id="columns">

но у меня и в css файле написано colums

@Ty4ka · 09.02.2013, 20:03

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#banner{
    background:#9c9;
    padding:10px;
    border-bottom:2px solid;
    font:small-caps 40px/40px "Times New Roman",serif;
    color:#1c611c;
    text-align:center;
    
    img{
        float:left;
        height: 44px;
    }
}
 
#notice{
    color:#000 !important;
    border:2px solid red;
    padding:1em;
    margin-bottom:2em;
    background-color:#f0f0f0;
    font:bold smaller sans-serif;
}
 
#colums{
    background:#fff;
    
    #main{
        margin-left:16em;
        padding:1em;
        background:white;
    }
    
    #side{
        float:left;
        padding:1em 2em;
        width:13em;
        background:#fff;
        
        ul{
            padding:0;
            
            li{
                list-style:none;
               
                a{
                    color:#bfb;
                    font-size:small;
                }
            }
        }
    }
}

@mobilesoft · 09.02.2013, 20:06 **[ТС]**

Сообщение от Ty4ka

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#banner{
    background:#9c9;
    padding:10px;
    border-bottom:2px solid;
    font:small-caps 40px/40px "Times New Roman",serif;
    color:#1c611c;
    text-align:center;
    
    img{
        float:left;
        height: 44px;
    }
}
 
#notice{
    color:#000 !important;
    border:2px solid red;
    padding:1em;
    margin-bottom:2em;
    background-color:#f0f0f0;
    font:bold smaller sans-serif;
}
 
#colums{
    background:#fff;
    
    #main{
        margin-left:16em;
        padding:1em;
        background:white;
    }
    
    #side{
        float:left;
        padding:1em 2em;
        width:13em;
        background:#fff;
        
        ul{
            padding:0;
            
            li{
                list-style:none;
               
                a{
                    color:#bfb;
                    font-size:small;
                }
            }
        }
    }
}

не помогло

@Ty4ka · 09.02.2013, 20:09

Может браузер закешировал предыдущее состояние? Опера и лиса вроде по умолчанию кешируют все что только можно.

У меня в хроме было нормально все

@mobilesoft · 10.02.2013, 11:18 **[ТС]**

Сообщение от Ty4ka

Может браузер закешировал предыдущее состояние? Опера и лиса вроде по умолчанию кешируют все что только можно.

У меня в хроме было нормально все

та нет, у меня тоже хром.

@RinatV · 10.02.2013, 13:53

css main должен быть фиксированным атрибутом width. Поставьте Firebug с ним удобно.

гуглом: css float left 2 column вот тут хотя и на английском. Но все становится понятным при переходе на результат изменений после пунктов, 4-й пункт, ваш случай.

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@Ty4ka 5 / 5 / 0 Регистрация: 13.11.2011 Сообщений: 24
	09.02.2013, 19:23
	<div id="colums"> заменить на <div id="columns"> 0

@Ty4ka 5 / 5 / 0 Регистрация: 13.11.2011 Сообщений: 24
	09.02.2013, 20:09
	Может браузер закешировал предыдущее состояние? Опера и лиса вроде по умолчанию кешируют все что только можно. У меня в хроме было нормально все 0

@RinatV http://1248.site 131 / 119 / 20 Регистрация: 15.05.2012 Сообщений: 347 Записей в блоге: 10
	10.02.2013, 13:53
	css main должен быть фиксированным атрибутом width. Поставьте Firebug с ним удобно. гуглом: css float left 2 column вот тут хотя и на английском. Но все становится понятным при переходе на результат изменений после пунктов, 4-й пункт, ваш случай. 0