Background above another background, enveloping the surrounding elements

Currently, I am diving into the world of html/css/js/jquery coding, and after days of searching for answers, I am attempting to create a sleek website. My main question is regarding how to achieve the following design:

I am struggling to create the "border/background" that surrounds the content. I am not referring to the blue and white background, but rather the light grey one as shown in the image. I have tried using various methods like css border/width/height, but haven't been able to achieve the desired outcome. I want the border/background to automatically adjust with a menubar, similar to what is depicted in the image. Any suggestions or tips would be greatly appreciated.

htmlcssbackgroundborder

Answer №1

Give this a shot:

example: http://jsfiddle.net/ABC123/4/

Cascading Style Sheets

.box{
width: 150px;
height: 150px;
background: #cccccc;
border-radius: 8px;
padding: 8px;
}
.content{ 
width: 100%;
height: 100%;
background: #ffffff;
}

HyperText Markup Language

<div class="box">
  <div class="content">
    TEXT GOES HERE
  </div>
</div>

Answer №2

To create a box-shadow effect, all you need is to include one line in your CSS!

box-shadow: 0px 0px 5px 5px #888888;

Check out the demo here: http://jsfiddle.net/3vVZQ/

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

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

My goal is to assign true or false values to selected radio buttons in each row and then form an object for submission. To distinguish between the radio button values in each row, I have used {{k}}+{{sizeobj.rbSelected}} as the value which is causing issue ...

htmltypescriptangular5

What is the best way to line up a checkbox and its labels alongside a dropdown menu?

My index.html file has a header like this: https://i.sstatic.net/s0hAt.png I'm trying to align the checkbox and its label with the dropdown menu "In ordine". I'm using only bootstrap (no custom classes) and my current page layout is as follows. ...

htmlcssbootstrap-4

Issues with SQL query execution in PHP with mySQL causing no results to be returned

$sql="SELECT * FROM Users WHERE '$searchType' = '$search'"; searchType represents the column and search is the specific value I am looking for. After confirming that my form is correctly submitting the values, I encountered an issue w ...

phphtmlmysqlsqlforms

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: htt ...

htmlcsstwitter-bootstrap

Displaying a submenu upon hovering within its designated CSS region

I'm encountering an issue with my submenu. It's supposed to appear when hovering over the parent menu li, but it also shows up when the mouse hovers over its area. Let's take a look at some images. First screenshot below shows that it works ...

javascriptjqueryhtmlcsshover

Tips for Resizing a Div While Maintaining Aspect Ratio

I'm trying to create a div with a background image size of 1170px x 929px that will maintain its aspect ratio when the width is resized. Can someone explain how to achieve this using CSS? Below is the code I have so far: <section class="box"> ...

htmlcss

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

One interesting feature of bootstrap is that it allows users to disable links within its dropdown menu component by simply adding a class="disabled" into the corresponding <li> tag. I am looking to create some Javascript code so that when a user sel ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a table-style format from a JSON string fetched via AJAX: a step-by-step guide

Hi, I recently started learning web programming and I've been facing some challenges with using AJAX to parse data as a string and display it in a table. [{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}] After ...

javascriptphphtmlajax

What causes the Bootstrap navbar dropdown to be partially obscured in IE8?

While working on a specific project, I have encountered an issue where everything seems to function properly in newer browsers except for IE8 during testing. The dropdown menu is functional, however, it appears hidden behind the main content area labeled ...

jqueryhtmlcsstwitter-bootstrap

Troubleshooting problems with footer size in wkhtmltopdf

I am facing an issue while trying to convert an HTML file to a PDF format. Specifically, when attempting to include a footer, the size rendered in the PDF does not match the one specified in the CSS. The designated size for the footer should be exactly 15 ...

phphtmlwkhtmltopdf

Effective strategies for integrating Bootstrap and AngularJS without relying on jQuery

Currently exploring AngularJS after experimenting with Twitter's Bootstrap. I appreciate Bootstrap for its simplicity, sleek design, and mobile-friendliness. On the other hand, I have noticed a trend where people recommend using AngularJS over jQuery, ...

javascripthtmlangularjstwitter-bootstrap

Attempting to transfer a JSON object from a frontend Form Input to an Express backend

Apologies for bringing up what may seem like a basic issue, but I've been searching extensively (even through axios' documentation) and haven't been able to pinpoint exactly what I need to resolve this issue. I have created a simple To-Do we ...

javascripthtmlnode.jsexpress

Creating a Chrome extension that opens multiple tabs using JavaScript

Currently, I am working on a chrome extension that includes several buttons to open different tabs. However, there seems to be an issue where clicking the Seqta button opens the tab three times and clicking the maths book button opens the tab twice. Below, ...

javascripthtmlgoogle-chromegoogle-chrome-extension

The CSS file is not connecting properly despite being located within the same directory

I have double-checked that both of these files have the correct names and are in the exact same directory. However, for some mysterious reason, the CSS is not applying any styling to my page. I would greatly appreciate any assistance with this issue! Belo ...

htmlcssexpress

Is it possible to refresh the chat-box using PHP?

I recently created a chat box application using PHP, but I'm facing an issue with its automatic reload functionality. Is there a way to implement auto-reload in PHP itself, or would it be better to restructure the system to utilize AJAX? Additionally, ...

phpjavascripthtmlajax

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

jqueryhtmlslideup

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

phpcsswordpress

Organizing CSS DIV code by sections for desktops and mobile devices

My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize @media screen and (max-width: X px) to handle this, with one set of rules for narrow screens and another for wider screen ...

css

Emphasize user-entered text using HTML and CSS

Here's a scenario: a text paragraph is displayed alongside an input box. The user must type the same text into the input box as shown in the paragraph. I'm aiming to highlight the paragraph text in color as the user types, to demonstrate progres ...

htmlcss

Is there a way to verify if an element possesses a specific style, and if so, alter the style of a different element accordingly?

Could you assist me in achieving a similar effect as demonstrated below: I have two menus (http://osiyo-nur.uz/osiyo-nur.uz/test6/), one of which is initially invisible. When I hover over the first menu, the second menu becomes visible with an overlay eff ...

javascriptjqueryhtmlcss