Does anyone know how to yellow highlight a field in table and also have the yellow color print? This hightlights on the screen, but does not print the yellow:
<td style="background-color: yellow">Total:</td>
I found out that browsers, by design, do not print background colors. The only workaround I was able to find is that you can make a ultra-thick border of the cell or div:
<td style="border-left: 999px solid yellow">
Unfortunately, the cell contents won't overlay over the thick yellow border. I checked everywhere online and the closest answer I could find was on stack overflow:
Best Ways to Get Around CSS Backgrounds Not Printing
However, the answer was untested and I was unable to get it working on my computer. I tried toying around and experimenting with no luck.
Ok, I found a solution to my problem, but the solution is rather inelegant. Like I said in my above question, you have create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on top. Inelegant, but it works.
It's best to set both the text div and the highlight div's within a third "outer" div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". Sample code is below. This is tested code on both Chrome and Firefox:
<style type="text/css">
#outer_box {
position: relative;
border: 2px solid black;
width: 500px;
height:300px;
}
#yellow_highlight {
position: absolute;
width: 0px;
height: 30px;
border-left: 300px;
border-color: yellow;
border-style: solid;
top: 0;
left: 0px
}
#message_text {
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<div id="outer_box">
<div id="yellow_highlight"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
Related
New to the site and fairly new to coding as a whole, but wanting to learn as well.
Basically what im trying to do is essentially make this border grey where the grey box is, and blue for the rest of it. I've tried googling it but struggling to find something that describes exactly what im looking for.
The grey area is 200px wide and starts roughly 26px in from the left side of the page.
Can anyone help at all? Thanks in advance
Border Image
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">
You can override a parent border in the logo element, by using a negative bottom margin with the size of the border.
.header {
background: #515151;
border: 5px solid #5EDBE7;
}
.logo {
width: 200px;
height: 50px;
margin: 50px auto;
background: #5D5D5D;
/* Override the container vorder */
border-bottom: 5px solid #999;
margin-bottom: -5px;
}
<div class="header">
<div class="logo"></div>
</div>
So, here's my situation:
I have a div (see the code below), a pretty simple . When running the code, I come up with a gray box. BUT, my intention was for that gray box to span from the start of the browser window to the END of that browser window, while what the code below does is creating a gray box with what seems to be a white border.
<div style="height: 30px; background-color: gray; color: white;">
Hey
</div>
I'm sorry for the lack of explanation, but I found no good way to word what I was trying to do. Thanks in advance,
Tom.
If you want a div to fill all available space use the following:
width: 100%;
height: 100%;
You can define sizes in percentages of available space.
If you want to keep you height:
<div style="height: 30px; width: 100%; background-color: gray; color: white;">
Hey
</div>
Also to get rid of white borders, add this: body { padding: 0; margin: 0 }
If I understand your correctly, you need width to be set to 100%
<div style="width: 100%; height: 30px; background-color: gray; color: white;">
Hey
</div>
Add width:100%; to say to the div to fill all the horizontal space.
<head>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="height: 30px; width: 100% background-color: gray; color: white;">
Hey
</div>
</body>
I am assuming you want your div to be 30px high and the width all the way. To do that you just set the width of the div to 100% and make sure the body has no padding(this can shift your elements to the the right a little. I recommend using reset.css)
Hope this helps!
[edit: clarified that box-sizing: border-box doesn't seem applicable, since I'm using absolute positioning]
The following code illustrates my problem. I'm using absolute positioning, because I found this even trickier with flow-based layout, but I'm open to suggestions. What I want is borders around arbitrary elements, without the borders affecting the positioning of the nodes. (The borders may clip or be overwritten by the content, but that doesn't matter.)
In particular, the borders of a parent must be able to overlap with the borders of its children, which is not the default behaviour. The CSS box-sizing attribute can be set to border-box to achieve the effect I want, but only (I believe) with inline elements. It has no effect on elements with absolute positioning (as I understand things).
So, my approach has been to use a negative margin to offset the positions of the children by the width of the border. This does indeed seem to cancel out the effect of the border's presence, but unfortunately not in a way which is consistent across scaling factors. At large scales, things look ok. At the default browser zoom in Chrome, the element positioning goes a bit off (they appear too high); if I go smaller, then the element position goes off in the other direction.
But if I remove the borders entirely, the layout seems to scale ok.
So my question is: is there a reliable (scalable) way to have borders on HTML elements with no impact on the positioning of the elements?
[In the example, I've used different colours for some of the borders. I would like to see only black, but at some zooms I can see red and green borders, showing that the element's position is being affected by the presence of the border.]
thanks
Roly
.bordered {
position: absolute;
height: 18px;
border: 2px solid;
margin: -2px;
}
<span class="bordered" style="width: 55px; left: 30px;">
<span class="bordered" style="width: 8px; left: 0;">
(
</span>
<span class="bordered" style="border-color: green; width: 47px; left: 8px;">
<span class="bordered" style="border-color: red; width: 39px; left: 0;">
<span class="bordered" style="width: 8px; left: 0;">
5
</span>
<span class="bordered" style="width: 31px; left: 8px;">
<span class="bordered" style="width: 23px; left: 8px;">
Nil
</span>
</span>
</span>
<span class="bordered" style="width: 8px; left: 39px;">
)
</span>
</span>
</span>
Try out CSS2 outline property:
.bordered {
outline:2px solid blue;
}
Outline does not affect element position.
You can also use CSS3 outline-offset as seen here: http://www.css3.info/preview/outline/
I also discovered that using a border of zero width (so that it doesn't affect layout), and then adding a box-shadow to emulate a visible border, seems to work well.
Six years later...
The other answers didn't work for my situation since the box I was styling already had a box-shadow. I needed a border on just one side like border-left and a border-radius, but without the border affecting the position or width of the element. The solution I came up with was to apply the border on an inner element of the absolutely positioned element.
.outer {
position: absolute;
width: 200px;
height: 100px;
border-radius: 5px;
background-color: #c8c8c8;
}
.inner {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
border-left: solid 5px #097fee;
border-radius: 5px;
}
<div class="outer">
<div class="inner">
Some content
</div>
</div>
I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
I'm trying to make a header's background color look like a rectangular speech bubble by adding a text element ◥. Below you can see the spanned text for the background shape and the style for ◥. But this creates a blank space between the bottom of the border and the ◥, and I would like the two to line up in order to look like a speech bubble.
Image of fail in action.
http://i.imgur.com/1T09F.png
{block:Link}
<h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
<div class="triangle">◥</div>
</h1>
{block:Description}{Description}{/block:Description}
{/block:Link}
.triangle{
margin-left: 10px;
font-size: 35px;
color: #123033;
}
span.Headers{
display: block;
background-color: #123033;
padding: 8px
}
I tried the trick with adding a parent group in which the font size is 0, and that didn't work. Nor did setting the margin on the header to 0. Putting the ◥ div on the same line hasn't done anything either. I spent about an hour looking through other questions to see what I could do, and I couldn't find a solution, but I am nub so forgive me if I missed something obvious.
It is unreliable to use text to create the effect. Different devices will render it differently, which is not what you want.
In your case, it would be best to use an image with the same colour, placing it in a <div/> below the heading, ensuring that they touch each other. Then, add some padding on the left, as you did with the .triangle style.
I have created an image for you to use: Grab it here
All in all, your markup would look like this:
HTML:
{block:Link}
<div class="header">
<h1><a href="{URL}" {Target}>{Name} ☞</a></h1>
<div class="triangle"></div>
</div>
{block:Description}{Description}{/block:Description}
{/block:Link}
CSS:
div.header > h1 {
background-color: #123033;
padding: 8px
}
div.header > div.triangle {
background: url('Arrow.png') top left no-repeat;
height: 50px;
padding-left: 10px
}
Do let me know if this works for you.
If you're able to use generated content (which, I suppose, depends on your site's users), then I'd suggest (with the slightly amended HTML for demo purposes):
<h1><span class="Headers">a name</span></h1>
The following CSS:
h1 {
display: block;
position: relative;
background-color: #ffa;
padding: 0.5em;
}
h1::after {
content: '';
border: 1em solid #ffa;
position: absolute;
top: 100%;
left: 2em;
border-bottom-color: transparent;
border-left-color: transparent;
}
JS Fiddle demo.
In terms of compatibility caniuse suggests that generated content is supported in IE from version 8 onwards.
References:
CSS generated content compatibility, from caniuse.com.