R
R82
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
Ursprünglich wollte ich den Schriftzug im Header in Encounters haben. Da diese Schrift auf vielen Systemen nicht lesbar ist, nahm ich sichere Schriften hinzu. Diese verfälschen jedoch das Konzept.
Nun will ich den Schriftzug in Encounters an besagter Stelle als Bild einfügen. Wie mache ich das am besten? Habe den Schriftzug angehängt.
Adresse: http://aufwachen.bplaced.net/
Code:
<!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>
Nun will ich den Schriftzug in Encounters an besagter Stelle als Bild einfügen. Wie mache ich das am besten? Habe den Schriftzug angehängt.
Adresse: http://aufwachen.bplaced.net/
Code:
<!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>
Anhänge
