Jump to content
Sign in to follow this  
JonnyDriller

video borders collapsing on echo php statement

Recommended Posts

I've been working on my email screen, adding a video to it, and some Css. Which seems to work quite fine. 

However when the page returns to the original screen (represented by the code 1.) It collapses the video image. 

Makes it really long horizontally and thin vertically. 

 

If I remove this first piece, showing that the email was sent successfully.  

if(isset($_GET['Message'])){
    echo $_GET['Message'];
}

It returns to the screen fine and the video looks as it should. 

Code1:-

<?php

if(isset($_GET['Message'])){
    echo $_GET['Message'];
}

$uri = $_SERVER['REQUEST_URI'];
$uri_dir = getcwd();
?>
<!DOCTYPE html>

<html>
<head>   
    <link href="/LifeSaverHTML/Details/Database/stylevid2.css" rel="stylesheet" type="text/css"> 
    
    <h1 class = "titler">
        LifeTube
    </h1>
    
    <p></p>
</head> 
<body> 
   <video class = "tube" controls src="examplevid.mp4">
        Your browser does not support the video tag.
    </video>        
    <p></p>
    <div style="margin: 0 auto; text-align: center">
        <a href='/PHPMailer/index.php?id=<?=$uri?>&dire=<?=$uri_dir?>' class="linker">Email Security</a>         
    </div>   
</body> 
</html>

 

I'm using this piece of CSS = Code2. I've set all the defaults padding etc to default for testing. 

* {
  margin: 0;
  padding: 0;
} 

As I say it looks great. Apart from when it returns with the email successful message. The whole thing just deflates.

 

Code2:-

* {
  margin: 0;
  padding: 0;
} 

body {
  background: url('/LifeSaverHTML/Details/Database/backround.jpg') no-repeat center center fixed; 
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tube {
  display: block;
  margin: auto;
  width: 50%;
  height: 20%;
  border: 10px solid green;
}
    
.button {
  margin: 0 auto; 
  display:block; 
  text-align: center;
}
  
.linker {
    background-color: #23b83c;
    border: 2px solid #020353;
    color: whitesmoke;
    padding: 1em 1.5em;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    display: inline-block;
    width: 12%;
    border-radius: 5px;
    box-shadow: 3px 3px 8px 0 #000; /* h-offset v-offset blur spread color */
   
}

.linker:hover {
    color: red;    
}
  
.titler {
  width: 20%;
  text-align: center;
  margin: 0 auto;
  color: #FFFFFF;
  border: 5px ridge rgba(124,252,0);
  border-radius: 36px;
  background: #232323;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
  }

nav {
  width: 80%;
  margin: 0 auto; }
nav ul {
  list-style: none;
  overflow: hidden; }
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 8px 0;
  display: block;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,
    #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,#cdeb8e),
    color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,
    #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,
    #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,
    #cdeb8e 0%,#b0ca34 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=’#cdeb8e’,
    endColorstr=’#b0ca34′,GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
  background: #b0ca34; /* Old browsers */
  background: -moz-linear-gradient(top,
    #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,#b0ca34),
    color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,
    #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,
    #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,
    #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=’#b0ca34′,
    endColorstr=’#96c40d’,GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }

 

Edited by JonnyDriller

Share this post


Link to post
Share on other sites

Soz guys I wrapped it in a Div and stuck it at the bottom of my code. Seems to have worked out 

<?php

$uri = $_SERVER['REQUEST_URI'];
$uri_dir = getcwd();
?>

<!DOCTYPE html>
<html>
<head>   
    <link href="/LifeSaverHTML/Details/Database/stylevid2.css" rel="stylesheet" type="text/css"> 
    
    <h1 class = "titler">
        LifeTube
    </h1>    
    <p></p>
    <nav>
  <ul>
    <li>
        <a href="/home.php">Home</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/Database.php">Database</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/mapper.php">GPS Map</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/UpdateSearch.php">Update and Search</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/Details/Database/index.php">Video</a>
    </li>
  </ul>
</nav>
<p></p>
</head> 
<body> 
   <video class = "tube" controls src="examplevid.mp4">
        Your browser does not support the video tag.
    </video>        
    <p></p>
    <div style="margin: 0 auto; text-align: center">
        <a href='/PHPMailer/index.php?id=<?=$uri?>&dire=<?=$uri_dir?>' class="linker">Email Security</a>         
    </div>   
</body>      
</html>

?php

if(isset($_GET['Message'])){    
    echo "<div id='emailmess'>";
    echo $_GET['Message'];
    echo "</div>";
}

?>

 

Edited by JonnyDriller

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.