Hallo,
irgendwie trete ich auf der Stelle. Ich sehe mein Fehler einfach nicht. Das Ziel ist, das der Text 1 und der Text 2 nicht am Rand klebt, sowie der Footer den Abschluss bilden soll. Wer kann mir einen Tipp geben.
Danke für Eure Zeit.
Tom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Das ist ein Test </title>
</head>
<style type="text/css">
html {
background-image:url(http://www.ceno.com/privat/html/images/bg.png);
background-repeat: repeat-x;
font-family: 'Open Sans Condensed', sans-serif;
}
.logo {
margin-top: -80px;
}
h1 {
margin-left: 35px;
text-shadow: 2px 2px 4px grey;
}
#navi {
height: 24px;
text-align: right;
padding-right: 220px;
}
#navi li {
display: inline;
}
#navi a {
display: inline-block;
background-color:inherit;
color: #fff;
line-height: 29px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 10px;
font-family: Arial;
}
#navi a:hover {
background-color: #60a151;
}
.aktuell {
background-color: #60a151; /*nur der Link 01 */
}
#wrapper {
font-size: 20px;
background-color: #F8F8F8;
background-image:url(http://www.ceno.com/privat/html/images/bg-wasser.jpg);
background-repeat: no-repeat;
background-size: 100% 100%; /*Hintergrundbild auf ganzer Fläche */
border-radius: 5px;
box-shadow: 2px 2px 4px grey;
width: 940px;
height: 1060px;
margin-top: 119px;
margin-left: auto;
margin-right: auto;
}
.wasserbild {
border-style: solid;
border-width: 10px;
border-color: white;
border-radius: 3px;
box-shadow: 2px 2px 4px grey;
margin-left: 35px;
float: left;
}
.fliege {
border-style: solid;
border-width: 10px;
border-color: grey;
border-radius: 3px;
box-shadow: 2px 2px 4px grey;
margin-left: 83px;
}
p.1tertext {
margin-right: 20px;
}
p.2tertext {
clear: both;
margin-right: 20px;
}
footer {
background-image:url(http://www.ceno.com/privat/html/images/footer.png);
background-repeat: repeat-x;
}
footer a {
display: inline-block;
background-color:inherit;
color: #fff;
text-shadow: 1px 1px 2px grey;
line-height: 59px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 10px;
}
footer li {
display: inline;
}
.footerliste {
margin-left: 180px;
margin-right: auto;
margin-bottom: 20px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>
<nav id="navi">
<ul>
<li class="aktuell"><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li><a href="#">Link 04</a></li>
<li><a href="#">Link 05</a></li>
<li><a href="#">Link 06</a></li>
</ul>
</nav>
<div id="wrapper">
<img class="logo" src="http://www.ceno.com/privat/html/images/logo.png" alt="jetzt wird es nass" title="wo sind die Handtücher">
<h1>Hier läuft das Wasser </h1>
<p class="1tertext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class="wasserbild" src="http://www.ceno.com/privat/html/images/wasser.gif" width="336" height="600">
<img class="fliege" src="http://www.ceno.com/privat/html/images/fliege.jpg">
<p class="2tertext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<ul>
<li class="footerliste"><a href="#">Info</a></li>
<li><a href="#">Link 08</a></li>
<li><a href="#">Link 09</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
</ul>
</div>
</footer>
</body>
</html>
irgendwie trete ich auf der Stelle. Ich sehe mein Fehler einfach nicht. Das Ziel ist, das der Text 1 und der Text 2 nicht am Rand klebt, sowie der Footer den Abschluss bilden soll. Wer kann mir einen Tipp geben.
Danke für Eure Zeit.
Tom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Das ist ein Test </title>
</head>
<style type="text/css">
html {
background-image:url(http://www.ceno.com/privat/html/images/bg.png);
background-repeat: repeat-x;
font-family: 'Open Sans Condensed', sans-serif;
}
.logo {
margin-top: -80px;
}
h1 {
margin-left: 35px;
text-shadow: 2px 2px 4px grey;
}
#navi {
height: 24px;
text-align: right;
padding-right: 220px;
}
#navi li {
display: inline;
}
#navi a {
display: inline-block;
background-color:inherit;
color: #fff;
line-height: 29px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 10px;
font-family: Arial;
}
#navi a:hover {
background-color: #60a151;
}
.aktuell {
background-color: #60a151; /*nur der Link 01 */
}
#wrapper {
font-size: 20px;
background-color: #F8F8F8;
background-image:url(http://www.ceno.com/privat/html/images/bg-wasser.jpg);
background-repeat: no-repeat;
background-size: 100% 100%; /*Hintergrundbild auf ganzer Fläche */
border-radius: 5px;
box-shadow: 2px 2px 4px grey;
width: 940px;
height: 1060px;
margin-top: 119px;
margin-left: auto;
margin-right: auto;
}
.wasserbild {
border-style: solid;
border-width: 10px;
border-color: white;
border-radius: 3px;
box-shadow: 2px 2px 4px grey;
margin-left: 35px;
float: left;
}
.fliege {
border-style: solid;
border-width: 10px;
border-color: grey;
border-radius: 3px;
box-shadow: 2px 2px 4px grey;
margin-left: 83px;
}
p.1tertext {
margin-right: 20px;
}
p.2tertext {
clear: both;
margin-right: 20px;
}
footer {
background-image:url(http://www.ceno.com/privat/html/images/footer.png);
background-repeat: repeat-x;
}
footer a {
display: inline-block;
background-color:inherit;
color: #fff;
text-shadow: 1px 1px 2px grey;
line-height: 59px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 10px;
}
footer li {
display: inline;
}
.footerliste {
margin-left: 180px;
margin-right: auto;
margin-bottom: 20px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>
<nav id="navi">
<ul>
<li class="aktuell"><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li><a href="#">Link 04</a></li>
<li><a href="#">Link 05</a></li>
<li><a href="#">Link 06</a></li>
</ul>
</nav>
<div id="wrapper">
<img class="logo" src="http://www.ceno.com/privat/html/images/logo.png" alt="jetzt wird es nass" title="wo sind die Handtücher">
<h1>Hier läuft das Wasser </h1>
<p class="1tertext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class="wasserbild" src="http://www.ceno.com/privat/html/images/wasser.gif" width="336" height="600">
<img class="fliege" src="http://www.ceno.com/privat/html/images/fliege.jpg">
<p class="2tertext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<ul>
<li class="footerliste"><a href="#">Info</a></li>
<li><a href="#">Link 08</a></li>
<li><a href="#">Link 09</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
</ul>
</div>
</footer>
</body>
</html>