I am trying to make a website, and it is vital that everything is positioned correctly. I have an element that I have that I want in a certain position on all devices. For example:
test {
top: 63%;
left: 43%;
}
The problem is, when I test my website on other browsers, and different screen sizes, the elements position goes crazy. Is there a way where I can set a position that will stay the same on every browser/screen size.
Thanks,
Tomothy
test {
top: 63%;
left: 43%;
position:absolute;
}
and in parent div position:relative;
so the test is set according to the parent div
You have to use the below code..
.test{ position:absolute; top: /*your value*/; left: /*your value*/;}
before the parent container of test..
.parent-container{ position:relative;}
left and top css properties are not working properly without position.
test {
position: absolute;
top: 63%;
left: 43%;
}
Note : you must define parent class of test is like..
test-parrent {
position: Relative;
}
Related
I have a Wordpress site and I wanted to display two vertical banners outside of the main container. I am using this css and it works on Firefoxs and IE. On Chrome however only the left one is shown. Any ideas?
#media only screen and (min-width: 1100px){
div.side-image-left {
position: absolute;
z-index: 98;
left: -840px;
top: -24px;
}
div.side-image-right {
position: absolute;
z-index: 99;
left: 342px;
top: -24px;
}
}
you can try floating the image not positioning. Now, as I have seen you used absolute positioning, so in this approach you also won't get always get the banners when scrolling down.
.side-left-image{
float:left; }
.side-right-image{
float: right; }
but z-index won't work!
I have been trying to figure out how a pixel pattern overlay can be applied over a website section like in this site: http://www.tinkeringmonkey.com/ (over the background video image at top and image in bottom section)
I'm sure this is fairly straightforward, I just don't know what to google to try and find the css or whatever I need to implement it.
Thanks heaps for any replies!
David
If you inspect the website using your browser's developer tools you will see that they have simply included an empty div, scaled it to 100% width and height of it's container, positioned it absolutely, given it a higher z-index than the video container and used a tile-able background image to produce the diagonal lines you see. In this instance the class applied to the div is called mk-section-mask and the css applied to that class is...
.mk-section-mask {
background: url(../../images/video-mask.png) center center repeat;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
}
where video-mask.png is a 4px square png with a diagonal line running through it... See here
Hope that helps
Dan
Here take a look at this fiddle
With pseudo element :after, you can add a repeated background and make its position:absolute with top-left-right-bottom to zero.
CSS
div {
width: 300px;
height: 300px;
display: block;
position: relative;
background: url(https://placekitten.com/g/300/300);
}
div:after {
content: "";
background: url(http://dev.bowdenweb.com/a/i/style/patterns/tileables/06/dot-grid-1.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0.5;
}
In general, when you want to know how a certain effect or layout is achieved, try the web inspecting tools in your browser. I use Google Chrome to develop sites, it comes with a very complete tool set.
As for your specific question, there's several ways to attain this. If you want to apply this overlay to a non-void element, my approach would be using HTML pseudo-elements:
.overlay {
position: relative;
}
.overlay:after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url(path/to/your/transparent/overlay.png) repeat scroll 0 0;
}
Apply the class overlay to whatever <div> and you're good to go. There's a catch, though: elements inside the .overlay won't respond to mouse/touch events, because the overlay on top will get them first.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?
HTML:
<div id="container">
<div id="coveriframe"></div>
<div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>
Try in IE8:
http://jsfiddle.net/pkbz4/19/
The above code works in ALL other Major browsers. WTF Microsoft?
Stylesheet:
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/
CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>
The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}
Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}
How to make a div to always appear at the top of a web page even when the paged is scrolled vertically.
Use CSS position: fixed;:
#topdiv {
position: fixed;
top: 0;
}
See jsFiddle example: http://jsfiddle.net/CXACT/1/
div#myDiv {position: fixed; top: 0px; ...}
Css :
#topdiv {
position: fixed;
top: 0;
}
You can also make with JQuery,
Just always take the scrolltop value and change the div top.
$("#topdiv").css("top", scrolltop);