Colorful layers of nested divs

I need help changing the background-color of the parent div behind the children ones. I want it to be darker like in this image. Here's my HTML:

<div class="main"> 
    <div class="sub">
    </div>
</div>

And here is my CSS:

div.main {
    background-color:#AAAAAA;
}

div.sub {
    border-style:solid;
    border-width:1px;
    border-color:#AAAAAA;
    border-radius:2px;
    margin:10px;
    box-shadow: 0px 0px 5px #AAAAAA;
}

Unfortunately, the main div is not showing as color #AAAAAA. Any suggestions?

Thanks, Ben

csshtml

Answer №1

Don't forget to include a background-color in the sub class and add padding for a clearer view.

div.main {
background-color:#AAAAAA;
padding:20px;
}

div.sub {
    border-style:solid;
    border-width:1px;
    border-color:#AAAAAA;
    border-radius:2px;
    margin:10px;
    box-shadow: 0px 0px 5px #AAAAAA;
    padding:10px;
    background-color:#fff;
}

You can try following the same steps here: JSFiddle

Answer №2

To differentiate between your divs, try changing the background color and adding some padding to enhance their appearance.

div.main {
    background-color:#888888; //<---------- go for a darker shade
    padding: 10px;            //<-------- add padding for spacing
}

div.sub {
    border-style:solid;
    background-color:#AAAAAA; //<---------- opt for a lighter hue
    border-width:1px;
    border-color:#AAAAAA;
    border-radius:2px;
    margin:10px;
    box-shadow: 0px 0px 5px #AAAAAA;
}

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

Update the Slit Slider's effect to seamlessly fade in and out

I'm currently working on a website that requires a full-screen slider with fade-in and fade-out effects, complete with content and next/previous navigation options. After some research, I stumbled upon this solution. However, my main issue is figurin ...

javascriptphpjqueryajaxcss

Persistent Gap at the Top of the Page

I'm facing a simple issue that I can't seem to solve. At the top of my page, there's a white space about the width of a finger, and when inspecting it, nothing seems to be highlighted. @import url('https://fonts.googleapis.com/css?fa ...

htmlcssbootstrap-5

What is the best way to adjust the height of a container to equal the viewport height minus a 300px height slider?

Forgive me for the rookie question, I know what I want to achieve should be simple but I seem to be having trouble articulating it in my search for solutions. Essentially, I am trying to set a section in HTML to the height of the viewport minus the height ...

javascriptjqueryhtmlcss

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

javascriptjqueryhtmlcss

The act of linking an SVG image from the same SVG file can result in the disappearance

Can anyone help me figure this out? I'm facing a strange issue: <svg aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use> </svg> <table> <tr> <td> ...

htmlsvg

Is there a specific location where the font size for input is determined?

Imagine you have a webpage with a table containing <input> elements within some of its cells. Currently, the font-size attribute of the <input> elements is set to 13px. Your goal is to change this font-size attribute to 12px. To begin, you wa ...

htmlcss

Grabbing only the button element using jQuery when a click event occurs

HEY THERE! I have a simple question that I need help with. To better explain the issue, I've included a small code snippet below. The problem I'm facing is related to grabbing the id of a button. Everything works fine except when I click on any ...

javascriptjqueryhtml

Creating a multi-level mobile navigation menu in WordPress can greatly enhance user experience and make

Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered ...

javascriptjquerycsswordpress

Address Book on Rails

Hello, I'm relatively new to this and would be grateful for any assistance. My goal is to utilize the data saved by a user in their address book, and then offer them the option to use that address for delivery. Below is my Address controller: class A ...

javascripthtmlruby-on-railsjsonruby

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Instructions for making dropdown menus that dynamically reduce their options as you make selections:

I have an HTML form structured like this: Within the dropdowns, there is a uniform list of choices: Option 1, Option 2, Option 3. Users must select a value for each key, which currently functions correctly: Yet, I am seeking to enhance this functionality ...

javascriptjqueryhtmlknockout.js

"Implementing a Drop-Down Menu within a Text Field using Bootstrap

I'm looking to integrate a dropdown menu within my text input field with the help of Bootstrap: <script type="text/javascript"> $(document).ready(function(e) { $('.selectpicker').selectpicker(); $('div.cow&apo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using jQuery to smoothly animate a sliding box horizontally

Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...

javascriptjqueryhtmlcssjquery-animate

The media query above 851px is the only one functioning, while the rest are not operational

I'm having trouble with the media queries in my code for formatting my products page. Currently, only the first query (for screens above 851px) is working properly. This is how I've set up my code: .my-prods-container{ display: flex; ...

htmlcssangular

Searching for a specific text within an element using XPATH in C# with the Selenium framework

My current challenge involves locating specific text within certain elements on an HTML page. <a class="ProductCard-link ProductCard-content" target="_self" tabindex="0" href="/en/product/puma-future-rider-menshoes/314 ...

htmlseleniumxpath

Tips for aligning a picture to the left side using Bootstrap's Grid System

I'm having trouble positioning my picture on the left side of the cards, as I am still learning how to use bootstrap <div class="row"> <div class="col-sm-6 col-lg-3"> <div class="card"&g ...

htmlcssbootstrap-4

Arrange a row of fifteen child DIVs in the form of bullets at the bottom of their parent DIV

Currently, I am working on customizing a slider by adding bullets. My goal is to create a gradient background for the parent div containing these bullets. However, when I try to increase the height of the parent div, all the bullets align themselves at the ...

htmlcss

How to retrieve and delete a row based on the search criteria in an HTML table using jQuery

Here is the HTML code snippet: <table class="table" id="myTable"> <tr> <th>Type</th> <th>Counter</th> <th>Remove</th> <th style="display:none;">TypeDistribution</t ...

javascriptjqueryhtmlsearchhtml-table

On mobile devices, table rows do not stretch across the full 100% width

I'm facing an issue with a table I'm using for a shopping basket on my website. Everything seems to be working fine until I added a tfoot element, causing the tbody to not span 100% of the container's width. I've been troubleshooting a ...

htmlcsshtml-tableresponsive

Results sent via mail based on a submitted form

My project consists of three key files: the index file, which houses my form; checkout.php, containing a breakdown of selected items and a form for additional information; and email.php, which contains the code to email the results. The main goal is to hav ...

phphtmlemail