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%);
}
Related
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.
In order to design with html and css the following way to display numbers ( it's an image counter related to a caroussel )
I'm facing a problem which is putting a sort of line break in "content" so that the .down_numb (36) can be a little bit under the slash like a previous image.
This is my code:
#container{
width: 150px;
height: 150px;
background-color :black;
margin-left: auto;
margin-right: auto;
position: relative;
}
/*Similar parameters between the 2 classes*/
.up_num , .down_num{
position: absolute;
font-size: 25px;
width: 10px;
height: 10px;
color: white;
}
/*Position of up num*/
.up_num{
top:20%;
left: 45%;
}
/*Position of down num*/
.down_num{
top:40%;
left: 45%;
}
/*Pseudo class of down_num with content "/" */
.down_num:before{
content : ' \002F ';
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
Thanks everyone.
I would apply display: inline-block; and position: relative to the inner DIVs (i.e. putting them into one line and using top settings to offset them from that line), apply position: absolute to the before element containing the / and adjust settings approximately as in my snippet:
#container {
width: 150px;
height: 150px;
background-color: black;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
padding-top: 34px;
padding-left: 52px;
}
#container>div {
display: inline-block;
position: relative;
}
.up_num,
.down_num {
font-size: 25px;
color: white;
}
.up_num {
top: 20%;
}
.down_num {
top: 35%;
left: 0.2em;
}
.down_num:before {
content: ' \002F ';
position: absolute;
top: -30%;
left: -0.3em;
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
You can do it using pseudo elements. Simmilar issue is solved in this answer.
Thanks to transform: rotate(angle); you can rotate the line as you want and it doesn't interfere with other elements as it is essentially a part of the element you assign it to. You will still need to play with it for a bit though.
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
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 have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/