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
<!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;
}