After reading through Center a Font Awesome icon over the image on hover and it's corresponding answers, I'm still having trouble replicating this answer with an Ionic Icon.
Code I'm using is as follows:
<div class="video-thumbnail">
<img src="image here" />
<i class="icon ion-play"></i>
</div>
CSS I'm using is:
.video-thumbnail {
position: relative;
margin: 0 auto;
display: inline-block;
}
.video-thumbnail img {
position: absolute;
}
.video-thumbnail i {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I've got it to go on top of each other but can't seem to find the middle point. Looking to center horizontally and vertically. I'm not looking for any hover states just a blatant icon over image.
Thanks!
For horizontal and vertical centering,
You need to remove position: absolute for the image since it takes
it out of the flow.
Calculate the top and left values using calc(), you will need to subtract the dimension values of the icon from 50%.
angular.module('app', ['ionic']);
.video-thumbnail {
position: relative;
display: inline-block;
}
.video-thumbnail img {
width: 100px;
height: 100px;
}
.video-thumbnail i {
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 5px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="video-thumbnail">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2KjQI_sGhxCm5CTyQPuCACLuLEyvup4eDNVowMzdHiiPLShdL3ggiA7QC" />
<i class="icon ion-play"></i>
</div>
</ion-content>
</ion-pane>
</body>
Related
I'm making an editor app with a layout like google sheet or any simple web app with a thin, screenwide toolbar in the top and other stuff below. But... I'm having problem to position items in the toolbar. I plan to place:
a logo in the left corner
something in the middle
two buttons on the right side with specific order (like button A and B where B is closer to the right edge of the screen)
And most importantly i want to position these items inside the toolbar to be vertically in the center.
I tried so many things, but nothing really worked, except the very basic grid system below in which i want to place the items:
.layout {
height: 100vh;
display: grid;
grid-template-columns: 34% 33% auto;
grid-template-rows: 50px auto;
grid-template-areas:
"toolbar toolbar toolbar"
"searchbox resultbox editorbox";
}
.toolbar {
grid-area: toolbar;
}
.searchbox {
grid-area: searchbox;
}
.resultbox {
grid-area: resultbox;
}
.manju-editor {
grid-area: editorbox;
}
Can you pls tell me how could i position items the above described way?
Edit: per request the HTML also added, the app is created with create-react-app, so the html is its standard index.html and app is "assigned" to the root:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
render method from app.js:
<div className={userSession.layout.name}>
{userSession.layout.toolbar.active && <div className="toolbar">
{this.generateComponents("toolbar")}
</div>}
{userSession.layout.search.active && <div className="searchbox">
search
</div>}
{userSession.layout.results.active && <div className="resultbox">
result
</div>}
{userSession.layout.editor.active && <div className="editor">
editor
</div>}
</div>
You can try something like this:
/*
* containing div, position is relative, set the div height here
*/
.toolbar {
position: relative;
height: 30px;
}
/*
* all 3 children have absolute positioning
*/
.left {
position: absolute;
left: 0px;
top: 0px;
}
.right {
position: absolute;
right:0px;
top:0px;
}
.middle {
position: absolute;
top: 0px;
/* center the element */
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
<div class="toolbar">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
Ok, found the answer. It's here and working :)
this is my first posting here and I am new to CSS. I am trying to get a sprite of Mario with dimensions of 32 x 16. When I open the html file nothing appears. I try to inspect element the html but I cannot see a div.
CSS
#stillMario {
width: 16px;
height: 32px;
margin: auto;
background-image: url("sprites/still.png");
position:absolute;
left: 0px;
top: 0px;
bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Super Mario</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="stillMario"></div>
<script src="myjs.js"></script>
</body>
</html>
If you are sure that the folder 'sprites' is in the root of your project, then try prefixing it with '../', then try without the absolute positioning first. If it works, then return the positioning again as follows;
#stillMario {
width: 16px;
height: 32px;
margin: auto;
background-image: url("../sprites/still.png");
//position:absolute;
//left: 0px;
//top: 0px;
//bottom:0px;
}
Let me know if it works
Use <img> element instead of setting the background of the <div>.
Example: <img src=""sprites/still.png"" alt="Mario" height="32" width="16">
We can scale background image by using meta tag view port. I have background image and I can zoom in/out that image very well BUT I have some more stuffs on background image(text and Button), when I zoomed background image then button and text are also getting zoom BUT I don't want to zoom them with view port scale.
Is this possible to avoid zoom for some specific elements by using view port scaling?
Here is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=yes, initial-scale=0.5, maximum scale=1.5,
minimum-scale=1, width=device-width, height=device height,
target-densitydpi=device-dpi" />
<style>
#maincontent {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 50;
}
#score {
margin: 0 0 0 0;
right: 0px;
top: 0px;
z-index: 50;
position: fixed;
}
#scoreCount {
font-size: 100%;
}
#countdown{
font-size: 100%;
}
#reset{
margin: 0 0 0 0;
left: 0px;
top: 0px;
z-index: 50;
position: fixed;
}
</style>
</head>
<body>
<img alt="Loading" id="background" />
<div id="maincontent">
<div id="score">
<p id="scoreCount">
<b></b>
</p>
<p id="countdown">Time Limit</p>
</div>
<div id="reset">
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
</html>
I have tried by giving position:fixed and background-attachment:fixed BUT not working.Please anybody help to get solve this. I am stuck with this last two days. Thanks in advance
change your viewport tag to this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
your code has differences between initial scale to maximum scale, and the zoom is available because of that. notice that in my suggestion all the values are the same.
hope that helps.
According to #Gal V and I have also searched more on this topic. "Is this possible to avoid zoom for some specific elements by using view port scaling?". According to my research we can't(I am not sure 100%) avoid some specific elements to zoom by using meta tag view port scaling. Don't know correct answer. If any body know answer it.
I have my video-js player in a percentage width container, and it's finally resizing beautifully. However the controls are placed at the top of the video instead of the bottom, and the pause button will not work. Slider, volume, and fullscreen all work, but not pause. I've tried both 4.2 and 4.2.1 with no luck. If I use the version hosted here: "http://vjs.zencdn.net/c/video-js.css" the pause works, but the controls are still placed at the top.
I've tested this in both firefox and chrome with no luck.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://vjs.zencdn.net/4.2.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2.1/video.js"></script>
<script src="vidjs/z-skin.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
.BCLvideoWrapper {
position: relative;
padding-top: 0px;
padding-bottom: 56.25%;
height: 0;
}
* html .BCLvideoWrapper {
margin-bottom: 45px;
margin-top: 0;
width: 100%;
height: 100%;
}
.BCLvideoWrapper div,
.BCLvideoWrapper embed,
.BCLvideoWrapper object,
.BrightcoveExperience {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="indexvid">
<div class="BCLvideoWrapper">
<video id="QuickReel" class="video-js vjs-default-skin"
controls preload="auto" width="100%" height="auto" poster="images/reelthumbnail.jpg"
data-setup="{}">
<source src="media/reel.mp4" type='video/mp4' />
<source src="media/reel.webm" type='video/webm' />
</video>
</div><!--BCL--></div><!--indexvid-->
</body>
</html>
.BCLvideoWrapper div selects all divs that are descendants of .BCLvideoWrapper. As the video.js player consists of many divs (take a look in your browser's dev tools) this style has the unintended consequences you're seeing.
You should use .BCLvideoWrapper > div instead to match only divs that are (immediate) children of .BCLvideoWrapper, i.e. the div that video.js inserts in place of the original <video> element. The divs within that div won't match the rule.
.BCLvideoWrapper > div {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
Alternatively you could use .BCLvideoWrapper > .video-js to match just children with the .video-js class -- this would also match the unmodified <video> element in the event that javascript is disabled.
See this question for an expiation of the difference between child and descendant selectors
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.