I have an item (a speech bubble, made using CSS and html) that is hidden on the sidebar, and it appears when you hover over the sidebar.
#sidebar .bubble {
opacity:0.0;
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after {
position: absolute;
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
#sidebar:hover .bubble {
opacity:1.1;
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
And I'm haviing some trouble with the positioning.
I like that the speech bubble appears upon sidebar hover, but it appears in the sidebar and lengthens the sidebar.
I was just wondering if there was a way to position it a little to the side, and not lengthening the sidebar, something like this?
I've tried fixed positioning and absolute positioning, but it did not work and simply caused the sidebar image under it to become bigger. Is there any possible way to position the speech bubble?
There is such way u can use posotion: absolute on the bubble and position: relative on the navigation container. Keep in mind that elements with absolute positioning will be "non-excisting " for the other elements so u must give them z-index: 3/put any number u like above 2/ . To "remove" the bubbles from the page use display: none but first position them fine. If u find it difficult ask for help again :D
Related
I have the following code in my CSS and HTML files:
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 200px 0px blue;
}
<div class="test"></div>
The shape this code produces is exactly what I want; however, I do not want the blue outline around the white part - is there anyway I can remove that?
To further clarify: here is what the shape currently looks like on a white background, and here is how I would like it to look like.
All help is greatly appreciated!
Perhaps a trick, to overlay a 2px white border over it is acceptable.
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue;
position:relative;
}
.test:before{
content:'';
position:absolute;
border-radius:50%;
border:2px solid white;
z-index:1;
top:-1px;
right:-1px;
bottom:-1px;
left:-1px;
pointer-events:none;
}
<div class="test"></div>
Tell us what you want to achieve so we can know how to help you achieve it.
This little change made the blue outline go away and left you circle looking like eclipse
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 10px 0px blue;
}
I am playing with CSS now, i had make a TextArea with box shadow
-webkit-box-shadow: inset 0px 2px 0px 3px black;
-moz-box-shadow: inset 0px 2px 0px 3px black;
box-shadow: inset 0px 2px 0px 3px black;
and a vertical scroll bar. But the output is a bit bad, the text is overlay the box-shadow. Any idea to solve this?
thanks to #jiff for jsfiddle, grey box-shadow will be more observe.
jsfiddle
Try add padding: 20px; to textarea
you may see if using a wrapper and a pseudo would fix your issue : https://jsfiddle.net/df7Lhomu/
.tbl {
margin:1em;
position:relative;
display:table;
}
.tbl:after {
content:'';
position:absolute;
top:2px;
left:2px;
right:1.2em;;
bottom:4px;
box-shadow: inset 0px 2px 0px 3px black;
pointer-events:none;
}
textarea{
padding-left:3px;/* box-shadow;*/
height: 200px;
overflow-y: scroll;
background:#222;
color:#fff;
}
<div class="tbl">
<textarea>
add
some
text
long
enough
in
order
to
see
the
text
behavior
while
scrolling
</textarea>
</div>
You can used below css
white-space: nowrap;
padding:10px;
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.
I added a new navigation menu to my website. It's one I found from a tutorial and I am having an issue with it. It appears to be hiding behind the div directly below it. I have tried z index but that does not work in this case. I am using z index though. I have the div above the nav menu fixed so that it moves with the page when I scroll.
This fiddle is of most of the site. there is a lot of code but I do not know where the issue is so I added most of it. The last bit of css is for the datatables.
The following code is the div containing the nav menu (not sure if that's relevant.)
.box{
margin-left:auto;
margin-right:auto;
width:1000px;
position:relative;
margin-top:220px;
z-index:1;
}
So basically how can I make it so that the nav menu does not hide behind the bottom div. the content which is the datatables.
As always thanks in advance!
EDIT: I removed overflow:hidden from the .box and now it shows me the menu but it pushes all the divs and content below it down when the menu drops down. Anyway to fix this?
Here is your solution. Adjust to whatever you need it to be.
http://jsfiddle.net/cornelas/eNp8F/16/
.box{
margin-left:auto;
margin-right:auto;
width:1000px;
position:relative;
margin-top:220px;
z-index:999;
height: 400px;
}
#content {
/* Background color, gradients & Rounded Corners */
background-color: #121212;
border: 1px solid #343434;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px ;
-webkit-box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
-webkit-box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
margin:20px;
padding:5px 5px 5px 5px;
position: absolute;
top: 20em;
}
I have some HTML retrieved from a database so I have no control over it and it looks different than if I just put it inside a div :
And here is my CSS:
#cvDiv {
position:absolute;
top:40px;
left: 300px;
border: none;
width: 720px;
display:inline;
background-color:White;
text-align:justify;
padding:15px;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 0px 0px 5px 5px #888;
-webkit-box-shadow: 0px 0px 5px 5px #888;
z-index:auto;
}
and here is the HTML:
http://jsfiddle.net/ug96v/
What am I doing wrong?
And what I want to do is a make the the top picture look like the bottom one.
EDIT
This ended up being a DOCTYPE problem.
Don't use position:absolute;, it forces the div to position itself relative to the the first parent container that has position:relative;. It may be causing part of the problem.