Question

I’m trying to make a place my site logo and a horizontal navigation element side by side, kind of like this: http://colorgrade.it/

For some reason, it still displays block, and a look at Chrome’s javascript console shows that the navigation element has properties display:block, which seems to explain the problem.

However, I can’t find the spot in my css that is causing this. The elements contributing to this property are ul, menu, and dir

A search for block in the file returns

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
article, aside, details, figcaption, figure, 
footer, header, hgroup, section {
  display: block;
}

I also tried to add inline-block to the navigation element itself:

<%= render :partial => 'layouts/navigation' , :style=>"display:inline-block;"%>

The navigation element looks like:

<ul id="navigation">
  <li>several li elements</li>
</ul>

Could someone explain why the two elements are not aligning side by side? Thanks!

Answer 1

You can not pass the argument style to render, you need to apply the style option in the navigation partial (look for something like navigation.html.erb)

However, I would advise against using style attributes in your html, unless you really have to. In your case, using css in your stylesheet (look for application.sass if you use sass or application.css will do just fine.

If you want further advice, please post the html code of your navigation and your css code.