locked
Positioning date - top right-hand RRS feed

  • Question

  • User-1793215261 posted

    Hello

    I have the following code to display the date (it works on another site I have).

    <asp:Label ID="LblDate" runat="server" CssClass="labelStyle" Text="Label"></asp:Label>

    The CSS for 'label style' is:

    .labelStyle {    
    font: normal 14px 'trebuchet ms','News Cycle',Helvetica;    
    color: #fff;    
    float: right;    
    ;    
    top: 15px;    
    right: 100px;
    }
    

    If possible, I would like to use this same code on a page with the following, existing code:

    <body>
    
       <div class="content">
    
      <h1 class="content__heading">Welcome To My Site</h1>
     
      </div>
    
    <video id="my-video" class="video" controls>
    <source src="media/myVideo1.mp4" type="video/mp4">
    </video>
    
    </body>
    

    When I place the

    <asp:Label ID="LblDate" runat="server" CssClass="labelStyle" Text="Label"></asp:Label> 

    between the <body> and <div class "content"> tags, the date is off screen. If I place it between the 'content' and 'content_heading' tags, it appears close to the middle of the screen because it is restrained by <div class="content">.

    This is a full screen movie. How can I show the date, please, as a kind of overlay, in the top right-hand corner of the screen - outside of the constraints of 'content'?

    The CSS for 'content' and 'content_heading':

    .content {  
    ;  
    top: 30%;  
    z-index: 2;  
    margin: 0 auto;  
    max-width: 720px;  
    text-align: center;
    }
    
    .content__heading {
    margin-top:-18%;  
    color: #94e8e3;  
    font-size: 44px;
    }

    Thank you.

    Saturday, December 8, 2018 9:23 PM

Answers

  • User-893317190 posted

    Hi Bluenose,

    If you want the title and data both to be fixed, you could use .It will fix the element in a specified position.

    Below is my code.You could make changes based on it

     <style>
             .content {  
    ;  
    top: 10px;  
    z-index: 2;  
    margin: 0 auto;  
    max-width: 720px;  
    text-align: center;
    }
    
    
    .content__heading {
     
    color: #94e8e3;  
    font-size: 44px;
    }
    .labelStyle  {    
    font: normal 14px 'trebuchet ms','News Cycle',Helvetica;    
    color: black;    
    float: right;    
    ;    
    top: 15px;    
    right:50px;
    
    
    }
    .container {
       
        width:100%;
        height:900px;
        ;
        top:100px;
    
        }
    
    .container video {
            width: 100%;
            height: 100%;
            display: block;
        }
    
         </style>
        <script src="../Scripts/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
          
            <div class="date"> <asp:Label ID="LblDate" runat="server" CssClass="labelStyle" Text="Label">2018-12-10 10:00</asp:Label> </div>
       <div class="content">
    
      <h1 class="content__heading">Welcome To My Site</h1>  
     
      </div>
    
        
      <div class="container">
       
    <video id="my-video"  controls style="background-color:black">
    <source src="/upload/example.mp4" type="video/mp4">
    </video>
          </div>
     
        </form>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 11, 2018 1:32 AM

All replies

  • User-893317190 posted

    Hi Bluenose,

    If you don't mind , you could customize your video's size.

    Change the size of .container div to customize the full screen video.

    <head runat="server">
        <title></title>
         <style>
             .content {  
    ;  
    top: 10px;  
    z-index: 2;  
    margin: 0 auto;  
    max-width: 720px;  
    text-align: center;
    }
    
    
    .content__heading {
     
    color: #94e8e3;  
    font-size: 44px;
    }
    .date {    
    font: normal 14px 'trebuchet ms','News Cycle',Helvetica;    
    color: #fff;    
       
    ;    
    top: 90px;    
    right: 100px;
    
    
    }
    .container {
       
        width:900px;
        height:900px;
        ;
        
        top:100px;
    
        }
    
    .container video {
            width: 100%;
            height: 100%;
            display: block;
        }
    
         </style>
     
    </head>
    <body>
        <form id="form1" runat="server">
          
            
       <div class="content">
    
      <h1 class="content__heading">Welcome To My Site</h1>
     
      </div>
    
        
      <div class="container">
        <div class="date"> <asp:Label ID="LblDate" runat="server" CssClass="labelStyle" Text="Label">2018-12-10 10:00</asp:Label> </div>
    <video id="my-video"  controls style="background-color:black">
    <source src="/upload/example.mp4" type="video/mp4">
    </video>
          </div>
     
        </form>
    </body>
    </html>

    The result.

    Best regards,

    Ackerly Xu

    Monday, December 10, 2018 2:51 AM
  • User-1793215261 posted

    Thanks Ackerly Xu for your code.

    I have tried it. The date does appear, but it appears under the 'Welcome to my site' title (instead of in the top-right corner) and both that title and the date are scrollable. They should both be fixed. Instead of creating a separate container for the date, is it not possible to have it overlaying the video and fixed in the top-right corner?

    Thanks

    
    
    Monday, December 10, 2018 8:00 AM
  • User-893317190 posted

    Hi Bluenose,

    If you want the title and data both to be fixed, you could use .It will fix the element in a specified position.

    Below is my code.You could make changes based on it

     <style>
             .content {  
    ;  
    top: 10px;  
    z-index: 2;  
    margin: 0 auto;  
    max-width: 720px;  
    text-align: center;
    }
    
    
    .content__heading {
     
    color: #94e8e3;  
    font-size: 44px;
    }
    .labelStyle  {    
    font: normal 14px 'trebuchet ms','News Cycle',Helvetica;    
    color: black;    
    float: right;    
    ;    
    top: 15px;    
    right:50px;
    
    
    }
    .container {
       
        width:100%;
        height:900px;
        ;
        top:100px;
    
        }
    
    .container video {
            width: 100%;
            height: 100%;
            display: block;
        }
    
         </style>
        <script src="../Scripts/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
          
            <div class="date"> <asp:Label ID="LblDate" runat="server" CssClass="labelStyle" Text="Label">2018-12-10 10:00</asp:Label> </div>
       <div class="content">
    
      <h1 class="content__heading">Welcome To My Site</h1>  
     
      </div>
    
        
      <div class="container">
       
    <video id="my-video"  controls style="background-color:black">
    <source src="/upload/example.mp4" type="video/mp4">
    </video>
          </div>
     
        </form>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 11, 2018 1:32 AM
  • User-1793215261 posted

    That's great, Ackerlly, thanks.

    I am trying to make the white background strip along the top on which the date appears less deep.  Which property determines that, please?

    Tuesday, December 11, 2018 3:51 AM
  • User-893317190 posted

    Hi Bluenose,

    You could add a div and set its and put the label in it.

      <style>
             .content {  
    ;  
    top: 10px;  
    z-index: 2;  
    margin: 0 auto;  
    max-width: 720px;  
    text-align: center;
    }
    
    
    .content__heading {
     
    color: #94e8e3;  
    font-size: 44px;
    }
    .labelStyle  {    
    font: normal 14px 'trebuchet ms','News Cycle',Helvetica;    
    color: black;    
    float: right;    
    ;    
    top: 15px;    
    right:50px;
    
    
    }
    .date{
        background-color:antiquewhite;  
        ;
        width:100%;
        height:30px;
    }
    .container {
       
        width:100%;
        height:900px;
        ;
        
        top:100px;
    
        }
    
    .container video {
            width: 100%;
            height: 100%;
            display: block;
        }
    
         </style>
        <script src="../Scripts/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
          
            <div class="date"> <asp:Label ID="LblDate" runat="server" CssClass="labelStyle" Text="Label">2018-12-10 10:00</asp:Label> </div>
       <div class="content">
    
      <h1 class="content__heading">Welcome To My Site</h1>  
     
      </div>
    
        
      <div class="container">
       
    <video id="my-video"  controls style="background-color:black">
    <source src="/upload/example.mp4" type="video/mp4">
    </video>
          </div>
     
        </form>
    </body>
    </html>
    

    Best regards,

    Ackerly Xu

    Tuesday, December 11, 2018 5:25 AM
  • User-1793215261 posted

    Thanks, but that hasn't changed anything.

    Along the top of the screen, I have a white background which is about one and a half inches deep. The date appears aligned right against that white background. If possible, I would like to make that white background about half-an-inches deep, not one and a half inches.

    Thanks for your time.

    Tuesday, December 11, 2018 9:33 AM
  • User-1793215261 posted

    This is sorted out now, Ackerly Xu.

    Thanks for all your help.

    Regards

    Tuesday, December 11, 2018 4:25 PM