logo
down
shadow

Background color/width running to 100% on css element


Background color/width running to 100% on css element

By : user2949613
Date : November 17 2020, 01:00 AM
I wish did fix the issue. Setting display:table on the .header-title rule will fix the issue (without messing the margins).
code :


Share : facebook icon twitter icon
How do I set a background-color for the width of text, not the width of the entire element, using CSS?

How do I set a background-color for the width of text, not the width of the entire element, using CSS?


By : Aria
Date : March 29 2020, 07:55 AM
To fix this issue Put the text in an inline element, such as a .
code :
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}
How to change the background color by the the width of element?

How to change the background color by the the width of element?


By : divakar
Date : March 29 2020, 07:55 AM
will help you Since you're using inline styles you can use the style property of the div to get the width in %
code :
var currentWidth = $('.progress-bar')[0].style.width;
if (parseFloat(currentWidth, 10) < 100) {
    $('.progress-bar').css('background-color','red');
}
$('.progress-bar').each(function(){
    var currentWidth = this.style.width;
    if (parseFloat(currentWidth, 10) < 11) {
        $(this).css('background-color','red');
    }
});
Changing the background color and width of the body element

Changing the background color and width of the body element


By : Clint
Date : March 29 2020, 07:55 AM
To fix the issue you can do You're actually doing it, except when you don't declare a background color for the html element, it then takes the background color of the body element. Hence, you're not seeing the difference.
Simply give the html element a different background color, and also give body some height:
code :
html {
    background-color: red;     /* new */
}

body {
    border: 1px solid black;
    width: 500px;
    height: 500px;              /* new */
    margin: 0 auto;
    background: black;
}
Show background-color on full width of child element of horizontally scrolling element

Show background-color on full width of child element of horizontally scrolling element


By : xXOMAROVSKYxX Gamer
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further In a horizontally scrolling div, when I move the horizontal scrollbar, the background-color of .filesColumn:focus does not show completely (for the complete width). , Set .filesColumn display: inline-block and remove width: 100%
code :
html,
body {
  height: 100%;
}

body {
  padding: 10px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: rgba(16, 40, 136, 1);
}

.contentModal {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.filesColumn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(16, 40, 136, 1);
}

.filesColumn:hover {
  background-color: rgba(48, 88, 184, 1);
}

.filesColumn:active,
.filesColumn:focus {
  background-color: rgba(79, 134, 235, 1);
}
<div class="container">
    <div class="contentModal">
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
    </div>
</div>
CSS: Background Color on Element With Automatic Width

CSS: Background Color on Element With Automatic Width


By : L K Dsouza
Date : March 29 2020, 07:55 AM
wish helps you The problem domain. I would like to style a HTML list using CSS. The list will serve as a navigation bar and always be on screen. To avoid wasting screen space, the menu should by default be in a collapsed state and only expand on mouse-over. , The simple answer is to use set your li elements to float, like this:
code :
/* Main topic entry */
    #navigation > ol > li{
    white-space: nowrap;
    float: left; /* Add this to show background when hovering */
    background-color: #333; /* dark grey */
    color: white;
    overflow: hidden; /* Only show the number until hover */
    width: 30px; /* 40px minus the OL’s padding */
Related Posts Related Posts :
  • Adding a drop down transition to CSS Menu
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org