CSS railstutorial

저는 Michael Hartl 's Rails 튜토리얼을 따라하고 코드가 완전히 같아 보이더라도 레이아웃을 자신의 것과 일치시키는 데 어려움을 겪고 있습니다. show.html.erb에서 H1에서CSS railstutorial

세 가지 ...

Gravatar에 너무 작습니다.

show.html.erb의 h1에있는 user.name은 두 줄로 너무 큽니다.

마지막으로 페이지 하단의 application.html.erb에있는 디버그 상자가 바닥 글을 지우지 않는 것처럼 보입니다. 바닥 글 아래 45px가되는 대신 맨 위에 박는 소리가납니다.

custom.css.scss

@import "bootstrap"; 

/* mixins, variables, etc. */ 

$grayMediumLight: #eaeaea; 

@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* universal */ 

html { 
    overflow-y: scroll; 
} 

body { 
    padding-top: 60px; 
} 

section { 
    overflow: auto; 
} 

textarea { 
    resize: vertical; 
} 

.center { 
    text-align: center; 
} 

.center h1 { 
    margin-bottom: 10px; 
} 

/* typography */ 

h1, h2, h3, h4, h5, h6 { 
    line-height: 1; 
} 

h1 { 
    font-size: 3em; 
    letter-spacing: -2px; 
    margin-bottom: 30px; 
    text-align: center; 
} 

h2 { 
    font-size: 1.2em; 
    letter-spacing: -1px; 
    margin-bottom: 30px; 
    text-align: center; 
    font-weight: normal; 
    color: $grayLight; 
} 

p { 
    font-size: 1.1em; 
    line-height: 1.7em; 
} 

/* header */ 

#logo { 
    float: left; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    padding-top: 9px; 
    font-weight: bold; 
    line-height: 1; 
} 

#logo:hover { 
    color: #fff; 
    text-decoration: none; 
} 

/* footer */ 

footer { 
    margin-top: 45px; 
    padding-top: 5px; 
    border-top: 1px solid $grayMediumLight; 
    color: $grayLight; 
    a { 
    color: $gray; 
    &:hover { 
     color: $grayDarker; 
    } 
    } 
    small { 
    float: left; 
    } 
    ul { 
    float: right; 
    list-style: none; 
    li { 
     float: left; 
     margin-left: 10px; 
    } 
    } 


/* miscellaneous */ 

.debug_dump { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 45px; 
    @include box_sizing; 
} 

/* sidebar */ 

aside { 
    section { 
    padding: 10px 0; 
    border-top: 1px solid $grayLighter; 
    &:first-child { 
     border: 0; 
     padding-top: 0; 
    } 
    span { 
     display: block; 
     margin-bottom: 3px; 
     line-height: 1; 
    } 
    h1 { 
     font-size: 1.4 em; 
     text-align: left; 
     letter-spacing: -1px; 
     margin-bottom: 3px; 
     margin-top: 0px; 
    } 
    } 
} 

.gravatar { 
    float: left; 
    margin-right: 10px; 
} 
}

show.html.erb

<% provide(:title, @user.name) %> 
<div class="row"> 
    <aside class="span4"> 
     <section> 
      <h1> 
       <%= gravatar_for @user %> 
       <%= @user.name %> 
      </h1> 
     </section> 
    </aside> 
</div>

application.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%= full_title(yield(:title)) %></title> 
    <%= stylesheet_link_tag "application", media: "all", 
              "data-turbolinks-track" => true %> 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    <%= csrf_meta_tags %> 
    <%= render 'layouts/shim' %> 
    </head> 
    <body> 
    <%= render 'layouts/header' %> 
    <div class="container"> 
     <%= yield %> 
     <%= render 'layouts/footer' %> 
     <%= debug(params) if Rails.env.development? %> 
    </div> 

    </body> 
</html>

Gemfile

source 'https://rubygems.org' 
ruby '2.0.0' 
#ruby-gemset=railstutorial_rails_4_0 

gem 'rails', '4.0.5' 
gem 'bootstrap-sass', '2.3.2.0' 
gem 'sprockets', '2.11.0' 
gem 'bcrypt-ruby', '3.1.2' 
gem 'faker', '1.1.2' 
gem 'will_paginate', '3.0.4' 
gem 'bootstrap-will_paginate', '0.0.9' 

group :development, :test do 
    gem 'sqlite3', '1.3.8' 
    gem 'rspec-rails', '2.13.1' 
    # The following optional lines are part of the advanced setup. 
    # gem 'guard-rspec', '2.5.0' 
    # gem 'spork-rails', '4.0.0' 
    # gem 'guard-spork', '1.5.0' 
    # gem 'childprocess', '0.3.6' 
end 

group :test do 
    gem 'selenium-webdriver', '2.35.1' 
    gem 'capybara', '2.1.0' 
    gem 'factory_girl_rails', '4.2.0' 
    gem 'cucumber-rails', '1.4.0', :require => false 
    gem 'database_cleaner', github: 'bmabey/database_cleaner' 

    # Uncomment this line on OS X. 
    # gem 'growl', '1.0.3' 

    # Uncomment these lines on Linux. 
    # gem 'libnotify', '0.8.0' 

    # Uncomment these lines on Windows. 
    # gem 'rb-notifu', '0.0.4' 
    # gem 'wdm', '0.1.0' 
end 

gem 'sass-rails', '4.0.1' 
gem 'uglifier', '2.1.1' 
gem 'coffee-rails', '4.0.1' 
gem 'jquery-rails', '3.0.4' 
gem 'turbolinks', '1.1.1' 
gem 'jbuilder', '1.0.2' 

group :doc do 
    gem 'sdoc', '0.3.20', require: false 
end 

group :production do 
    gem 'pg', '0.15.1' 
    gem 'rails_12factor', '0.0.2' 
end

이 튜토리얼 페이지 Tutorials page

에게 인이 광산, 당신이 Gravatar에, H1 및 디버그 상자가 상당히 꺼져 볼 수 있습니다. My page

당신은, 당신의 CSS에 바닥 글 요소를 닫 실패} 닫는처럼 보이는 CSS 파일의 끝에 한

출처

2014-06-05 Tom

다른 브라우저는 다음과 같이 약간 다른 디스플레이를 유발할 수 있습니다 ... 얼마나 멀리 떨어져 있습니까? –

나는 firefox, chrome 및 ie를 확인했으며 모두 문제가 있습니다. 그것은 충분히 고정되어 있어야합니다. – Tom

나는이 튜토리얼의 세부 사항에 익숙하지 않다. 당신의 HTML 페이지를 실제 작업중인 HTML 페이지 예제 또는 이미지와 비교하고 있는가? –

이 제대로 작동이 아래 CSS를 방지 할 수 있습니다 :

footer { 
    margin-top: 45px; 
    padding-top: 5px; 
    border-top: 1px solid $grayMediumLight; 
    color: $grayLight; 
    a { 
    color: $gray; 
    &:hover { 
     color: $grayDarker; 
    } 
    } 
    small { 
    float: left; 
    } 
    ul { 
    float: right; 
    list-style: none; 
    li { 
     float: left; 
     margin-left: 10px; 
    } 
    } 
} ----!!! Missing! 

.gravatar { 
    float: left; 
    margin-right: 10px; 
} 
} ----!!! Extra }!!

출처

2014-11-21 20:31:03 hedgehog

CSS railstutorial

답변

관련 문제