Home/ Questions/Q 277029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T01:00:37+00:00

Im just messing around with Ruby on Rails and HTML. This question isn’t about

  • 0

Im just messing around with Ruby on Rails and HTML. This question isn’t about RoR, but HTML and CSS. When I center my body, I get this:
Help http://img88.imageshack.us/img88/2203/help.tif

How can i get the bullets to be centered next to the text as well?

Also, how can I get the while border collapse so its closer to the text?

Here is my code:

My app layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
    <head>
        <%= javascript_include_tag :defaults -%>
        <title><%= page_title.capitalize -%></title>
        <%= stylesheet_link_tag 'main' %>
    </head>

    <body>
        <div id="body" style="margin:0 auto; width:600px;">
            <%= yield -%>
            <%= render :partial => "layouts/footer" -%>
        </div>
    </body>

</html>

My Page, which has the list:

<h1 id="welcome_sign">Welcome!</h1>
<h3 id= "sitemap">Site Map </h3>

<ul>
    <li><%= link_to "Animals", "/animals"%></li>
        <ol><li><%= link_to "Hello", "/animals/hello"%></li></ol>
    <li><%= link_to "Machines", "/machines"%></li>
    <ol>
        <li><%= link_to "Products", "/machines/products" %></li>
        <li><%= link_to "Report", "/machines/report" %></li>
        <li><%= link_to "Robot", "/machines/robot" %></li>
        <li><%= link_to "Show", "/machines/show" %></li>
    </ol>
</ul>

And finally, my CSS:

#footer {
    font-size: 10pt;
    padding: 10px;
}

#sitemap {
    margin-bottom: 1em;
    line-height: 1.5em;
    margin-left: 2.0em;
    padding: 10px;

}

#welcome_sign {
    padding: 10px;
 }

body {
    background-color: #CDEAFF;

}

#body {
    background-color: #fff;
    border-top: 5px solid #999;
    border-bottom: 5px solid #999;
    border-right: 5px solid #999;
    border-left: 5px solid #999;
    text-align: center;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m assuming that when you say you want the list centered, what you actually want is to center the bounding box around the list. Using the table display mode on it and setting auto margins works for everything except for IE. For the sake of IE, you instead have to set a width on the list.

    Another thing that should be fixed is the way that you’re building the list. The only elements that should appear inside of an ul element are li elements. In other words, the ol’s should appear inside of the li’s.

    Here it is all put together:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      h1, h3 { text-align: center; }
      ul { margin-left: auto; margin-right: auto; width: 100px; }
    </style>
  </head>
  <body>
    <h1 id="welcome_sign">Welcome!</h1>
    <h3 id="sitemap">Site Map</h3>
    <ul>
        <li>
          Animals
          <ol>
            <li>Hello</li>
          </ol>
        </li>
        <li>
          Machines
          <ol>
            <li>Products</li>
            <li>Report</li>
            <li>Robot</li>
            <li>Show</li>
          </ol>
        </li>
    </ul>  
  </body>
</html>
    • 0