If you go to this page of the website ( http://portal.escalatehosting.com/clientarea.php ) and look at the border around the white content area, you'll see it's using this code:
#whmcscontent .whmcscontainer {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
clear: both;
}
I want to add that same border around the white content area on this page as well: http://www.escalatehosting.com/why-us.php
However, I can't seem to find in the CSS where exactly the code is that sets the border to know what needs to be changed. Any help would be greatly appreciated.
On the second page, you are actually seeing a background-image create the border.
It is being applied to the class .s-inn-mid.
.s-inn-mid {
width: 976px;
margin: 0;
padding: 7px 12px 6px 12px;
float: left;
background: url(../images/middle.jpg) repeat-y;
}
To make both pages the same, simply remove the background-image and the float.
Updated CSS class
.s-inn-mid {
width: 976px;
margin: 0;
padding: 7px 12px 6px 12px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
}
Related
.container {
background: red;
width: 450px;
height: 500px;
margin: 20px 0 20px 20px;
border: 25px solid;
border-color: blue grey yellow green;
box-shadow: 20px 20px 0 10px purple, 20px -20px 0 10px purple
}
.container-text {
padding: 20px;
color: white;
}
I tried the outline property but it remains the same on all sides of a box.So, I'm using box-shadow. I'm trying to recreate this style. But with my code above, I'm getting this. I can't seem to figure out how would I get equal solid box-shadow on top-bottom and on right-left. Need some help here.
Just set the spread value in the box-shadow property.
Try this box-shadow: 0 0 0 20px purple;
I narrowed tmy issue down to the CSS Line position:relative; and if I remove it, it works, but then the category cat-work (Blue label) is shown at the top left. Idk how to fix it to be honest. Here the Code on Codepen ;
http://codepen.io/Allkind/pen/YXEjXX
article{
width:auto;
min-height:10em;
box-shadow: 0 0 4px rgba(0,0,0,.7);
margin: 1em;
font-family: 'Quicksand';
float: left;
position:relative;
}
Note : Yes the Picture is too big but I tried it with others - same result. So someone might be able to have a better solution then remove the Label?^^
It's not transparent, your navbar is being overlapped by the article tag. To fix that set z-index in your navbar.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 2; /* the z-index */
}
Working Code
I would like to create a well area on my page that makes the area look like it is a little bit below the page by a few pixels. My page currently has a white background and a #F5F5F5 well area.
I looked at the well for twitter bootstrap:
http://getbootstrap.com/components/#wells
For me at least this does not look like well at all. Maybe it is because I know the focus of the later version is to create a flat effect.
Does anyone have any examples of how I could add a working well effect?
You can simply inspect bootstrap well example and copy ".well" rule set
Demo:
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
<div class="well">
Some Text
</div>
Using a combination of box shadows, and a sensible colour choice, you can make things look like wells quite easily:
Demo:
div {
height: 100px;
width: 200px;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
box-shadow: inset 0 0 10px black, 0 0 10px black;
padding: 10px;
display: inline-block;
margin: 15px;
vertical-align: top;
text-align: center;
}
html,
body {
background: gray;
}
.second {
box-shadow: inset 1px 1px 10px black, 0 0 30px black;
}
.third {
box-shadow: inset 0px 0px 10px black, 0 0 20px black;
}
.forth {
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px black;
}
<div>this is deep</div>
<div class="second">I'm slightly different. But still look deep</div>
<div class="third">Don't fall down me!</div>
<div class="forth">Do you, like, wells?</div>
change the boxshadow of the bootstrap well to:
box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
see example here: http://jsfiddle.net/swm53ran/199/
the first two inset parameters are the shadow on the sides and then top and bottom
Any idea how to do this
in CSS?
What I want is them to be together as a whole. Like a div with a hover on it, everytime the user passes the mouse over it, both the line and the text's background will change color. I've tried different approaches but can't seem to get this as a whole. What I have right now is:
http://jsfiddle.net/RmNJL/
HTML
<div class="example">
<span>2014</span>
</div>
CSS
.example {
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.2);
}
.example span {
background: rgba(0,0,0,0.2);
margin: 10px 0 10px 0;
padding: 5px 20px 5px 20px;
}
.example:hover { border-bottom: 5px solid rgba(0,0,0,0.6); }
.example span:hover { background: rgba(0,0,0,0.6); }
I want them to be together as a single div/unit. So it only changes to the hover color if the user passes the mouse in front of the line or the text. Also, hovering the line would also hover the text background at the same time.
I know it may sound confusing but it's not easy to explain.
Thanks in advance.
I believe you're looking for something like this:
.example {
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.2);
}
.example span {
display: inline-block;
background: rgba(0,0,0,0.2);
margin: 10px 0 0 0;
padding: 5px 20px 5px 20px;
}
.example:hover { border-bottom: 5px solid rgba(0,0,0,0.6); }
.example:hover span { background: rgba(0,0,0,0.6); }
So guys, I've here a header:
As you can see, the box-shadow works just fine. However, putting a background-color on the content <div> yields this:
Visually, the box-shadow was covered by the background-color. The content <div> has lower z-index value than the header though. How can I make the box-shadow appear over the <div> to make it seem like the content is under the header?
If this will help, here is the CSS for both markups:
header{ /* the header, obviously */
background: #fee;
height: 60px;
padding: 40px 20px 0px 20px;
border-bottom: 5px solid #f53301;
-webkit-box-shadow: 0 12px 16px -6px gray;
-moz-box-shadow: 0 12px 16px -6px gray;
box-shadow: 0 12px 16px -6px gray;
border-radius: 20px 20px 0px 0px;
z-index: 9999;
}
#content-inside { /* the content */
padding:20px;
z-index:1; /* changed this to -1 but it still didn't work */
background:white;
border:1px solid black;
}
I hope someone can help me with this. Cheers!
z-index only applies to element where the position has been set (i.e. not the default static position). Trying position:relative would be the most likely solution here.