Creating visually appealing definition lists

My goal is to customize the appearance of a shopping cart that is created by a rigid system where I cannot modify the html code. The categories list is generated in the following manner:

<dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1'>
<dd class='clsCatTree1 clsCTree1' id=CatImg1>
    <a href='#'>Apparel</a>
    <dl id='dlCatLvl2' class='clsCatLvl2 clsOffCat2'>
        <dd class='clsCatTree2 clsCTree2' id=CatImg4><a href='#'>T-Shirts</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg5><a href='#'>Jackets</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg6><a href='#'>Hoodies</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg7><a href='#'>Polos</a></dd>
    </dl>
</dd>
<dd class='clsCatTree1 clsCTree1' id=CatImg2>
    <a href='#'>Novelties</a>
    <dl id='dlCatLvl2' class='clsCatLvl2 clsOffCat2'>
        <dd class='clsCatTree2 clsCTree2' id=CatImg8><a href='#'>Key Chains</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg9><a href='#'>Stationery</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg10><a href='#'>Umbrellas</a></dd>
        <dd class='clsCatTree2 clsCTree2' id=CatImg11><a href='#'>Wristbands</a></dd>
    </dl>
</dd>
<dd class='clsCatTree1 clsCTree1' id=CatImg3>
    <a href='#'>Hats</a>
</dd>
</dl>

I am aiming to display the level 1 categories (Apparel, Novelties, Hats) and their corresponding level 2 categories side by side rather than each level being on its own line.

This is the layout I am striving for: http://jsfiddle.net/vUbuW/1/

Unfortunately, I am stuck with this unattractive structure that they have implemented. Is there a way to achieve my desired layout within the current setup?

Thank you

htmlcssstyling

Answer №1

To achieve the desired outcome, adjust your CSS to align with the classes in your HTML

.clsCatTree1{
    width: 120px;
    margin: 0 5px;
    padding: 10px;
    float: left;
    border: 1px solid black;
}

.clsCatTree1 > a{
    font-weight: bold;
    font-size: 1.2em;
}

For example: http://jsfiddle.net/vUbuW/2/

Just a heads up... The .clsCatTree1 > a selector targets the a link that is a direct child of the dd.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add the bannercode snippet found on a webpage

I am currently facing an issue with appending a banner code to the end of a URL. The scenario is as follows: An individual receives an email with a link to a website (SITE1), where the URL includes a banner code, such as www.site1.com?banner=helloworld O ...

javascriptjqueryhtmlcss

Responsive Iframe设计

My website has an issue with making the iframe responsive. The map displays correctly on a computer, but is invisible on mobile phones. I am currently using Bootstrap for the layout. <div class="container d-none d-sm-block mb-5 pb-4"> <d ...

htmlcssdjangobootstrap-5

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

cssflexbox

Position the DIVs at the bottom of the TD

I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays co ...

htmlcssvertical-alignment

storing information in HTML using Django

Recently, I have been learning about Django Rest and I am now trying to display some JSON data in HTML. The JSON data I have is: {'Resul': {'Period Start': '2017-01-01', 'Period End': '2017-12-12'}} When ...

htmljsondjango

How can I prevent the <br/> tag from being included on every new line when exporting data to PDF in jQuery Datatable?

I am currently working with a datatable that contains a large amount of data. Within this table, I have included 2 buttons for exporting the data in PDF and CSV formats. One of the columns within my table contains a comma-separated string, and when I expor ...

javascripthtmljquerydatatablenewline

Is it feasible to embed an entire linked CSS file within Jade?

I keep getting recommendations from Google's PageSpeed Insights to avoid using links for CSS files and instead include the styles directly under a style tag. I'm wondering if there is a way in Jade to specify a CSS file and have its contents pull ...

htmlpug

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

javascripthtmlfirebuginspect

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...

javascripthtmlcssangularjs

Accessing a specific segment of HTML using Java

Attempting to navigate through a bunch of HTML, I'm aiming to isolate specific sections. I'm specifically looking to retrieve 'THISISTHEBITIWANT' from the following HTML code. <li class="aClass"> <a href="example/THISISTHEB ...

javahtmlstringreplace

Is there a way to undo the CSS rotate animation that has been applied?

Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...

csscss-animations

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

htmlcssinheritancehtml-lists

What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Can you show me a demo featuring the following functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to original size -> 4. change color (toggle) $(document).ready(function() { $('.tlist td div').click(function() { ...

javascriptjquerycssjquery-uijquery-animate

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

javascripthtml

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

javascriptandroidjquerycss

Creative Blueprint

Our company currently operates 3 browser based games with a team of just 4-5 coders. We are looking to enhance the collaboration within our coding team and streamline our processes. Considering the fact that our games are built using a mix of html, php, j ...

phpjavascriptcssxmlapplication-design

What is the reason for making the position of bg-container absolute?

Discover more about the "position: absolute" attribute Remove the position property for troubleshooting After testing this page in Chrome, I encountered a confusion regarding the usage of the position property within the bg-container. To my surprise, del ...

css

Guide to altering the red color of required fields in Joomla

Is there a way to change the color of the required input field in Joomla when it is empty? I'm looking for the code that controls this functionality. ...

cssinputjoomlacolorsrequired

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

cssreactjsmaterial-uijsxsnackbar

Display a div using jQuery when it reaches halfway the height of another div

I have a code snippet that hides the .wp-filter when reaching the bottom of the .wpgb-layout jQuery(window).bind('scroll', function() { if(jQuery(window).scrollTop() >= jQuery('.wpgb-layout').offset().top + jQuery('.w ...

htmljquery