How do I float my image tag in ruby on rails?
Question
I want to float logo.png to the left but it won't work. Here's my Rails code:
<!DOCTYPE html>
<html>
<head>
<title>Pragprog Books Online Store</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body class="<%= controller.controller_name %>">
<div id="banner">
<%= image_tag ("logo.png") %> <----------- can't move this thing!
<%= @page_title || "Pragmatic Bookshelf"%>
</div>
<div id ="columns">
<div id="side">
<ul>
<li><a href="http://www......">Home</a></li>
<li><a href="http://www......">Questions</a></li>
<li><a href="http://www......">News</a></li>
<li><a href="http://www......">Contact</a></li>
</ul>
</div>
<div id="main">
<%= yield %>
</div>
</div>
</body>
</html>
Here's the CSS:
#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;
}
}
I'm futzing around with the code and I can't seem to manipulate the image at all. Looked around for a missed or something but can't find a thing. What am I missing? Thanks for the help!
2 answers
solution1
1 ACCPTED 2014-08-16 04:05:09
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
}
#banner img {
float: left;
}
#banner h1 {
text-align:center
}
of course this is just an approximation, you'll need to adjust things, but take a look to this fiddle to see how is it done and make your changes as needed
solution2
0 2014-08-16 04:06:07
The image tag has a default display style of inline , which will not float. You should change the display to block in your stylesheet. Also, set its position style to relative to allow the block to be "pushed around" inside of the #banner div:
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
display: block;
position: relative;
float: left;
}
}
Hope this works for you!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.