CODEWITHSUNDEEP
ruby-on-railsruby
GeT_Lurk3D
GeT_Lurk3D

Reputation: 65

Trying to follow this tutorial in this book, but the CSS/Images supplied are not being shown on the page

Trying to follow this tutorial in this book, but the images supplied are not being shown on the page my /views/layouts/ads.html.erb looks like this 

<!doctype HTML>
<html>
<head>
    <title>Ads: <%= controller.action_name %></title>
    <%= stylesheet_link_tag 'default.css' %>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <div>
                <h1>MeBay</h1>
                <ul id="nav">
                    <li><a href="/ads/">All Ads</a></li>
                </ul>
            </div>
        </div>

        <div id="content">
            <%= yield %>
        </div>
        <div id="clearfooter"></div>
    </div>
    <div id="footer"></div>
</body>
</html>

CSS in /app/assets/stylesheets looks like this

html, body { height: 100%; }

body { background-color: #e6dacf; background-image: url('/images/bg.png'); background-position: top center; background-repeat: repeat-y; font-family: "Trebuchet MS", Arial, san-serif; font-size: 14px; margin: 0; padding: 0; text-align: center; }

a { color: #000; }
a:hover { background: #000; color: #e6dacf; }

div#wrapper { min-height: 100%; }
* html div#wrapper { height: 100%; }

div#header { background: url('/images/bgHeader.png'); height: 100px; padding: 8px 0 0 0; }
div#header div { margin: 0 auto; position: relative; width: 800px; }
div#header h1 { left: 0; margin: 0; position: absolute; }
div#header h1 { background: url('/images/logo.png') no-repeat; display: block; height: 0; margin: 0 auto; padding: 92px 0 0 0; overflow: hidden; width: 319px; }

ul#nav { float: right; list-style: none; margin: 0; padding: 69px 0 0 0; }
ul#nav li { background: #e6dacf; border: solid #000; border-width: 2px 2px 0 2px; float: left; margin: 0 0 0 2px; }
ul#nav a { display: block; padding: 3px 6px 0 6px; text-decoration: none; }
ul#nav a:hover { display: block; padding: 3px 6px 7px 6px; }
ul#nav a.current { padding-bottom: 8px; }
ul#nav a.current:hover { background: #e6dacf; color: #000; cursor: default; }

div#content{ margin: 0 auto; padding: 20px 0; text-align: left; width: 720px; height: 300px}
div#content img { border: 10px solid #000; float: right; margin: 18px 0 0 20px; }
div#content h2 { border: solid #999; border-width: 0 0 5px 0; font-size: 28px; margin: 0; padding: 0 0 10px 0; }
div#content p { margin: 0; padding: 4px 6px 10px 0; }


div#clearfooter { height: 110px; }

div#footer { background: url('/images/bgFooter.png'); height: 110px; margin: -110px auto 0 auto; }

and I placed the supplied images in /app/assets/images

This is how it should look, and also what it looks like for me

https://i.sstatic.net/5lvZc.jpg

Upvotes: 0

Views: 42

Answers (1)

ddewaele
ddewaele

Reputation: 22603

You should debug these kinds of problems with either

Both provide excellent support for resolving js / css related issues. In your particular case, you need to check the Network or Net tabs in the tools to see how the CSS gets loaded. Most likely you'll see an error in loading the stylesheet.

The tool will show you the CSS path its trying to access and you can debug it from there...

Upvotes: 1

Related Questions