On my site http://goo.gl/BcJtC section "about us" I'd like a thin grey border on the right side of my activity-left div, to make a separation with activity-right div.
Unfortunately with my current code it doesn't work. Any idea? Thanks
HTML code:
<div class="section" id="plan-activite">
<div id="activity-container">
<div id="activity-left"><span class="activity-title">About Us</span><br /><img src="images/planet-water.jpg" class="activity-planet" alt="Picture" /></div>
<div id="activity-right"><p><span class="activity-conclusion">XYZ, khkhkhk, ren natur</span></p><br /><p>XXZ AS was founded 2011sdqsd.</p><br/>
</div>
</div>
</div><!--END page3-->
CSS code:
#activity-container {
width:90%;
background-color:#FFFFFF;
Height:400px;
margin-left: auto;
margin-right: auto;
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
border: 1px solid #efefef;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
#activity-left {
color:#000;
margin: 0 auto;
border-style:solid;
border-right-color:#666;
padding:15px;
width: 30%;
float: left;
position: relative;
}
#activity-right {
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
margin: O auto;
padding:15px;
color:#000;
width: 60%;
float: left;
position: relative;
text-align:justify;
-moz-column-count: 1;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 1;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}
.activity-planet {
text-align:center;
margin-top:20px;
margin-left:20px;
}
Add border: 1px solid #000 to #activity-left. It works for me.
Although I would do border-left: 1px solid #000 for #activity-right as this will extend all the way down.
The border declaration is made up of three parts: color, style and width properties. Style and width are mandatory, with color being optional (inheriting from the text color if not provided).
These properties can be made more specific using the -left, -right, -top and -bottom suffixes, as you have done for the color property.
So at present, all you are missing is the width declaration in order to have a right-hand border. The trouble with that though, is that since you've set a generic style for the whole <div>, adding border-width: 1px, will give the other 3 sides a border in the default color.
To get around this, you can use the shorthand declarations and give all 3 properties just to the right-hand side at once (border-right: 1px solid #000;).
Related
How do I make the design of this box better? Making its header and footer 3D, better choice colors, ...
I've tried this:
Here is its related code:
.boxfooter {
display: block;
border: 1px solid #eee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fbfcfa;
margin:0 0 0 0;
padding: 1px;
color:#8EA2AA;
}
.boxheader{
margin:6px 0 0 0;
font-size:20px;
display: block;
border: 1px solid #eee;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: #fbfcfa;
margin:0 0 0 0;
padding:4px;
}
.box {
background-color:#fbfcfa;
overflow-y:scroll;
display: block;
margin:0 0 0 0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 10px;
color: #333;
}
if you want it to stand out more, go for something like a box-shadow.
box-shadow:0 0 10px #000000;
and as for colours, that's totally up to you, just experiment, and look up HEX colour codes
Check the demo below.
Fiddle
I used the gradient generator to have this effect.
Also if you want to have effect, wrap them up then add this code to the wrapper.
.box-wrapper {
box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
}
For engraved effect you can try the css below.
.box-wrapper {
box-shadow:-1px -1px 1px rgba(0, 0, 0, 0.5);
}
To adjust the lightness/darkness of the shadow. Just replace the rgba's 0.5 and chooose a number from the range of 0.1 to 1.0.
0.1 - lightest 1.0 - darkest
I have a little problem with Firefox, this is the html
<html>
<button name="five" data-type="select" class="ui_button ui_button_normal">
<span>Pasta</span>
<div class="ui_button ui_button_normal ui_select_list">
<div class="ui_select_list_item" name="Pasta">Pasta</div>
<div class="ui_select_list_item" name="Carne">Carne</div>
<div class="ui_select_list_item" name="Verdura">Verdura</div>
<div class="ui_select_list_item" name="Pesce">Pesce</div>
<div class="ui_select_list_item" name="Dolce">Dolce</div>
<div class="ui_select_list_item" name="Frutta">Frutta</div>
<div class="ui_select_list_item" name="Caffè">Caffè</div>
</div>
</button>
</html>
and this is the CSS
.ui_select_list
{
margin: 0px !important;
height: auto !important;
padding: 10px;
}
.ui_select_list_item
{
border: 1px solid transparent;
}
.ui_select_list_item:hover
{
border: 1px solid transparent;
background-color: rgba(0, 185, 0, 0.3);
box-shadow: 0 0 2px 1px #000000;
border-radius: 10px;
}
.ui_button
{
background-color: rgba(140, 140, 140, 0.5);
border: 0 solid transparent;
border-radius: 10px 10px 10px 10px;
color: #FFFF00;
font-family: verdana, sans-serif;
font-size: 15px;
height: 32px;
line-height: 30px;
margin: 5px;
position: relative;
text-align: center;
width: 160px;
}
.ui_button_normal
{
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ui_button_normal:hover
{
background-color: rgba(180, 180, 180, 0.5);
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.8);
}
Can be found on http://jsfiddle.net/Mak73/3YkSe/
The problem is that, on Google Chrome it works like expeted, when the mouse is over the div.ui_select_list_item the content of the div change with div.ui_select_list_item:hover.
On Firefox the :hover don't work, any idea?
It's not working because you're wrapping a <button> around the divs .. close it after the <span> and the :hover state will work ..
Jsfiddle: http://jsfiddle.net/3YkSe/2/
I suggest you try applying the following element options:
display: none;
display: inline;
I think this will do some better work in Firefox, on focus pop the
menu and display it inline, without block. This is just an idea I've
got for you to try out. Reply back if it works or not! Thanks!
I would classify myself as a beginner and discover answers through trial and error. However I can't solve this. I would like an image to be behind the h2 text on my homepage. I have tried placing it everywhere within here and nothing makes it show up.
Here is my site: http://bitsybride.com
Here is what I want: http://bitsybride.com/Image8.png
Here is the relevant css:
.smallpost {
overflow:hidden;
width:730px;
padding-bottom:0;}
ul.smallpost li {
width:290px;
height:130px;
margin:0 40px 60px 0;
padding:0px 0px 0px 0px;
position:relative;
float:left;
background: url(images/pink ribbon.png);}
ul.smallpost h2 {
font-size: 12pt;
line-height: 0pt;
margin: 0 0 0px 0;
padding:5px 0px 100px 15px;
letter-spacing: -1px;}
ul.smallpost li img {
margin:-20px 0 15px -20px;
width:280px;
height:150px;
overflow:hidden;
padding: 4px;
margin: 1px 1px 4px 1px;
overflow: hidden;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /*-moz-border-radius: 5px;-khtml- border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-o-linear-gradient(#2F2727, #1a82f7);
background:
-moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent
;
background: -webkit-gradient(linear, left top, left bottom,
from(#fff),
color-stop(0.5, #fff),
to(#EFEFEF)
);
filter: progid: DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffffff', EndColorStr='#EFEFEFEF');
-ms-filter: \"progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#EFEFEFEF)";
-o-linear-gradient(top, #dcdcdc, #c6c6c6);
border: 1px solid #FFFFFF;
z-index: 5;}
Help!
If you want your h2's to have a background image, try this in your ul.smallpost h2
background-image: url('/wp-content/uploads/2012/05/bitsy2.png');
or wherever your image is.
use display:inline-block in your h2 tag
ul.smallpost li {
width:290px;
height:130px;
margin:0 40px 60px 0;
padding:0px 0px 0px 0px;
position:relative;
float:left;
}
ul.smallpost h2 {
font-size: 12pt;
line-height: 0pt;
margin: 0 0 0px 0;
padding:5px 0px 100px 15px;
letter-spacing: -1px;
background: url(images/pink ribbon.png);
display:inline-block;
}
On my site http://goo.gl/BcJtC section "about us" I'd like the picture with the planet to be aligned horizontally in the middle of the DIV.
I tried text-align:center; but it doesn't work. Any idea? Thanks
HTML
<div class="section" id="plan-activite">
<div id="activity-container">
<div id="activity-left"><span class="activity-title">About Us</span><br /><img src="images/planet-water.jpg" class="activity-planet" alt="Picture" /></div>
<div id="activity-right"><p><span class="activity-conclusion">XYZ, naturlig mineralvann, ren natur</span></p><br /><p>XXZ AS was founded May 2011sdqsd.</p><br/>
</div>
</div>
</div><!--END page3-->
CSS
#activity-container
{
width:90%;
background-color:#FFFFFF;
Height:400px;
margin-left: auto;
margin-right: auto;
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
border: 1px solid #efefef;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
#activity-left {
color:#000;
margin: 0 auto;
border-style:solid;
border-right-color:#666;
padding:15px;
width: 30%;
float: left;
position: relative;
}
#activity-right {
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
margin: O auto;
padding:15px;
color:#000;
width: 60%;
float: left;
position: relative;
text-align:justify;
-moz-column-count: 1;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 1;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}
.activity-planet
{
text-align:center;
margin-top:20px;
margin-left:20px;
}
It will work if you set display: block and margin: 0 auto; to the img {
Is it possible to set transparency on the box shadow?
This is my code:
box-shadow:10px 10px 10px #000;
-webkit-box-shadow:10px 10px 10px #000;
-moz-box-shadow: 10px 10px 10px #000;
I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.
/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
div {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: red;
margin: 10px;
}
div.a {
box-shadow: 10px 10px 10px #000;
}
div.b {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>