Einheitliches Erscheinungsbild / identisches Webseitenlayout
Hallo zusammen,
womöglich eine Kleinigkeit...? Ich jedoch komme nicht zur Lösung.
Möchte gerne das alle Seiten wie die Homesite aussieht beim Aufrufen. Wie stelle ich das am besten an? Also, alle Verlinkungen sollen optisch wie die Homesite aussehen.
Home / Über mich / Kontakt / Leistungen / Impressum sollen entsprechend gleich (flexible layout mit einer Breite 75%, Maximalbreite 50rem) aussehen.
Ich hänge zeige hier mal meine HTML und CSS Datei, bzw. einen LINK in HTML uebermich. uebermich soll nun demzufolge auch wie die Seite index.html aussehen. Was muss ich dazu tun?
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
iframe{
width:49%;
height:100vh;
}
</style>
<iframe srcdoc='<!DOCTYPE html>
<html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Startseite Basislayout - ATOM</title> <meta name="author" content="JT, Wochenendhaus, Vermietung, Urlaub, Ostsee"> <meta name="description" content="MMDE10y"> <meta name="keywords" content="ATOM, HTML, CSS">
<style>
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #274fc5;
font-weight: normal;
font-family: "Verdana";
font-size: 100%;
color: #333333;
min-height: 100vh;
}
#holder {
display: flex;
flex-direction: column;
width: 75%;
max-width: 50rem;
margin: 0px auto;
background: #d7b345 none repeat scroll 0% 0%;
}
header {
background-color: #2770ff;
min-height: 100px;
}
header h1 {
text-align: left;
padding: 5px 0px 10px 20px;
display: flex;
flex-direction: column;
}
.callout {
font-size: 130%;
font-family: "Georgia";
font-weight: bold;
padding: 1.5rem 0.8rem;
}
p {
font-size: 80%;
}
a {
color: #3716ff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: red;
}
.imgleft {
float: left;
margin-right: 3px;
height: 75px;
width: 42px;
}
.imgleft:hover {
float: left;
}
.imgright {
float: right;
margin-left: 3px;
height: 81px;
width: 107px;
}
main {
display: flex;
flex-direction: column;
min-height: 75px;
}
article {
font-family: "Verdana";
font-size: 100%;
padding: 1rem;
height: 50%;
}
nav {
height: 50px;
display: flex;
}
nav ul {
width: 100%;
display: flex;
}
nav ul li {
list-style: outside none none;
flex: 1 1 0%;
text-align: center;
}
li:hover {
color: red;
}
footer {
padding: 5px;
border-top: 1px solid #2770ff;
font-size: 80%;
height: 20px;
color: #3716ff;
}
@media only screen and ( max-width : 500px ) {
nav ul {
flex-direction: column;
height: 200px;
}
nav {
height: auto;
}
nav ul li {
height: 50px;
display: block;
}
.flexcont {
justify-content: space-around;
}
}
</style>
</head> <body> <div id="holder"> <header> <h1>Meine tolle Firma</h1> <nav> <ul class="flexcont"> <li><a href="index.html">Home</a></li>
<li><a href="uebermich.html">Über mich</a></li> <li><a href="leistungen.html">Leistungen</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="impressum.html">Impressum</a></li>
</ul> </nav> </header> <main> <article> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </article> <article> <p><img src="/image/photo.jpg" alt="Haus" class="imgleft" style="width: 86px; height: 74px;"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <br> <aside> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </aside> </article> </main> <footer> <p>©02.2020 JT - Meine tolle Firma</p> </footer> </div> </body>
</html>'></iframe>
<iframe srcdoc='<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Über mich</title>
<style>
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #274fc5;
font-weight: normal;
font-family: "Verdana";
font-size: 100%;
color: #333333;
min-height: 100vh;
}
#holder {
display: flex;
flex-direction: column;
width: 75%;
max-width: 50rem;
margin: 0px auto;
background: #d7b345 none repeat scroll 0% 0%;
}
header {
background-color: #2770ff;
min-height: 100px;
}
header h1 {
text-align: left;
padding: 5px 0px 10px 20px;
display: flex;
flex-direction: column;
}
.callout {
font-size: 130%;
font-family: "Georgia";
font-weight: bold;
padding: 1.5rem 0.8rem;
}
p {
font-size: 80%;
}
a {
color: #3716ff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: red;
}
.imgleft {
float: left;
margin-right: 3px;
height: 75px;
width: 42px;
}
.imgleft:hover {
float: left;
}
.imgright {
float: right;
margin-left: 3px;
height: 81px;
width: 107px;
}
main {
display: flex;
flex-direction: column;
min-height: 75px;
}
article {
font-family: "Verdana";
font-size: 100%;
padding: 1rem;
height: 50%;
}
nav {
height: 50px;
display: flex;
}
nav ul {
width: 100%;
display: flex;
}
nav ul li {
list-style: outside none none;
flex: 1 1 0%;
text-align: center;
}
li:hover {
color: red;
}
footer {
padding: 5px;
border-top: 1px solid #2770ff;
font-size: 80%;
height: 20px;
color: #3716ff;
}
@media only screen and ( max-width : 500px ) {
nav ul {
flex-direction: column;
height: 200px;
}
nav {
height: auto;
}
nav ul li {
height: 50px;
display: block;
}
.flexcont {
justify-content: space-around;
}
}
</style>
</head>
<body> <div id="holder">
<header>
<h3>Ich begrüße Sie auf meiner Website - Hausvermietungen OstSeeh</h3>
</header>
<main>
<p>
Wir sind seit über 25 Jahren Betreiber/Vermieter von Ferienhäusern an einem sehr schön gelegenen Ort an der Ostsee.<br>
Wir haben unser Grundstück damals auf über 13.000qm vergrößert und 12 Häuser darauf gebaut, welche Sie gerne von<br>
März bis Ende November anmieten können.<br>
<br>
Bei Interesse senden Sie uns über das Kontaktformular <a href="kontakt.html">Kontakt</a> Ihre Anfrage zu, wir beantworten diese gerne recht zeitnah.<br>
<br>
Es grüßt Sie<br>
Familie XY
</p>
<nav>
<ul>
<li><a href="index.html">zurück zur Startseite</a></li>
</ul>
</nav>
</main>
<footer> <p>©02.2020 JT - Meine tolle Firma</p> </footer> </div>
</body>
</html>'></iframe>