I have a skewed popup and text in the quick view of products. But its not rendering correctly in chrome. I tried translate 3d(0,0,0) and also changes the skew deg from odd to even but it doesn't resolved my problem.
Anyone can please help me with this.
Blurring is minor issue while skewing for making the items look smoother. If you really need to make the blurring gone, simply skew only the background div and leave the foreground div untouched.
.background {
width: 300px;
height: 100px;
background: lightgrey;
position: absolute;
top: 60px;
-webkit-transform: skewY(-5deg);
}
.foreground {
width: 280px;
height: 100px;
position: absolute;
top: 60px;
padding: 10px;
text-align: center;
}
.dialog {
width: 300px;
margin: 0 auto;
}
<div class="dialog">
<div class="background">
</div>
<div class="foreground">
<p>Here goes some foreground text.</p>
</div>
</div>
Related
I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.
From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>
If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
How do I lay an image (such as a circle) over a different image so that it always stays in the right place, regardless of image or browser resizing? Is there a way I can do this with divs?
**Update: Thank you for your help. I have attached some images of relevant html and css to illustrate what I'm trying to do. I'm hoping to get the circles to surround one person's face, even though the image itself resizes with the browser. Thanks!
Webpage Image HTML CSS
One way I would recommend would be to use position:relative on your circle image, add it after the image you want in on top of, and set the left value to -outerWidth of 1st image. You should also put both of these in a span and add css to prevent line break as well
The code below gives examples of circles that remain within their parent square, and can be positioned in proportion to their parent squares. I've created some CSS so that you can add a class to various divs to change their size, etc.
N.B. You cannot apply .large or .small to the circles, their size is proportional to their parent div, although this does not have to be the case.
.square {
width: 100px;
height: 100px;
background: blue;
text-align: center;
margin: 5px;
float: left;
}
.large {
height: 200px;
width: 200px;
}
.small {
height: 50px;
width: 50px;
}
.circle {
position: relative;
border-radius: 50%;
background: red;
color: white;
}
.center {
left: 25%;
top: 25%;
width: 50%;
height: 50%;
}
.left-center {
left: 0;
top: 25%;
width: 50%;
height: 50%;
}
.right-center {
left: 50%;
top: 25%;
width: 50%;
height: 50%;
}
<div class="square small">
<div class="circle left-center">
</div>
</div>
<div class="square">
<div class="circle center">
</div>
</div>
<div class="square large">
<div class="circle right-center">
</div>
</div>
I have 2 divs. Right div is an image cutted diagonally. Left divs must have some text inside. I want this to be fully responsive like this:
The problem occurs when I change window size, it's collapsing like in the image:
.
Also there is a text on left div that need to be displayed, but with flex this seems not to work so i disabled it. Please provide solution for this.
Here is my css and html:
#diagonal {
display: flex;
width: 100%;
}
#diagonal #ct-about-col-left {
width: 60%;
border-right: 190px solid transparent;
border-bottom: 500px solid grey;
z-index: 2;
}
#diagonal span {
display: none;
}
#ct-about-col-right {
height: 500px;
width: 50%;
border: 2px solid;
background-image: url(images/content/about/right-col-image.jpg);
z-index: 0;
margin-left: -12%;
margin-right: 0;
}
}
<div id="diagonal">
<div id="ct-about-col-left">
<span>We are the best</span>
<span>text1 text1 text1</span>
<span>Text2 text2 text2 text2</span>
<div>
<span>Read more</span>
</div>
</div>
<div id="ct-about-col-right"></div>
</div>
Maybe consider a slightly different mark-up and method of adding the picture (as a background-image) and making the angle (with transform: skew).
Live Demo: http://codepen.io/anon/pen/rjyKRo
<div class="container">
<div class="caption">
<p>CONTENT</p>
</div>
</div>
* { box-sizing: border-box; }
.container {
width: 100%;
height: 50vh;
overflow: hidden;
background-image: url("http://unsplash.it/600");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 50%;
}
.caption {
height: 100%;
width: 50%;
min-width: 500px;
padding-top: 20%;
padding-left: 130px;
background-color: #ddd;
transform: skew(10deg, 0deg);
transform-origin: 100% 100%;
}
.caption p {
transform: skew(-10deg, 0deg);
}
May I suggest another approach which will save You some markup space and CSS rules as well.
Simply create a full-width div with the ID of lets say ct-about, give it a background color grey and then simply chain the image background on top of the color like so:
background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey;
This simply tells the browser, make my box grey and put that image over the grey color. The no-repeat right top properties are preventing the browser from repeating the image so you don't get a tile, tell ti to place the image on the far right and top positions.
This way everything will be responsive as well.
Here is a Fiddle for You to better understand.
You can find more information about multiple CSS backgrounds in the Mozilla Developer Network
I'm making a div that I want to say "Banner" with a larger "BANNER" in grey behind it. Kind of like a water-mark. But the positioning is wrong and the browser is rendering the 'water-mark' on top of the banner text.
.banner {
position: absolute;
height: 10%;
width: 100%;
background-color: black;
color: red;
vertical-align: top;
overflow: hidden;
z-index: -1;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.foreground {
width: 100%;
height: 100%;
font-size: 2em;
margin: 0;
padding: 0;
top: 0;
text-align: center;
z-index: 2;
}
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
text-align: center;
vertical-align: center;
color: lightgrey;
font-size: 7em;
z-index: 1;
}
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
</div>
</div>
For reasons I don't want to go into here, banner needs to keep it's position: absolute (Sorry if that's too restrictive)
Otherwise we're free to play around with it. I would like the water mark to be slightly overflowing from the top and bottom of the banner div or at least flush with the top.
But most importantly I need the water-mark behind the foreground divs content.
Thank for any help! I prefer a CSS solution but JS would be appreciated too. PS here's a jsfiddle if you prefer that.
EDIT I fixed the height issue by putting margin-top:-5% which I tried before, but with a percentage WAY too high. Apparently it goes of the height of the page not it's parent. Perhaps because it's position:absolute. Thanks for your help!
If you want it to appear in a different order, change the order of your html. You can then also get rid of the z-indexes. So:
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
</div>
Alternatively / additionally:
If you need it to be a watermark, why not add some opacity of like 0.3 to .background? That does not actually put it behind the text, but makes it appear like a watermark.
Working in this fiddle: https://jsfiddle.net/0srj5hus/1/
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.