So, I have a button that is located at the bottom right corner of a page as shown in the picture ("current"):
The set up is pretty simple:
<div class="content">
Content
</div>
<div class="button" style="position:absolute;right:0px;bottom:0px;">
Button
</div>
Now, is there a way to locate the button at the bottom of "visible" screen and not necessary at the bottom of the content as shown on "need" picture?
Thanks!
I believe you are looking for position: fixed.
#myDiv
{
position: fixed;
bottom: 5px;
right: 5px;
}
JSFiddle
Yes, you can use position: fixed to attach it to the bottom right of the viewport.
selector {
position: fixed;
bottom: 0;
right: 0;
}
position: fixed
Fixed positioning is similar to absolute positioning, with the
exception that the element's containing block is the viewport. This is
often used to create a floating element that stays in the same
position even after scrolling the page.
Related
I am trying to place a calendar on the top right corner of my page:
<?php
echo 'other html 1';
echo 'other html 2';
....
// Calendar
echo '<iframe
src="https://calendar_link"
style = "border: 0;
position: absolute;
width: 500; // This does not have any effect, why?
height: 500; // This does not have any effect, why?
top: 160px; // This does not have any effect, why?
frameborder: 0;
scrolling: no;">
</iframe>';
?>
The calendar is displayed and I can alternate its size, but I can't figure out how to move it to an arbitrary position. It always appears below other html code regardless of what I'm doing.
Note that:
I can't change php to html file, as this page is part of a larger system
I don't want to rely on other echo statements. It would be nice to fix this without the need of figuring out what's happening in rest of that file.
I would be happy to move style things specific to iframe out to a separate css file.
How to place iframe wherever I want?
Since you are positioning your iframe, you should use position property and as you want your iframe appearing top right corner of the page then you should also use top and right properties to achieve this result
<?php
echo '<iframe
src="http://cuassistant.tk/"
style = "
border: 0;
position: absolute;
display: block;
width: 500px;
height: 500px;
top: 0px;
right: 0px;
frameborder: 0;
scrolling: no;">
</iframe>';
Checkout the following link CSS position property
Note : since iframe is an old thing in html, there are so many attributes are deprecated. You should better take a look at those at the following page Iframe Tag
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
I want to customize a Wordpress theme (Attitude) in order to add a sticky footer. Unfortunately I am faced by two problems:
If there is not enough content to fill the complete page, a grey gap between the content and the footer appears: Demo
If there is enough content to fill the page, the footer is overlaying the content but I wont the footer to be placed at the end of the page, after the content
(if there is enough content to fill the page): Demo
This is my current CSS customizing:
body {
height:100%;
}
.wrapper {
min-height:100%;
position: relative;
}
#site-generator {
position:fixed;
bottom:0;
width:100%;
background-color: #fff;
max-width: 1038px;
}
Could you please help me by explaining what I can do to solve my problems mentioned above? Thank you very much.
For your Demo 1 example above please add this to your CSS style-sheet:
html {
height: 100%;
}
This will allow your body tag and it's other children to inherit the height of its main ancestor, the html tag. Extending the content to the bottom of the page. Make sure to always have height:100%for both the html and body tag, in order to have it work.
For your Demo 2 example above add this:
html {
height: 100%;
}
.wrapper {
padding-bottom: 65px; /* same value as footer .site-generator height */
}
#site-generator {
position: absolute; /* use absolute instead of fixed */
}
The reason I use position:absolute instead of position:fixed, is because fixed will always be on top in the same position in the browser viewport.
Use PHP and jQuery, currently displaying a slideshow of images with Colorbox.
I would like to include a DIV below each image (that is updated when each image is displayed with new content). Could be used to display related content, comments function, etc.
Researched around but yet to find any answers - anyone done this before or have any clues?
I think I need to know:
How (if?) an additional DIV can be added to the output of Colorbox
How I can react to the image changing (to update the DIV contents)
Thanks!
You could use the completed callback function to add the info. I made a demo, but I ended up absolutely positioning the caption to overlap the image... if you add it below you'll need to stretch the entire box (demo).
CSS
#cboxLoadedContent {
position: relative;
}
#extra-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #000;
color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
padding: 10px;
}
Script
$("a[rel]").colorbox();
$(document).bind('cbox_complete', function(){
// grab the text from the link, or whatever source
var extra = $.colorbox.element().text();
$('#cboxLoadedContent').append('<div id="extra-info">' + extra + '</div>');
});
Ok I am not trying to get an element to a fixed position, im trying to get a div tag out of fixed position. i have a header that is at the top position relative. below it is just another div tag with content in it. when i went to preview it in IE6, the header was positioned at the very top, and was fixed. it stayed at the top when i scrolled down, but really it was position relative. no elements in my css are positioned fixed by the way. has anyone had this before and know a fix?
CSS:
#top { height: 168px;
display: block;
clear: both;
overflow: visible;
position: relative;
margin-bottom: 15px;
}
HTML:
<div id="top">
Link 1
Link 1
Link 1
Link 1
</div>
then just regular div tag underneath with content...
Wait I got it, I added position: relative; to the parent div and then it works now... wierd