I'm currently re-designing the layout of my site and am trying to position my Facebook like button on the bottom of my page, next to my 'Tweet' button... However there seems to be a five pixel difference between the top and bottom of each button, knocking them out of alignment... I've tried setting the padding and the margin of the div to 0 but this hasn't worked either...
The page can be seen here: http://www.jameshenry.info/test/video.php?video=14
Any ideas on why the tops of each button are not aligned?
Try the following
<div class="bottombar">
<div style="float:left">
<iframe class="twitter-share-button ......
</div>
<div class="float:left">
<fb:like ........
</div>
<div style="clear:both;"></div>
</div>
Unfortunately there isn't much that can be done, the size seems to vary along with the padding and margin across every browser. You can set a container to a specific size and overflow to hidden but then it will cut parts of the button off in one browser but not another.
Not much help, I know, but I wouldn't waste too much time on it.
One approach I've taken is to create a nice share button and have them both appear in a tooltip on hover. At least then the ugliness is hidden until needed!
Hope that helps :)
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Azari & III - James Henry
</title>
<link href="scripts/page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = 'rightbar'>
<div class = 'videobox'>
<iframe src="http://player.vimeo.com/video/28767067?title=0&byline=0&portrait=0&color=ffffff&" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><BR><div class='video-title'>Azari & III</div><div class='video-subtitle'>Manic (Directors Cut)</div><BR><div class='back'>«back</div></div>
</div>
<div class ='bottombar'>
<div style="margin: 3px 3px 0px 3px; position: relative; float: left;">Tweet<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="false" layout="box_count" width="75" padding="0" margin="0" font="lucida grande" !important ></fb:like></div>
<div>
</body>
</html>
Related
Much expert advice has been read here on this topic. Though, sometimes this was very general and did not incorporate the suggestion not to use Bootstrap's or Flexbox' solutions to this dilemma.
For all those of you who have a "historic" HTML frameset with several frames I would like to show you the way how I did this transformation from the original PHP code files. Being very grateful for all the professional advice I personally had been able to collect on stack overflow, I would like to return something here.
The basic layout structure is like this:
+---------------------------------------------------------+
| (1) |
+---------------------------------------------------------+
| (2) |
+---------------------------------------------------------+
| (3) | frameBody | (4) |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+---------------------------------------------------------+
| (5) |
+---------------------------------------------------------+
Legend:
(1) - headerTitle; (2) - frameMenu; (3) - userMenu; (4) - patientMenu; (5) - footerTitle.
After having logged in successfully from login.php, I am being forwarded to site.php which takes over the steering of the entire website. In this file, all the conditions for switching from conditions to conditions and, thus, to corresponding other PHP files is managed.
site.php, however, also takes care of the principal layout of the website, here in the old frameset / frame / noframes way (please excuse the lengthiness of the code example, but I want to show you how nicely short and well-structured an iframe solution can be):
<?php
// Lots of definitions and introductory stuff, not relevant here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=<?= strtolower($CHARSET) ?>" />
<meta name="author" content="whoever" />
<meta name="date" content="<?= date('r', filectime($_SERVER['SCRIPT_FILENAME'])) ?>" />
<title><?= $sCompanyName ?></title>
</head>
<frameset name="alles" cols="20,*,20" framespacing="0" frameborder="0" border="0" />
<frameset rows="20,50,120,*,40,20" framespacing="0" frameborder="0" border="0" />
<frame name="headerTitle" src="frameHeader.php" scrolling="no" noresize="noresize" />
<frame name="frameMenu" src="frameMenu.php" scrolling="no" noresize="noresize" />
<?php
if (isset($_REQUEST['sBody']) && $_REQUEST['sBody'] == 'login')
echo '<frame name="frameBody" src="login.php' . $sLanguageString . '">';
else {
?>
<frameset name="Frame1" cols="225,1,*,1,225" framespacing="0" frameborder="0" border="0">
<frame name="userMenu" id="userMenu" src="userMenu.php" />
<frame name="frameBody" src="<?= $sBody . (strlen($sURLParameterString) > 1 ? $sURLParameterString : '') ?>" />
<frame name="patientMenu" id="patientMenu" src="patientMenu.php"/>
</frameset>
<frame name="footerTitle" src="frameFooter.php" scrolling="no" noresize="noresize" />
</frameset>
<?php
}
?>
<noframes>
<body>
<?php
setSysMsg($oSysMsg->getExpression('general', 'noFrameSupport', 'This site is based on frames. But your browser doesn\'t support frames.<br />Your should choose another internet browser.'));
echo getLastSysMsg();
?>
</body>
</noframes>
</frameset>
</html>
What are the obstacles now for an easy conversion?
They all refer to my style of working only (apart from other professional skills you can read about in my profile I have developed large documentation and data analysis suites [WAMP, LAMP, MAMP] for handling special types of medical documentation), but if you find yourself in a similar timely condition, this situation may be similar to your own mindset:
Obstacle #1:
Ready-made solutions for the implementation of grids such as Bootstrap or Flexbox can be done as well, but using their CSS and JS files often needs a lot of individual adaptation if you want to have sizes, shapes, and colours your way.
Obstacle #2:
I personally prefer to experiment in a small, easy to conceive setting before embedding my solution into a bigger structure such as Bootstrap and Flexbox (and possibly others, too).
Obstacle #3:
I simply do not have the time to sit in front of the screen for hours and hours to check out some layout stuff when I dearly need to get data analyses and evaluations done.
Thus, after experimenting with WampServer on my localhost, I have found the following solution:
<?php
// Same lots of definitions and introductory stuff, again not relevant here
?>
<!DOCTYPE html>
<html lang="whatever">
<head>
<meta http-equiv="content-type" content="text/html; charset=<?= strtolower($CHARSET) ?>" />
<meta name="date" content="<?= date('r', filectime($_SERVER['SCRIPT_FILENAME'])) ?>" />
<title><?= $sCompanyName ?></title>
</head>
<div>
<iframe style="top:0px; width:100%; height:40px; border:2px red; background-color:grey; display:block; position:fixed;" id="headerTitle" name="headerTitle" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" src="frameHeader.php" /></iframe>
</div>
<div>
<iframe style="top:40px; width:100%; height:120px; border:2px red; background-color:grey; display:block; position:fixed;" id="frameMenu" name="frameMenu" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" src="frameMenu.php" /></iframe>
</div>
<?php
if (isset($_REQUEST['sBody']) && $_REQUEST['sBody'] == 'login')
echo '<iframe name="frameBody" src="login.php' . $sLanguageString . '">';
else {
?>
<div style="float:left;">
<iframe style="top:160px; width:225px; height:100%; border:2px blue; background-color:grey; display:inline-block; position:fixed;" id="userMenu" name="userMenu" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" src="userMenu.php" /></iframe>
</div>
<div>
<iframe style="top:160px; left:225px; width:100%; height:100%; border:2px blue; background-color:lightgrey; display:inline-block; position:fixed;" id="frameBody" name="frameBody" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" src="<?= $sBody . (strlen($sURLParameterString) > 1 ? $sURLParameterString : '') ?>" allowfullscreen /></iframe>
</div>
<div style="float:right;">
<iframe style="top:160px; right:0px; width:225px; height:100%; border:2px blue; background-color:grey; display:inline-block; position:fixed;" id="patientMenu" name="patientMenu" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" src="patientMenu.php" /></iframe>
</div>
<div>
<iframe style="bottom:0px; width:100%; height:40px; border:2px red; background-color:grey; display:block; position:fixed;" id="footerTitle" name="footerTitle" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" src="frameFooter - Kopie.php" /></iframe>
</div>
<?php
}
?>
</html>
Please mind that, of course, it is a good if not essential step to cast the style="whatever" statements into an external CSS file, but this is not necessary here to show you what I mean.
It is important not to change the name="something" statements from frames to iframes as they are needed for the referral of, for instance, a menu link referring to the above-mentioned code with frameBody (see there):
[... preceding code ...]
<li><a target="frameBody" href="dothis.php">Do this</a></li>
<li><a target="frameBody" href="dothat.php">Do that</a></li>
<li><a target="frameBody" href="dosomethingcompletelydifferent.php">Do something completely different</a></li>
[... further code ...]
The allowfullscreen is just an optional element in case one of these iframes should be made fullscreen using an appropriate javascript code (not supplied here).
And, finally, the change of both <!DOCTYPE ...> and <html ...> corresponds to being able to make use of HTML 5 instead of the older HTML 4 declaration which had to refer to a DTD (Document Type Definition).
I hope this bit of code helps in a generic way to root from HTML framesets to HTML iframes on the way to a frameless solution as next possible step.
How to add close button to amp-image-lightbox? Its closed by clicking outside of image, but what should be if aspect ratio match display? Code piece follow:
$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"></amp-image-lightbox>';
Changes in your code :
$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"> <span on="tap:lightbox.close" role="button" tabindex="0">X</span></amp-image-lightbox>';
Example : click here
<!--
## Introduction
An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.
-->
<!-- -->
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too. -->
<html ⚡>
<!-- ## Head -->
<!-- -->
<head>
<!-- The charset definition must be the first child of the `<head>` tag. -->
<meta charset="utf-8">
<title> amp-image-lightbox</title>
<!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<!--
AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
-->
<link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/">
<!--
AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.
-->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!--
CSS must be embedded inline.
-->
<style amp-custom>
.close-button { position:fixed; top:50px; right:50%; transform:translateX(50%); z-index:1000; border:5px solid yellow; border-radius:10px; padding:2px;}
</style>
<!--
The AMP boilerplate.
-->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<!-- ## Body -->
<!-- -->
<body>
<h1>Add Custom Close Button In amp-image-lightbox</h1>
<amp-img on="tap:lightbox"
role="button"
tabindex="0"
src="https://dummyimage.com/600x400/9d0000/fff/&text=amp-image-lightbox"
alt="Picture of a dog"
title="Picture of a dog, view in lightbox"
layout="responsive"
width="300"
height="246"></amp-img>
<amp-image-lightbox id="lightbox"
layout="nodisplay">
<span class="close-button" on="tap:lightbox.close" role="button" tabindex="0">X</span>
</amp-image-lightbox>
</body>
</html>
Without html code, just CSS.
Put this on your styles:
For amp-image-lightbox:
#lightbox1::before {
content:"X";
cursor: pointer;
font-size: 32px;
right:19px;
top:8px;
font-weight: 600;
position: fixed;
display: block;
text-align:right;
color:#fff;
}
The selector is the default example selector. Be sure it's correct.
On amp-lightbox:
.lightbox::before {
content:"X";
cursor: pointer;
font-size: 32px;
right:19px;
top:8px;
font-weight: 600;
position: fixed;
display: block;
text-align:right;
color:#fff;
}
Try it on codepen
I am developing my first PHP webapp on localhost. I am unable to refer to files in my sub-directories. For example, from any page of my project, if I have to call the following page, the image doesn't appear.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page is Under Construction</title>
</head>
<body>
<style>
.imgcontainer {
text-align: center;
margin: 10px 0 5px 0;
position: center;
}
</style>
<div class="imgcontainer" style="padding:0px;">
<img src="/myProjectRootFolder/images/under-construction.png" alt=""/>
</div>
</body>
</html>
The error message on Console is
UnderConstruction.php:25 GET http://localhost/myProjectRootFolder/images/under-construction.png 404 (Not Found)
could be you need a relative path
<img src="./myProjectRootFolder/images/under-construction.png" alt=""/>
or
<img src="./images/under-construction.png" alt=""/>
and be sure of your real image and pathnames ..
if your url for invoke the page is
/myProjectRootFolder/summary/salessummary.php
you should use the relative path
<img src="../images/under-construction.png" alt=""/>
then you should use
i have a maintenance page 503.php. I tried to get the images to be displayed but it did not show. I tried path and html img way, but it did not work. Below are the codes and also anyone helps me explain how to included images in php file?
My website images directory is like this:
on server: pulic_html/website/images
on local: website/images
php file dir: website/503.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<?php
header("HTTP/1.1 503 Service Temporarily Unavailable");
header("Status: 503 Service Temporarily Unavailable");
header("Retry-After: 3600");
?>
</title>
<style type="text/css">
body {
background-image: url("../images/black-brick-wall-texture.jpg");
}
</style>
</head>
<body>
<div>
<div>
<p style="text-alignment: middle"><img src="../images/still-under-construction.gif" width="306" height="350" alt="dang duoc bao tri" />" </p>
</div>
<div style="text-align: center; font-size: 24px; color: #FFF;">
<p>BSeveryday.vn hiện <span style="color: #F00">under maintenance</span>, please come back later <span style="color: #F00">30p - 2 giở</span>.</p>
<p>if you have any problem, please send me a message at: <span style="color: #00F">vandekhac#bseveryday.vn</span></p>
</div>
</div>
<p><img src="../images/under_construction.gif" alt="under maintenance" width="350" height="299" align="right" />" </p>
</body>
</html>
In the .htaccess file in the website's root directory insert the following line before your RewriteRule line::
RewriteCond %{REQUEST_FILENAME} !.(gif|jpe?g|png)$
You may need to add css or js to that list of filetypes, depending on your holding page’s needs.
It may solve your problem.
i am trying to filter data using preg_match it seems to be correct and matching on view source code but when i run the code it gives no match found
here is my pattern
/\<p\>(.*)\<center\>/
string is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<small>Photo courtesy of hortongrou </small>
</div>
<p>I have developed theasional thriller.<br />
<code> </code><br />
<li><strong>Beginning Ubuntu Linux<img style="border:none !important; margin:0px !important;" src="" border="0" alt="" width="1" height="1" />, by Keir Thomas and Jaime Sicam.</strong> For those who like to transition from Windows to Linux, install Ubuntu Linux on one of yoto you.</li>
</ol>
<p class="alert">For more Linux books that I recommend, browse <a rel="nofollow" href="http://astore.amazon.com/thgest-20">The Geek Stuff bookstore at Amazon.</a></p>
<p>There are several hundreds of books on Linux. <strong>What is your favorite Linux book that is not on this list?</strong><br />
<code> </code><br />
<em>If you like this article, please bookmark it on <strong>delicious and Stumble it</strong>.</em></p>
<center>
<div style="margin-left:2px; margin-top:10px; margin-bottom:10px; ">
<!-- AD BLOCK -->
</body>
By default . doesn’t match new lines. Try adding DOTALL (s) modifier like this /<p>(.*)<center>/s.