Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more.

I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need.

The grey area is 200px wide and starts about 26px in from the left of the page.

Can anyone assist? Thanks in advance!

Border Image

The header code is here - the grey box is part of a logo image. 

<div class="fusion-header" style="height: 91px; overflow: visible;">
        <div class="fusion-row">

    <div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
cssborder

Answer №1

You have the ability to change the appearance of a parent element's border within the logo section by utilizing a negative bottom margin that matches the size of the border.

.header {
  background: #515151;
  border: 5px solid #5EDBE7;
}

.logo {
  width: 200px;
  height: 50px;
  margin: 50px auto;
  background: #5D5D5D;
  
  /* Modify the parent element's border */
  border-bottom: 5px solid #999;
  margin-bottom: -5px;
}
<div class="header">
  <div class="logo"></div>
</div>

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

Issues with the navigation and logo design in bootstrap mode

1: How can I adjust the size of the logo and name in my Bootstrap navigation? 2: My navigation menu is not showing up correctly. Can anyone help me troubleshoot? Navbar: <nav class="navbar navbar-expand-lg py-4 fig-nav"> <div class=&q ...

htmlcsstwitter-bootstrap

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui

Unnecessary spacing found within the side navigation menu

Recently, I decided to practice my web development skills by creating a basic webpage using flexbox for the topnav and CSS Grid 12 column layout for the main content. Everything was going smoothly until I encountered some extra whitespace in the sidenav se ...

htmlcssflexboxcss-grid

Adding HTML elements to a button using an array: a step-by-step guide

In the process of developing a web application feature using JavaScript, I have come up with a simple plan: Place a button in the bottom left corner. The button should only become visible after scrolling begins. Upon clicking the button, a new window wil ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to disable a JavaScript hover effect when the mouse moves away?

I came across this JavaScript code that swaps the background of a parent div when clicking on a link in a child div. However, I noticed that the hover state remains even after moving the mouse out of the link. Can someone help me modify the code so that ...

javascripthtmlcss

AngularJS enables box to smoothly slide up and down when hovered over

I am attempting to create a div that will overlay an image on hover with a slide up and slide down effect. Can anyone provide guidance on how to achieve this without relying on jQuery? I would prefer to utilize only AngularJS in my application. Here is a ...

javascriptjquerycssangularjs

CSS animations are not functioning properly on disabled Bootstrap buttons

One issue I'm facing is with a BootStrap button that I'm rendering in React. The button has a property or a condition that determines if it's disabled: <Button bsClass="fill" disabled={!props.purchaseble} onClick={conso ...

htmlcssreactjstwitter-bootstrap

Using CSS to mask an image may not produce the desired results in the Chrome browser

Example: .mask1 { -webkit-mask-image: url(feather.png); mask-image: url(feather.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } <div class="mask1"> <img src="camp nou.jpg" alt="barcelona" width="600" height="400"> & ...

htmlcss

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngOnInit() { this.items = [&apos ...

javascripthtmlcssangulartypescript

Different ways to adjust the appearance of table borders in HTML

I find myself at a standstill, hence why I am reaching out with this question. This Table presents itself with various border sizes and colors, along with similar complexities in the background of its cells. Could anyone provide me with guidance on how t ...

htmlcsscolorshtml-tableborder

Tips for properly positioning the ko validation message in case it is lengthy

I have implemented ko validation messages in order to validate input fields. Can anyone provide guidance on how to align the validation message correctly within the specified location? <input id="personName" class="form-control placeholder has-error" t ...

jqueryhtmlcssvalidationknockout.js

Ensuring DIV Fills without Compromising Aspect Ratio

I am currently attempting to fill a div with an image in both width and height. However, I have only been able to control the width while the height respects the aspect ratio without filling the div completely. I have tried various combinations of backgrou ...

csswordpressbackground-imagefillbackground-size

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...

htmlcsspolymerpolymer-1.0

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

javascripthtmlcssweb-componentshadow-dom

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

javascriptjqueryhtmlcss

What is the best method for choosing the next item with jQuery?

I am facing an issue while trying to apply some design on the next element. The error message that I am encountering is: Error: Syntax error, unrecognized expression: [object Object] > label Below are my selections for browsing by category: BROWSE BY ...

javascriptjquerycss

The container div with a gradient background doesn't support the use of height: auto

Currently, I am faced with the challenge of addressing this particular issue: The outer div ("container") is not allowing height:auto and instead conceals the entire content within the div - however, it is crucial for me that the outer div expands as it w ...

cssheight

Using makeStyles() in MUI for conditional rendering

Trying to dynamically change the value of backgroundColor under the property "& + $track" using props.disabled but it seems that MUI does not recognize it. Why could that be? const useStyles = makeStyles((theme) => ({ root: { overflow: "vis ...

javascriptcssreactjsmaterial-ui

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably ...

htmlcssbuttoninputpadding

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

I have a simple question because I'm feeling a bit lost. Check out this JSFiddle link It seems that in Internet Explorer, the contents of my span won't update even though the input is valid. However, in other browsers, the span content changes ...

javascriptjquerycsshtml