23 Years Young
From: The Boogie Down Bronx
Heritage: Puerto Rican Pride
Trade: Master Tailor
For a demonstration, click on this link
23 Years Young
From: The Boogie Down Bronx
Heritage: Puerto Rican Pride
Trade: Master Tailor
For a demonstration, click on this link
If I were to choose a formatting element for this context, I would go with a dl (Definition list) because it allows you to define a term using dt and provide a corresponding 'description' using dd. This structure gives you the flexibility to align the two parts as you see fit ;)
For more information on Definition Lists, visit here.
Definition lists differ slightly from other list types as they consist of two parts: a term and a description. The term is defined by the DT element and is limited to inline content. The description is provided by the DD element, which allows block-level content.
Additionally, you have the option to float the dt elements.
CSS:
dl {border: 1px solid #000;}
dt {float: left; width: 180px; text-align: right; margin-right: 20px;}
HTML:
<div id="personal">
<dl>
<dt>Age:</dt> <dd>23</dd>
<dt>Location:</dt> <dd>Bronx,NY</dd>
<dt>Nationality:<…>Puerto Rican</dd>
<dt>Occupation:</dt><dd>Tailor</dd>
</dl>
</div>
I have made some updates for you. You can view them here: http://jsfiddle.net/MUFcb/11/
I have added a <span> element with CSS to achieve the alignment you desired in your example.
Below is the updated code:
HTML
<div id="personal">
<ul>
<li><span class="label">Age:</span> 23</li>
<li><span class="label">Location:</span> Bronx,NY</li>
<li><span class="label">Nationality:</span> Puerto Rican</li>
<li><span class="label">Occupation:</span> Tailor</li>
</ul>
</div>
CSS
#personal ul li span.label{
display: block;
float: left;
width: 75px;
text-align: right;
padding-right: 10px;
}
If you are dealing with structured data like this, it would be more appropriate to use a table instead of an unordered list...
<table>
<tr>
<td>Name:</td>
<td>John</td>
</tr>
...
...
</table>
You may find it beneficial to utilize a table in this scenario.
<table>
<tr>
<td>Name:</td>
<td>John Smith</td>
</tr>
<tr>
<td>Age:</td>
<td>30</td>
</tr>
<tr>
<td>Location:</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td>Occupation:</td>
<td>Software Engineer</td>
</tr>
</table>
How do you feel about this example? Should the spaces be reduced by adjusting the padding value? http://jsfiddle.net/MUFcb/8/
Instead of using a traditional table, you have the option to utilize div elements with a float:left style attribute.
<div style="float:left;">
Age: <br />
Location: <br />
Nationality: <br />
Occupation: <br />
</div>
<div style="float:left;">
23<br/>
Bronx, NY<br/>
Puerto Rican<br/>
Tailor<br/>
</div>
To align the age to the right side, you can include text-align:right in the style attribute of that particular div.
I have a form that directs to another page and performs various database operations. <form id="form1" method="post" action="goes_to_page1.php" onsubmit="return checkformvalidation();"> <input type="text" id="field1" name="field1" onblur="checkva ...
I am attempting to create a wavy border effect where two sections meet on a page (refer to the image below). What is the most effective way to achieve this? The waves should be uniform in size. EDIT: To whoever flagged this as 'already answered' ...
Is my question clear? Here's an example to illustrate: let string = "Test text ab/c test Test t/est ### Test/ Test t/test Test test" I want to remove / only from the line that includes ###, like so: Test text ab/c test Test t/est ### Test T ...
login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...
I am struggling to fix the layout of my website's right dark column and sidebar. I've attempted several methods, including setting fixed parameters with no success. My goal is to have the content-c class (dark column) fixed and the sidebar fixed ...
I have created a custom jQuery function for implementing pagination. However, I encountered an issue where when I load the function on a page with multiple tables, the pagination system gets applied to all tables. This means that the number of pages refle ...
Currently, I am developing a small program for myself related to a video game. The main issue I am facing is that certain objects are being flagged as not defined when the errors appear on the page. $(document).ready(function(){ //A list of chara ...
I'm currently facing an issue with echoing a password hash from my login form. The error message **Undefined index: signinbtn in D:\XAMPP\htdocs\login_page.php ** keeps appearing, and I can't figure out why. I have set up the form ...
When attempting to apply specific CSS properties to a particular area (e.g., "Dashboard") by assigning the class name "main" to the div.col function in the HTML, I encountered an issue where the CSS property applied affected the entire page. The following ...
Recently, I came across the concept of Unobtrusive JavaScript while researching best practices in the realm of JavaScript. One particular point that grabbed my attention was the idea of separating functionality (the "behavior layer") from a web page's ...
I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...
I'm having issues with my css file and attempting to achieve the following: .login-wrapper { background-image: url({{imagePath}}); } Below is my component code: export class LoginComponent implements OnInit { imagePath: any = 'assets/discord ...
How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...
Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...
My current struggle involves using iScroll in my web project. The goal is to populate a list with articles and slide in a div over the list to display the selected article. While the basic functionality is in place, I face an issue where scrolling through ...
This block of code features an HTML onchange attribute as well as the use of jQuery's change event on an input text. I want only the jQuery change event to take precedence. I have attempted to use both unbind and off without success. Can someone prov ...
Is there a way to unbind all elements from a parent node using jQuery? How can I effectively select all children, regardless of their nesting level, from a parent node? I attempted the following: $('#google_translate_element *').unbind('c ...
After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include: The spacing on the right side is too large. Tables always appear stacked without any spacing in bet ...
I am in need of 3 dynamic div containers. container for main content image display container that changes size container on the side with changing width The issue I am facing is that the text needs to be below the image container which has a wider width ...
I recently launched a website at www.mvscaccounting.com, and I added a search engine made from javascript at the bottom of the page. Next to it, I wanted to put a "all rights reserved" notice. However, whenever I try to add any text next to the search engi ...