Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML5 CSS - <TD> align left

Posted on 2014-03-06
4
Medium Priority
?
820 Views
Last Modified: 2014-03-07
I am trying to left align content that is in the <td> but I want the table centered on the page.

<!DOCTYPE html >
<html lang="en" >
<head>
    <title>
      Magic By Carlos
    </title>    
    <meta charset="utf-8" />
    <link href="magic.css" rel="stylesheet">

    <!-- This is where your link tag goes when linking to an external style sheet. -->
 
    <!--This is the format you will use when entering JavaScript -->    
    <script type="text/javascript">
    /* <![CDATA[ */

    // your JavaScript instructions will go here

    /* ]]> */
    </script>        
</head>

<body> 
    <div class=aligncenter>        
        <!-- Your XHTML here -->
        <!--
        <header>
            <img src="images/CtM2.jpg" alt="" height="225" width="325"> 
        </header>
        -->
        <h1 class=title>
            Be The Star Of The Show
        </h1>
        <nav>
            <h2>
            <a href="magic.htm"><b>Home</b></a> &nbsp;
            <a href="services.htm"><b>Services</b></a> &nbsp;
            <a href="video.htm"><b>Video</b></a> &nbsp;
            <a href="about.htm"><b>About</b></a>
            </h2>
        </nav>
    </div>    

    <div class=content>
        <table class=tablecenter>
            <tr>
                <td class=valigntop; style="width:500px" text-align:left>
                    <br>
                    <span class="firstLetter">A</span> magician performs magic in front of a person or group of people by creating illusions that seem supernatural.  '
                    Magic is performed many ways, the most commonly known are close-up and stage magic.
                </td>
                <td>
                    <img src="images/CtM2.jpg" alt="Magic By Carlos"
                            height="225" width="325"> 
                </td>
                <td class=valigntop; style="width:500px">
                    <br>
                    <span class="firstLetter">C</span>arlos not only performs mind blowing illusions but volunteers also appear to perform illusions becoming the
                    star of the show.
                    <br><br>
                    Carlos provides the below services:
                    <ul>
                        <li>Illusions</li>
                        <li>Comedy</li>
                        <li>Balloon Animals</li>
                    </ul>
                </td>
            </tr>
        </table>
        <br>
    </div>
    <br><br>

    <div>
        <footer>
            <small><i>Copyright &copy; 2014 Magic By Carlos</i></small><br>
        </footer>
        
        <br><br>
        <!-- external javascript for validation -->  
        <script type="text/javascript" src="../validation.js">
        </script>            
    </div>
</body>
</html>

Open in new window


.title {
    background-color: #630C0C;
    color: white;
    font-size: 65px;
}

.valigntop {
    display: table-cell;
    vertical-align: top;
}

.alignleft {
    text-align: left;
}

.aligncenter {
    text-align: left;
}

.aligncenter {
    text-align: center;
}

.tablecenter {
    margin-left:auto; 
    margin-right:auto;
}

.pretty-table {
    border-collapse: collapse;
    margin-left:auto; 
    margin-right:auto;
}
.pretty-table th, .pretty-table td { padding: 0.5em; }
.pretty-table th[scope=col]
{
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}
.pretty-table th+th[scope=col] { border-right: 1px dotted #666; }
.pretty-table th[scope=row] { border-right: 2px solid #333; }
.pretty-table th, .pretty-table td { color: #632a39; }
.pretty-table th[scope=col] { color: #000; background-color: #8fadcc; }
.pretty-table th+th[scope=col] { color: #fff; background-color: #7d98b3; }
.pretty-table th[scope=row] { background-color: #b8cfe5; }

.content {
    background-color: #F6F6FD;
    text-align: center;
}

.firstLetter {
    background-color: #3399FF;
    color: #FFF;
    float: left;
    font-size: 48px;
    margin-right: 10px;
    margin-top: 7px;
    padding: 18px;
    border-radius: 5px;
    box-shadow: 0 0 10px -2px #999999;
}

Open in new window

0
Comment
Question by:CipherIS
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39911739
to center the table, add this style:
.tablecenter {
    margin: 0 auto;
}

but I see you are already doing something similar. It appears fine on my side (Firefox), perhaps you should clear your cache and refresh. I attach a screenshot on how it looks in my browser without changing anything you posted.


The reason the text in the table is aligning center is because of this rule in your styles:
.content {
    background-color: #F6F6FD;
    text-align: center;
}

change the text-align to left
Capture.PNG
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 39911893
Tables always act funny.  Your table should be centered but if you want the table content to be aligned left then you need to make the <td>s aligned left.

And this: <td class=valigntop; style="width:500px" text-align:left>

should be: <td class="valigntop" style="width: 500px; text-align: left;" >
0
 
LVL 1

Author Closing Comment

by:CipherIS
ID: 39914025
Thank you.  That was so frustrating trying to figure it out.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39914074
You're welcome!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question