0
Ich mache eine einseitige Website und es ist im Moment in Ordnung, außer jetzt versuche ich, einen Titel auf jeder Seite und dann eine Fußzeile auf der unteren Seite. Mein Code, so wie er ist, hat einen Titel auf der oberen Seite, so dass es gut funktioniert, also dachte ich, wenn ich den Code im Grunde kopiere und einfüge, dann hat die nächste Seite einen Titel. Aber das ist nicht der Fall, der Titel ist auf der obersten Seite fixiert, also hat die oberste Seite im Grunde zwei Titel, die einander überlappen. Hoffentlich kann das Snippet veranschaulicht es besserEine Seite Website Titel und Fußzeilen
/* General Styles */
* {
margin: 0;
color: white;
}
a:link,
a:hover,
a:active,
a:visited {
text-decoration: none;
color: inherit;
}
* {
font-family: 'Lato', sans-serif;
}
html,
body {
min-height: 100%;
}
/* Header Styles */
header {
position: absolute;
width: 100%;
left: 0;
top: 0;
align-items: center;
height: 130px;
display: flex;
flex-direction: column;
}
header ul,
footer ul {
list-style-type: none;
}
header ul li,
footer ul li {
display: inline;
margin: 0 30px;
}
/* Wrapper Styles */
div.wrapper {
left: 0;
right: 0;
display: flex;
}
div.left,
div.right {
margin: 30px 30px;
width: 45%;
flex: 1;
background: rgba(255, 255, 255, 0.6);
text-align: center;
}
.top,
.mid,
.bot {
height: 100vh;
min-height: 800px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.top {
background-color: orange;
}
.mid {
background-color: blue;
}
.bot {
background-color: green;
}
/* Styling items inside each div */
div.left,
div.right {
width: 40%;
margin: 0 3%;
}
div.upperLeft,
div.lowerLeft,
div.upperRight,
div.lowerRight {
margin: 5% auto;
}<!DOCTYPE html>
<html>
<body>
<div class="top">
<header>
<h1>Example Title</h1>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="about.html">About</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
</ul>
</header>
<div class="wrapper">
<div class="left">
<h1>Left</h1>
<p>
Some text with no meaning
</p>
</div>
<div class="right">
<h1>Right</h1>
<p>Some text with no meaning</p>
</div>
</div>
</div>
<div class="mid">
<header>
<h1>Page two title</h1>
</header>
<div class="left">
<div class="upperLeft">
<h2>Upper Left</h2>
</div>
<div class="lowerLeft">
<h2>Lower Left</h2>
</div>
</div>
<div class="right">
<div class="upperRight">
<h2>Upper Right</h2>
</div>
<div class="lowerRight">
<h2>Lower Right</h2>
</div>
</div>
</div>
<div class="bot">
<h2>Bottom</h2>
</div>
</body>
</html>
Will akzeptiere die Antwort, wenn es die Zeit erlaubt. – oneman