Mein Kollege und ich haben von unserem Lehrer die Domain http://www.geh-dahin.de/ bekommen und sollen die Website nun für den Nutzen auf mobile Endgeräte vorbereiten. Doch obwohl wir fast nur mit Prozenten in der CSS arbeiten passt sich die Seite einfach nicht richtig an. Gibt es vielleicht irgendeinen Trick mit dem unser Problem ganz lleicht beheben könnte?
HTML der Startseite
HTML
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<title>Geh-Dahin,Reiseberichte und mehr!</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://lesarten.com/pw/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '7']);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Piwik Code -->
</head>
<body>
<div id="container">
<header>
<h1>Geh-Dahin</h1>
<h2>Deine Seite für Reiseberichte</h2>
<nav>
<ul>
<li><a href="index.html">Startseite<a/></li>
<li><a href="Berlin.html">Reiseberichte<a/></li>
<li><a href="verfassen.html">Reisebericht verfassen<a/></li>
<li><a href="impressum.html">Impressum<a/></li>
</ul>
</nav>
</header>
<div id="container1">
<h3>Unsere Empfehlungen für Sie!</h3>
<p>Wie wäre es mit einer Reise nach Berlin?<br>
Dann schauen Sie doch einfach mal bei unseren Reiseberichten rein, dort haben wir genau das Richtige für Sie<br>
und noch viele andere interessante Berichte!</p>
<section class="links">
<a href="Berlin.html"><img src ="images/bbTor.jpg" width=450px; height=350px; align="center"/></a>
</section>
</div>
<div id="container2">
<p>Oder eine Reise nach Manila,<br>
auch dafür haben wir einen passenden Reisebericht für Sie, mit vielen interessanten Informationen!</p>
<section class="rechts">
<a href="Manila.html"><img src ="images/manila_stadt.jpg" width=450px; height=350px; align="center"/></a>
</section>
</div>
</div>
<footer>
<div id="nav2">
<ul>
<li><a href="index.html">Startseite<a/></li>
<li><a href="index.html">Nach Oben<a/></li>
<li><a href="index.html">Über uns<a/></li>
<li><a href="index.html">Jobs<a/></li>
</ul>
</div>
</footer>
</body>
</html>CSS der Startseite
Code
body {background: -moz-linear-gradient(-45deg, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
width: 70%; height: 85%;
margin: auto;
padding: 2%;
left:10px;top:50px;
text-align:center;
font-size:16px;}
header {background: #E4FAD9;
width: 65%; height: 150px;
margin: auto;
padding: 1%;
font-family:Georgia;
border-radius: 20px; border:3px solid green;}
nav li {list-style-type:none;
color: black;
float:left;
margin-left:10%;
font-size:17px;
text-decoration:none;
font-family:Georgia;}
nav li a:hover {color: red;}
#container1 {
width: 35%; height: 200px;
margin-top: 10%;
padding: 1%;
color: white;
text-align: left;
font-family:Georgia;}
#container2 {
width: 35%; height: 100px;
margin-top: 30%;
padding: 1%;
color: white;
text-align: left;
font-family:Georgia;
}
section{
float: left;
margin: 5px;
border-radius: 20px; border:3px solid green;
overflow: hidden;}
footer {background: #E4FAD9;
width: 65%; height: 100px;
margin-top: 40%;
margin-left: 17%;
padding: 1%;
font-family:Georgia;
border-radius: 20px; border:3px solid green;}
#nav2 li {list-style-type:none;
color: black;
float:left;
margin-left:13%;
font-size:17px;
text-decoration:none;
font-family:Georgia;}
#nav2 li a:hover {color: red;}