Ergebnis 1 bis 2 von 2

Thema: Flexbox - Bild als Schriftzug im Header einfügen

  1. #1
    Youngster
    Registriert seit
    06.05.2018
    Beiträge
    18
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard Flexbox - Bild als Schriftzug im Header einfügen

    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: Schriftzug3.jpg

    Adresse Webseite: http://aufwachen.bplaced.net/

    Code:

    HTML-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>

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    225
    Danke
    0
    Bekam 30 mal "Danke" in 30 Postings

    Standard AW: Flexbox - Bild als Schriftzug im Header einfügen

    du willst deine Überschrift "AUFWACHEN" jetzt mit ein Bild austauschen ? So das der Text jetzt als Bild da steht ?



    Ungefähr so https://codepen.io/basti1012/pen/ZVpwZg ?


    zur Info
    Code:
    #mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf,#mitte_sechs{
    fünf schreibt man im code so fuenf , also ohne ü Punkte
    Geändert von basti1012 (18.12.2018 um 17:36 Uhr)

Ähnliche Themen

  1. Bild in Bild einfügen, so das es ein Bild ergibt. Aber wie!
    Von kolaps im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 14.02.2013, 18:29
  2. Plone friert bei Bild einfügen oder Link einfügen ein
    Von Daniel79 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 4
    Letzter Beitrag: 20.06.2008, 12:51
  3. Bild in Forum Header einfügen
    Von Arno im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 17.07.2007, 18:25
  4. Schriftzug als bild
    Von im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 5
    Letzter Beitrag: 16.03.2007, 13:58
  5. header bild
    Von maximus im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.02.2007, 20:53

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •