Ergebnis 1 bis 7 von 7

Thema: Schriftgröße will sich nicht responsive verhalten

  1. #1
    HTML Newbie
    Registriert seit
    18.12.2015
    Ort
    Wien
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Schriftgröße will sich nicht responsive verhalten

    Guten Abend!

    Leider will und will sich die Schriftgröße nicht responsive verhalten.
    Bevor ich weiter mache, muss ich dieses Problem im Griff haben.

    Es geht einfach um den Text neben dem Bild.
    id dafür ist home2, verpackt im div home0

    Wo liegt der Fehler??
    DANKE!

    HTML-Code:
    <!doctype html>
    <html>
    <head>
    <link href="https://fonts.googleapis.com/css?family=Orbitron:500" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <title>xxx</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    
    <body id="s_home">
    
        <div id="laender">                                        <!-- Länder-Auswahl, links oben -->
            <a href="index.html">DE</a>
            <a href="index_en.html">EN</a>
        </div>
        
         <div id="navigation">
            <ul id="nav">
                <li id="s1"><a href="s_home.html">Home</a></li>
                <li id="s2"><a href="s_person.html">Über mich</a></li>
                <li id="s3"><a href="s_vita.html">Vita</a></li>
                <li id="s4"><a href="s_showreel.html">Showreel</a></li>
                <li id="s5"><a href="s_galerie.html">Galerie</a></li>
                <li id="s6"><a href="s_news.html">News</a></li>
                <li id="s7"><a href="s_kontakt.html">Kontakt</a></li>            
            </ul>
        </div>
    
        <div id="home0">
            <div id="home1"><img src="fotos/schau_0.jpg" alt=""/></div>
            <div id="home2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
             natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
             quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
             ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum 
              semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem 
              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean </div>
        </div>
        
        <div id="loeschen"></div>
    
    </body>
    </html>
    Code:
    /* CSS Document */
    @import url("normalize.css");
    @import url("font-awesome.min.css");
    
    * {
        margin: 0;
        padding: 0;
    }
    
    html {
        font-size: 100%;
        font-family: Arial;
    }
    
                                                /* Die Hintergrundfarbe. Jede Seite hat eigene id; kann daher extra angesteuert werden */
    #start, #s_home, #s_person, #s_vita, #s_showreel, #s_galerie, #s_news, #s_kontakt {
        background-color: #871416;
        color: white;
    }
    
    a {                                            /* Allgemein alle Links ohne Unterstrich und alle weiß */
        text-decoration: none;    
        color: white;
    }
    
    #laender {                                    /* Die Sprachauswahl links oben platziert */
        background-color: black;                /* Wird aus dem Elementenfluss mit p:abs rausgenommen, verbleibt daher in der Menüzeile */
        position: absolute; 
        top: 0px;                                
        left: 0px;
    }
    
    #name {                                        /* div für den Namen */
        margin-top: 10rem;
    /*    background-color: yellow;  */
    }
    
    #name p {                                    /* Text steht in einem p-tag */
        font-size: 3rem;
        font-family: 'Orbitron', sans-serif;
        text-align: center;
    }
    
    #jobs {                                        /* div für die Jobarten */
        width: 13rem;
    /*    background-color: red;  */
        margin: 8rem auto 0 auto;
    }
    
    #jobs p {                                    /* Dazugehöriger Text steht in einem p-tag */
        font-size: 1.5rem;
        font-family: 'Orbitron', sans-serif;
    }
    
    #navigation {                                /* Navigation steht als Erstes ganz oben, auf jeder Seite gleich */
        background-color: black;      
        width: 100%;
    }
    
    #nav {
        text-align: center;                 /* Die Menüleiste wird zentriert */
    }
    
    #nav li {
        list-style-type: none;              /* Entfernen der Punkte der Listenelemente */
        width: 8rem;                        /* Breite der Listenelemente */
        padding: 0px 5px 0px 5px; 
        text-align: center;                 /* Text wird im Block zentriert */
        display: inline-block;              /* Damit sich die Menüs wie Inline-Elemente verhalten können, für horizontale Menüs */
    }
    
    #nav li a {
        font-size: 1.2rem;
        color: #FFFFFF;
        text-decoration: none;              /* Unterstrich der Links wird weggenommen */
        font-weight: bold;                  /* In Fettschrift */
        display: block;                     /* Damit nicht nur der Text anklickbar ist, sondern die ganze Fläche = Schaltfläche */
    }
    
    #nav li:hover {
        background-color: #B85456;
    }
    
                                            /* Der Kern der Seite, beeinhalten p-img-tag und p-Absatz-tag */
    #home0 {                                    /* Den Kern zentriere ich auf 60% der Fensterbreite */
        width: 60%;                            
        margin: 5rem auto 0 auto;
    }
    
    #home1 {
        width: 35%;                            /* Dieser Kern wird mit 35% fürs Bild links reserviert */
        padding-right: 5%;                    /* Abstand zwischen Bild und umfließenden Text */
        float: left;
    }
    
    #home1 img {                            /* Das Bild umfasst den kompletten Platz des Platzhalters */
        width: 100%;
        height: auto;    
    }
    
    #home2 {
        font-size: 1.0rem;
    }
    
    
    #loeschen {
        clear: both;    
    }
    
    
    
    
    /* Damit die aktuelle Seite extra gekennzeichnet ist */
    
                                               /* Aktuelle Seite wird extra gekennzeichnet */
    nav a:hover,                            /* body-id und die dazugehörige id im li-tag im nav-tag */
    #s_home #s1 a,
    #s_person #s2 a,
    #s_vita #s3 a,
    #s_showreel #s4 a,
    #s_galerie #s5 a,
    #s_news #s6 a,
    #s_kontakt #s7 a {
        background-color: #B85456;
    }
    
                                            /* Aktuelle Seite wird extra gekennzeichnet */
    nav a:hover,                            /* body-id und die dazugehörige id im li-tag im nav-tag */
    #d_home #d1 a,
    #d_person #d2 a,
    #d_vita #d3 a,
    #d_auszuege #d4 a,
    #d_news #d5 a,
    #d_kontakt #d6 a {
        background-color: #B85456;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Schriftgröße will sich nicht responsive verhalten

    Hallo,

    wie soll die Schrift sich denn verhalten? "nicht responsive" sagt nicht aus was du erreichen möchtest.

    Gruss

    MrMurphy

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    18.12.2015
    Ort
    Wien
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schriftgröße will sich nicht responsive verhalten

    Wenn ich das Browserfenster verkleire, sollte sich die Schriftgröße mitverändern, also kleiner werden. Beim Bild klappt es super, aber der Text will nicht.

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Schriftgröße will sich nicht responsive verhalten

    Hallo

    das hatte ich befürchtet.

    Responsive Design soll die Seiten benutzerfreundlicher machen.

    Bei kleinen Bildschirmen muss dazu die Schrift deshalb eher etwas größer werden. Du solltest also noch mal in dich gehen bevor du dein benutzerunfreundliches Vorhaben umsetzt.

    Technisch gibt es zwei Möglichkeiten, die auch kombiniert werden können:

    1. Die Schriftgröße wird in vw angegeben.

    2. Die Schriftgröße wird über MediaQueries beeinflußt.

    Gruss

    MrMurphy

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    18.12.2015
    Ort
    Wien
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schriftgröße will sich nicht responsive verhalten

    Ich hab eine kleine Prüfung bald. Und uns wurde gesagt wir sollen es mit rem machen.
    Aber so im Grunde genommen: Warum verkleinert sich meine Schrift trotzdem nicht?

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Schriftgröße will sich nicht responsive verhalten

    Hallo

    Die Einheit rem ist auch in Ordnung und für Schriftgrößen am sinnvollsten.

    Dann kannst du die Schriftgröße mit den MediaQueries ändern.

    Wenn die Schriftgröße im div#home2 bei 800px-Fensterbreite kleiner werden soll kannst du am Ende der CSS-Datei folgendes einfügen:

    Code:
    @media only screen and (max-width: 800px) {
       #home2 {
          font-size: 0.7rem;
       }
    }
    Und uns wurde gesagt ...
    Ich kann nur auf die Informationen antworten, die du mir mitteilst. Gleiches gilt für

    Warum verkleinert sich meine Schrift trotzdem nicht?
    Dazu musst du schon mitteilen was du überhaupt geändert hast.

    Gruss

    MrMurphy
    Geändert von MrMurphy (18.12.2015 um 02:45 Uhr)

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    18.12.2015
    Ort
    Wien
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schriftgröße will sich nicht responsive verhalten

    Hab grad was gefunden. Wenn ich
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    im head eingebe, funktioniert es endlich.

Ähnliche Themen

  1. Schriftgröße ändert sich radikal auf anderen PC
    Von Hygrom im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 16.04.2015, 16:23
  2. Menü im Responsive will nicht so...
    Von garfield1711 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 27.01.2015, 20:42
  3. Responsive Design bei iPhone 6 nicht möglich
    Von Overtone im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 15.01.2015, 23:00
  4. Problem mit Tabelle - Schriftgröße verändern sich
    Von Jimbo im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.11.2006, 08:57
  5. Schriftgröße läßt sich nicht verändern.
    Von 00eraser00 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 3
    Letzter Beitrag: 12.10.2006, 09:54

Stichworte

Berechtigungen

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