2 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 6 days 14 min ago
Joined: 2011-10-11
Posts: 91
Points: 128

Hello

In my tags, I have

<body>
 
<div class="content">  
 
<h1 class="content__heading">Welcome To Whatever</h1>
 
</div>
 
Code to display a full screen video which works.
 
</body>

What I wish to do is position the date on my page - always in the same position (top-right). If I display the date with something like this:

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

immediately after 'body' tag, the date is not displayed at all anywhere on the screen. If I display it after 'content class' the date is displayed but imprisoned by 'content class'. The top and right positions relate not to the screen, but to the properties of 'content class':

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

How do I 'break out' of 'content class', please, in order to be able to display the date in the top-right of the screen?

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 18 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9716
Points: 3792

Use fixed position

Keep in mind that generally, fixed position is obnoxious. Everybody knows how to scroll back. And date? Do you really need to constantly remind your visitor of the date? I know it's popular to fix elements in place now, but that doesn't make it any better by blocking whatever ends up scrolling under it.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
 
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    p {
	font-size: 1em;
	margin-bottom: 0;
    }
 
    h1, h2, h3 {
	font-family: serif;
	margin-bottom: 0;
    }
 
    h1 {
	text-align: center;
	text-transform: capitalize;
    }  /* end boiler plate */
 
    p#date {
	position: fixed;
	right: 6em;
	text-align: right;
	/*some browsers have been aggressive about shrink-wrapping
	   their fixed content and some very slack---this helps*/
	top: 1em;
	/*better to use ems than px for
	   responsiveness and accessibility purposes*/
    }
 
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <h1>
      Using a fixed position date
    </h1>
 
    <p id="date">$DATE</p>
 
    <p>rest of content</p>
  </body>
</html>

Depending on the rest of your page, you may need to set z-index on one or more elements. Don't do it unless you have to.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 6 days 14 min ago
Joined: 2011-10-11
Posts: 91
Points: 128

Many thanks, Gary, and for

Many thanks, Gary, and for the comments in your code.

Regards