I want a circle with dynamic content. I am using a background image (SVG) and scale it so it is alway behind the content. It almost works. The background gets scaled but the overflow is not visible. So the left and right overflow, or the top and bottom depending on the screen width, are not visible.
.icwrap {
position: absolute;
top: 50%;
left: 50%;
overflow: visible;
display: flex;
transform: translate(-50%, -50%);}
.iccont {
text-align: center;
position: relative;
display: table-cell;
overflow: visible;
width: 45vw;
padding: 7.5vw;
height: auto;
color: #FFF;}
.iccont h1 {
font-size: 1.5em;
font-weight: 700;
margin-bottom: 0px;
line-height: 1.5em;}
.iccont p {
line-height: 1.5em;}
.icwrap:before {
content: '';
width: 100%;
height: 100%;
min-height: 100%;
display: block;
position: absolute;
left: 50%;
top: 50%;
overflow: visible;
transform: translate(-50%, -50%);
background-position: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg);
background-repeat: no-repeat;
background-size: cover;}
See my code like described above:
https://jsfiddle.net/g471tLzf/
I like the behavior. Is there a solution to display the overflow?
The rectangle that can be inscribed in a circle has a maximum area that is a square having radius/sqrt(2) width.
Check the video if interested in underlying maths.
https://www.youtube.com/watch?v=wNMK92GVTO8.
So you can't solve this problem in general unless your content fits in every case inside that box.
Related
I am trying to make the middle button to be always in the middle of image, regardless of size of image ( which will changes ) and resizing the window and device type . At the moment if you make the window smaller it is not in the middle any more .
Take a look at this jsfiddle example :
http://jsfiddle.net/vivaldi30/0thdob5m/1/
#full_image {
position: relative;
display: inline-block;
max-width: 100%;
}
#full_image img {
max-width: 100%;
}
#full_image .middle-key{
background-color:yellow;
top: 50%;
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;
width: 59px;
z-index: 999;
right: 10px;
color: #222;
text-decoration: none;
text-align: center;
line-height: 28px;
}
<div id="full_image">
<img src="http://cdn.funkyspacemonkey.com/wp-content/uploads/2013/06/steve-wozniak-white-iphone-4.jpg"/>
middle
</div>
When wanting to position an absolute item in the middle, you can use:
#full_image .middle-key {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I was practising in css paralax and got a problem: between background image and a next div there is a white gap, you can just change the width of a viewport and scroll down to see it.
So, my question is: Why it's happening and what I should do to remove it?
A screenshot and Link on JSFiddle or
css code:
.car {
position: relative;
width: 100%;
height: 600px;
background: url(http://i63.tinypic.com/14viwxk.png) no-repeat;
background-position: top left;
background-size: contain;
padding-top: 100px;
padding-bottom: 0;
overflow: hidden;
background-attachment: fixed;
}
.car h1 {
line-height: 1.2;
}
.car figure {
width: 40%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10%;
color: white;
}
figure p {
margin-bottom: 20px;
}
Your image is simply too small. Change background-size to cover and see what you get
What have say #Hunter it's correct, or you can change the height: 600px; to height: 300px; or use other pictures with height: 600px
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
I am viewing p-ng.com in firefox, when it is viewed with the bookmark sidebar, the logo is not centred.
Example with sidebar:
When I view the page without the bookmark sidebar, it looks like this.
Example without sidebar:
Even so, the logo doesn't seem to stay centered.
Thanks for any suggestions.
CSS
.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
margin:0;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat top center;
margin-left: 625px;
margin-top: -95px;
width: 87px;
height: 87px;
width: 100%;
position: absolute;
background:#E5E5E5;
overflow: auto;
}
You have so many unnecessary declarations, the reason it's not centering to the viewport is because you have position: absolute and a bunch of unneeded margins.
Change your css to this.
CSS
.header-image .site-title > a {
background-position: url(images/logo.png) no-repeat top center;
margin: 0 auto;
width: 87px;
height: 87px;
background: #E5E5E5;
}
I don't understand why you have all the different margins, widths and then finally a position: absolute on top of that, but here's an easy way to center your logo :
.header-image .site-title > a {
position: absolute;
width: 87px;
height: 87px;
left: 50%;
transform: translateX(-50%);
background:#E5E5E5;
}
If it needs to be vertically centered within its container as well, you can add this :
.header-image .site-title > a{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For the browser support of the transformproperty (and to see which vendor prefixes you need), refer to this : http://caniuse.com/#search=transform
Position your logo relative to a container of width: 100%, then you can set margin: 0 auto - this way you can also lose the margin-left property.
Example:
.parentContainer {
width: 100%;
}
.logo {
margin:0 auto;
position: relative
}
I've got a modal style I'm using from http://tympanus.net/codrops/ but I've created a custom close button (.md-close) that I want to be truly fixed in the top right as the user scrolls the content of the modal window.
Code here: http://codepen.io/jeremypbeasley/pen/upzrB
Right now when you scroll, .md-close leaves the visible area, making it hard to close without scrolling up. How can I force this to stay put?
I realize this is something to do with the position property but I've tried every possible combination of the parents and children. Might this have something to do with the transform property I'm using?
Any help?
Full css i used :
or live : http://codepen.io/anon/pen/lynBm
.md-close {
position: fixed;
top: 3vw;
right: 3vw;
height: 50px;
border: 0px;
cursor: pointer;
width: 50px;
background: black;
text-indent: -9999px;
overflow: hidden;
display: block;
background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
background-size: 100%;
z-index: 99999;
}
.md-trigger {
width: 300px;
height: 300px;
background: blue;
text-indent: -99999px;
margin: 100px auto;
}
.md-modal {
width: 100%;
max-width: 100000000000px;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
transform: none;
backface-visibility: visible;
}
.md-content {
max-height: 100%;
overflow: auto;
padding: 10% !important;
}
.md-show.md-effect-12 ~ .md-overlay {
background-color: black;
}
I solved this problem by adding a max-height of 100vh to .md-content