I have this div:
<div style="padding:5px 100px 0px 100px; bottom:5px; position:absolute">
<div class="divLine" style="margin:5px 0px 10px 0px;"></div>
<div>
<p class="pull-right titleLink">© Ofir Messing 2013-2014 · <a class="titleLink" href="#">Link</a></p>
<p style="text-align:left;">למעלה</p>
</div>
</div>
</div>
I want it in the bottom of the page I tried everything. How can I do that?
I have an image under it.
http://jsbin.com/ginoveja/2
Hi just remove position:fixed it will solve the issue.
Don't position your images with position: fixed; for your current situation. position: fixed; is for keep an element fixed on the screen so that it never moves. When you view your images on a smaller screen, the text must move somewhere, so it overlaps the fixed images.
I have verified it in Mozilla Firefox fire bug by removing position:fixed attribute, it was working.
Best of luck.
Related
I've got a bit of a problem I can't solve. So basically I've got a fixed feedback button on my screen, looking like this:
.feedback-button-container {
position: fixed;
bottom: 0;
z-index: 3;
right: 15%;
}
<!-- When Modal opens <body style="padding-right: 17px;">
<body>
<div class="feedback-button-container">
<a>
<button class="feedback-button">Give Feedback</button>
</a>
</div>
</body>
I've also got a modal. When I open the modal it adds a padding of 17px to the right of <body>, this way the scrollbar will hide when the modal is open. The problem is that when I open the modal, because of the increased 17px of padding my feedback button shifts to the right. Is there some easy way to fix this?
EDIT:
I made a mistake in my wording, the 17px of padding aren't supposed to hide the scrollbar, they're supposed to add the space that the scrollbar left when overflow:hidden;
I think you want to remove the scrollbar from the modal rather than adding a padding to hide it. You can try overflow:hidden to do this?
I'm running foundation 5 and using magellan, and try as i might it consistently breaks out of the grid. I'm new to this, any insight would be helpful. When I first load the page, it is positioned correctly inside the grid. As I scroll down, the magellan menu jumps to the left and fills the entire width of the page. I scroll up again, and it does not change (meaning it is still all the way to the left) even though it "unsticks" itself from the top of the browser window. I currently only have it on my localhost testserver. I'm seeing the same problem on firefox and chrome for windows.
Here is my code:
<div class="row">
<div class="large-10" column>
<div data-magellan-expedition="fixed">
<dl class="sub-nav">
<dd data-magellan-arrival="arrival">
Arrival
</dd>
<dd data-magellan-arrival="destination">
Destination
</dd>
</dl>
</div>
</div>
<div class="large-2" column>nothing</div>
<div class="large-10" column>
<a name="arrival"></a>
<span data-magellan-destination="arrival">Arrival</span>
<a name="destination"></a>
<span data-magellan-destination="destination">DEstination</span>
</div>
<div class="large-2" column>nothing</div>
</div> <!--closes div class row-->
I'd really appreciate any insight. I've been driving myself crazy with this for way too long. It must be possible - on the docs page it seems magellan stays correctly in the middle column of the grid: http://foundation.zurb.com/docs/components/magellan.html
On the docs a left: auto !important has been set for the .fixed class. Even when applying that, your issue is still related to: Fixed position but relative to container (and Position Fixed width 100%).
A possible fix (or something which may help) will be using the following CSS for the large grid:
.fixed {
background-color:transparent;
position: fixed;
left: 50%;
top: 0%;
transform: translateX(calc(-41.66% + 30px));
}
.fixed .sub-nav {
background-color:white;
margin-right: calc(41.66% + 30px);
padding: 15px;
}
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
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: *??*;}