• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem beim Erstellen eines Footers mit Copyright, Impressum und Datenschutz

Michael53

Neues Mitglied
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.

HTML:
<!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-->

        <i class="fas fa-times-circle times"></i>
        </label>       
    </ul>
</div>

<!--HEADERBILD-ANFANG-->
<div class="content">
    <p>
<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-ENDE-->
    
    </p>
    </div>
</body>
</html>
CSS:
*{
    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;
    no-repeat: 10%;
    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-ENDE */
Hallo Leute.
 
Werbung:
Hey,

kann es sein, das dein htmlcode nicht vollständig ist??

Auch die Setzung von <p>, <center> usw. ist nicht eindeutig nachvollziehbar.

m.E. fehlt jedenfalls die grundlegende Semantik - header, nav, main, footer

Lg, AnSophie
 
Hey,

kann es sein, das dein htmlcode nicht vollständig ist??

Auch die Setzung von <p>, <center> usw. ist nicht eindeutig nachvollziehbar.

m.E. fehlt jedenfalls die grundlegende Semantik - header, nav, main, footer

Lg, AnSophie
Hallo.

Eigentlich müßte da alles passen und Fehlermeldung bekomme ich auch nicht.

LG Michael
 
Werbung:
hallo,

du könntest zusätzlich mal deinen code in der webmaker.app eingeben (geht auch ohne Registrierung). Dann siehst du auch was das Ergebnis deines Codes ist. Da wird zwar was ausgespuckt, aber ich kann mir schwer vorstellen, dass es so gewollt ist.

bzgl deiner Frage:
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.

Abgesehen davon, dass der code in der Form kaum zu bearbeiten ist (ich mag mich irren, aber ich kenn diese Art von Codezusammenstellung jedenfalls nicht - aber ich bin ja selbst noch eine Anfängerin....), ist es schwierig eine Footer zu basteln der wie deine navigation aussieht, weil du keine Navigation (bzw. lt. deinem css kein menu) in deinem html-code ausgewiesen hast.

Wofür soll denn der Code eigentlich sein? für eine Seite deiner Homepage? Wenn ja, wie kommst du denn drauf, dass das so gehört?

lg
 
Werbung:
hallo,

du könntest zusätzlich mal deinen code in der webmaker.app eingeben (geht auch ohne Registrierung). Dann siehst du auch was das Ergebnis deines Codes ist. Da wird zwar was ausgespuckt, aber ich kann mir schwer vorstellen, dass es so gewollt ist.

bzgl deiner Frage:

Hallo. Mit dem WebMaster kenn ich mich schon gar nicht aus. Schaut alles sehr cryptisch für mich aus. Nur das Komische an der Sache ist, ich habe alles mit dem DW geschrieben, aber der zeigt mir da keine Fehler an.
 
Werbung:
Ich weiß da einfach nicht, was ich da ändern soll.
Auweia!

Fehler Zeile 26, 27, 28
Da seht in deinem HTML-Code
HTML:
        </label>       
    </ul>
</div>
Wo werden die denn mal aufgemacht?

Zeile 33 The center element is obsolete Use CSS instead.
center ist veraltet, benutze statt dessen CSS

Zeile 64, No p element in scope but a p end tag seen.
Ein p-Element wird da geschlossen, obwohl es kein öffnedes p-Element gibt

Das kann doch nicht so schwer sein!
 
Fehler Zeile 26, 27, 28
Da seht in deinem HTML-Code
HTML:
</label>
</ul>
</div>
Wo werden die denn mal aufgemacht?
Das ist ja für das Menu, wenn er auf einem Handy usw. geöffnet wird.

Zeile 33 The center element is obsolete Use CSS instead.
center ist veraltet, benutze statt dessen CSS
Wie kann ich das denn dann im CSS lösen, wenn ich das "<center> im html wegmache?
Ein p-Element wird da geschlossen, obwohl es kein öffnedes p-Element gibt
Das mit dem schließenden <p> ist doch nach dem Text vorhanden?
 
Werbung:
Haha, ich kann mir vorstellen warum.
@Michael53 ,sag mal hast du dir eigentlich mal die Grundlagen von Html angekuckt ?
Was @m.scatello dir sagen wollte ist erstmal dein <p> Element . Jedes <p> was auf geht muß auch wieder geschlossen werden </p>, Jetzt kuck dir mal dein Code an und zähle alle offene <p> und geschlossenr </p>.

Wie du siehst passende die Anzahl nicht zusammen.Zu den Thema lerne bitte das
https://www.w3schools.com/html/html_blocks.asp

Dann dein
Code:
        </label>       
    </ul>
</div>
Dein Antwort dazu
Das ist ja für das Menu, wenn er auf einem Handy usw. geöffnet wird.
Hallo ?, wo ist den das Menü ? Wie kommt das Menü da rein ? Hat das Menü den die offene Tags dazu ? Wenn ja ,warum sind die schliesenden Tags dann in den Code ? Das macht nur Fehler.

Wie kann ich das denn dann im CSS lösen, wenn ich das "<center> im html wegmache?
Dazu lese das
https://www.w3schools.com/css/css_align.asp

Jetzt mußt du die Fehler alle beheben. Wenn die weg sind und du auch verstehst warum die Fehler da nix zu suchen haben dann kann man weiter machen und dein Hauptproblem lösen wozu du das Thema auf gemacht hast.

Die ganzen Fehler den der Code noch hat wirken sich natürlich auch bis zu Footer runter. So wie der Code jetzt ist kann man das wahrscheinlich mur mit FUSCH lösen.

Meld dich wenn du es geschafft hast , dann kommt @m.scatello vieleicht auch wieder zurück und hilf.
 
Zurück
Oben