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

Items seem to vanish into thin air and become immovable when attempting to relocate them

How to dynamically alter a PHP variable using a JavaScript button click on the existing webpage

Unable to retrieve the values from document.getElementById("") or document.getElementById("").innerHtml appears to be malfunctioning

Problem with special characters in Localstorage for Internet Explorer 8

Unable to interpret the remainder: '('static', filename='main.png')' within the context of 'url_for('static', filename='main.png')'

Reverse all elements on the page except for ::selection

How to retrieve the current event handler's value with jQuery

ASP.NET ensures that the entire page is validated by the form

List of shapes and text items

Slider with Dual Images: A Visual Comparison

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

Tips for preventing Razor from interpreting special characters as HTML code

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

Issues with CSS Min-Height in Various Web Browsers

Steps for rearranging the order of CSS grid layout

Attempting to showcase JSON response within an HTML page using JavaScript

Enable CDATA support in ActionView::Base.full_sanitizer

Expanding Headers with JavaScript

Create Stylish Popups and Spacious Containers with CSS

What causes the position: sticky; property to fail in React implementations?