CODEWITHSUNDEEP
htmlcssformattingcentering
user100051
user100051

Reputation:

HTML/CSS centered formatting

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;
}

Upvotes: 2

Views: 304

Answers (6)

Jacob
Jacob

Reputation: 78840

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>

Upvotes: 2

Raffael Luthiger
Raffael Luthiger

Reputation: 2211

The problem is that you are centring the list elements (text) but not the list itself. If you would inspect the elements with e.g. Firebug then you would see the real size of each element. And then you will realize why it is centred like this.

I recommend you to read this tutorial about lists.

Upvotes: 1

Ryan McGrath
Ryan McGrath

Reputation: 2042

Just an fyi... you can actually style the element. Personally, I'd narrow that down and center it. You also want to avoid doing text-align: center on all elements; i.e, you probably want something like the following...

<style type="text/css">
    html { text-align: center; }
    body { width: 960px; margin: 0 auto; }
    li { text-align: left; }
</style>

Upvotes: 0

Tom Anderson
Tom Anderson

Reputation: 10827

The better practice is to center the text one element at a time, rather than at the body level.

<html>
<body>
<div style="margin:0 auto;width:800px;">
<h4 style="text-align:center">Welcome</h4>
<ul>
    <li>List item</li>
    <li>List item</li>
</ul>
</div>
</body>
</html>

Not only does this give you far better control of your layout, it will also allow you to ONLY center things that you want to.

After seeing your code below, remove the text-align: center; in the #body tag, this should help alleviate the list icons sticking to the left.

Upvotes: 2

zacharyliu
zacharyliu

Reputation: 26308

Try putting the list in a container div, and using the margin-left/right: auto trick. I'd avoid centering a list, since it ruins the organization of the content. 

<div style="width: auto; margin-left: auto; margin-right: auto;">
[your list here]
</div>

Upvotes: 0

Andrew Johnson
Andrew Johnson

Reputation: 13286

I believe you want to set the text-indent property, and probably adjust the margins and padding as well.

From the looks of your screenshot though, you're missing some fundamental understanding of HTML. You would have to be doing something wacky to display the bullets like that.

Post the code and I can give a better explanation.

Upvotes: 1

Related Questions