How can I add text to a bar or table using CSS/HTML?

Question

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this:

http://img291.imageshack.us/img291/5571/bartablestyling.png

Currently, I only have the top bar in place.

When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left for positioning.

Is there a way to use a table to achieve this text layout and properly adjust the spacing indicated by the red arrow that I added?

Here is the code snippet I am working with:

<div style="background-image: url(images/notificationShelfBg4.png);
    background-repeat: repeat-x;
    background-position: bottom; width: auto;">

            <img src="<?php if(!empty($vP["photo_thumb"])) { echo "images/profileimages/".$vP["photo_thumb_small"]; }else{ echo "images/profileimages/noPhoto_thumb.jpg"; } ?>"  style=" border: 2px solid #CCC; margin-right: 5px; margin-left: 15px;  margin-bottom: 2px;">


    </span>
    </span>
    </a>

</div>

html css

Answer 1

Answer №1

To achieve this layout, consider creating a table with 4 columns and 2 rows.

<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>Logged in as:</td>
<td>Gender: Male</td>
<td>Field:1</td>
<td>Field:1</td>
</tr>
<tr>
<td>Andrew</td>
<td>Age: 22</td>
<td>Field:1</td>
<td>Field:1</td>
</tr>
</table>

You can adjust the width of the cells using CSS, such as setting td {width:200px;}. Another approach is to assign a class to each cell like

<td class="cell">Gender: Male</td>

and style it with CSS using .cell {width:200px;}.

If needed, you can also explore using floats and other tricks to achieve the desired outcome.

Answer 2

To achieve this layout, consider creating a table with 4 columns and 2 rows.

<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>Logged in as:</td>
<td>Gender: Male</td>
<td>Field:1</td>
<td>Field:1</td>
</tr>
<tr>
<td>Andrew</td>
<td>Age: 22</td>
<td>Field:1</td>
<td>Field:1</td>
</tr>
</table>

You can adjust the width of the cells using CSS, such as setting td {width:200px;}. Another approach is to assign a class to each cell like

<td class="cell">Gender: Male</td>

and style it with CSS using .cell {width:200px;}.

If needed, you can also explore using floats and other tricks to achieve the desired outcome.

Answer 3

Answer №2

If you want to display your profile information in HTML, here's how you can do it:

<div class="profile">
    <img src="path/to/your/img.png" alt="Example's Avatar" />
    <p class="login-info">You are logged in as: <span class="username">Example User</span></p>
    <ul class="user-info">
        <li>Gender: Male</li>
        <li>Age: 24</li>
        <li>Member since: 24 Aug 2009</li>
        <li>Currently wearing: Pink T-Shirt</li>
        <li>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="402538212d302c25002538212d302c256e232f2d">[email protected]</a></li>
        <li>Another field: Value 1</li>
        <li>Drinking: Coffee</li>
        <li>Mug collection: 300</li>
        <li>Another field: Value 2</li>
    </ul>
</div>

This markup includes an image, login information, and various user details displayed in a structured format. By using specific classes for styling elements, we ensure the content is presented as intended.

.profile {
    padding: 20px;
    background: #333 url('path/to/gradient.png') repeat-x;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6em;
    font-family: Arial, sans-serif;
    color: white;
    width: 960px;
}

.profile img {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    display: block;
}

.profile .login-info, .profile .user-info li, ...

Separating CSS from HTML allows for easier maintenance and customization. The styling rules define the layout and appearance of each element within the profile box, creating columns with specific widths and margins.

To see this in action, check out the live demo here: http://jsfiddle.net/stEkY/

Answer 4

If you want to display your profile information in HTML, here's how you can do it:

<div class="profile">
    <img src="path/to/your/img.png" alt="Example's Avatar" />
    <p class="login-info">You are logged in as: <span class="username">Example User</span></p>
    <ul class="user-info">
        <li>Gender: Male</li>
        <li>Age: 24</li>
        <li>Member since: 24 Aug 2009</li>
        <li>Currently wearing: Pink T-Shirt</li>
        <li>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="402538212d302c25002538212d302c256e232f2d">[email protected]</a></li>
        <li>Another field: Value 1</li>
        <li>Drinking: Coffee</li>
        <li>Mug collection: 300</li>
        <li>Another field: Value 2</li>
    </ul>
</div>

This markup includes an image, login information, and various user details displayed in a structured format. By using specific classes for styling elements, we ensure the content is presented as intended.

.profile {
    padding: 20px;
    background: #333 url('path/to/gradient.png') repeat-x;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6em;
    font-family: Arial, sans-serif;
    color: white;
    width: 960px;
}

.profile img {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    display: block;
}

.profile .login-info, .profile .user-info li, ...

Separating CSS from HTML allows for easier maintenance and customization. The styling rules define the layout and appearance of each element within the profile box, creating columns with specific widths and margins.

To see this in action, check out the live demo here: http://jsfiddle.net/stEkY/

How can I add text to a bar or table using CSS/HTML?

Answer №1

Answer №2

Similar questions

Activate audio when the link is clicked

There seems to be a column in the MySQL INSERT query that is unidentifiable and does not exist in the list of fields

Consistent sizing for Bootstrap thumbnail images

Update the input tag's value dynamically using another input element without the need for jQuery

Ensure that all of the <li> elements within a <ul> container have equal widths

I am experiencing difficulties with my HTML and CSS code not functioning as I had initially intended

Is there an issue with the padding not functioning correctly on smaller and medium-sized devices when using Bootstrap

Do not open iframe links in a new window

Having trouble getting the form input max-width to work properly within a flex-box

MySQL unable to access information entered into form

Scrolling with JQuery Sortable will go up in the list, but it won't allow for

Issues with the parallax zooming out effect

Updating the default color of selected text within a webpage's content

Emptying the AnyChart (Javascript) container prior to generating new charts

Ensure that CSS is integrated correctly

There are a few issues with certain Bootstrap elements such as the Navbar-collapse, p- classes, and small column images

Optimal methods for organizing various perspectives on a one-page website

Connecting HTML pages on two different drives on the same computer: Is it possible?

In Pure JavaScript, an HTML element is added every time the click event is triggered

What is the best method for retrieving text that does not contain tags (such as text