Hilfe beim html/css code?
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;
}
1 Antwort
1) Entferne die Angaben zur absoluten Positionierung (position, top, left). Wenn du Abstände schaffen möchtest, dann verwende margin, padding und/oder Flexboxen/Grids.
2) Da du drei Komponenten unterschiedlich anordnen möchtest (nav, article, aside), wäre meines Erachtens ein CSS Grid besser für die Verteilung der Plätze geeignet (siehe grid-template-areas). So oder so sollten alle drei in einen Container (ein main-Element bietet sich dafür an). Bei einer Lösung mit einer Flexbox würde ich das aside-Element mitsamt der nav nochmals in einen eigenen Container packen.
Struktur:
<main>
<div>
<nav>
<aside>
<article>
Die Flexbox für die horizontale Ausrichtung wird dem main-Element zugeordnet.
3) Für eine Anpassung an mobile Endgeräte wirst du Media Queries benötigen (bspw. um zweispaltige Elemente ab einer bestimmten Maximalbreite umzuklappen). Einen Artikel dazu findest du hier.
Zwei zusätzliche Anmerkungen:
1) Der Inhalt in deinem Header entspricht keiner Tabelle, folglich ist das table-Element an der Stelle auch verkehrt. Sicherlich genügt bereits diese einfache Struktur:
<header>
<img>
<h1>Bat out of Hell</h1>
bei der du aus dem h1-Element ein Inline-Blockelement machst,
display: inline-block;
um den automatischen Zeilenumbruch zu verhindern.
2) Wenn Bilder Inhalte präsentieren (z.B. ein Diagramm oder in deinem Fall vielleicht die Darstellung einer bestimmten Fledermausart), aber dem Nutzer nicht dargestellt werden können (Bild lädt nicht / Nutzer ist blind / ...), dann bringt ihm die Information, dass ein Bild nicht verfügbar ist, nicht viel. Diesen Zustand kann ihm schon der Browser übermitteln.
Bewerte erst, welche Bedeutung ein eingebundenes Bild auf deiner Webseite hat. Wenn es nur dekorativ ist (wie aktuell dein Logo), dann bleibt der Wert des alt-Attributs leer (alt=""). Wenn es hingegen eine Information beisteuert (bei dir könnte es wie oben geschrieben das Bild einer Fledermaus sein, welches im Sachtext eingebunden ist), dann sollte das alt-Attribut dessen wesentliche Informationen auch wiederspiegeln (Beispiel: Darstellung einer Fledermaus bei Tag; während der Ruhephase hängen sie kopfüber von der Decke ihres aufgeschlagenen Quartiers).
Ich habe mich im Laufe meines Lebens mit verschiedenen Bereichen in der Softwareentwicklung auseinandergesetzt, daher kann ich auch zu einigen Themen etwas schreiben. Genaueres (wie lange ich wo/wann/...) gearbeitet habe, möchte ich allerdings nicht teilen. 😉
Perfekt, besser kann man es nicht erklären.
Wie lange arbeitest Du schon im Bereich der Webentwicklung? Du scheinst Dich mit allen Programmiersprachen sehr gut auszukennen.