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

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Is it feasible to manipulate HTML elements on a website from an iOS application? For instance, displaying www.google.com using a UIWebView. I am interested in achieving the following, if this idea/concept is doable: Detecting whether the user has input ...

htmliosswiftuiwebview

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover

Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...

javascripthtmlcsssvg

`Issue with Firefox's rendering of HTML tables`

I have noticed that the table appears differently in Firefox compared to IE8/Chrome. You can view the website here: I would like the table to look more like it does in IE8/Chrome, where the lines are a light gray color instead of completely black. Any s ...

htmlfirefox

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

javascripthtmlcssangularjs

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

htmlcss

Developing an identical design and layout but utilizing a distinct domain name for the company

After being given the task of creating a website identical to an existing one with a different domain name on WordPress, I proposed using the parent HTML source code or cloning it to speed up the project. The client agreed, explaining that starting from sc ...

javascripthtmlwordpressalter

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: Current theme override for InputL ...

javascriptcssreactjsmaterial-ui

Introducing an alternative solution for handling tasks linked to the completion of CSS3 animations

In order to incorporate smooth CSS3 animations into my website, I have implemented the animate.css library created by Dan Eden. One particular scenario involves a loading screen that features a fade-out animation. It is crucial for this animation to comple ...

javascriptjquerycsscss-animations

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

Designing hover-activated submenus and ensuring they appear at the forefront

I am currently utilizing jquery to implement a dropdown submenu on hover action. Here is the structure of the code: <div id="menucontainer"> <ul id = "topmenu"> <li><a onmouseover="javascript:show('div_1');">menu_1 ...

jqueryhtmlcss

Centering <th> elements is key for achieving a visually appealing print layout

Is there a way to center align the header and body of a table when printing it? I am using datatable. Here is how it currently looks: Check out this screenshot I have tried adding classes to the th tags in the HTML table, but they still appear aligned t ...

htmlcssajaxdatatable

CSS: Maintain rounded corners on body border even when scrolling

I am attempting to create a body border on my webpage with rounded corners at the top to simulate the MacOS interface in the browser, similar to the image shown here: The issue arises when I scroll, and the top corners vanish: This is the HTML (although ...

cssreactjs

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

Just starting out with Bootstrap while working on an Angular2 project and I have a question. Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to rema ...

htmlcsstwitter-bootstrapangularangular-ui-bootstrap

The JavaScript code appears to be missing or failing to execute on the website

Encountering a console error while trying to integrate jQuery into my website. The JavaScript file is throwing an error in the console that says: Uncaught ReferenceError: $ is not defined catergory.js:1 Even after following the suggested steps in this an ...

javascripthtmljquerycss

Storing data locally in PhoneGap using localStorage via AJAX calls is a common requirement for

Our mobile application is built with cordova [phonegap] and we are looking to implement offline saving of results into the cache memory. The results are fetched from a PHP server and displayed in a webview using ajax and javascript. I have tried using loc ...

jqueryajaxhtmlcordovalocal-storage

What causes the inconsistency between Chrome's print CSS emulation and the Print Preview feature?

My website is based on Bootstrap 3 and ensuring that certain pages print properly is crucial for our customers. While most of the site prints fine, we are having issues with modal dialogs. I have been experimenting with Chrome's (v42.0.2311.135 m) CS ...

cssgoogle-chromeprinting

Issue with JQuery addClass functionality in Firefox

I've come across numerous posts on this topic, but none of them have provided a solution. I recently added drag and drop functionality to my website. When I drag an item over a valid container, I add a specific class to it. Here is the HTML for the ...

javascriptjqueryhtmlcss

"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...

htmlcssreactjsalignment