Ich möchte die Schrift Alien Encounters im Schriftzug des Headers haben. Diese Schrift ist aber auf vielen Systemen nicht erkennbar und mit den sicheren Schriften bin ich nicht glücklich. Wie füge ich nun ein Bild als Schriftzug im Header ein? Gäbe es noch eine andere Möglichkeit?
Soll dort hin:
Adresse Webseite: http://aufwachen.bplaced.net/
Code:
HTML
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="description" content="aufwachen.ch - Rezensionen und Bücher abseits des Mainstreams">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 212px;
background-color: #4e535d;
color: white;
text-align: center;
font-family: "Alien Encounters", "Arial Black", Verdana;
font-size: 1.55em;
}
header img {
margin-top:43px;
height: 78px;
width: 51px;
border-radius:50%;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left:-4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:100%;
width:100%;
padding:20px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #4e535d;
border-right: 2px solid #4e535d;
width: 82px;
text-align:center;
}
nav >ul> li:nth-child(2){
background: #1e1d24;
width: 174px;
text-align: center
}
nav >ul> li:nth-child(3){
background: #1e1d24;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 140px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #1e1d24;
border-right: 2px solid #4e535d;
width: 106px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
background: #4e535d;
margin-right:0px;
color:white;
padding:5px;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:30px 0 10px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf,#mitte_sechs{
min-height:100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:auto;
margin-bottom:10px;
background: #4e535d;
padding:0px;
line-height: 1.5em;
}
#mitte_eins{
color:white;
margin-top:-2.3em;
margin-left:-8em;
text-align: justify;
}
#mitte_eins img{
padding:0 0 10px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px;
}
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_sechs{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_sechs img{
float:right;
padding:10px 0 10px 10px;
}
span {
font-weight: 700;
}
footer{
background: #4e535d;
height:45px;
text-align:center;
color:white;
font-family: Arial, Verdana, sans-serif;
font-size: 70%;
line-height:1.8;
margin:0 10px 0 10px;
}
</style>
<body>
<header>
<img class="bildheader" src="R1.jpg" alt="Profil">
<h1>AUFWACHEN.ch</h1>
</header>
<nav>
<ul class="nav">
<li><a href="#index">Start</a></li>
<li><a href="buecherverzeichnis.html">Bücherverzeichnis</a></li>
<li><a href="rezensionen.html">Rezensionen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
</div>
<div id="mitte">
<div id="mitte_eins"><img src="StartBild12.jpg" alt="Bücher abseits des Mainstreams" style="width:100%; margin: auto; padding: 0px 0px 0px 75px;">
</div>
</div>
<div id="rechts">
</div>
</main>
<footer>
Erstellt mit HTML/CSS. Mit freundlicher Unterstützung by basti1012
</footer>
</body>
</html>