Ok so I am really new to CSS and have been using it quite a bit daily to get desired effects on sites. I am working on a new menu, and I am using a preconfigured stack to show hidden content when the li is mouseover. The issue is that I want the dropdown to be on top of the existing content and not drop the content down to reveal the dropdown menus. I have achieved this on a full CSS menu, but this will not work here on this menu. My dropdowns are this;
.drop_6 {
width: 500px;
text-align:center;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
position: relative;
top: -18px;
right: -370px;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
/* Background color and gradients */
background: #b5f0ff;
background: -moz-linear-gradient(top, #b5f0ff, #009fc6);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b5f0ff), to(#009fc6));
}
I tried making these absolute and the main content relative, but the jquery in this stack just does not like that at all, and I get no effect at all. Here is a link to the mockup; http://testserver1.justrightwebdesign.com/
Get rid of overflow: hidden (.stacks_out, .stacks_top).
Add position: absolute (.shell)
Add z-index: 1 (.shell)
Your problem is that you set overflow:hidden to many of the parent elements. Remove those and you should at least see some effects. Then apply position:absolute to the drop_X Elements and move them to the correct position with the top and left-attribues. You can also remove the margins since you can position them freely.
Take a look at the z-index property in css.
Related
I want to add a box shadow to my Nav-bar/header at the top of my page.
When I do like this:
.shadow { box-shadow: 0px 0px 5px #333 }
It works fine; however, because of the curvature you can see it curving at the bottom corners - I need it to be a straight down shadow.
Now because my header wraps the top of the page - the width is 100% - I could extend the side off-screen:
.shadow {
...
box-shadow: 0px 0px 5px #333;
left: -10px;
right: -10px;
padding: 0px 10px /* compensates for the spaces created either side */
}
This way the curves are hidden off screen; however this seem's like a filthy, dirty solution - is this the only way to achieve the effect I'm going for?
I've thought of adding an after with a background gradient to simulate the shadow - like so:
.shadow:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 100%;
height: 10px;
background: gradientStuffICantRemember
-o-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ie-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ff-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-webkit-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
}
However this is unbarabely filthy and disguisting.
Should I just extend out the header?
box-shadow has another parameter called spread that defines the size of the shadow..... it could help:
box-shadow: h-dist v-dist blur spread colour;
Cheers!
I have a table containing 3 buttons on the top of my page. I also have a div (below this table) and I'd like to put this on the middle of the screen. I wrote this code:
#walkthrough {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 85%;
height: 150px;
border: 1px solid #000000;
border-radius: 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
}
Then I have an element like this: <div id="walkthrough"> test </div>. This div is center aligned according with the width of my screen, and it's fine.
By the way, looking at the height, the div is center-aligned with all the screen size, but I have to consider the bar with the buttons. JSFiddle.
If the height of my div is too big, it goes over the buttons, and I don't want this to happen. This picture shows what is the result now, this shows what I am trying to get.
I need the div center aligned on the height, but without going over the buttons.
Any ideas?
absolute positioned element will be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.
Use
#walkthrough {
position: relative;
}
Instead of
#walkthrough {
position: absolute;
}
FIDDLE DEMO
Change the top navigation from a table (should never do this) to a ul instead. Then make the div position: relative
Chrome is working fine in containing an image with an overflow:hidden rounded div, however safari does not do a good job at this, the overflow: hidden doesn't seem to work here.
here's an example
here is my sass code:
.profile-image-container
position: relative
top: 3px
display: inline-block
cursor: pointer
.profile-image
width: 33px
height: 33px
display: block
position: relative
border: 2px solid $default-border-color
position: relative
top: -5px
border-radius: 50%
-moz-border-radius: 50%
-webkit-border-radius: 50%
overflow: hidden
haml:
.profile-image-container
.profile-image
=image_tag "avatar.jpg"
%span.status.online
%i.icon.icon-check-small
fiddle:
http://jsfiddle.net/LB2EQ/
Problem 1. In Safari images don't inherit border-radius, so you'll have to add it.
Problem 2. Your image has a different width & height than the profile pic container which is why you'll see a very strange border-radius (only upper left) if you don't resize it.
.profile-image img{
width:33px;
height:33px;
border-radius:50%;
}
See working solution on jsfiddle: http://jsfiddle.net/LB2EQ/1/
I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
I have a very simple JavaScript and CSS hover menu setup apart of the menu on my website. It works great almost everywhere, EXCEPT - there is an issue with the z-index on IE8.
.rolloverMenu {
background-color: #4A5508;
border-bottom: 1px solid #AC4718;
border-left: 1px solid #AC4718;
border-right: 1px solid #AC4718;
box-shadow: 2px 2px 2px #AC4718;
float: left;
margin-left: -15px;
margin-top: -12px;
padding: 10px 10px 6px;
position: absolute;
width: 200px;
z-index: 1000;
}
It goes behind my content and doesn't stay on top of, as supposed to. I know theres different stacking rules in IE, so any suggestions??
(Also have tried setting to z-index:9999;)
Set the z-index to the div that your menu is hiding behind to a lower z-index than your menu.
The solution for this is:
Add z-index to parent container (div, table, ul... etc).
Example:
<div class="menu_container">
menu here..
</div>
<div class="other_content">
other data here
</div>
The div.menu_container should have a z-index value to make its content goes over the other divs.