I have the following css for a ribbon that I have hanging in a certain part of my website http://www.tonypalazzo.com .
.ribbon {
float:left;
padding:5px 0 0 0;
margin:0;
width:217px;
position:absolute;
left: 965px;
top: 67px;
z-index: 999999;
}
It appears in different horizontal positions when viewed in different sized monitors or even when I zoom in and out in Chrome (and a completely random spot in the design view of Dreamweaver). It maintains proper vertical (top) positioning, but looks like it always wants to stay 965px away from the left. This makes it appear in a completely different spot when viewed in different resolutions.
With "relative" position it won't overlay the other div boxes I need it to overlay. Any help on how I can get this div to sit in the foreground of (overlay) other div's while maintaining the same left/top values relative to where my social media icons sit (see website)?
I've read other posts about this telling me to put it in my "parent" div. I believe it sits within that if my "block_header" is the parent. Here is a quick summary of the html (ignore the .'s I put them there just to make sure the code shows:
<div class="main">
<div class="header">
<div class="block_header">
<div class="logo"></div>
<div class="social"></div>
<div class="ribbon">
<img src="images/portf.png" onmouseover="this.src='images/portf1.png'" onmouseout="this.src='images/portf.png'"/>
</div>
</div>
</div>
</div>
Thank you!
Your ribbon is staying 965 pixels from the left edge of the screen, just like it's supposed to. If you want it to be positioned relative to it's parent, add the style position: relative to the parent. In this instance, you should add it to .block_header, then reposition the ribbon.
Related
I've got the following div structure of my content window, using BS4 framework:
<div class="container-fluid">
...
<div class="row">
...
<div class="container">
...
<div class="row row-grid">
...
<div class="col-8"> <!-- my left sided content, long block of cards-->
...
<div class="col-4"> <!-- my right sided card-block that I need to be sticky and follow the left as user scrolls down-->
I see in the docs that the nav-bar has a .sticky-top class - but when I try to use this in my example here things get wonky.
How can I just get my col-4 div to stick to the top of the browser window, when the user scrolls to see the content in the col-8 div?
Clarification
My right and left content divs live under other static content, like the navbar and a header block. So on page load, the right (sticky) div should be in it's native position, and only stick to the top of the window when scrolling beyond it's visibilty. I've updated the fiddle to show kind of what I mean.
Fiddle
Use position: fixed css property
CSS
.fixed-div{
position : fixed;
top: 0;
right: 0;
}
You're basically after position: sticky;; unfortunately, browser support is still somewhat lacking. If you only care about browsers that support it, the syntax is similar to:
.sticky // or whatever selector you want to use
{
position: -webkit-sticky;
position: sticky;
top: 75px;
}
See the MDN article for position for a better explanation, but, to put it simply, the value of top is the distance from the top of the viewport (or the nearest positioned container) where the element switches from static to fixed positioning. It's the same affect that the Affix plugin provides in Bootstrap 3.
I'm having some trouble with a header in a webpage. It has several pages, and in one of them there are several big pictures. In that particular page I have observed that the header div moves a few pixels to the left, which is very obnoxious when changing between pages.
I know that the problem disappears when I remove the first picture (id="problem1"), or one of the divs with two pictures ((id="problem2" and "problem3")), but I can't figure out what's happening.
I'm using this css code to produce two colums:
.contenedor { overflow: auto; }
.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}
And this one for the header:
#header {
height: 100px;
background: #0072b8;
font-family: Arial;
font-size: 16px;
color: white;
}
This is the header that magically changes its possition:
<div id="header">
<img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;">
</div>
And this is the code that defines one of the divs that have two colums:
<div class="contenedor">
<div class="div1">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
<div class="div2">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
</div>
You can see the rest of the code and its result here:
JSFiddle
What puzzles me the most is that if I leave just 2 of the problematic elements, the div position is the right one, the same one that in all the other pages that doesn't have these pictures, but when I add the third one it moves.
This is happening because you have a scroll bar on some pages but not on others and your DIV elements are set to 'auto' so they expand the available browser space (which as im sure you know changes when the browser is resized, or in this case when the presence of a scroll bar changes the available space).
To fix this, it would be easiest to just design the page with
html {
overflow-y:scroll;
}
This will make sure that a scroll bar is on the page at all times and the page size won't change over it.
I believe the problem is that you have a scroll bar on the problem pages. Your content is longer then the height of the browser window. When your content is higher than the window a scroll bar is added to the page. This is unavoidable.
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}
I have position:fixed <div> that appears in the middle of the screen. When there are messages, a second position:fixed <div> is put next to the first <div>.
I'm finding on different screen sizes (say a netbook - small screen) the <div>'s sit on top of each other.
Is there a way to lock their position to each other? I tried using a fixed container to hold both of them, but they still moved.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
EDIT:
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS - container1 and container2 still move when I change the screen size.
#wrapper {
position: fixed
}
#container1 {
position: fixed
}
#container2 {
position: fixed
}
do I need to use relative positioning on the container 1/2 divs?
Most importantly, id is unique. You cannot use id="container" on three different elements. Each must have their own id.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
Should be something like this...
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
Also, where is your CSS code?
If you don't want these things to push each other around as the window size changes, one method would be to specify the exact size and position of each container.
EDIT:
Again, without seeing an example of this page, a demo, or a better description of what you want, this is speculation.
You could put fixed position on the wrapper and then put an exact size and position on the <div>'s within.
The position: fixed CSS rule "fixes" the element's position on the screen. Once you set it to fixed, it will never move from the position you put it in. Since you're applying fixed to all of your elements, you're seeing the elements stack (likely in the top-left of your screen considering you're not providing a top or left value).
If you want the child elements to appear inside your fixed container, just don't add position: fixed to them and they'll sit inside the parent just fine.
Of course, all of this is pure speculation considering we can't see an example of your problem, nor your desired result.
you cant fix the position of your div like this. first of all you have to find the screen size for your parent div which contains that div u want in middle.like
<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
var winW, winH;
winW = document.getElementById('parent').availWidth;
winh = document.getElementById('parent').availHeight;
}
this is how you vil get the size availabel for parent div.Then set the width and height of parent div according to it.now if you have width of parent div its easy to set middle_div in middle of parent div.
I frequent a website called GOOD and I love one aesthetic style in particular; how the navigation bar extends its colours across the background of the website. You'll see what I mean if you visit the site.
In CSS, how could I replicate this in the most simply way possible? I've tried all sorts of things with z-index/margins/float and it simply isn't happening.
Just put A div (position'd absolute) in the back with the menu in it and put another div, with the actual content in it over that.
Little example:
<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>
That should work!
Hope that helps.
Its all about position: absolute. The nav container which holds all of those links is given this CSS property which removes it from the normal flow of the page. It has top: 165px to set it where it is positioned. Each of the links are given the display: block property which means they will fill their parent which in this case is 100% of the width. A span tag is then used inside the 100% width links to set the text where it is.