I want to display some CSS3 animation inside a div box. So I need to apply overflow:hidden for unwanted overflow.
In case of test at fiddle its work well. But If I apply overflow:hidden at parent div in my page, its not display child content anymore.
Please see my fiddle and help me.
My Css:
.movcontainer{
position: absolute;
top:200px;
width:100%;
height:89%;
overflow:hidden;
z-index:55;
display: block;
border: 2px solid blue;
}
.contentbody{
position:fixed;
top:0px;
width:100%;
height:100%;
border: 2px solid green;
}
.parent{
position: absolute;
top:10%;
left:10%;
width:80%;
height:80%;
border: 2px solid red;
text-align:center;
display: inline-block;
clear: both;
overflow:hidden;
}
.child {
background-image:url('http://fallmeeting.agu.org/2012/files/2012/09/Dust-and-Aerosols-SWIRL-graphic.jpg');
border: 2px solid green;
width:600px;
height:600px;
background-position: center center;
background-repeat: no-repeat;
margin:auto;
transform-origin: center;
}
Update:
Here I have two more div which create for few positioning. One .movcontainer and other .contentbody. Here .contentbody have fixed position and problem occurred here. But this two div is essential for me.
Here is my update fiddle
Solved this problem by replace position:absolute by position:fixed on .parent div.
Related
This question resulted from a fix suggested to this related question
I have 3 nested divs: outer, inner and item.
<div class="outer">
<div class="inner"><div class="item"></div></div>
</div>
Given the following basic CSS:
.outer{
width:50%;
height:100px;
border: 1px solid red;
position:relative;
overflow-x:hidden;
box-sizing:border-box;
}
.inner{
border:1px solid blue;
height:100%;
position: absolute;
box-sizing: border-box;
line-height:98px;
}
.item{
width:100px;
height:94px;
background-color:yellow;
display: inline-block;
border:1px solid green;
box-sizing:border-box;
vertical-align:middle;
}
The challenge is to center the 'item' div vertically with equal (or no) gaps above/below, and no vertical scrollbars appearing.
Codepen here
Update:
As pointed out below, I should add that multiple items of different heights must be centered. The best answer so far is to add a negative margin to each item, resulting in the following: http://codepen.io/anon/pen/dYWEYZ
However, this smells bad (to me) as it requires an offset that depends on 3 other properties.
The simple solution is http://codepen.io/anon/pen/jbmRjo
to add this to your .item class:
margin-top: -5px;
It's because of the borders on your outer and inner classes, as well as the line-height of the inner class. If you make the borders 2px instead of 1px, then the margin top becomes -9px. If you leave borders at 1px and make the line-height 96px the margin top becomes -3px.
So why can't you use a negative margin top?
If you use flexbox, this is easily achieved:
.inner{
border:1px solid blue;
height:100%;
position: absolute;
box-sizing: border-box;
line-height:98px;
display:flex;
align-items:center;
}
You can use display: table-cell; to get the vertical centering you want:
.outer{
width:50%;
height:100px;
border: 1px solid red;
position:relative;
overflow-x:hidden;
box-sizing:border-box;
}
.inner{
border:1px solid blue;
height:100%;
position: absolute;
box-sizing: border-box;
line-height:98px;
display: table; //must change this as well
}
.item{
width:100px;
height:94px;
background-color:yellow;
border:1px solid green;
box-sizing:border-box;
vertical-align:middle;
display:table-cell; //update display type
}
I want create a div with a shape as shown above and I want it to be 100% width.
Below is the HTML and CSS that I tried.
I was able to make a triangle but it doesn't work with 100% width of div:
HTML:
<div class="triangle-up"><div></div></div>
CSS:
.triangle-up {
width: 25%;
height: 0;
padding-left:25%;
padding-bottom: 25%;
overflow: hidden;
}
.triangle-up div {
width: 0;
height: 0;
margin-left:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #4679BD;
}
how about 3d css transformation?
html:
<div class="triangle-up"><div></div></div>
css:
body{
background:black;
}
.triangle-up div{
width:400px;
height:150px;
background:cyan;
-webkit-transform:rotateY(40deg);
margin:50px;
}
.triangle-up{
-webkit-perspective: 500px;
}
here is an example FIDDLE
EDIT:
basically you give the container div triangle-up a depth of 500px; and you rotate the inner div by its y-axis.
a more thorough explanation can be found in THIS nice article.
You can use the pseudo elements with transform:rotate().
FIDDLE
This makes 2 seperate elements (the pseudo elements :before/:after) with the same background color as the div and rotates them to create your desired shape.
You can display an image in the background.
Responsive width and height.
As the tranform property isn't on the div element, it will alow you to put content in your shape without transfoming it.
Less HTML markup.
HTML :
<div></div>
CSS :
div{
height:40%;
margin:10% 0 0;
background:#1EC8D7;
position:relative;
z-index:2
}
div:after,div:before{
content:"";
position:absolute;
background:#1EC8D7;
width:110%;
height:100%;
z-index:-1;
right:0;
}
div:before{
top:0;
transform-origin:100% 0;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform:rotate(2deg);
-ms-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
}
div:after{
bottom:0;
transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}
JSBIN
HTML
<div class="container"><div class="triangle-up"><div></div></div></div>
CSS
.container{
width: 500px;
background-color: #000;
overflow: hidden;
}
.triangle-up {
height: 0;
padding-bottom: 24%;
}
.triangle-up div {
width: 0;
height: 0;
border-left: 900px solid #4679BD;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
Here is the JSFiddle example of how my layout is: http://jsfiddle.net/qKP2v/13/
I want to emulate the look of a desktop application like Outlook or Photoshop for example where the left and right side columns are fixed and occupy the full height of the screen.
In my application there is a header at the top of the page. So I want my header and sidebars to be fixed and not move when the user scrolls. Only the #content area should move.
Is this too big a task to ask on here I don't know. I'm using CSS2 only (can't use CSS3 yet).
You can use position:fixed; to make it work
#header {
width:100%;
border: 1px solid #444444;
height: 100px;
margin-bottom:15px;
position:fixed;
top:0;
}
#wrapper {
width:100%;
margin: 0 auto;
background-color: #FFF;
min-height:200px;
border: 1px solid #F0F;
}
#aside-left {
float:left;
width:100px;
border: 1px solid #9C0;
position:fixed;
top:100px;
left:20px;
}
#content{
margin:0 130px;
margin-top:100px;
border: 1px solid red;
}
#aside-right {
float:right;
width:100px;
text-align: right;
border: 1px solid #9C0;
position:fixed;
top:100px;
right:20px
}
FIDDLE
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
In a big div I have search box which basically is a div having text box glass image and button. Requirement is to positioned this search wizard vertically in middle and on right side in div. This box is coming on top left inside div. I have tried different things but not getting how to set it. Please guide me.
Thanks
<div class="Right">
<div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
margin: auto 0 auto auto;">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
padding:auto 0 auto 200px;
}
div.header-search
{
overflow:auto;
display:inline;
text-align:right !important;
border:3px dashed blue;
padding:20px 0 auto 50px;
}
div.header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:2px solid #316200;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
background:white url(../images/SearchImage.png) 0 50% no-repeat;
}
div.header-search input.searchbutton
{
border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-top-right-radius:5px;
-webkit-top-right-radius:5px;
-moz-right-radius:5px;
background:#458A00;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
background: -moz-linear-gradient(top, #A5D376, #326400); /* for firefox 3.6+ */
width:50px;
height:28px;
color:White;
font-size:16px;
font-weight:bold ;
border:2px solid #316200;
border-left:none;
}
The first step in understanding how positioned elements is reading an article like this one:
CSS-Tricks.com - absolute positioning inside relative positioning
you are using position: relative on the wrong div as it should be assigned to .Right- while header-search should have instead 'position: absolute;' and values for left/right and top/bottom
the article above explains it much better than I could ever do!
Perhaps this would be a good starting point:
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right {
position: relative;
width: 50%;
float: right;
border: 1px dashed green;
height: 95px !important;
padding: auto 0 auto 200px;
}
div.header-search {
position: absolute;
right: 0;
top: 0;
overflow: auto;
display: inline;
text-align: right !important;
border: 3px dashed blue;
padding: 20px 0 auto 50px;
}
remove all styling from your div's as this is bad practice. Next, convert your two styles for .Right and .header-search like this:
div.Right {
border: 1px dashed green;
height:95px;
position: relative;
}
div.header-search {
border:1px dashed blue;
position: absolute;
top: 30px;
right: 0;
}
This should accomplish what you are attempting. There isn't a clean, easy way to center vertically, but since you have a fixed height on the outter .Right div and a fixed height on the search elements, it's best just to use a fixed top position on the inner .header-search.
You can see it in action on this jsfiddle:
http://jsfiddle.net/L4sgc/