I have, for some reason extra white space at the bottom of my div name 'profile-stuff'. I can't seem to figure out why it is there. What could I be doing wrong.
JSFIDDLE: http://jsfiddle.net/8kvwC/
My CSS:
#profile-stuff {
margin: 0px 0px 20px 0px;
height: auto;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 6px 16px -9px;
background-color: #fff;
}
Alright, extending from comment:
Just as #Adrift has explained, position:relative elements still occupy the space they require, no matter how top/left/etc. offset they are assigned.
So to avoid this, change
#cover-wrap {
top:-100px;
margin-bottom:-100px;
}
to
#cover-wrap {
margin-top:-100px;
}
http://jsfiddle.net/8kvwC/3/
In your #cover-wrap, change your position to absolute and change the top -100px to 50px.
Should fix your problem.
you can use that answer if u want the space for the bottom means you have to add
div{
float:left;
margin-bottom:100px;
}
Related
I have the following box shadow with the effect attached. Right now the top of the element has the box shadow effect (see attached), but the bottom does not have the same effect.
How can I make it so that the bottom of the element looks exactly like the top of the element. (see attached for an image)
box-shadow: 0px 0px 60px -18px #CACACA;
Here is your shadow setting applied to a DIV that's 500px x 200px:
http://codepen.io/anon/pen/aNxWgE
If (in that codepen) you change margin: 100px auto; to margin: 0 auto;, you won't see the top shadow anymore. If you erase the width (thereby making the DIV 100% wide), you won't see the side shadows anymore. So probably something similar happens with your bottom shadow.
To avoid that, use margins which are at least as wide as the shadow.
We have not enough infos to tell you where you really go wrong but:
if shadow is too light and spread, you may not see it
when you downscale a shadow, you need enough height and width so it can be produced
body * {
box-shadow: 0px 0px 60px -18px #000;
background:white;
margin: 2em;
}
.minH {
min-height: 38px;
box-shadow: 0 0 60px -18px #000;/* black to make see it better */
}
.show {
float:left;
margin-left:2em;
height:60px;
width:60px;
/* even then , black blured on 60px doesn't show much;*/
}
.show + .show {
height:120px;
width:120px;
/* even then , black blured on 60px doesn't show much;
}
<hr/>
<p>hello</p>
<div></div>
<p class="minH">min-height is necessary to give room to draw box-shadow: here - 18px on each sides makes a min width and height of 18x2 =36px <b>But it will start to show at 37px if your eye can see it </b></p>
<p class="show">make bigger to show</p><p class="show">make twice bigger to show</p>
To understand through example what happens :
offset shadow far enough and without blur to see if it is there or not and how big it is (using black again)
hover the snippet to activate the blur effect and see what becomes the 60px - 18px black shadow.
body {
display: flex;
justify-content: space-around;
background: gold;
}
div {
box-sizing: border-box;
height: 20px;
width: 20px;
background: gray;
box-shadow: 0 65px 0 -18px;
}
div:nth-child(2) {
height: 36px;
width: 36px;
}
div:nth-child(3) {
height: 38px;
width: 38px;
}
div:nth-child(4) {
height: 60px;
width: 60px;
}
/* add blur on hover */
html:hover div {
box-shadow: 0 65px 60px -18px;
}
<div>20px</div>
<div>36px</div>
<div>38px</div>
<div>60px</div>
I don't know why there is a quiet large space between content and footer here: jsFiddle
I've set margin-bottom, padding-bottom of content and margin-top and padding-top of footer are zero. But why it still have a space?
You are seeing the classical behavior of collapsing margins between the p tags in the content and footer.
You can fix this many ways, an example of which is:
body #container #wrapper {
margin: 0px 15px 0px 15px;
padding: 67px 0px 0px 0px;
background-color: white;
box-shadow: 0px 0px 10px 5px #969696;
overflow: auto;
}
body #container footer {
margin: 0px 15px 0px 15px;
padding: 0px;
background-color: greenyellow;
height: auto;
overflow: auto;
}
Set overflow: auto on your footer and #wrapper elements.
Also, set the height to auto on your footer to allow enough space for your text.
Demo at http://jsfiddle.net/audetwebdesign/9jMrR/
However, you have a box shadow at the bottom of you wrapper and you need to decide how you want that to work. If you want it to be visible, you will need to add a top margin to your footer.
You can add a negative margin:
footer {
margin-top:-20px;
}
This is kind of a bad way of doing this but you can apply a css rule of margin-top:-10px to decrease the space between the content and the footer tag.
footer{
margin-top:-10px
}
Here is the
http://jsfiddle.net/vicky081/jmGwX/5/ I want to change the width of the div which is now 100% when i change the width to 50% the div appear left side. How can i make that div as center by this when i reduce the size of the div it appear from the center is it possible?
I know the width of the div is 100% then it appear like from left 0 to right 100 if i change the width to 50 also it appear from left to 50% right Is there is a way to show it from center when i change the width it appear both for example: if i reduce the width of the div is 50% then it appear like 25% from center of left and 25% center of right
Here is the code CSS:
.notify {
background: #FFFFFF;
width:50%;
position: relative;
margin:-13px 0px 0px -5px;
padding: 2px 0px 0px 0px;
border-bottom:2px solid #CC0000;
box-shadow: 0px 4px 5px #AAAAAA;
font-size:14px;
font-family: 'Lato Regular', Arial;
text-transform:uppercase;
text-align:center;
}
Edit your CSS like here:
.notify {
....
margin: 0 auto 0 auto;
....
}
http://jsfiddle.net/wRM8j/
EDIT:
If position is fixed add
.notify {
....
position: fixed;
left: 0;
right: 0;
....
}
http://jsfiddle.net/vZexH/
The first Solution is perfect but in case you want to play with that using javascript.
Just include this line.
<script>
var decider=parseInt(document.defaultView.getComputedStyle(document.getElementsByTagName("div")[0]).width)/2;
document.getElementsByTagName("div")[0].style.left=(window.innerWidth/2)-decider;
</script>
I've got an issue when i try to put 2 divs, both them them floating to the left side, one with width 80% and the other the 20%. Then i'd like to draw a border on the right side of the first div and a box-shadow of 5px, because each div has a different color.
So I've just searched on this site and i've found this solution:
Border issue in Floating div
But it's bad idea IMHO.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... for 4px border i'll got a white space in the webpage for the 2% - 2px.
You could say, just add the background color to the body: i could because each DIV has already it's own, but it's also a problem OF SPACE, PROPORTIONS!!!
Another problem i'm experiencing with: i've set the height 100% (on the second div, 20% width)and it works in the example; but in the real website, which is the height also set to 100% the DIV doesn't occupy the whole height of the column but just until the margin limit of the last image.
The last problem: box-shadow with floating div it's bad idea...
should i put the box-shadow on the last div, just for the left side, instead of the right side for the previous div?
Look at my code here http://jsfiddle.net/9gp6J/
div#contenuto_body{
margin: 0 0;
padding: 0 0;
float: left;
width: 80%;
height: 100%;
background-color: #C90;
-moz-box-shadow: 0 0 5px 1px #333;
-webkit-box-shadow: 0 0 5px 1px #333;
-ms-box-shadow: 0 0 5px 1px #333;
box-shadow: 0 0 5px 1px #333;
border-right: 4px solid #E6B800;
}
body{
margin: 0 0;
padding: 0 0;
}
div#ads{
margin: 0 0;
padding: 0 0;
width: 20%;
float: left;
height: 100%;
background-color: #CCC;
}
div#ads img{
width: 70%;
max-width: 200px;
display: block;
margin: 25% auto;
}
You could use the css3 feature calc(...) available in css3 depending on which browsers you are supporting this may suitable. Anything below IE9 doesn't support this so keep that in mind. Here's a fiddle:
http://jsfiddle.net/9gp6J/9/
Any other solution would have to involve negative margins such as:
div#contenuto_body{
...
margin-right: -4;
}
That should work anything IE7 and up.
for the border issue add a div inside the left div and give a right border to that inner div. This way the outer left div can remain 80% without the added 4px border problem.
HTML:
<div id="container">
<div id="left">
<div id="inner_left">
content left
</div>
</div>
<div id="right">
content right
</div>
</div>
CSS:
div#container {
height:200px;
}
div#left {
float:left;
width:80%;
height:100%;
background:red;
}
div#inner_left {
border-right:4px solid black;
height:100%;
}
div#right {
float:left;
width:20%;
height:100%;
background:green;
}
Check this jsfiddle
#controlpanel .button
{
margin: 12px 12px 0px 12px;
width: 100%;
}
How do I make these buttons fill the width of the white box, and yet have 12px on each side? Padding adds space internally... and margin makes them go off the white box.
add padding to #controlpanel
remove left and right margins from button
add box-sizing:border-box to buttons
and you should get smth like:
#controlpanel{
padding:0px 12px 12px 12px;
}
#controlpanel .button {
margin: 12px 0px 0px 0px;
width: 100%;
box-sizing:border-box;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
}
The problem is the width: 100%;.
Try to comment out that line and type: display: block;
Two things may help:
use padding for div#controlpanel
remove the margin for buttons
In addition you could also try to remove the 100% width.