nicht angemeldet
Jetzt hab ich schon alle möglichen Varianten des Footers probiert zum erstellen. Nichts hat so funktioniert wie ich es wollte. Kurz erklärt. Der Footer soll den gleichen Background wie die Navigation haben, über die ganze Breite gehen, das Copyright, Impressum und den Datenschutz beinhalten. ich dachte an Copy links und die anderen zwei rechts und beide mit der gleichen Schriftfarbe. Ich hoffe mir kann da wer helfen. Hier sind meine Codes.
<!DOCTYPE html>
<html lang="de">
<head>
<title>BIRD VIEW Foto & Film</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="author" content="Michael Dorner">
<link rel="stylesheet" media="screen" href="css/reset.css">
<link rel="stylesheet" media="screen" href="css/common.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon/2137Logo-für-Luftaufnahmen-neu_1.ico">
<script src="js/jquery.js"></script>
<script src="js/gallery.js"></script>
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="css/all.css">
</head>
<body>
<!--TOPNAVIGATION-ANFANG-->
<div class="header">
<h2 class="logo">BIRD VIEW || Luftaufnahmen Foto & Film</h2>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-ellipsis-h"></i>
</label>
<ul class="menu">
<a href="index.html">Home</a>
<a href="#">Über mich</a>
<a href="fotos.html">Fotos</a>
<a href="#">Panoramen</a>
<a href="#">Videos</a>
<a href="#">Kontakt</a>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times-circle times"></i>
</label>
</ul>
</div>
<!--HEADERBILD-ANFANG-->
<div class="content">
<center>
<img src="images/7.png" alt="Bild">
</center>
<!--HEADERBILD-ENDE-->
<p>
Die Standardpassage von Lorem Ipsum, die seit dem 15. Jahrhundert verwendet wird
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore et dolore magna aliqua velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Abschnitt 1.10.32 von "de Finibus Bonorum et Malorum", verfasst von Cicero im Jahr 45 v
"Ist der Fehler aufgetreten, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler aufgetreten, wurde der Fehler festgestellt, wurde der Fehler aufgetreten, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler aufgetreten, wurde der Fehler aufgetreten, wurde der Fehler aufgetreten Die Konsequenz ist, dass die Anzahl der Abläufe und die Anzahl der Abläufe, die Anzahl der Abläufe, die Anzahl der Abläufe und die Anzahl der Abläufe, die Anzahl der Abläufe und die Anzahl der Abläufe in der letzten Minute geändert werden müssen Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? "
1914 Übersetzung von H. Rackham
außer um einen Vorteil daraus zu ziehen? Aber wer hat das Recht, einen Mann zu bemängeln, der sich für ein Vergnügen entscheidet, das keine ärgerlichen Konsequenzen hat, oder der einen Schmerz vermeidet, der kein daraus resultierendes Vergnügen hervorruft? "
Abschnitt 1.10.33 von "de Finibus Bonorum et Malorum", verfasst von Cicero im Jahr 45 v
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
1914 Übersetzung von H. Rackham
"Auf der anderen Seite prangern wir mit aufrichtiger Empörung an und lehnen Männer ab, die durch die Reize des Vergnügens des Augenblicks so verführt und demoralisiert werden, dass sie den Schmerz und die Schwierigkeiten, die dazu führen werden, nicht vorhersehen können Die Schuld liegt bei denen, die ihre Pflicht durch Willensschwäche nicht erfüllen, was das gleiche ist wie das Zurückschrecken vor Mühe und Schmerz. Diese Fälle sind ganz einfach und leicht zu unterscheiden. In einer freien Stunde, wenn unsere Entscheidungsgewalt ungehindert ist und Wenn uns nichts daran hindert, das zu tun, was wir am liebsten tun, ist jedes Vergnügen zu begrüßen und jeder Schmerz zu vermeiden, aber unter bestimmten Umständen und aufgrund von Pflichten oder Pflichten des Geschäfts wird es häufig vorkommen, dass Vergnügen abgelehnt werden müssen und Ärgernisse akzeptiert.Der Weise hält daher in diesen Dingen immer an diesem Selektionsprinzip fest: Er lehnt Vergnügen ab, um andere größere Vergnügen zu sichern, oder er erträgt Schmerzen, um schlimmere Schmerzen zu vermeiden. "
</p>
<!--TOPNAVIGATION-ENDE-->
<!--FOOTER-ANFANG-->
<footer>
<ul>
<li>© 2019 Michael Dorner</li>
<li>Datenschutz</li>
<li>Impressum</li>
</ul>
</footer>
<!--FOOTER-ENDE-->
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.header{
height: 100px;
background-color: #2c3e50;
border-radius: 20px;
padding: 0 20px;
color: #fff;
}
.logo{
line-height: 100px;
float: left;
}
.menu{
float: right;
line-height: 100px;
}
.menu a{
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn, .hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
color: #2980b9;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.content{
padding: 0 20px;
}
.content img{
width: 100%;
max-width: 700px;
margin: 20px 0;
}
.content p{
text-align: justify;
}
@media screen and (max-width:845px){
.show-menu-btn, .hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background-color: #2c3e50;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
}
div#frame {width:100%; min-width:320px; margin:0 auto;}
@media only screen and (min-width:1200px)
{
div#frame {width:1200px;}
}
/* GALLERY */
div.gallery {
width:100%;
min-width:320px;
float:left;
background:#708090;
margin-bottom: 20px;}
div.gallery > div{
width:50%;
margin:0 0 1px;
float:left; background:#363636;
border-right:1px solid #708090;
box-sizing:border-box;
}
div.gallery > div > h1{
color:#ffffff;
font:0.8em/30px arial, sans-serif;
text-align:center;
cursor: default;
}
div.gallery > div > a > img{
max-width:160px;
height:120px;
margin:0 auto 20px;
padding:0 5px;
box-sizing:border-box;
display:block;
}
div.gallery > div.eol{
border:0;
}
div#background{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:#000000;
cursor:default;
z-index:9999;
}
div#background > div.content{
width:inherit;
height:50px;
position:absolute;
color:#ffffff;
background:#1d1d1d;
font:0.9em/50px arial, sans-serif;
text-align:center;
box-sizing:border-box;
z-index:10000;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
div#background > div.content.top{
top:0;
border-bottom:1px solid #708090;
}
div#background > div.content.bottom{
bottom:0;
border-top:1px solid #708090;
}
div#background > div.close{
width:50px;
height:50px;
position:absolute;
top:0; right:0;
background: url("images/close.gif");
cursor: default;
z-index:10000;
}
div#background > div.loading{
width:50px;
height:50px;
position:fixed;
background: transparent;
z-index:10000;
}
div#background > div.next, div#background > div.previous{
width:50%;
height:100%;
position:absolute;
top:0; display:block;
cursor:pointer;
}
div#background > div.next{
right:0;
background: url("images/next.gif")
no-repeat 100% 50%;
}
div#background > div.previous{
left:0;
background: url("images/previous.gif")
no-repeat 0 50%;
}
div#foreground{
position:fixed;
border:1px solid #708090;
box-sizing:border-box;
overflow:hidden;
display:none;
cursor:default;
z-index:10000;
}
div#foreground > div.image{
position:absolute;
top:0; left:0;
}
@media only screen and (min-width:768px)
{
div.gallery > div {width:33.33%;}
div.gallery > div > h1 {font-size:0.9em;}
div#background > div.content {font-size:1.1em;}
}
@media only screen and (min-width:1024px)
{
div.gallery > div {width:25%;}
div.gallery > div > h1 {font-size:1em;}
div#background > div.content {font-size:1.3em;}
}
@media only screen and (min-width:1200px)
{
div.gallery > div {width:20%;}
div.gallery > div > h1 {font-size:1.1em;}
div#background > div.content {font-size:1.5em;}
}
/* FOOTER */
footer{
height: 50px;
display: block;
background: #2c3e50;
text-align: center;
color: #fff;
margin-top: 20px;
border-radius: 20px;
}
footer ul{
display: block;
width: 100%;
max-width: 1080px;
text-align: center;
margin: 0px auto;
}
footer ul li{
display: inline;
font-size: 1.2em;
line-height: 2.8em;
font-weight: bold;
padding: 0em 0.625em 0em 0.625em;
}
footer ul li a{
color: #E2DBDB;
}
/* FOOTER-ENDE */
Henry
Rolf B
Matthias Apsel
Der Martin
Gunnar Bittersmann
MudGuard