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!
Related
I want to add to my site based on Bootstrap 3 Affix feature for bottom navigation links. These links fixed on the bottom and added offset for the footer.
But when I scroll to the footer I see the navigation do some small "jump".
All work as need, even if I toggle to a mobile panel in Google Chrome. But excluding real mobile devices. In any case, I tried on three Android devices.
I added a link to a short video from the phone screen for clarifying: https://imgur.com/a/lcBASRD.
Please see to the bottom of the screen.
CSS:
#nav_affix {
left: 50%;
margin-left: -70px;
width: 140px;
z-index: 99999;
}
.affix {
position: fixed;
bottom: 0;
}
#nav_affix.affix-bottom {
position: absolute;
}
#nav_affix div.next {
float: right;
}
#nav_affix div.prev {
float: left;
}
#nav_affix div.next,
#nav_affix div.prev {
width: 60px;
height: 60px;
border-radius: 10px;
}
JS:
$('#nav_affix').affix({
offset: {
bottom: $('.footer_wrap').outerHeight(true)
}
});
Any ideas?
Thx for any answer.
Best.
You should place footer in a wrapper with same height as footer. Thus, when footer placing its original position, it will not make a jump.
I have done this with dynamically but also static height will solve the problem.
$('#nav_affix').on('affix.bs.affix', function () {
$('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});
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;
}
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).
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);
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.