I am making a website with css and jquery. One of my script is to show a text at a specific location on a mouse click. The text is displayed good in google chrome at its intended position. but in IE9 and FF17 they are displaced from the intended position. My background image is such that it fits to the size of the window of the browser.
I am attaching the screenshot which will give a better idea. Also I am writing the code. maybe only a small tweak is required but I do not get it. Please help me in this.
This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}
body {
overflow: hidden;
}
#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}
.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
<div><img id="background" alt="background" src="tot1.png"></div>
<div class="content" id="thought_text">Here goes the text<br></div>
There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to adjust an element within another element. We can apply a class to our inner element like so:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You'll need to add the appropriate vendor prefixes. Here is a great article on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Firstly, for fixed positioning, use: top, bottom, left, right attributes instead of margin-top, margin-right..
Secondly, you've applied same z-index'es on siblings.
Thirdly, use of img element for background this way is not the best solution.
You should go for CSS background-image for body or text-div wrapper, stretched to 100%.
Full solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}
#thought_text{
left: 25%;
right: 25%;
color:#000;
}
</style>
<body>
<div class="content" id="thought_text">Here goes the text<br></div>
</body>
</head>
Consider removing #thought_text{} block in css file and combining it in the .content {} block to avoid overriding of attribute values
or
adding !important directive to the attributes
and also change
margin-top: 40%; to some fixed value such as margin-top: 250px; which ensures the top positions as same in all the browsers.
As I understand, you stretch image to whole page and want to center your block with text. You have 50% width (100% - 25% margins from both side) and 40% top margin.
With position:fixed you have top and left properties to set position relative to page.
.content {
position:fixed; /* taking it over the page */
z-index:2; /* and over the image */
left:25%; /* move to 25% from left */
width:50%; /* and setting width */
top:40%; /* move to 40% from top */
font-size:1.5em;
opacity: 0.697;
}
And you can remove
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
You get original bug because top/bottom margin and padding in percents calculates from width not height according to spec.
this is just an idea , hope that useful .
<style>
#background {
background:url('tot1.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index:1;
}
</style>
<div id="background">
<div class="content" id="thought_text">Here goes the text<br></div>
</div>
You can use a bit of javascript to detect if IE or Firefox are present, and then change the margin/position of the text accordingly.
function detectBroser(){
if (navigator.userAgent.indexOf("Firefox")!=-1)
return "Firefox";
else if (navigator.userAgent.indexOf("MSIE")!=-1)
return "Internet Explorer";
}
Related
I need to have an half arch like shown below using only css.
Tried using clip path, but the result is not the same.
clip-path: circle(63.5% at 100% 63%);
Maybe something like this?
You should define border-radius value according to your div width.
.arch-div{
position:absolute;
width:40%;
right:0;
height:100%;
background-color:black;
border-top-left-radius:300px;
}
.container{
height:200px;
background-color:darkgreen;
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body >
<div class="container">
<div class="arch-div">
</div>
</div>
</body>
</html>
The image shown does not have exactly a quarter circle showing - it looks more like quarter of a sort of oval/ellipse.
There is no need to add an extra element to the main HTML, you can add this 'quarter' using an after pseudo element.
This snippet uses aspect ratio to set the sizes, but you could of course use actual dimensions as required and change the measurements to get exactly the shape you require.
.cutout {
height: 50vh;
aspect-ratio: 16/9;
display: inline-block;
background: teal;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.cutout::after {
content: '';
display: inline-block;
background-color: white;
border-radius: 50%;
position: absolute;
left: 63%;
top: 0;
height: 200%;
aspect-ratio: 1/1.5;
z-index: 1;
margin: 0;
padding: 0;
}
<div class="cutout"></div>
I don't know how else to describe it, not fullscreen, but fill up the whole viewport.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
Skip
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
Expected outcome:
The coloured block fills the entire screen (I require this to be a as text is added afterwards).
Actual outcome:
Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.
If you set the css min-height property as min-height:100vh; (rather than 100%) on the <pre> element, that should solve your issue, by forcing the height of the element to at least the full viewport height.
Edit - also add margin:0; to the style of the <pre> element. That seems to work for me.
Hope this helps! - James.
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#disablingDiv
{
/* Do not display it on entry */
display: block;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height:100%;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
And here my HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind="title">
My app
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
</head>
<body>
<div id="disablingDiv"></div>
<ui-view></ui-view>
</body>
</html>
Thanks in advance!
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.loadingOverlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
.loadingContainer {
/* do not allow scrolling */
overflow: hidden !important;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate e.g. using some toolbar.
Change position: absolute; to position: fixed;
html,body {
height: 3000px;
}
div {
position: fixed;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; }
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
https://jsfiddle.net/qLxm7rbx/1/
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support.
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
I have an element which is an image within a div id. I am going to make this page a under construction page. I made the div with a "margin: auto" css command. What is away vertically that I can have the div auto center to any browser accessed by the site?
New to this don't know how to do the whole JSFiddle thing lol
Heres a url too: http://nerissagrigsby.com/?page_id=5
My CSS:
#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}
My HTML:
<body>
<div id="openpagesig">
<img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
/>
</div>
<!-- Open Page Signature -->
</body>
Have you tried the following CSS:
.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
position: absolute; /* or "fixed" */
/* The element you want to place in the middle of the page
center should have explicitly defined dimensions: */
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px; /* offset back at exactly half height of the element */
left: 50%;
margin-left: -50px; /* offset back at exactly half width of the element */
}
Here's a working example.
Do I need to mention, that this works even in Internet Explorer 5.5! ... but I doubt this browser is still relevant to anyone.
Please refer to the image below to see how the negative margins help:
Try something like:
.centeredDiv {
width:17em;
height:9em;
position:absolute;
left:50%;
top:50%;
margin:-135px 0 0 -155px;
padding:1em;
background-color:#fffff7;
opacity:0.67;
filter:alpha(opacity=67); /* for IE8 and earlier */
border:2px solid #191919;
}
Obviously editing measurements and colours to suit.
The problem you're having is related to vertically aligning div elements on a page. This is a common problem in HTML and CSS coding.
One solution is to have a container element within an outer div tag. The outer div should be set to display: table; and position: fixed; with 100% width and height as well. Set the inner div to display: table-cell; with the vertical-align: middle; property.
Furthermore, the outer div should have text-align: center; in order to center its child elements.
Here is the code you need:
.outer {
display: table;
height: 100%;
width: 100%;
text-align: center;
position: fixed;
}
.container {
display: table-cell;
vertical-align: middle;
}
An example from jsbin:
http://jsbin.com/otolot/1/
Try resizing the window to see that this works.
Personally I use something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="container">
<div class="container-content">
<div class="content">
<img src="//placehold.it/803x283" />
</div>
</div>
</div>
</body>
</html>
<style>
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
margin: auto;
}
.container-content {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.container-content > .content {
max-width: 803px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
</style>
This solution works very nicely, because not only does it vertically center the content, but if the browser windows height is too small to display it all, you can still scroll to see all of the content which is one of the major drawbacks of using other methods.
Example:
http://jsbin.com/owayec/2/