Css für Header, Abschnitt und Fußzeilen Anordnung

Ich habe einfachen HTML-Code:Css für Header, Abschnitt und Fußzeilen Anordnung

<header></header> 
<main> 
<nav></nav> 
<section></section> 
</main> 
<footer></footer>

und ich brauche CSS den Header an der Spitze zu haben, die Fußzeile am unteren Rande, die nav und den Abschnitt zwischen dem Kopf und Fußzeile, mit dem Nav auf der linken Seite und dem Abschnitt auf der rechten Seite.

Als Beispiel: https://fr.wikipedia.org/

Aber in dem Fall, in dem der Hauptinhalt kleiner ist als die Bildschirmgröße ist, muß ich die Fußzeile auf der Unterseite des Bildschirms befestigt haben.

Meine CSS ist so etwas wie das:

header, nav, section, footer { 
     padding: 1px 0; 
    } 

    header { 
     background-color: lightcoral; 
     text-align: center; 
     background: #FF9900 url("/Content/Images/Etoile.png") 5px center no-repeat; 
     background-size: 100px; 
    } 

    main { 
     margin: auto; 
    } 

    nav { 
     float: left; 
     width: 15%; 
     background-color: lightsalmon; 
    } 

    section { 
     float : right; 
     width : 85%; 
     background-color: lightblue; 
    } 

    footer { 
     background-color: lightgreen; 
     text-align: center; 
     clear: both; 
    }

Können Sie mir bitte helfen?

Quelle

2017-06-06 Matthieu Veron

nur Google verwenden - https://css-tricks.com/couple-takes-sticky-footer/ –

können Sie Ihren aktuellen CSS schreiben Sie Probleme haben, sich mit dem Thema zu demonstrieren ? Siehe auch [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (https://stackoverflow.com/help/mcve) – Nope

header, nav, section, footer { padding: 1px 0;} Kopfzeile { Hintergrundfarbe: lightcoral; Textausrichtung: Mitte; Hintergrund: # FF9900 URL ("/ Inhalt/Bilder/Etoile.png") 5px Center No-Repeat; background-size: 100px;} Haupt { margin: auto;} nav { float: links; Breite: 15%; background-color: lightsalmon;} Abschnitt { float: right; Breite: 85%; Hintergrundfarbe: hellblau;} Fußzeile { Hintergrundfarbe: hellgrün; Textausrichtung: Mitte; clear: beide;} Sorry, ich weiß nicht, wie man den Code –

Sie versuchen, ein einfaches Seitenlayout zu erstellen. Sie können this resource für allgemeine Informationen darüber, wie dies zu tun ist, da es mehrere Möglichkeiten gibt.

Ein Beispiel aus der obigen Ressource verwendet die Eigenschaft CSS float. Es sollte Ihnen genug geben, um mit Ihrer Lösung zu beginnen.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
    
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 

 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright &copy; W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

Quelle

2017-06-06 15:13:50 Libi

Vielen Dank für Ihre Antwort. Aber ich brauche die Fußzeile am unteren Rand der Seite, wenn der Inhalt des Artikels kleiner als die Größe der Seite ist. –

Sie können "position: fixed; width: 100%; bottom: 0;" hinzufügen. zur Fußzeilenklasse. Meinst Du das? – Libi

Im Moment habe ich das: http://nsa38.casimages.com/img/2017/06/06/170606055428193894.png Und ich möchte dies: http://nsa38.casimages.com/img/ 2017/06/06/170606055604140643.png –

Css für Header, Abschnitt und Fußzeilen Anordnung

Antwort

Verwandte Themen