-1

I have a very basic web page using the below code. The title block is allowing scrolling which I do not want. I'm certain it will be my poor HTML code. Could anyone point out what is wrong causing the scroll? The code is actually being used inside tasker for android inside a scene web elemen . 

<!--full page style--!>
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
</body>

<style type="text/css">

.otto { 
text-align: center; 
font: bold 20px Roboto;
padding: 10px 0;     
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}

</style>

<h1 class="otto">Enter fuel fill up date</h1>

</head>
</html>
Valiceemo
  • 68
  • 9

3 Answers3

0

I just tidied it up! try this: everything is fine.

.otto {
  text-align: center;
  font: bold 20px Roboto;
  padding: 10px 0;
  background: #03a9f4;
  width: 100%;
  height: 100%;
  color: white;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)
}
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">
  <h1 class="otto">Enter fuel fill up date</h1> 
</body>
Super Hornet
  • 2,839
  • 5
  • 27
  • 55
0

There are some errors in the HTML that you would want to fix first. The browser will do its best to try to show the page anyway, but it was most likely causing the browser to work in quirks mode, which is basically to try to be compatible with the oldest browser imaginable.

  • You have a comment with the wrong ending delimiter --!> instead of -->
  • You have the body element inside the head element

If you fix that you end up with this code:

<html>
<head>

<style type="text/css">

.otto { 
text-align: center; 
font: bold 20px Roboto;
padding: 10px 0;     
background: #03a9f4;
width: 100%;
height: 100%;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}

</style>

</head>
<!--full page style-->
<body style="width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: block;">

<h1 class="otto">Enter fuel fill up date</h1>

</body>
</html>

You might want to put the style for the body tag in the style sheet also, but that is just to make the code nicer to work with.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

Caution : If you use height: 100%; or width: 100%; (and you should définitely avoid using this one, blocks are automatically taking all the horizontal space they can), don't use padding.

Padding and borders aren't part of specified width and height, so your h1 is actually 100% + 20px height.

Example with width : http://codepen.io/Manumanu/pen/ryhaC

This is why you get the scroll : You use height + padding + margin (h1 has automatic margins), so it's definitely taller than the view.

You should also apply your background to body, it has no sense on h1.

So, your code should be like this :

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   html, body {
    height: 100%;
    margin: 0;
    background: #03a9f4;
   }

   .otto {
    text-align: center;
    font: bold 20px Roboto;
    margin: 0;
    line-height: 1.5em;
    color: white;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
   }
  </style>
 </head>
 <body>
  <h1 class="otto">Enter fuell fill up date</h1>
 </body>
</html>

But now this point is set, what were you trying to do ? Viewing your initial code, didn't you try to vertically align your h1 in the view ?

If so, this is how you go for it :

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   html, body {
    height: 100%;
    margin: 0;
    background: #03a9f4;
    text-align: center;
   }

   .otto {
    font: bold 20px Roboto;
    margin: 0;
    line-height: 1.5em;
    color: white;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
   }

   .strut, .otto {
    display: inline-block;
    vertical-align: middle;
   }

   .strut {
     height: 100%;
   }
  </style>
 </head>
 <body>
  <div class="strut"></div><!--
  --><h1 class="otto">Enter fuell fill up date</h1>
 </body>
</html>

Tell me if explanations are needed about this.

EmmanuelBeziat
  • 664
  • 8
  • 23
  • Thank you. This gives me the exact results I'm wanting. An explanation would be greatbas I'm still very much learning. I'm not sure I understand the .strut part. And the charts? – Valiceemo Nov 09 '14 at 13:08
  • Okay. The key is the inline-block behavior with vertical-align : http://uploads.siteduzero.com/files/363001_364000/363431.png It allows an element to be aligned from its own center, refeering to its siblings elements. So if you can have an element (.strut) which makes 100% height, you can have a screen center : http://uploads.siteduzero.com/files/366001_367000/366329.png .strut is empty (0px wide) and invisible, but crates this formatting context. See the between .strut and .otto : It's to avoid white-space issue http://goo.gl/U06R6e – EmmanuelBeziat Nov 09 '14 at 13:26