basically my website looks like this: http://i.imgur.com/6xcWTxR.png
I want to put that container with text in it next to the image. How can I do that, and keep it centered? I'll put my code below.
<body>
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"></div>
<div id="nav_menu" style="display:none; background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
<center>Endless Void></center>
</div>
</body>
You will more than likely have to use:
margin: 0 auto;
width: /* your width here */
to center your content along with either floating your two DIVs or absolutely positioning them.
When using margin: 0 auto; you need to supply a width value or it will not work as once the browser has a width to work with it can auto calculate the margins for you. You can apply margin: 0 auto to the <body> tag or a another wrapping element like a <div> that contains your image and text DIVs.
A <div> is a block level element that will try to take up the whole width of the page by default. That is why you need to float them or use some kind of positioning that changes that behavior and get the two elements to line up next to one another.
Here is a basic example in a jsFiddle: http://jsfiddle.net/vn34bw84/
Simply by adding inline-block and using a container:
#container {
text-align:center;
}
#container > div {
display:inline-block;
}
<div id="container">
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"/>
</div>
<div id="nav_menu" style="background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
Endless Void
</div>
</div>
Put this in your CSS file:
#container {width: 200px;}
#left { border: 1px dotted red; float: left; padding: 0px; margin: 0px;}
#right { border: 1px dotted red; float: right; padding: 0px; margin: 0px;}
/* I have added the border it usually helps to know where each boxes during development then later remove it. Also use padding and margin to get what you want */
And this in your HTML body
<div id='container'>
<div id='left'>
</div>
<div id='right'>
</div>
</div>
Related
I have several divs side by side floating on left and spread on multiple lines:
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.elem {
height: 300px;
width: 150px;
background-color: rgba(230,230,230,1);
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
margin: 20px;
padding: 10px;
float: left;
transition: all 0.5s ease;
}
.elem:hover {
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
margin: 10px;
padding: 20px;
background-color: rgba(130,230,230,1);
}
.w140 { width: 140px; }
.w70 { width: 70px; }
.w200 { width: 200px; }
.w50 { width: 50px; }
.grid {
width: 100%;
}
</style>
</head>
<body>
<div class="grid">
<div class="elem w140">elem1</div>
<div class="elem">elem2</div>
<div class="elem w200">elem3</div>
<div class="elem w50">elem4</div>
<div class="elem">elem5</div>
<div class="elem">elem6</div>
<div class="elem w70">elem7</div>
<div class="elem w50">elem8</div>
<div class="elem">elem9</div>
<div class="elem w200">elem10</div>
</div>
</body>
</html>
This works perfectly fine on firefox. But on Chrome (Version 55.0.2883.87 to be exact) when hovering some elements (for example the last one before a "line break"), the layout will get messed up during the transition duration.
How do I prevent this?
Fiddle at http://jsfiddle.net/d6rs6gsq/
I found a workaround referring to Animating margins and padding with CSS Transition causes jumpy animation
use css scale transform instead of manipulating the padding and margin values.
.elem {
height: 300px;
width: 150px;
background-color: rgba(230,230,230,1);
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
margin: 20px;
padding: 10px;
float: left;
transform:scale(1);
transition: all 0.5s ease;
}
.elem:hover {
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
transform:scale(1.1);
background-color: rgba(130,230,230,1);
}
http://jsfiddle.net/d6rs6gsq/2/
Hope it solves
It happens when the last element in the row animates with the one before it. Since the animation is ease and not linear, there are points during the combined animations when they create "corners" into which elements from next row are floating.
There are multiple ways to get rid of this unwanted effect. First, you shouldn't be animating padding or margin for grid elements. The rule of thumb in animation is: Never animate the space the element occupies, but only the element's rendered image. You want to use transforms or position:relative and top|right|bottom|left as none of these modify the space an element takes in document's flow.
However, the simplest solution in your case would be remove float:left from your .elem and apply: display:flex;flex-wrap:wrap; to your grid. The flex grid is smart enough to not break rows below based on inconsistencies in height of elements in previous row. It's one of the many advantages of the flexbox model over the box model.
Updated fiddle: http://jsfiddle.net/websiter/d6rs6gsq/3/
Is it possible to make a box-shadow CSS call wider than the HTML element to which we are applying it, while keeping the same height as the element to which we are applying it? I can increase the spread, but that will increase the height. As you can see in my snippet, the max width the box-shadow is only as wide as the .box div. Is there a reason why we would not want the box shadow ever wider than the HTML element or why there would be a restriction to this?
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
background-color: gray;
height: 100px;
width: 100px;
}
.box-spread {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}
<div class="container">
<div class="box">box</div>
container
</div>
<br>
<br>
<div class="container-spread">
<div class="box-spread">box</div>
container
</div>
You can make use of the pseudo element to enlarge the element and then apply box-shadow. height: 100% will make sure the height of the box-shadow is same as the element. The width value will be the key value to change.
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
position: relative;
}
.box::after {
box-shadow: 85px 0 0 0 rgba(0, 0, 0, 0.2);
content: " ";
height: 100%;
position: absolute;
left: -50%;
top: 0;
width: 150%;
}
<div class="container">
<div class="box">box</div>
container
</div>
While it's not possible to use the spread-radius value to extend the shadow in just the horizontal or vertical directions you can add multiple drop shadows to a single element, the only downside being that any over lap will produce regions of darker shadow. But with a little bit of math you can line them up easily enough.
box-shadow at MDN
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue;
height:50px;
width:50px;
box-shadow:55px 0px 0px 0px rgba(0,0,0,.2),
105px 0px 0px 0px rgba(0,0,0,.2),
155px 0px 0px 0px rgba(0,0,0,.2) ; }
<div class="container">
<div class="box">box</div>
container
</div>
While box-shadow does have a spread setting, it applies to all sides. As far as I know there is no way of adjusting just the horizontal or vertical size of a box shadow.
You could potentially use two (or more) box shadows to achieve the effect, but it is really only applicable when the spread is set to 0
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px;
box-shadow:
55px 0px 0px 0px rgba(0,0,0,.2),
5px 0px 0px 0px rgba(0,0,0,.2); }
<div class="container">
<div class="box">box</div>
container
</div>
Maybe you need this
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px; box-shadow:0px 0px 2px rgba(0,0,0,1); }
<div class="container">
<div class="box">box</div>
container
</div>
I want to make the shadow of my image #afb1 to go to the bottom of the page without having blank page between the shadow and bottom of the page. Is this possible?
Like when I change #afb1 his height to 500px it gets taller, but I want it to connect to the bottom of the page
html:
<div id="pics">
<div id="afb1">
<img src="Images/Chingy.png" alt="mooiboy" height="200" width="200" onmouseover="this.src='Images/chingy.jpg'" onmouseout="this.src='Images/Chingy.png'">
</div>
</div>
css:
#pics{
margin: 0 auto;
text-align: center;
width:880px;
height:100%;
}
#pics img{
border-radius: 100px;
}
#afb1{
float:left;
height:100%;
box-shadow: 2px 0px 21px 0px rgba(50, 50, 50, 0.35);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
margin-right: 20px;
}
http://jsfiddle.net/7fA78/
It is 100% of the page. The problem is your page is not 100% of the window. Add this
body,html{
margin: 0;
padding:0;
height: 100%;
}
If I understand correctly that you only need the bottom of the image shadow something like this
#afb1{
float:left;
height:100%;
box-shadow: 1px 10px 5px -1px rgba(50, 50, 50, 0.35);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
margin-right: 20px;
}
you need to adjust these settings box-shadow: 1px 10px 5px -1px rgba(50, 50, 50, 0.35);
Well i have 2 divs that i want to be side by side and aligned in the center of the page?
HTML:
<div id="box"></div>
<div id="box"></div>
CSS:
#box
{
width: 450px;
color: #ffffff;
height: 500px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
float:left;
margin-right:15px;}
This is what it looks like right now:
(I cant post photo's because i dont have 10 rep sorry!) but i want them to be under and aligned to the nav bar. Thank you.
What you need here is use inline-block instead of float that allows you to use the text-align property on the parent. Try this:
.box {
/*float:left; Remove this*/
display:inline-block; /*Add this*/
}
Since ID must be unique I use .box add that class on the divs
And on the parent use:
body {
text-align:center;
}
I use body in this case I don't see any other parent but change it for the real one
Check this Demo http://jsfiddle.net/WJfx5/
Also you can read This Article to know about the use of inline-block elements
put this 2 divs in another big div, and add margin: 0 auto; to it and a width.
<div class="bigdiv">
<div class="box"></div>
<div class="box"></div>
</div>
.bigdiv { margin:0 auto; width: 930px }
.box:last-child {margin-right: 0px;}
Create a wrapper around those div like
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
Then with css
#wrapper {
text-align: center;
width: ??; //add yours
height: ??; //add yours
}
FYI: id should be unique
Updates:
.box {
width: 450px;
color: #ffffff;
height: 500px;
display: inline-block;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
}
#wrapper{
text-align: center;
}
JSFiddle
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.