Habe folgendes Problem, ich möchte die Website so umändern das sie für jedes gerät abrufbar ist bzw. verschiedene Display Größen.
Das ganze soll mit Flexboxen gemacht werden aber bei mir will das nicht so, unten ist mein backup code.
html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fledermäuse</title>
<link rel="stylesheet" href="formatieren.css">
</head>
<body>
<header>
<table>
<tr>
<td>
<img src="bilder/Fledermaus_Logo.jpg" height="100" width="200" alt="Dieses Bild ist Nicht Verfügbar">
</td>
<td>
<h1>Bat out of Hell</h1>
</td>
</tr>
</table>
</header>
<nav>
<p><a href="index.html" style="color: #b4b4b4">Start</a></p>
<p><a href="verbreitung.html" style="color: #b4b4b4">Verbreitung</a></p>
<p><a href="merkmale.html" style="color: #b4b4b4">Merkmale</a></p>
</nav>
<article>
<h2><a href="https://de.wikipedia.org/wiki/Flederm%C3%A4use" style="color: #b4b4b4">Fledermäuse</a></h2>
<p>
Die <span class="fett">Fledermäuse</span> (Microchiroptera) sind eine
<span class="magenta">Säugetiergruppe</span>, die zusammen mit den <span class="magenta">Flughunden</span> (Megachiroptera)
die Ordnung der <span class="magenta">Fledertiere</span> (Chiroptera)
bilden. Zu dieser Ordnung gehören die einzigen Säugetiere
und neben den <span class="magenta">Vögeln</span> die einzigen <span class="magenta">Wirbeltiere</span>,
die aktiv fliegen können. Weltweit gibt es rund 900 Fledermausarten.
</p>
Der Name bedeutet eigentlich „Flattermaus“
(ahd. <span class="schräg">fledarmūs</span>, zu ahd. <span class="schräg">fledarōn</span> „flattern“)
</article>
<aside>
<img src="bilder/Fledermaus_Skelett_Seite.jpg" width="200" alt="Dieses Bild ist Nicht Verfügbar">
</aside>
<footer>
Der Inhalt dieser Webseite stammt von Wikipedia und ist vom Stand: 16. Dezember 2017, 7:25 Uhr.
</footer>
</body>
</html>
css:
header
{
position: absolute ;
top: 0px ;
left: 0px ;
width: 1200px ;
height: 100px ;
background-color: #3c3c3c ;
font-family: Helvetica ;
color: white ;
}
nav
{
position: absolute ;
top: 100px ;
left: 0px ;
width: 200px ;
height: 550px ;
background-color: #3c3c3c ;
text-align: center ;
font-size: 25px ;
font-family: Comic Sans MS ;
color: white ;
}
article
{
position: absolute ;
top: 100px ;
left: 200px ;
background-color: #616161 ;
overflow-y: scroll ;
font-family: Arial ;
color: white ;
font-size: 20px ;
}
aside
{
position: absolute ;
top: 100px ;
left: 1000px ;
width: 200px ;
height: 550px ;
background-color: #3c3c3c ;
}
footer
{
position: absolute ;
top: 650px ;
left: 0px ;
width: 1200px ;
height: 25px ;
background-color: black ;
color: white ;
}
.fett
{
font-weight: bold;
}
.magenta
{
text-decoration: underline;
color: magenta;
}
.schräg
{
font-style: oblique;
}
