That seems to be a dumb question, but I'm really surprised, after a few websites worked with. Why does the foo div is red, not green?
https://jsfiddle.net/de8he92v/
<div class="wrapper-2">
<div class="wrapper-1">
<div>foo</div>
</div>
</div>
<style>
.wrapper-1 { background-color: red; }
.wrapper-2 { background-color: green; }
</style>
Edit
Ok, I read ThisClark answer, but still don't understand.
Here is updated fiddle:
https://jsfiddle.net/de8he92v/3/
Now the foo is yellow, but why it is not green?
The foo is inside red wrapper. Then, the red wrapper is inside green wrapper. So why we don't see green? What the madness?
In other words, if the puppy is inside the kennel, then we would see the kennel. But here we see only the puppy.
<div>foo</div> has the default user agent styles applied to it which is typically a transparent background and display: block.
Since it's inside .wrapper-1 and has a transparent background, you will see red.
To make this really stand out, add this to your fiddle and run it again:
div {
margin: 5px;
padding: 5px;
border: solid black 5px;
}
That additional style will apply to all the divs on the page and give you a better visual idea of where they are and what styles they have.
With the additional style applied, it ends up looking like this:
Additionally, div.wrapper-1 is said to be a child of div.wrapper-2 and even though 1 comes before 2 in numerical order, the div.wrapper-1 styles appear on top of their parent element, div.wrapper-2. The same parent-child relationship applies between div.wrapper-1 and <div>foo</div>.
EDIT
Your updated code in 3D view with margin, padding, and border:
Your update without additional style:
Related
I wish to use CSS background shading to annotate some text in HTML.
But, the regions may overlap each other.
In this example I wish to shade the background of "Jim, Alex, Dunedin" in yellow, then "Dunedin, 184.3" in blue. In this instance, the "Dunedin" element would therefore be shaded in green.
I'm pretty sure this isn't possible in HTML, since I don't think span elements can overlap.
Any other solutions to this problem offered?
Can it be done? Yes.
Should it be done? Maybe not the way I've shown it. It's just to get you started.
span:first-of-type {
background-color: yellow;
}
span:last-of-type {
background-color: lightblue;
display: inline-block; /* needed so that the next line will work as we cannot transform inline elements */
transform: translateX(-59px); /* move this element 59 pixels to the left so that it overlaps */
mix-blend-mode: multiply; /* blend the backgrounds together */
}
<span>Jim, Alex, Dunedin</span>
<span>Dunedin, 184.3</span>
Maybe it would make more sense to process this HTML so that the markup is changed to look something like the following:
.yellow {
background-color: yellow;
}
.blue {
background-color: lightblue;
}
.yellow.blue {
background-color: lightgreen;
}
<span class="yellow">Jim, Alex</span><span class="yellow blue">Dunedin</span><span class="blue">, 184.3</span>
<!-- note, newlines above would result in whitespace separating the background colors between the <span>'s -->
You can can accomplish most of what you're setting out to do via relative/absolute positioning, z-indexing, and setting opacity on these elements to anything under 1.
For example:
<h1>Image Transparency</h1>
<span style='opacity:.3;background:yellow; position:absolute;width:100px; height: 1em;'> </span>
<span style='opacity:.3;background:#98fffc; position:absolute;width:100px; height: 1em; left: 50px;'> </span>
<p>The opacity property specifies the transparency of an element. The lower the
value, the more transparent:</p>
Good luck!
Note: in the end I solved the problem by analysing the data & producing a different span for each differently shaded block.
So effectively, my code produced:
<span class='yellow'>Jim, Alex, </span><span class='yellow-blue'>Dunedin, </span><span class='blue'> 184.3</span>
It did this by creating an array of arrays, with a cell for every character in the text. As the text was analysed, for each character it would add "styles for that character" in the array for that cell. Then the code went through and assigned a span for each consecutive set of cells that shared the same styles.
The Python code to do this is here, and here is an example of the highlighted output, though in this example there are no overlapping regions.
I want to:
be able to style some text on my HTML page so that a certain background color only covers the text and not beyond it.
Ideally I would like to control this from one div.
Here is my jsfiddle of the below:
#edit_this_div {
min-width: 0px;
background-color: yellow;
}
#bad_way {
background-color: yellow;
display: inline-block
}
<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>
What I tried:
The way I thought of accomplishing this is to set the div as an inline block, which I've also shown in my jsfiddle. However, I rather not do this because I feel it would complicate things; when I did this my block started jumping around and combining with other elements. I don't plan to have any other elements with the div so I am fine with it staying as a block that takes up the whole line on the screen.
With the display of block, I also tried setting the padding and minimum widths but it doesn't have an effect laterally for removing the extra color that spills past the text.
It is generally recommended that you put text into appropriate block tags, i.e. <p>...</p>, <h1>...</h1>, <blockquote>...</blockquote>, etc.
If you did that, it would be easy, for example:
<div id="edit_this_div">
<p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>
Then the CSS:
#edit_this_div p {
background-color: yellow;
display: inline;
}
Even cleaner would be to use both <p>-tags as well as additional inline tags, for example <span>-tags:
<div id="edit_this_div">
<p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>
CSS:
#edit_this_div p span {
background-color: yellow;
display: inline;
}
What you need is <mark></mark> tag, like this:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Here's a fiddle for you:
http://jsfiddle.net/am9rzfmd/
The default css settings for this tag are:
mark {
background-color: yellow;
color: black;
}
So you don't have to explicitly define the css, only just in case you need to change the color.
Update
As misterManSam pointed out:
Be aware that the element has a special semantic meaning and
shouldn't be used if you just want "to make my text a yellow
background"
Change it from a div to a span and it will only stretch its width to the contents within it.
<body>
<span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
<br>
<br>
<span id="bad_way">This is the inefficient and manual way.</span>
</body>
http://jsfiddle.net/bbv5ryhk/
I'm writing a page that looks code wise like
<div class="green">
<span class="orange">s1</span>
<span class="orange">s2</span>
</div>
but that should be formated via CSS like:
The surrounding black frame shows the full page in the browser. (Think of <body></body>)
The red frame is a fixed width and fixed hight basically empty space that should be added by the CSS .green:before (I'm using it's ability to format it's borders for a visual effect)
The green frame shows the real content that should be as wide as necessary to contain both <span> in one line
The blue frame should be created by the CSS .green:after, has a fixed height and should take up all the space till the right border of the page - i.e. it must have a variable width.
Required browsers are the modern ones (Firefox, Chrome, Safari, Opera) in recent versions. No need to take care of IE. Mobile browsers would be great, though.
How can I achieve that? (All my attempts failed sooner or later...)
A jsFiddle with this example code is at http://jsfiddle.net/X2MDG/
I'm afraid that there is no way to satisfy all your constraints. The main things that don't seem to have a CSS solution are:
Controlling the width of just the green bit can't be done without affecting the width of the red :before and blue :after content. As you mention in the comments to the question, using a different DOM structure is not an option.
The blue (:after) content should take up all space not needed by the green (main) content.
The fixed height of red/blue may require some clearing on the elements below the entire div.
So, as far as I could tell, the question as you asked it doesn't have a 100% satisfying answer. Either way, here's the code I came up with researching this problem, perhaps it can help you or others stumbling on this question. See either this jsfiddle or the code below:
<div id="page">
<div class="green">
<span>Orange 1.</span>
<span>Orange 2. Which can be really wide.</span>
</div>
<p style="clear: both;">Black is the page. Clearing is
needed because the red and blue boxes are not in the
flow but do have quite some height.</p>
</div>
CSS:
div#page {
border: 2px solid black;
width: 80%;
padding: 2px;
}
div.green:before {
content: 'red / before';
border: 2px solid red;
float: left;
display: inline-block;
width: 140px;
height: 200px;
}
div.green {
border: 2px solid green;
}
div.green:after {
content: 'blue / after';
border: 2px solid blue;
display: inline-block;
float: right;
height: 60px;
}
div.green span {
border: 2px solid orange;
}
I've had a similiar issue like this before and trying to finally get it corrected. If you notice in the js fiddle there seems to be a thicker border above the actions div and I'm trying to find out why there is and there isn't in the template that I purchased.
http://jsfiddle.net/pGFfa/
Template:http://kansasoutlawwrestling.com/files/templates/admin/peachv1.2/Template/forms.html
EDIT:
I updated my page with the real intended page but look at the actions area and there still is a border on the left and right. Not sure why.
The double border is because of the bottom border of the content div. The div in the template has rule ".box .content.with-actions" applied which says "border-bottom: 0 none;". The content div in your fiddle doesn't have that rule so it has a bottom border and also the actions div has a top border hence the thicker line appearance.
The difference is that the content div in the template also has the "with-actions" class while the one in your fiddle doesn't. Just add that class and the problem disappears.
Updated fiddle http://jsfiddle.net/7jrEp/2/
As a note, when your css is linked externally any changes you make to the actual css changes every fiddle we post. It's better to paste the css into fiddle so it doesn't break.
And the problem as noted above was a double border plus the radius being applied to the bottom and not the top of the form container.
In content.css, try changing:
.box .content-form { border: 1px solid #C8C8C8; }
to:
.box .content-form { border: 1px solid #C8C8C8; border-bottom: none; }
I'd like to integrate a theme tag to my elements so they appear in diffrent colours. But since the css selectors have the same css specificity the latest overrides the earlier defined rule.
this is an example that shows my problem:
<div class="red">
<div class="box">This should be red</div>
<div class="yellow">
...
<div class="box">This should be yellow (nested in x levels under the div.yellow)</div>
...
</div>
and here my css
.box { width: 100px; height: 100px; }
.yellow { background-color: yellow; }
.red { background-color: red; }
the box should be listed somewhere, but as soon as it is a sub child of another color definition it should been overwritten.
thanks for any help!
You shouldn't really be doing things this way -- if your theme changes, then suddenly things with class yellow may actually be blue, for example. I would suggest finding a common way of naming things (even if it's just colour1, colour2, colour-highlight...) and then specifying those styles. You can then look into the way your pages are designed and make the rules more specific as necessary (either by using !important or by making the rule more specific, e.g. .colour1 becoming .box .colour1 or div.colour1).
Try:
.box { background-color: inherit; }
See:
http://jsbin.com/imube/edit
I don’t quite see the problem. Here’s what I get with that code:
alt text http://www.pauldwaite.co.uk/images/so/1905834.png
You probably need to use CSS's !important keyword eg:
.yellow { background-color: yellow !important;}