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;}
