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.
Related
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;
I am trying to show shadow of my container div by doing this.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
But this show shadow to right and bottom. I want to control the shadow. Can anyone guide me how can i show shadow to only one single side i-e right/left or top/bottom. Working Jsfiddle will help me to understand this. Thanks in advance
Please Try this demo
i hope i may helpfull for you
.box
{
margin:0;
padding:0;
float:left;
width:200px;
height:100px;
background:#ccc;
margin-left:20px;
-webkit-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
-moz-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
}
you can create like following:
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: inset 10px 0px 5px 0px rgba(0,0,0,0.81);
}
Above will show left side shadow. Also for right side shadow use:
box-shadow: inset -10px 0px 5px 0px rgba(0,0,0,0.81);
Check Fiddle here.
You can use Shadow Generator : Link
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
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;
}
This is my Portfolio i'm working on
The first time you enter the website the yellow Wakey card is below the sidebar (it should be on the right side of the sidebar.
And after refreshing the website it goes into the right position
What can be causing this?
This is the css of the content div where the card is located
#content
{
width:70%;
position: absolute;
display: inline-block;
}
And this is the sidebars
#sidebar
{
background-color:#4b4b4b;
margin:0px;
margin-left:5%;
width:400px;
height:1000px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
display: inline-block;
}
You can see the html from the website so i won't post it to keep it short
On IE it's displaying properly, it gives me this problem on chrome
UPDATE:
I've changed the #content-wrapper display to display:inline; now, but it didn't help
Why not float your sidebar? and let the #content position itself in the normal document flow.. you might want to set width for #content also..
#sidebar
{
background-color:#4b4b4b;
margin:0px;
margin-left:5%;
width:400px;
height:1000px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
float: left;
}
#content
{
float: left;
}