Centering Question

HTML & CSS
1

How do I center the

<b><u>Edit Users</u></b><br />Click a username to edit the account.<br />

in this?


<table id="users">
  <tr>
    <td class="right">
      -- Left menu here
    </td>
    <td>
      <b><u>Edit Users</u></b><br />Click a username to edit the account.<br />
      <table id="users">

The CSS for this is:


#users {
display: table;
width: 90%;
margin: 0 auto;
border-collapse: collapse;
padding: 0px;
font: 12px verdana;
}
#users td {
border-style: none;
padding: 3px;
vertical-align: top;
}
#users td.right {
width: 150px;
border-right: solid 1px black;
}

CSS is just a headache and I can’t find anything googling, so I thought I would try here and hope someone can enlighten me.

I tried putting <div id=“label”> and had a label tag inside the css. Sorry if this is simple to most or even if it can’t be done like this. Just thought I would ask.

I would really like to keep the highlighting also, but not sure of how to bold and underline single words in CSS.
Thanks

2

Skipping the fact that tables aren’t quite the right choice (except maybe for the users list, but it depends on what data you have there), skipping the fact that you use tables id=“users” twice, when id values should be unique, you don’t.

You have mixed content in a td: CDATA (inline content) and a table (block content). td must have either inline either block content.

It seems to me this is a section, so a heading would fit just well. Let’s assume it’s h3, but you need to make adjustments accordingly.

HTML (wrong HTML, but hey, if it fits you…)


<td>
<h3>Edit Users</h3>
<p>Click a username to edit the account.</p>
<table id=[b]"usersList"[/b]>

CSS


td h3 {
text-decoration:underline;
}

td h3, td p {
text-align:center;
}

If you are finding hard to approach tableless layout, a simple solution for you is to use a word processor: MS Word, OpenOffice Writer, AbiWord, build your table layout, style it (center, bold, underline) and then save it as html.

3

Thank you for replying.

I went and read up on a few things and came down to this:


#wrapper {
  width: 90%;
  margin: 0 auto;
}
#content {
  margin: 0 auto;
  background: #fff;
}
#nav {
  margin: 0 auto;
  width: 180px;
  float: left;
  text-align: center;
  background:#fff;
  border-right: 1px solid;
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="nav">
      <b><u>Administration</u></b><br /><br />
        <b>Links:</b><br />
          <a href="admin.php">Admin Home</a><br />
          <a href="index.php">Website</a><br /><br />
        <b>Primary Data:</b><br />
          <a href="admin.php?do=users">Edit Users</a><br /><br />
        <b>Game Data:</b><br />
          <a href="admin.php?do=items">Edit Items</a><br />
    </div>
    <div id="content">
      {{content}}
    </div>
  </div>
</body>

I hope this is what you meant by not using tables.

Now, I think I know how to center the #nav and Content text in their respective areas, but how would I center it AND have the left letters align, so it appears like so?

Administration

Links:
Admin Home
Website

Primary Data:
Edit Users

Game Data:
Edit Items

4

What you’re asking is a bit controversial, because centering… but aligning will not “feel” like centering, because the left edge for aligning would be dictated by the widest element, “Administration” in our case.

Anyway, here it is. You’ll notice I don’t use <b>, <u>, <br>, but instead html elements that mean something.


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

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>gregs Page</title>

  <style type="text/css">
    body {
      background:#def;
    }
    ul, li, h3, h4 {
      margin:0;
      padding:0;
    }
    #wrapper {
      width: 90%;
      margin: 0 auto;
      overflow:hidden;
    }
    #content {
      background: #fff;
    }
    #nav {
      width: 180px;
      float: left;
      background:#fff;
      border-right: 1px solid;
      text-align:center;
    }
    #nav div {
      display:inline-block;
      text-align:left;
    }
    #nav h3, #nav ul {
      margin-bottom:1em;
    }
    #nav li {
      list-style:none;
    }
  </style>

</head><body>
  <div id="wrapper">
  
    <div id="nav">
      <div>
      <h3>Administration</h3>
      
      <h4>Links:</h4>
      <ul>
        <li><a href="admin.php">Admin Home</a></li>
        <li><a href="index.php">Website</a></li>
      </ul>
      
      <h4>Primary Data:</h4>
      <ul>
        <li><a href="admin.php?do=users">Edit Users</a></li>
      </ul>
      
      <h4>Game Data:</h4>
      <ul>
        <li><a href="admin.php?do=items">Edit Items</a></li>
      </ul>
      </div>
    </div>
    
    <div id="content">
      {{content}}
    </div>
    
  </div>
</body></html>

One more note. Your wrapper has 90% width. Not very good if the browser window is resized to say, 150px. Instead, the wrapper should have a min-width and a max-width. The min-width should be 180px(the #nav width) + ?px where ?px is the witdth that will permit your Content to fit on the smallest device screen you’re targeting and still look good.

5

?

6

This is what I had so far.


<?php
$template = <<<END
<head>
<title>{{title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
html, body {
  color: black;
  font: 12px verdana;
}
ul, li, h3, h4 {
  margin: 0;
  padding: 0;
}
a {
  color: #663300;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #330000;
}
.small {
  font: 10px verdana;
}
.highlight {
  color: red;
}
.light {
  color: #999999;
}
.title {
  border: solid 1px black;
  background-color: #eeeeee;
  font-weight: bold;
  padding: 5px;
  margin: 3px;
}
#info {
  width: 50%;
  margin: 0 auto;
}
#wrapper {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
#content {
  margin: 0 auto;
  text-align: center;
  background: #fff;
}
#nav {
  width: 180px;
  float: left;
  background: #eee;
  border-right: solid 1px black;
  text-align:center;
}
#nav div {
  display:inline-block;
  text-align:left;
}
#nav h3, #nav ul {
  margin-bottom: 1em;
}
#nav li {
  list-style: none;
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="nav">
      <h3>Administration</h3>
      <h4>Links:</h4>
      <ul>
        <li><a href="admin.php">Admin Home</a></li>
        <li><a href="index.php">Website</a></li>
      </ul>
      <h4>Primary Data:</h4>
      <ul>
        <li><a href="admin.php?do=users">Edit Users</a></li>
      </ul>
      <h4>Game Data:</h4>
      <ul>
        <li><a href="admin.php?do=items">Edit Items</a></li>
      </ul>
    </div>
    <div id="content">
      {{content}}
    </div>
  </div>
</body>
</html>
END;
7

Nevermind.

I hate that it is centered in the box but can’t get the text left justified on the longest word ( Administration ), but I will just stop messing with it. The above code you sent just centers it all.

To others it might be controversial, as you said, but if I had a faded image in the background of the menu, I would still want it centered with the left align on the text.

Sorry for any grief I have caused.

Thanks again for at least responding.

8

I am pretty sure that my code does just that: centers the #nav text AND have the left letters align:

1024×557 47.7 KB

You should remember always to have the DTD at the top of your web pages:

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

Thanks, noonnope.

I had all the CSS correct, but missed that extra <div> you put in under the <div id=“nav”>

It works exactly as I hoped now.

It has just been a chore trying to switch from tables to this.

10

Glad you sorted it out :slight_smile: And don’t discourage, SPF is here to help you ease the switch.