I have a bar chart that is built using rich:chart (richfaces). Everything works fine except that the legend exceeds the height of the bar chart. How do I adjust the overall height of the chart? There is no height attribute or anything that is equivalent to it. Adjusting the height of its div container does not help either.
You need to change the height of div.chart-container. Use #styleClass to add the class with correct height.
Here's an example I used to solve my question:
.chart-container {
float: left;
box-sizing: content-box;
width: 800px;
height: 450px;
padding: 2px 2px 2px 2px;
border: 1px solid #ddd;
background: #fff;
background: linear-gradient(#f6f6f6 0, #fff 10px);
background: -o-linear-gradient(#f6f6f6 0, #fff 10px);
background: -ms-linear-gradient(#f6f6f6 0, #fff 10px);
background: -moz-linear-gradient(#f6f6f6 0, #fff 10px);
background: -webkit-linear-gradient(#f6f6f6 0, #fff 10px);
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
font-size: 16px;
font-style: bold;
}
Related
I know about fegaussianblur and its effects, but that doesn't seem to help me with this. I found the code below from here, and that works great in CSS, but is this type of thing possible in SVG, without path or CSS at all?
h1 {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 50px;
padding: 80px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
/*Important Code Below*/
text-shadow:
1px -1px #767676,
-1px 2px #737272,
-2px 4px #767474,
-3px 6px #787777,
-4px 8px #7b7a7a,
-5px 10px #7f7d7d,
-6px 12px #828181,
-7px 14px #868585,
-8px 16px #8b8a89,
-9px 18px #8f8e8d,
-10px 20px #949392,
-11px 22px #999897,
-12px 24px #9e9c9c,
-13px 26px #a3a1a1,
-14px 28px #a8a6a6,
-15px 30px #adabab,
-16px 32px #b2b1b0,
-17px 34px #b7b6b5,
-18px 36px #bcbbba,
-19px 38px #c1bfbf,
-20px 40px #c6c4c4,
-21px 42px #cbc9c8,
-22px 44px #cfcdcd,
-23px 46px #d4d2d1,
-24px 48px #d8d6d5,
-25px 50px #dbdad9,
-26px 52px #dfdddc,
-27px 54px #e2e0df,
-28px 56px #e4e3e2;
}
<h1>Shadow Effect</h1>
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
We want to apply a curved shadow line on our menu, at the bottom (see Image).
This shadow/curve must be in-front of the sub menu. So the shadow overlaps the sub menu. This is the problem, because when we hover to the sub menu the sub menu will disappear.
This is because the wrapper got a higher Z-Index then the sub menu.
#header {
width: 100%;
height: 153px;
background: url("/public/images/headerBackground.png") no-repeat center center;
}
#header .wrapper {
position: relative;
left: 50%;
margin-left: -470px;
z-index: inherit;
pointer-events: all;
}
#navigation li ul {
display: none;
position: absolute;
z-index: -1;
background-color: #c40b29;
-webkit-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
-moz-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
float: left;
width: 152px;
height: 166px;
margin-left: 0px;
margin-top: -2px;
}
For an image of the design we got:
http://s18.postimg.org/uiaf1waxl/Schermafbeelding_2014_03_17_om_16_10_26.png
I have a div with text inside, with a line-height that is more than the height of the text. This means there is space on top and below each line of text.
There is a vertical border along the right hand side, the top of which I want to be aligned with the top of the text. I need to somehow align the text to the top of it's line.
Is this possible or can someone help me out here?
div{
border-left: 1px solid black;
line-height: 30px;
}
<div>Hello</div>
Without messing with the line-height:
div{
position: relative;
font-size: 16px;
line-height: 24px;
width: 25px;
padding: 0px 0px 0px 10px;
}
div:before {
position: absolute;
content: '';
top: 6px;
left: 0px;
bottom: 6px;
width: 0px;
border-left: 1px solid black;
}
The values top and bottom should equal (line-height - font-size) / 2 but due to different character height will need some manual nudging.
Demo: http://jsfiddle.net/NcbB7/
I'd like to have the caption text stay the same width as the image (without setting one fixed width). I've tried playing around with , etc., but that's even harder to control.
Here's a sample of the CSS. Hope this is the proper way to ask questions here!
<head>
<style type="text/css">
<!--
#floatrightphoto {
float:right;
padding: 6px;
margin-left: 2px;
margin-top: 3px;
margin-bottom: 2px;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCEE77;
border-right-color: #AFE165;
border-bottom-color: #AFE165;
border-left-color: #CCEE77;
background-color: #CCFF99;
}
#floatrightphoto p{
font-weight: normal;
color: #889260;
float: left;
margin-bottom: -3px;
margin-top: 0px;
margin-right: 1px;
margin-left: 0px;
text-align: right;
font-family: "Comic Sans MS", Ariel;
font-style: oblique;
font-size: 14px;
line-height: 16px;
position: static;
display: inherit;
}
body {
width: 750px;
}
-->
</style>
</head>
<body>
<div id="floatrightphoto">
<img src="somephoto" width="180" height="180">
<br>
<p>Caption Caption Caption Caption Caption Caption Caption
Caption Caption</p>
</br>
</img>
</div>
</body>
Whoa that's a whole lotta extra fluff. I'm looking for the same solution.
I came across this solution (modified to reflect what you are wanting):
#img-right{display: table; min-width: 1px; float:right; margin-left: 10px;}
#img-right p {display: table-caption; caption-side: bottom;}
However, this works in most all browsers except IE where in IE my #img-right spans the full width of the caption (the caption being longer than the image itself and it doesn't wrap). I am still trying to figure out how to make IE behave, as it works perfectly in other browsers.
As for your other code, I suggest simplifying it a bit to reduce load time. I modified your CSS a little bit...I'd suggest renaming the ID's to be smaller and easier to read, please, don't EVER use Comic Sans... ever. :)
body { width: 750px; }
#img-right {
float:right;
padding: 6px;
margin: 3px 2px 2px 0px;
border-top: 1px solid #ccee77;
border-left: 1px solid #ccee77;
border-bottom: 1px solid #afe165;
border-right: 1px solid #afe165;
background: #ccff99;
}
#img-right p{
font: italic 14px/16px Helvetica, Arial, Lucida Sans, Verdana;
color: #889260;
float: left;
margin: 0px 0px -3px 1px;
text-align: right;
}