• Aqua
  • Ticketholder
  • Offline
  • Registered: 2009-08-20
  • Posts: 21

Topic: removal of menu bar on homepage help

hello

how do remove the menu bar froim the homepage view in ruby  and how do u get the links vectical underneath each other on the left hand side. here is the code i know and have to work with.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><%= @title %></title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <%= stylesheet_link_tag 'default' %>
  </head>
  <body>
    <div id="page">
      <div id="header">FakeBook</div>
      <div id="nav">
        <%= link_to_unless_current "Home",  :controller => "site",
                                            :action => "index" %> |
        <%= link_to_unless_current "About", :controller => "site",
                                            :action => "about" %> |
        <%= link_to_unless_current "Help",  :controller => "site",
                                            :action => "help" %>
      </div>
      <div id="content">
        <%= yield %>
      </div>
    </div>
  </body>
</html>

and would i have to remove anything from the application view.

thanks

Last edited by Aqua (2009-08-23 15:46:18)

  • jamesw
  • Administrator
  • Offline
  • From: Leeds, UK
  • Registered: 2008-06-07
  • Posts: 2,702

Re: removal of menu bar on homepage help

This is either a very strange question or I have totally misunderstood.
You must have known how to do this in order to get the menu in the top bar in the first place

This isn't a Rails question it's a css/html question.

You placed your links in a div called nav right?
You just need to style the nav div in your style sheet so that it lives where you want it to live.
Then you wrap your links into ul li tags so that they showe vertically instead of horizontally then add the styling for that in your style sheet for the ul/li tags so the lines look the way you want them to look.

Sorry if I have totally misunderstood.

What you want and what you need are too often not the same thing!
When your head is hurting from trying to solve a problem, stop standing on it. When you are the right way up you will see the problem differently and you just might find the solution.
(Quote by me 15th July 2009)
  • Aqua
  • Ticketholder
  • Offline
  • Registered: 2009-08-20
  • Posts: 21

Re: removal of menu bar on homepage help

body
{
  font: normal small Arial, Verdana, Helvetica, sans-serif;
  font-size: 12pt;
    background: #fffdda;;
    margin: 0;
    padding: 0;
    text-align: left;
}
#page
{
    position: relative;
    top: 0px;
    left: 250px;
    width: 800px;
    text-align: left;
    border: solid black 4px;
}
#header
{
    height: 110px;
    background: url("http://rubyonrails.org/images/rails.png")
                maroon no-repeat 16px 16px;
    color: White;
    font-size: 64pt;
    font-weight: 900;
    padding: 16px 16px 16px 120px;
}
#content
{
    background: yellow;
    padding: 1em;
    text-align: left;
}
#nav
{
   
}
#nav a
{
    color: Maroon;
    text-decoration:none;
}

This is my css code how do I adjust it to make my links underneath each other  and to the left side of  the page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><%= @title %></title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <%= stylesheet_link_tag 'default' %>
  </head>
  <body>
    <div id="page">
      <div id="header">Kingston Direct</div>
      <div id="nav">
      <li>
        <%= link_to_unless_current "Home",  :controller => "site",
                                            :action => "index" %> |
        <%= link_to_unless_current "About", :controller => "site",
                                            :action => "about" %> |
        <%= link_to_unless_current "Help",  :controller => "site",
                                            :action => "help" %>
       </li>
      </div>
      <div id="content">
      <%= yield %>
      </div>
    </div>
  </body>
</html>

This is my application view is this correct  if not let me know

  • Registered: 2006-11-06
  • Posts: 501

Re: removal of menu bar on homepage help

I think  you need to learn some html. you cant just put a <li> in your page like that, you have to specify what kind of list it is

<ol>
   <li>...</li>
   <li>...</li>
</ol>
#or
<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

in answer to your question to get the links ordering down.

<ul>
   <li>#link_to...</li>
   <li>#link_to...</li>
   <li>#link_to...</li>
</ul>
--
  • Aqua
  • Ticketholder
  • Offline
  • Registered: 2009-08-20
  • Posts: 21

Re: removal of menu bar on homepage help

the code you gave was not correct because it was strictly html,  while my html code is mixed with ruby elements.
Basically your code messed up my links and it show the raw data on my web page.E.G
%= link_to_unless_current "Home",  :controller => "site",
                                            :action => "index" %> |
        <%= link_to_unless_current "About", :controller => "site",
                                            :action => "about" %> |
        <%= link_to_unless_current "Help",  :controller => "site",
                                            :action => "help" %>
My links came up like this on my website ul/li tags.

  • jamesw
  • Administrator
  • Offline
  • From: Leeds, UK
  • Registered: 2008-06-07
  • Posts: 2,702

Re: removal of menu bar on homepage help

Aqua,
BasicMind's solution is perfectly correct and was an illustration to you of how to use the solution I gave you in my first response.

Are you sure you implemented it properly?

We are talking about HTML and CSS styling here.
What you put inside the HTML tags is totally up to you.
All erb tags do is generate HTML for you so you don't have to bother.
Why don't you fix your erb tags and then come back because I'm certain that if you can't get this very basic stuff right you are going to need more help.

Last edited by jamesw (2009-08-26 12:12:06)

What you want and what you need are too often not the same thing!
When your head is hurting from trying to solve a problem, stop standing on it. When you are the right way up you will see the problem differently and you just might find the solution.
(Quote by me 15th July 2009)
  • Aqua
  • Ticketholder
  • Offline
  • Registered: 2009-08-20
  • Posts: 21

Re: removal of menu bar on homepage help

I corrected it myself by adjusting my code by using ul and p tags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><%= @title %></title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <%= stylesheet_link_tag 'default' %>
  </head>
  <body>
    <div id="page">
      <div id="header">Kingston Direct</div>
      <div id="nav">
      <div class="content_box">
      <ul class="menu">
        <%= link_to_unless_current "Home",  :controller => "site",
                                            :action => "index" %><p/> 
        <%= link_to_unless_current "About", :controller => "site",
                                            :action => "about" %><p/>
        <%= link_to_unless_current "Help",  :controller => "site",
                                            :action => "help" %><p/>
       </ul>
      </div>
      <div id="content">
      <%= yield %>
      </div>
    </div>
  </body>
</html>

Do you know how to create a vertical navigation block  because i need a border around my links
here is my css code:

body
{
  font: normal small Arial, Verdana, Helvetica, sans-serif;
  font-size: 12pt;
    background: #fffdda;;
    margin: 0;
    padding: 0;
    text-align: left;
}
#page
{
    position: relative;
    top: 0px;
    left: 250px;
    width: 800px;
    text-align: left;
    border: solid black 4px;
}
#header
{
    height: 110px;
    background: url("http://rubyonrails.org/images/rails.png")
                maroon no-repeat 16px 16px;
    color: White;
    font-size: 64pt;
    font-weight: 900;
    padding: 16px 16px 16px 120px;
}
#content
{
    background: yellow;
    padding: 1em;
    text-align: left;
}
#nav
{
    background: #ececec;
    font-weight: bold;

}
#nav a
{
    color: Maroon;
    text-decoration:none;
}

  • jamesw
  • Administrator
  • Offline
  • From: Leeds, UK
  • Registered: 2008-06-07
  • Posts: 2,702

Re: removal of menu bar on homepage help

You still don't have it right.
Like I said you need to use ul li tags and style the list.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><%= @title %></title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <%= stylesheet_link_tag 'default' %>
  </head>
  <body>
    <div id="page">
      <div id="header">Kingston Direct</div>
      <div id="nav">
      <div class="content_box">
      <ul class="menu">
        <li>
           <%= link_to_unless_current "Home",  :controller => "site",
                                            :action => "index" %>
        </li>
        <li>
           <%= link_to_unless_current "About", :controller => "site",
                                            :action => "about" %>
        </li>
        <li>
           <%= link_to_unless_current "Help",  :controller => "site",
                                            :action => "help" %>
        </li>
       </ul>
      </div>
      <div id="content">
      <%= yield %>
      </div>
    </div>
  </body>
</html>

That gets your links into a list the way BasicMind showed you.
Notice I have removed the p tags at the end of your links. That's just plain wrong.
If you want to use P tags in your context then you should "wrap" each link in a P tag

  <p>
          <%= link_to_unless_current "Help",  :controller => "site",
                                            :action => "help" %>
  </p>

There is also little point to having an ol or ul tag without having the li tags!
You could seriously benefit from an HTML course
http://www.w3.org/Style/Examples/011/firstcss could get you started with styling your li tags

There are many more W3C tutorials, all of which are superb as you would expect so have a good poke around on the w3c web site.

What you want and what you need are too often not the same thing!
When your head is hurting from trying to solve a problem, stop standing on it. When you are the right way up you will see the problem differently and you just might find the solution.
(Quote by me 15th July 2009)
  • jamesw
  • Administrator
  • Offline
  • From: Leeds, UK
  • Registered: 2008-06-07
  • Posts: 2,702

Re: removal of menu bar on homepage help

I forgot to mention.
Once you have the above sorted you will probably want to move your menu out of the heading and into a sidebar.
You will need to create another div in your layout for this.
In fact I would move the menu out of the layout and into it's own view then you can render it wherever you want.
I assume this is some kind of course project?

What you want and what you need are too often not the same thing!
When your head is hurting from trying to solve a problem, stop standing on it. When you are the right way up you will see the problem differently and you just might find the solution.
(Quote by me 15th July 2009)