SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to center and it's not working!!

    I want to thank in advance anyone who can help me figure this out. trying to center a table:

    Code:
     <body>
        <h2 id="tagline"><img src="F:/new website/pics/logo_final.jpg" alt="University Neuromuscular Massage"/><br>Restoring Balance, One Massage At A Time</h2>
       
        <ul id="navigation">
          <li><a HREF="index.html">Home</a></li>
          <li><a HREF="services.html">Services</a></li>
          <li><a HREF="prices.html">Prices</a></li>
          <li><a HREF="contact.html">Contact Us</a></li>
          <li><a HREF="therapists.html">Meet Our Therapists</a></li>
        </ul>
    
        <table id="singleprices">
          <tr>
            <th>Time Length</th>
            <th>Price</th>
          </tr>
          <tr>
            <td><sup>1</sup>/<sub>2</sub> Hour</td>
            <td>$40</td>
          </tr>
          <tr>
            <td>1 Hour</td>
            <td>$70</td>
          </tr>
          <tr>
            <td>1 <sup>1</sup>/<sub>2</sub> Hours</td>
            <td>$105</td>
          </tr>
          <tr>
            <td>2 Hours</td>
            <td>$130</td>
          </tr>
        </table>
    
      </body>
    styled with:
    Code:
    #singleprices {
      position: relative;
      top:5em;
      margin: 0 auto;
    }
    
    #singleprices
    {
    	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    	font-size: 18px;
    	background: white;
    	width: 480px;
    	border-collapse: collapse;
    	text-align: left;
    }
    #singleprices th
    {
    	font-size: 20px;
    	font-weight: normal;
    	color: red;
    	padding: 10px 8px;
    	border-bottom: 2px solid #7C7C7B;
          text-align: left;
    }
    #singleprices td
    {
    	padding: 9px 8px 0px 8px;
    }
    #singleprices tbody tr:hover td
    {
    	color: blue;
    }
    and i'm not sure why it doesn't work.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It's centered for me (Firefox). What browser are you testing in?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    both firefox and ie9. other issue is ie shows my logo, ff did not. this is not a live site yet, still just saved to a flash drive. not sure what is going on.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I left out some of my code, only posting what I thought was relevant. Maybe there is something that is over-riding it, so here is all that I have:

    Code:
      <head>
        <title>University Neuromuscular Massage - Serving North Charlotte, Concord and surrounding area</title>
      <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8"/>
      <link href="style.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
        <h2 id="tagline"><img src="F:/new website/pics/logo_final.jpg" alt="University Neuromuscular Massage"/><br>Restoring Balance, One Massage At A Time</h2>
       
        <ul id="navigation">
          <li><a HREF="index.html">Home</a></li>
          <li><a HREF="services.html">Services</a></li>
          <li><a HREF="prices.html">Prices</a></li>
          <li><a HREF="contact.html">Contact Us</a></li>
          <li><a HREF="therapists.html">Meet Our Therapists</a></li>
        </ul>
    
        <table id="singleprices">
          <tr>
            <th>Time Length</th>
            <th>Price</th>
          </tr>
          <tr>
            <td><sup>1</sup>/<sub>2</sub> Hour</td>
            <td>$40</td>
          </tr>
          <tr>
            <td>1 Hour</td>
            <td>$70</td>
          </tr>
          <tr>
            <td>1 <sup>1</sup>/<sub>2</sub> Hours</td>
            <td>$105</td>
          </tr>
          <tr>
            <td>2 Hours</td>
            <td>$130</td>
          </tr>
        </table>
    
      </body>
    </html>
    and css:
    Code:
    /*----------
    CSS for UNM
    */
    
    #body {
      width: 100%;
      text-align: center;
    }
    
    /*------------
    Navigation stuff
    */
    
    #navigation {
     float:right;
     position:relative;
     left:-50%;
     text-align:left;
     font-size: 16pt;
     }
    
    #navigation li{
      list-style: none;
      float:left;
      position:relative;
     left:50%;
    }
    /* ie needs position:relative here*/
    
    #navigation a{
     text-decoration:none;
     margin:10px;
     background:red;
     float:left;
     border:2px outset blue;
     color:white;
     padding:2px 5px;
     text-align:center;
    
    }
     #navigation a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
     #content{overflow:hidden}/* hide horizontal scrollbar*/
    
    
    /*-----------------------
    END OF NAVIGATION STUFF
    */
    
    
    /*------------------
    logo and tag line position
    */
    
    #tagline{ text-align: center; }
    #tagline br {display:none;}
    #tagline img {display:block; margin:0 auto;}
    
    /*------------------
    END LOGO POSITION
    */
    
    /*------------------
    Prices table design
    */
    
    #singleprices {
      position: relative;
      top:5em;
      margin: 0 auto;
    }
    
    #singleprices
    {
    	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    	font-size: 18px;
    	background: white;
    	width: 480px;
    	border-collapse: collapse;
    	text-align: left;
    }
    #singleprices th
    {
    	font-size: 20px;
    	font-weight: normal;
    	color: red;
    	padding: 10px 8px;
    	border-bottom: 2px solid #7C7C7B;
          text-align: left;
    }
    #singleprices td
    {
    	padding: 9px 8px 0px 8px;
    }
    #singleprices tbody tr:hover td
    {
    	color: blue;
    }
    
    /*------------------
      END TABLE DESIGN
    */
    
    </style>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The page is centered for me also unless you aren't using a doctype and then IE won't center it.

    There's probably a path issue with your flash drive so save the file onto the computers hard disk instead and see if that resolves it.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have doc type set. why would pic show up in ie, but not ff? opened same file, open with ie, then open w/ff, no logo. the only thing i can think of, table is not in any parent container, other than body. Does it have to be in a block level container for auto margins to work?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try clearing the floats as its probably snagging on them.

    Code:
    #singleprices {
        position: relative;
        top:5em;
        margin: 0 auto;
        clear:both
    }

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I concur it's probably a float related issue.

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Huntington Beach, CA
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to add a width to your table class

    Code:
    #singleprices {
        position: relative;
        top:5em;
        margin: 0 auto;
        clear:both;
        width:500px;
    }
    Rob
    Pier Marketing ◄ Printing and Marketing Collateral - Order Online
    Pier Technologies ◄ Web Development & IT Solutions
    And That's News? ◄ My NEW Blog!!

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Huntington Beach, CA
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, the "top" element is only used with absolute, fixed or static positions. Use
    Code:
    margin:5px 0 0 0;
    Rob
    Pier Marketing ◄ Printing and Marketing Collateral - Order Online
    Pier Technologies ◄ Web Development & IT Solutions
    And That's News? ◄ My NEW Blog!!

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WebRob View Post
    Also, the "top" element is only used with absolute, fixed or static positions. Use
    Code:
    margin:5px 0 0 0;
    Uhm, I think you mean relative, not static... It's ignored on static and OBEYED on relative.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by WebRob View Post
    You need to add a width to your table class

    Code:
    #singleprices {
        position: relative;
        top:5em;
        margin: 0 auto;
        clear:both;
        width:500px;
    }

    No you don't need a width on tables to center them because they have intrinsic dimensions and are centred automatically using margin:auto (unlike normal elements which do require a width).

    The problem is that the float wasn't cleared and the table was snagging.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it was a float issue. I forgot float was used to center table. can you explain the clear:both attribute? why/how it worked? thanx

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dtp134 View Post
    can you explain the clear:both attribute? why/how it worked? thanx
    When you float an element any content that follows the float will wrap around the floated element (assuming there is room). If you don't want any content to wrap then you must add clear:both to the element that you don't want to wrap.

    This tells the element to make sure that is is clear of the float above and will start on a new line under the float.

    You can read up on the exact details here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •