Related:
How to get a background image to print using css?
I'm aware that browsers don't render CSS backgrounds when printing.
I'm making a simple bar graph using divs i.e.
<div style="width: 10px; height: 43%; background-color: blue;" title="Series A - 43%">A</div>
<div style="width: 10px; height: 55%; background-color: green;" title="Series B - 55%">B</div>
Is there any way to 'color in' the graph such that it prints correctly?
I think you're on to something using the border. You should be able to continue using a percentage width / height. Try using some negative margins to position the bar label.
<hmtl>
<head>
<style type="text/css">
.graph { border:solid 1px #aaa; background-color:#eee; height:200px; width:260px; }
.graph h1 { color:#000; font-size:1.4em; }
.graph p { color:#fff; }
.graph div { margin-top:8px; }
.graph div div { margin-top:-10px; }
</style>
</head>
<body>
<div class="graph">
<h1>Graph 1.1</h1>
<p>Graph description</p>
<div style="height:0px; width:43%; border-top:solid 7px blue; border-bottom:solid 7px blue;" title="Series A - 43%"><div>A</div></div>
<div style="height:0px; width:55%; border-top:solid 7px lime; border-bottom:solid 7px lime;" title="Series B - 55%"><div>B</div></div>
<div style="height:0px; width:10%; border-top:solid 7px pink; border-bottom:solid 7px pink;" title="Series c - 10%"><div>C</div></div>
<div style="height:0px; width:90%; border-top:solid 7px orange; border-bottom:solid 7px orange;" title="Series D - 90%"><div>D</div></div>
</div>
</body>
</html>
You can absolutely-position an image in your DIV. You won't be able to use percentages, you'll need pixels:
<div style="width: 10px; height: 43%; background-color: blue;position:relative" title="Series A - 43%">
<span>A</span><img style="position:absolute;top;0px;left:0px;width:10px;height:43px" src="green.gif /></div>
You'll probably have to put the label in a span and set the z-index of the image vs. the label. If you use a class name like "green" you could probably write some JavaScript to dynamically insert the IMG based on reading the class names and the DIV dimensions automatically.
Not a simple solution, but worth a try. Alternately there are utilities that will generate a PDF on the server then serve it up for downloading or printing.
Ok currently doing the following:
<div style="width: 10px; border-bottom: 43px solid blue;" title="Series A - 43%"><span style="position: absolute;">A</span></div>
This discards the percentage height, in favour of pixel height.
The css border prints ok.
I'm doing some further css positioning to move the inline text ('A') to the right place.
Any advance on this?
Related
I know this is an old question, but I wanted to know what is the best way to put text into a border of a div tag. This is what I have
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
<div class='componentWrapper'>Text inside div </div>
I want to add a title into the border of the div tag. I know one option is to use fieldsets but I prefer not to go with this approach. Another approach is the put a box and move it up and set the background color, but I think this fails when you set a different background color on the page.
What is the best solution for this?
I would suggest something like that, using position:absolute:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 15px 10px 10px;
width: 95%;
}
.componentWrapper .header {
position:absolute;
margin-top:-25px;
margin-left:10px;
color:white;
background:cadetblue;
border-radius:10px;
padding:2px 10px;
}
<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>
This is what I want the chicklet box to look like:![]1
For some reason I can not use negative margins to get the twitter image to go to the center of the box. Is there something wrong with my parent-child relationship?
My css is in an external sheet, but here it is:
<style type="text/css">
#chicklet_container {
margin:20px auto 0px auto;
width:540px;
height:215px;
}
#chicklet_box {
margin:0px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:33px 5px 5px 5px;
border-color:#45BA88;
position:relative;
}
#chicklet_box2 {
margin:-30px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:0px 0px 30px 0px;
border-color:#3f4040;
}
#chicklet_text {
text-align:center;
margin:-196px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Verdana, Geneva, sans-serif";
font-size:27px;
line-height:20px;
}
#chicklet_text2 {
text-align:center;
margin:139px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Proxima, Nova, Ultralight";
font-size:26px;
line-height:20px;
}
#chicklet_box img {
margin:-250px 0px auto 5px;
}
</style>
Here is the html:
<div id="chicklet_container">
<div id="chicklet_box">
<div id="chicklet_box2">
</div>
<div id="chicklet_text">Follow Me</div>
<div id="chicklet_text2">#soandsoandso</div>
<img src="images/twitter.jpg" alt="">
</div>
</div>
Why are you using so much margin to align the twitter bird image or text. Use as low margins as possible. Instead this, try using that image position:absolute; and top ,left properties. It'll be more clean. But one thing to remember if you are using absolute position for an element ,check if its outer or parent element is positioned or not, if it is not then things may go worse and that child element might go somewhere else.
Negative margins are not a hack - W3C even says: "Negative values for margin properties are allowed..."
Read More: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I do agree in this case though they may be over-emphasized.
Why do you have Chicklet Box 2 inside of Chicklet Box 1? I'm assuming each box represents an icon... am I wrong?
I want to put a specific border like below around my element.
How can I do this with css.
I use this css for showing a border around an element:
.ui-selected {
-moz-box-shadow: 0 0 1px 1px black;
-webkit-box-shadow: 0 0 1px 1px black;
box-shadow: 0 0 1px 1px black;
}
But I want to show border like in the image. Is this possible?
I want to put those eight square around an element.
I use $('#element').addClass('ui-selected') to add
and $('#element').removeClass('ui-selected') to remove.
I want css classes, is it possible
Here is the solution:
box-shadow: 2px 2px 1px 0 #666;
border-top: 1px solid white;
border-left: 1px solid white;
You can see on JSFiddle.
You can specify a different colour for each side, using the border-(top|lef|right|bottom)-color property to add the highlights/shadows. The corners will be mitred accordingly.
Border-top-color
You may then try to use individual CSS3 border images placed at the corners to acheive the black squares.
border images
For the drag handles: although you could place them there with CSS, you would not be able to attach event handlers to them, nor change the mouse cursor when it goes over them.
To get both of these, you need the dots to be actual elements. See this example for one way to position corner elements. Cached for StackOverflow posterity (in the unlikely event that my site is down):
<html lang="en"><head>
<title>Positioning Images</title>
<style type="text/css">
.compass { position:relative }
.compass .north,
.compass .south,
.compass .east,
.compass .west,
.compass .center { width:15px; height:15px; position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-8px; cursor:pointer }
.compass .north { top:0; margin-top:0 }
.compass .south { bottom:0; top:auto; margin-top:0 }
.compass .east { right:0; left:auto; margin-left:0 }
.compass .west { left:0; margin-left:0 }
</style>
</head><body>
<div class="compass">
<!-- your element here -->
<img class="north west" src="c1.png" alt="resize">
<img class="north east" src="c2.png" alt="resize">
<img class="south east" src="c3.png" alt="resize">
<img class="south west" src="c4.png" alt="resize">
<img class="north" src="up.png" alt="resize">
<img class="south" src="dn.png" alt="resize">
<img class="east" src="rt.png" alt="resize">
<img class="west" src="lt.png" alt="resize">
</div>
</body></html>
You could experiment with pseudo elements:
div:after {
content: '\25A0\25A0\25A0 \25A0\25A0\25A0 \25A0\25A0\25A0';
position: absolute;
top: -37px;
left: -5px;
width: 100%;
height: 100%;
text-align: center;
line-height: 75px;
letter-spacing: 67px;
}
This looks good in Webkit, and is a few pixels off in Firefox.
Demo
I have a parent div with a child div inside it (the child div acts as a pop up menu). When the child div pops out it has a tiny space so that it's not lined up with the left of the parent div.
here's the styles:
.ButtonContent
{
display:none;
border: solid 1px black;
width:275px;
position:absolute;
left:0;
margin:0px;
padding:0px;
float:left;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
margin:0px;
padding:0px;
border: solid 1px black;
border-radius:4px 4px 4px 4px;
width:276px;
text-align:center;
position:relative;
}
Here's the HTML:
<div class="Button" id="Button1" >
Add <br />
<div class="ButtonContent" id="ButtonContent1">
Date purchased:
<div class="Date" id="datePurchased1"></div><br/>
Purchase Location:<br />
<input type="text" maxlength="150" /><br />
<a>Add</a>
</div>
</div>
Since you have an absolutely positioned element inside a relatively positioned one with a border, left:0 positions it within the border which makes it look off by a pixel.
Quick fix: make them both the same width and use left:-1px; instead.
http://jsfiddle.net/RtGfc/
It looks to me like you don't need all this CSS to achieve the look you want, maybe a better fix (without touching your HTML):
.ButtonContent
{
border-top: solid 1px black;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
border: solid 1px black;
border-radius:4px;
width:275px;
text-align:center;
}
http://jsfiddle.net/RtGfc/1/
It's two things: the 1px border from the outside <div> and the fact that you chose to put one <div> inside the other.
The 1px border is positioned outside the leftmost mark of left: 0px;. If you remove the border, it works.
Demo: http://jsfiddle.net/MmwYv/
You want .ButtonContent, which is the inner <div>, to be displayed outside .Button, which is the outer <div>. That is going to cause problems, because the inner one is going to be restricted by the measurements of the outer one. If you take .ButtonContent outside, it works too.
Demo: http://jsfiddle.net/NxCp4/
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}