Hallo,
dafür gibt es wohl nicht so viele Lösungen.
Für Firefox gibt es das AddOn "Dust-Me", das wohl einzelne Dateien als auch ganze Projekte überprüfen kann:
http://seocouch.de/css-dateien-aufraeumen-schnelle-website/
Gruss
MrMurphy
Hallo,
dafür gibt es wohl nicht so viele Lösungen.
Für Firefox gibt es das AddOn "Dust-Me", das wohl einzelne Dateien als auch ganze Projekte überprüfen kann:
http://seocouch.de/css-dateien-aufraeumen-schnelle-website/
Gruss
MrMurphy
Hallo,
du hast leider offensichtlich ganz falsche Vorstellungen wie eine Webseite benutzerfreundlich erstellt wird.
Das Buch geht aber davon aus, das die Webseitenersteller sinnvolle benutzerfreundliche Seiten erstellen wollen und geht deshalb auf unsinnige Lösungen nicht ein.
So ist es zum Beispiel ein absolutes No-Go Seiten so zu erstellen, das der Besucher seitlich scrollen muss um den Text zu lesen. Von daher sollte auf geschützte Leerzeichen so weit wie möglich verzichtet werden. Sinnvoll sind die nur wenn zusammengehörige Begriffe wie z. B. "3 kg" auch zusammen in einer Zeile stehen sollen.
Weiterhin solltest du bei Test-Texten nur Wörter in der üblichen Länge und nicht unsinnig lange Wörter benutzen. Damit man sich die nicht immer selbst ausdenken muss gibt es im Internet sogenannte Blindtext-Generatoren. Die erzeugen zwar unsinnigen Text, der aber Wörter in den gängigen Längen enthält.
Zu einem float gehört auch immer ein clear. Ich kann mir nicht vorstellen das darauf im Buch nicht eingegangen wird. Durch ein fehlendes clear ergeben sich einige deiner Probleme, da durch float Elemente "aus dem Fluss" genommen werden. Was das bedeutet sollte auch in dem Buch stehen.
Schlechter Stil ist es auch Abstände durch leere Elemente wie
oder
zu erzeugen. Abstände werden grundsätzlich mit CSS erzeugt. Eine der Grundlagen der Trennung von Inhalt und Aussehen ist, das im body-Bereich keine Elemente eingefügt werden die nur dafür gedacht sind das Aussehen der Seite zu ändern.
Ähnliches gilt für das hr-Element. Das ist nicht dazu gedacht optisch eine Linie darzustellen sondern hat eine semantische Bedeutung. Wenn es nicht um die semantische Bedeutung (der Begriff sollte auch im Buch erklärt werden) geht ist das hr-Element auch nicht angebracht.
Gruss
MrMurphy
Hallo,
du musst bei Prozentangeben zunächst zwischen Breiten- und Höhenangaben (width, height) unterscheiden.
Zudem, ob sie auf Inline- oder Blockelemente angewendet werden.
Deshalb werden bei width- und height Prozent-Angaben unterschiedlich interpretiert. Das ist so gewollt und für Anfänger eines der vielen Verständnisprobleme bei HTML / CSS.
Bei Höhenangaben sollte deshalb auf Prozentwerte verzichtet werden, egal ob es um Größen oder Abstände geht.
Siehe auch
http://www.thestyleworks.de/basics/percentage.shtml
Gruss
MrMurphy
Hallo,
meinst du wie hier im Editor, wenn der Inhalt zu hoch für die Fensterhöhe wird?
Das ist möglich mit der CSS-Anweisung "overflow", siehe zum Beispiel
http://www.thestyleworks.de/ref/overflow.shtml
Das ist aber schlechter Stil und sollte vermieden werden. Online-Editoren sind eine Ausnahme, damit die obere Symbolleiste nicht zu weit nach oben entschwindet.
Ansonsten sind zwei oder mehr Scrolleisten eher nervig. Nicht alles was möglich ist, ist bei Webseiten auch sinnvoll.
Außerdem kann es zu Problemen bei kleineren Fenstergrößen und Touchscreens kommen. Das solltest du also unbedingt testen, wenn du auf overflow nicht verzichten magst.
Gruss
MrMurphy
Hallo,
das kannst du mit "position: fixed;" erreichen.
Allerdings solltest du dir vorher darüber im klaren sein, das die Teile, die sich außerhalb des Fensters befinden, auch dort bleiben. Die Karte wird dann nicht mehr erreichbar sein. Gleiches gilt für kleinere Fenster auch für den unteren Teil der Navigation.
Benutzerfreundlicher ist deshalb die aktuelle Darstellung.
Nachfolgend mal ein Beispiel, das einmal die Anwendung von "position: fixed;" zeigt, aber auch das Problem mit langen fixierten Spalten:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Fixe Navigation vertikal</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
positon: relative;
}
nav {
position: fixed;
right: 2rem;
}
main {
margin-right: 12rem;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Banane</li>
<li>Kirsche</li>
<li>Pflaume</li>
<li>Kiwi</li>
<li>Ananas</li>
<li>Erdbeere</li>
<li>Mango</li>
<li>Heidelbeere</li>
<li>Haselnuss</li>
<li>Grünkohl</li>
<li>Kartoffel</li>
<li>Senf</li>
<li>Nusscreme</li>
<li>Brot</li>
<li>Mandelhörnchen</li>
<li>Schillerlocke</li>
<li>Klopse</li>
<li>Butter</li>
<li>Käse</li>
<li>Rotkohl</li>
<li>Spargel</li>
<li>Speck</li>
<li>Currywurst</li>
<li>Erbsensuppe</li>
<li>Bohne</li>
<li>Tomate</li>
<li>Wasser</li>
<li>Milch</li>
<li>Gurke</li>
<li>Orange</li>
<li>Pfeffer</li>
<li>Kassler</li>
<li>Rettich</li>
<li>Haferschleim</li>
<li>Müsli</li>
<li>Zwiebel</li>
<li>Corn Flakes</li>
<li>Vanille</li>
<li>Champignon</li>
<li>Honigmelone</li>
<li>Pistazie</li>
<li>Kümmel</li>
<li>Salz</li>
<li>Zucker</li>
<li>Hefe</li>
<li>Karotten</li>
</ul>
</nav>
<main>
<article>
<h1>Ich bin Text</h1>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben.</p>
<p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
<p>»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab.</p>
<p>In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!</p>
<p>« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
<p>Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.</p>
<p>Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.</p>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
</article>
</main>
</body>
</html>
Alles anzeigen
Gruss
MrMurphy
Hallo,
dein Quelltext enthält Fehler.
Zunächst zum HTML-Quelltext im body-Bereich:
1. Bei der ersten Box "id="box1" fehlt das schließende div, das eingefügt werden sollte.
2. Vor der dritten "id="box3" und vierten "id="box4" Box befindet sich jeweils ein nutzloses p-Element, die gelöscht werden sollten.
3. Hinter der letzten Box und vor dem schließenden body-Tag befinden sich ein schließendes head- und ein öffnendes body-Tag, die dort nichts verloren haben
Dann zum CSS-Quelltext im head-Bereich:
1. #box1
Bei position: absolute ist das float zwecklos, also löschen.
Durch das padding und das margin verschiebt sich das Bild, also auch löschen.
2. #box2
Mit "left: 50px" und "width: 250px" der ersten Box sowie einem Abstand von weiteren 50px zur zweiten Box darf die erst bei 350px beginnen, das "left: 300px" muss also entsprechend angepasst werden
3. #box3 und #box4
Entsprechend müssen auch diese beiden Boxen um 50px nach rechts verschoben werden.
Dann sollte dein Beispiel passen.
Insgesamt solltest du aber auf "position: absolute" verzichten und besser float oder flexbox verwenden um die Bilder anzuordnen.
Und einen Rand oder Rahmen solltest du auch als solchen definieren.
Gruss
MrMurphy
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.