All I want DIVs from red to pink to be colored red and DIVs from pink to red to be colored pink. But this does not work (all is red):
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
display: inline-block;
padding: 50px;
background: yellow;
border: solid 1px black;
}
.pink div {
background: pink;
}
.red div {
background: red;
}
</style>
</head>
<body>
<div class="red">
<div>
<div>
<div>
<div>
<div class="pink">
<div>
<div>
<div class="red">
<div>
<div>
<div>
<div class="pink">
<div>
<div>
<div>
<div>
<!-- and so on -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I know why it doesn't work but now I am looking for a solution. Please suggest anything as long as:
it is in pure CSS;
it doesn't require defining IDs;
it can work for any numbers of DIVs;
the class names (red and pink) can be defined for any of the DIVs.
EDITED
background: inherit is your friend. Since background usually does not inherit.
div {
display: inline-block;
padding: 10px;
background: yellow;
border: solid 1px black;
}
div div {
background: inherit;
}
.red {
background: red;
}
.pink {
background: pink;
}
http://jsfiddle.net/pU6Ds/2
Now slide these off to the side to prove each one has an opaque background:
http://jsfiddle.net/pU6Ds/1/
You can use the following, of which the most important part is the default background-color: transparent; for the regular divs, which allows the background-color, where specified on the .pink and .red divs, to show through:
div {
display: block;
min-height: 2em;
margin: 0 auto;
padding: 0.2em 0;
border: 1px solid #000;
background-color: transparent;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
JS Fiddle demo.
Related
I have an HTML structure with many divs next to each other or below each other that all have an outline. The problem is, these outlines do not overlap, but are shown next to each other (or on top of each other). To illustrate, this is what happens:
This is my code, with added nth-child() selectors to clearly show the issue:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
My question is: How to make these outlines overlap so no 'doubles' are shown?
Update: using half the margin of the width of the outline on the cells does not always work when the outline width is 1px. For example, when the padding of .cell is 4px this is the result (when you zoom in you will see the two lines).
Update2: it seems this is a bug with Firefox on a 4k display. Running this in Firefox on a display with a HD resolution or in another browser (tested Chrome) works.
apply a margin equal to half the outline:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin: 3px; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
Or use margin on one side:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin:0 6px 6px 0; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
I am creating a page which has different background colors for different products and there will be a button which redirects to the other product.
I want the background of the button should be darker than the background color
.a {
background-color: #cc99ff;
}
.b {
background-color: #9d0059;
}
.c {
background-color: #cc3f10;
}
button {
background-color: transparent;
border-color: white;
color: white
}
<div class="a">
<img alt="img">
<button>Test</button></div>
<div class="b">
<img alt="img">
<button>Test</button></div>
<div class="c">
<img alt="img">
<button>Test</button></div>
Thanks in Advance!
Change background-color: transparent; to background-color: rgba(0,0,0, 0.4);.
You can adjust the opacity accordingly
.a {
background-color: #309549;
}
.b {
background-color: #9d0059;
}
.c {
background-color: #cc3f10;
}
button {
background-color: rgba(0,0,0, 0.4); /*Changed*/
border-color: white;
color: white
}
<div class="a">
<img alt="img">
<button>Test</button></div>
<div class="b">
<img alt="img">
<button>Test</button></div>
<div class="c">
<img alt="img">
<button>Test</button></div>
Here is another approach, using CSS variables, calc(), and rgba colors.
:root{
--red-main: 28;
--green-main: 150;
--blue-main: 130;
}
.container {
background-color:
rgb(
var(--red-main),
var(--green-main),
var(--blue-main)
);
}
.darker-bg{
background-color:
rgb(
calc(var(--red-main) - 40),
calc(var(--green-main) - 20),
calc(var(--blue-main) - 20)
);
}
/* Just so things looks nicer, not relevant to your question */
body {
display: flex;
flex-direction: column;
text-align: center;
}
* {
padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<main class="container">
<h1>Hello World !</h1>
<btn class="darker-bg">My bg is automatically darker</btn>
</main>
</body>
</html>
Basically I'm wondering if you can position 2 elements relative to each other.
I have a h1 and h2 inside a div, I want to align the h2 to the right side of the h1
html
<header>
<div>
<h1>Header with some text</h1>
<h2>Other header</h2>
</div>
<div>
</div>
<div>
</div>
</header>
css
header {
width: 960px;
}
div {
width: 318px;
float: left;
border: 1px solid red;
min-height: 200px;
}
h1, h2 {
font-size: 16px;
}
The simplest solution is to wrap the headings in an extra inline-block div and the apply text-align:right.
.parent {
width: 80%;
border: 1px solid red;
}
.wrap {
display: inline-block;
text-align: right;
}
<div class="parent">
<div class="wrap">
<h1>
I'm a really long h1 tag
</h1>
<h2>
Short h2 tag
</h2>
</div>
</div>
use this code
.some_class > * {
display:inline-block;
}
<div class="some_class">
<h1>some text</h1>
<h2> Some other text </h2>
</div>
I have three divs on the same line and want to connect them with a line:
Unfortunately, every way I tried collided with the method of display, e.g. inline-block and vertically aligned spacer divs of height 50% with bottom-border.
http://codepen.io/anon/pen/QwOOZp
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
margin-right: 5em;
position:relative
}
.boxItem:before,
.boxItem:after
{
content:'';
width:5em;/* size of your margin */
border-bottom:1px solid;
position:absolute;
top:50%;
}
:after {
left:100%;
}
:before {
right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
display:none;
}
.myBox {
white-space:nowrap;
/* */ text-align:center;
}
body {
}
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
<div class="boxItem">4</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
</div>
fork of your pen
Try this:
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
}
div.line {
display: inline-block;
border-top: 1px solid black;
width: 2em;
}
<div class="boxItem">1</div><!--
--><div class="line"></div><!--
--><div class="boxItem">2</div><!--
--><div class="line"></div><!--
--><div class="boxItem">3</div>
Note: I used <!-- and --> to comment out the white space ensuring the line actually touches the divs. More info on that bit: https://stackoverflow.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: https://codepen.io/anon/pen/wBPPRz
You could add a div with the width of your margin:
<div class="boxItem">1</div>
<div class="emptyDiv"></div>
<div class="boxItem">2</div>
<div class="emptyDiv"></div>
<div class="boxItem">3</div>
CSS:
div {
display: inline-block;
}
div.emptyDiv{
border: 1px solid black;
width:25em;
}
div.boxItem {
border: 1px solid black;
padding: 1em;
}
I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>