Remove From My Forums

Positioning date - top right-hand

Question
0

Sign in to vote
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

0

Sign in to vote
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

0

Sign in to vote

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

0

Sign in to vote

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
0

Sign in to vote

User-1793215261 posted

This is sorted out now, Ackerly Xu.

Thanks for all your help.

Regards

Tuesday, December 11, 2018 4:25 PM

Answered by:

Positioning date - top right-hand

Question

Answers

All replies