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
Related
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%;
}
Let's say that I am an admin of a certain website.
I am using latest release of Wordpress, my theme is a child theme of a theme called "Twenty Fourteen". I am using Mozilla Firebug to inspect elements I want to edit.
The page does not display in full width and there is still some unused space left (it is visible on the right). I would like to widen the page. How to do this? I have a Full Width template, setting all pages to this however does not work.
I am looking for a CSS solution (to edit the style.css of my child theme).
If anyone could help me, I would be really thankful. :)
So you want a full width page?
I've got some suggestion for you:
1. Use a CSS Framework like Bootstrap
Bootstrap will allow you to make a full width page without any problems. On top of that it will make your website responsive. Read more....
2. Use your own CSS
You need to make your body use all the space there is. You can't just use
body
width: 100%;
height: 100;
}
This would make the body take as much space as the children needs.
The body has always some margin and padding. So you need to get rid of that too.
body {
margin: 0;
padding: 0;
}
The last step in your CSS would be a fixed position for all 4 sides and make the position relative:
body{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
So your final CSS should look like this:
body{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
}
I suggest you to use a Framework, which makes your workflow alot easier.
Regards,
Megajin
You can try to override this css code:
.site {
width: 100%;
position: relative;
margin-left: 0px;
}
.site-header {
position: relative;
width: 100%;
z-index: 4;
}
Otherwise if you choose framework then you can easily integrate and understand "matirialize css" OR Bootstrap.
http://materializecss.com/about.html
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.
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>');
});
I have two divs, one on the left, and one on the right side of my page.
I have an iframe in the middle of my site, which content is loaded from a php file with mysql results in it.
I want the two divs on my page to get the TOTAL height of my page and set it as its own height so the borders continue all the way down. I also would like the iframe to adjust its height depending on the "results_table" which "myPhpFile" echoes out.
Here is my two divs code:
<div class="bgr_left">
<div class="bgr_right">
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
AND
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
width: 30px;
background-color: #E7F5F0;
}
And here is the iframe inside a table:
<table width="850px" height="1000px" border="0" align="center">
<tr>
<td width="845px" height="998px">
<iframe style="border:none; width:100%; height:100%;" name="iframe001" src="frame.html" id="iframe001"></iframe>
</td>
</tr>
</table>
And here is the form:
<form id="nav_form_main" name="nav_form_main" action="bincgi/myPhp.php" target="iframe001" method="get">
And here is the part in the php file which creates a table from the mysql query:
while($row = mysql_fetch_array($qry_result)){
My question: Is this way the best way to get two side borders on my page? AND, is there a way to set the iframe height to the content which is about to be loaded inside it from my "FORM"...
BACKGROUND HISTORY:
I have a form on my site, which targets the iframe, and the action on the form is a php file which returns a mysql query result inside a table. So this table is what ends up inside the iframe!
Trying to resize an IFrame onload using Javascript can be done but is very cumbersome in my experience. Using Ajax to dynamically load the PHP results into your HTML structure would be easier and more reliable. If you load the PHP output into a DIV, that DIV's height can increase the page's height, thus increasing the other DIVs' height.
You can access an iframe content height with JavaScript only if both the iframe and the JavaScript are on the same domain.
You can try inserting content with PHP like:
$content = file_get_contents('http://domain.net/iframe.php');
//
//Do something with the content here
//
echo($content);
But it's not clear solution if you can't modify the iframe.php to get only content you need. I think you'll end up with static iframe height.