I was trying to implement the "translateZ" transform function in IE10 preview and came across an issue.
So it only works properly if the "direct" parent of the transformed node has the "-ms-perspective" property and does not work if the parent's parent has got the "-ms-perspective" property set up.
Can anyone suggest if this is a bug and if there is a workaround.
For example it does not work if in the following code I apply "-ms-perspective" to "div1" and try rotateZ on div3 .
<div class="div1">
<div class="div2">
Parent
<div class="div3">
Child
</div>
</div>
</div>
It appears to work just fine for me in Internet Explorer 10.0.8400.0:
<div class="div1">
<div class="div2">
Parent
<div class="div3">
Child Rotated
</div>
</div>
</div>
Along with the following CSS:
.div1 {
margin: 25px 100px;
background: #f1f1f1;
-ms-perspective: 500px;
}
.div3 {
width: 100px;
height: 100px;
background: orange;
-ms-transform: rotateZ(30deg);
}
Produces the following effect:
Fiddle: http://jsfiddle.net/jonathansampson/NKZw6/
Related
A site I inherited uses a sprite for some design based images. The sprite is 28px tall. Recently it began that when the site is viewed in Chrome, the sprite does not display on the elements when the height of the container with a background is > 28px.
I was able to reproduce this using the below snippet.
It's especially odd that if i create a narrower image, I don't have this problem. The break point seems to be width: 16384px or 2^14.
.outer {
width: 1000px;
background-color: skyblue;
}
.bg {
background: url('https://i.imgur.com/DEV7k42.png');
}
<div class='outer'>
<div class='bg'>
<div style='height:28px'>
See this nice background?
</div>
</div>
</div>
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
No background here
</div>
</div>
</div>
This uses an image that is 16384px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/1vd6POs.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
this image is 13684px wide
</div>
</div>
</div>
This uses an image that is 16385px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/KV0uyia.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
This uses an image that is 16385px wide
</div>
</div>
</div>
Could this be a bug? I did a quick google search and could not find anything to indicate there is a hard limit on the dimensions of an image.
I simplified the structure and placed the bg image and color on the outer div. Seems to work:
.outer {
width: 1000px;
height: 28px;
background: url('https://i.imgur.com/DEV7k42.png');
background-color: skyblue;
}
<div class='outer'>
<div style='height:28px'>
See this nice background?
</div>
</div>
<div class='outer'>
<div style='height: 29px;'>
No background here
</div>
</div>
I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.
I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced.
The example is in red, is how I want it to look.
look here for an example of how I want it to look.
HTML
<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->
CSS
/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}
NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
Thanks!
You want to repeat same type of pattern of name,img and descriptions. We will call this 'card'. Now you have two problems in hand.
1) Placing multiple cards in page. For this use some layout like flexbox.
2) Setting inside of card properly..
/*1st Problem*/
#flex-container{
display: flex;
flex-wrap:wrap;
width: 600px;
justify-content: space-around;
}
#flex-container>div.card{
flex-grow:0;
flex-shrink:0;
}
/*1st Problem ends*/
/*2nd Problem*/
.card{
width: 200px;
height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
width: 100%;
text-align: center;
}
.card>div.img{
position: relative;
margin-left: 25px;
width: 150px;
height: 150px;
border-radius: 100%;
}
/*2nd Problem ends*/
.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}
/*Centering Content*/
#flex-container{
margin: 0 auto;
/*top,bottom both zero.. and left,right both auto..
handling margin is complicated..read about them
*/
}
<div id="flex-container">
<div class="card">
<div class="name">Name1</div>
<div class="img"></div>
<div class="desc">Desc1</div>
</div>
<div class="card">
<div class="name">Name2</div>
<div class="img"></div>
<div class="desc">Desc2</div>
</div>
<div class="card">
<div class="name">Name3</div>
<div class="img"></div>
<div class="desc">Desc3</div>
</div>
<div class="card">
<div class="name">Name4</div>
<div class="img"></div>
<div class="desc">Desc4</div>
</div>
</div>
For any other problem visit Flexbox
So there might be an easier way to explain this problem but this is how I know:
This basically is a simple dropdown menu inside a dropdown menu. I know how this dropdown works but the real problem here is width of .
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
Now the question is if I give 50% width to "dropcontents" then it takes like the half the whole website width. SO isn't it supposed to take 50% of "nav2" as it is inside that div? And I don't want to use pixel here. And I noted that "sub-dropcontents" take 50% width of "dropcontents" which I assume is correct.
Here's the pictorial representation:
The problem is the position value:
If the parent and the children are not positioned, 50% width for the children means 50% width of the parent
If the children is position:absolute; 50% of width means 50% of the first parent that is positioned; if there is not any parent it'll refer the percentage to the whole document.
To fix that just put position:something; in the div that the percentage must refer to.
For a better explanation see this DEMO.
.parent {
width: 500px;
height: 200px;
background-color: red;
margin-bottom:10px;
}
.child {
width: 50%;
height: 200px;
background-color: blue;
}
.absolute {
position:absolute;
}
.relative {
position:relative;
}
Parent-> not positioned and Child -> not positioned
<div class="parent">
<div class="child">
</div>
</div>
Parent-> not positioned and Child -> absolute
<div class="parent">
<div class="child absolute">
</div>
</div>
Parent-> relative and Child -> absolute
<div class="parent relative">
<div class="child absolute">
</div>
</div>
Parent-> absolute and Child -> absolute
<div class="parent absolute">
<div class="child absolute">
</div>
</div>
it(any element) takes the percentage width of its parent element.
Note nav2 is a block element and it will take out the entire width of of its parent (in this case the body)
See this snippet
#nav2{
border:solid red;
}
#dropcontents{
border:solid;
width:50%;
}
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
If you set the width of nav to to 50% of its parent width, you will notice that the dropContents div will adjust to 50% of nav2
See snippet below
#nav2 {
border: solid red;
width: 50%
}
#dropcontents {
border: solid;
width: 50%;
}
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
I'm trying to recreate the 'bounce' that tumblr adds to their new post icons on the dashboard.
I've been looking around for how to use background-position to create that bounce but haven't had any luck so far.
The other questions here have had a problem using background and then trying to specify the background-position but I'm not using background at all.
I wasn't trying to spend a ton of time on this but now I am curious about it.
Gist for the code
Codepen
HTML
<div id="container">
<div class="block blue">
<div class="inblock light-green"></div>
</div>
<div class="block green">
<div class="inblock orange"></div>
</div>
<div class="block yellow">
<div class="inblock light-blue"></div>
</div>
<div class="block blue">
<div class="inblock light-green"></div>
</div>
<div class="block green">
<div class="inblock orange"></div>
</div>
<div class="block yellow">
<div class="inblock light-blue"></div>
</div>
</div>
CSS
#container {
width:80%;
height: 200px;
padding-left:5em;
background-color: #95A5A6;
}
.block {
margin: 2em;
height: 130px;
width: 130px;
float:left;
border-radius:10px;
}
.block:hover > .inblock{
background-color:#E74C3C;
background-position: top;
}
.inblock {
height: 80px;
width: 80px;
background-color:blue;
margin: 1.5em;
}
.light-blue {
background-color:#2980B9
}
.blue {
background-color:#2C3E50;
}
.green {
background-color:#27AE60;
}
.yellow {
background-color:#F1C40F;
}
.orange {
background-color:#E67E22;
}
.light-green {
background-color:#2ECC71;
}
From the documentation:
The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.
If you look at the HTML (using a developer tool, such as Google Chrome's developer tools), you'll see that Tumblr actually use a sprite and then use the background-position property to shift the icons up/down using CSS3 transitions.
The background-position property isn't doing anything in the code you provided since there has been no background-image property set.
If you don't want to use a sprite/image, you can simply use CSS3's transform property instead to create the 'bounce' effect. I have created a JSFiddle demonstrating the idea: http://jsfiddle.net/7rsbr/
I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}