Dear camerades. I´m working on a some responsive website and it to fit into the screen perfectly , so no scrolling will be required.
Two problems i have noticed.
1) The page still needs scrolling, despite all my correction tries so far.
2) There is still some margin b/w the top of the page and my (green-backgrounded) header which is visible as red background, which i couldnt erase so far.
What is the solution here ? Thx

I have posted the htmlfile and its css file

html file:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header><h1>Deine Pizzeria</h1>
    </header>
    <section id="underheadersection">
    <div id="underheadersectionPic1">
        <div class="flexslider">
  <ul class="slides">
    <li>
      <img alt="slideimage" src="picFold2/opt111.jpg" />
    </li>
    <li>
      <img alt="slideimage" src="picFold2/pic11.jpg" />
    </li>
    <li>
      <img alt="slideimage" src="picFold2/pic12.jpg" />
    </li>
    <li>
      <img alt="slideimage" src="picFold2/opt111.jpg" />
    </li>
  </ul>
</div>
</div>
    <div id="underheadersectionPic2">
        <div class="flexslider">
  <ul class="slides">
    <li>
      <img alt="slideimage" src="picFold/opt111.jpg" />
    </li>
    <li>
      <img alt="slideimage" src="picFold/pic11.jpg" />
    </li>
    <li>
      <img alt="slideimage" src="picFold/pic12.jpg" />
    </li>
    <li>
      <img alt="slideimage" src="picFold/opt111.jpg" />
    </li>
  </ul>
</div>
</div>
    </section>
    <section id="maincontainer"><div class="resize"></div>
        <section id="upleft" class="navilinks"><a href="index.html">Home</a>
        </section>
        <section id="upright" class="navilinks"><a href="speisemenue.html">Speisemenü</a> 
        </section>
        <section id="downleft" class="navilinks"><a href="kontakt.html">Kontakt</a>
        </section>
        <section id="downright" class="navilinks"><a href="anfahrt.html">Anfahrt</a>
        </section>
        <section id="centralcontainer">
             <div class="resize2">
                <img src="pizzapic2.png" width="2000" height="1131" border="0" usemap="#map" />
                <map name="map">
                <area shape="poly" coords="635,311,706,204,879,90,1029,67,1335,157,1447,284,1499,408,1513,564,1502,830,1405,958,1243,1073,1098,1112,906,1081,768,1032,616,859,540,705,531,650,533,561,606,359" href="pizzagenerator.html" />
                </map>
            </div>
        </section>

    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.rwdImageMaps.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <script>
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
        $('.flexslider').flexslider({
          animation: "slide"
        });
    });
    </script>
</body>
</html>

CSS file:

html,body {height:100%;margin:0em;background:red;}
header{position:relative;top:0em;height:10%;width:100%;background:green;border:black;text-align:center;margin:0em 0em 0em 0em;font-family:geneva;}
section{}
nav{}

#underheadersection{position:relative;height:30%;width:100%;background:silver;border:thick black;}
#underheadersectionPic1{max-height:100%;width:48%;margin-left:1%;margin-right:1%;float:left;background-size:contain;}
#underheadersectionPic2{max-height:100%;width:48%;margin-left:1%;margin-right:1%;float:left;background-size:contain;}
#maincontainer{position:relative;top:10%;left:0%;border:black;height:60%;width:100%;background:yellow;clear:both;} /*for position:relative;top:0%*/
#centralcontainer{}
#upleft{position:absolute;top:0%;left:0%;border:black;text-align:center;margin:1% 0% 0% 1%;}
#upright{position:absolute;top:0%;right:0%;border:black;text-align:center;margin:1% 1% 0% 0%; }
#downleft{position:absolute;bottom:0%;left:0%;border:black;text-align:center;margin:0% 0% 1% 1%; }
#downright{position:absolute;bottom:0%;right:0%;border:black;text-align:center;margin:0% 1% 1% 0%; }
.navilinks{font-size:130%;font-family:cursive;border:thick black;}
.navilinks a:link{color:blue;}
.navilinks a:hover{color:darkblue;}
.navilinks a:active{color:purple;}
.navilinks a:visited{color:purple;}
.resize img{max-width:100%; height:auto;}
.resize2 img{position:relative;top:auto;left:25%; width: 50%;height:auto;}
Member Avatar

diafol

WHen you say scrolling - you mean horizontal or vertical? Or both?

So if you're on a smartphone (portrait orientation), the entire page should fit into the viewport? Is that about right?

I dont want any scrolling , but vertical scrolling appears now

The website is not online now. I´m using xammp and have only viewed it on my laptop where it shows the undesired vertical scrolling

Member Avatar

diafol

You could probably shut down all scrolling with:

<style type="text/css">
body {
    overflow:hidden;
}
</style>

However the vertical scrollbar probably appears for a good reason, as the page probably extends "beyond the fold". Is this the case? If so, how should users scroll beyond? I realise that you "want" everything to appear within the fold, but sometimes windows open in an almost "letterbox" type mode. How would you expect the webpage to behave in this circumstance? Shrink the width to a tiny size, to accommodate the height? If not, then I assume that the vertical scrollbar is essential.

From a personal perspective, I have real issues with websites that hijack the default browser actions with regard to page scrollbars. They are my scrollbars after all.

I see your point. That very website is hopefully going to be my second one online. Since my first one had scrolling i just wanted something different. Also i liked the idea that potential customers would see whole content at once.
But from your explanation i slowy grasp that its de facto standard for webpages to have scrolling

I still have problem 2.

2) There is still some margin b/w the top of the page and my (green-backgrounded) header which is visible as red background, which i couldnt erase so far.

Member Avatar

diafol

That's just my view samson - you may find other members will have totally opposite ones.

The concern I'd have is if the content did extend beyond the fold (for whatever reason), how would they see the off-viewport content? PageDown, DownArrow? I can imagine that would be a bind for non-swipe mouseaholics.
The other is the website being the size of a big postage stamp if the height was adjusted to say 1/2 page. It would most likely be totally illegible due to font--size. Images if not responsive would look rather odd - and could cause "breakout" if held in tables. Quite a few issues - which may be general responsive issues, but will be exacerbated by locked scaling.

Problem 2 solved with: <header><h1 style="display:inline">Deine Pizzeria</h1>

the h1 tag in line 10, naturally block display, pushed itself beyond the header margin.

Member Avatar

diafol

Perhaps providing a screenshot or a link would be useful.