Ist möglich, aber dafür sind HTML und CSS nicht gedacht. Du kannst Container verwenden und denen eine feste Höhe und / oder Breite mit auf den Weg geben.
Was nicht funktioniert ist, dass sich beim Einfügen von Text der vorhandene Text automatisch auf die weiteren Seiten (Container) verteilt, wie es in Textverarbeitungen üblich ist. Dann muss jedesmal der Text manuell neu verteilt werden.
Oder du verwendest pdf-Dateien. Die können von den Besuchern auch im Browser geöffnet werden.
Dein Quelltext ist unzulässiges, also fehlerhaftes, HTML.
Nach ul darf direkt nur li folgen. Innerhalb des li dann a. div als Blockelement ist innerhalb von li wiederum unzulässig und zudem vollkommen überflüssig.
Nach den HTML-Regeln sehe ich zu diesem HTML
<nav class="navigation">
<a href="index.php?page=Home">Home</a>
<a href="index.php?page=Scanner">Scanner</a>
<a href="index.php?page=Monitore">Monitore</a>
<a href="index.php?page=Drucker">Drucker</a>
</nav>dieses CSS
.navigation {
display: flex;
justify-content: center;
}
.navigation a {
text-align: center;
width: 115px;
height: 50px;
border-top: 1px solid darkgrey;
}
.navigation a:hover {
background-color: darkgrey;
}Wobei die width- und die height-Angaben kritisch zu sehen sind. Das ist schlechter Stil.
Und wie Sailor bereits schrieb sollen für das CSS grundsätzlich Klassen (class) verwendet werden. Und auch nur dann, wenn sie notwendig und sinnvoll sind. Überflüssige Angaben, auch id und class, sollten im HTML-Quelltext vermieden werden. Hier reicht eine Klasse (navigation) vollkommen aus, der Quelltext ist sehr übersichtlich und das CSS ist problemloser anzuwenden.
Bei dem CSS kann es sich nur einen Schnipsel des gesamten CSS handeln. Das HTML fehlt komplett. So ist eine konkrete Hilfe nicht möglich. Wir können zwar raten, aber es ist doch sehr frustrierend, wenn die angebotenen Lösungen nicht funktionieren, weil uns wichtige Informationen fehlen.
Wenn ich "float" im CSS lese können durchaus größere Änderungen sinnvoll sein.
Tools gibt es nicht.
Am sinnvollsten ist ein Link zu der Webseite.
Skype ist nicht gerne gesehen. Wir helfen gerne und umsonst. Unser "Lohn" ist, dass unsere Hilfe auch Dritten zugänglich ist, die später vielleicht durch Suchmaschinen dieses Thema finden.
Bzw. ist es so nicht sogar besser, weil man sich die TAGS und Befehle sparen kann?
Nein. Solche Texte sind für andere fast unlesbar. Und zwar alle diejenigen, die nicht deine Browserfenstergröße haben. Speziell wenn deren Browserfenster schmaler ist.
es wird genau so ausgegeben, wie ich es abspeichere
Dann hast du den Quelltext in entsprechende Elemente eingebunden, zum Beispiel das pre-Element. Oder doch nicht als html-Datei gespeichert. Es gibt zum Beispiel Editoren, die aus jeder damit bearbeiteten Datei eine txt-Datei machen, egal welche Endung man selbst angibt. Das kann in den Einstellungen meistens angepasst werden.
also eher in text bereich noch anzuwenden
Wenn du float meinst - ja.
bei layout boxen und so dann flex oder?
flex oder grid, je nachdem, welches von beiden für die Darstellung sinnvoller ist. Die immer wieder aufgestellte Behauptung, grid sei besser oder wertiger als flex oder solle flex gar ersetzen ist sachlich falsch.
Float diente, dient und wird dienen, das Texte andere Elemente umfließen können, in der Regel Bilder, aber auch andere Texte oder Objekte. Mit Flexbox oder CSS-Grid geht das überhaupt nicht.
Beim folgenden Beispiel sind Freeware-Bilder eingefügt deren Ladezeit dauern kann:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>float anwenden 01</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import url(https://fonts.googleapis.com/css?family=Roboto);
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/*Basisangaben*/
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
min-width: 1px;
}
html {
}
body {
max-width: 1000px;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
margin: 0.5rem auto 0.5rem auto;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/*darkblue*/
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0px;
}
}
/*Spezielles Layout*/
@media all {
.content {
overflow: hidden;
}
.float_left {
float: left;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.float_right {
float: right;
margin-left: 0.5rem;
margin-bottom: 0.5rem;
}
.info {
width: 350px;
padding: 0.5rem;
border: 2px solid gray;
margin: 0.5rem 0rem 0.5rem 0.5rem;
}
}
@media only screen and (min-width: 0px) {
}
</style>
</head>
<body>
<header id="pageheader" class="pageheader">
<h1>float anwenden</h1>
</header>
<nav id="navigation" class="navigation">
</nav>
<main id="content" class="content">
<h2>Flugzeug</h2>
<img class="float_left" src="http://lorempixel.com/400/200/transport/2" alt="Flugzeug">
<p>Ein Flugzeug ist ein Luftfahrzeug, das schwerer als Luft ist und den zu seinem Fliegen nötigen dynamischen Auftrieb mit nicht-rotierenden Auftriebsflächen erzeugt. Der Betrieb von Flugzeugen, die am Luftverkehr teilnehmen, wird durch Luftverkehrsgesetze geregelt.</p>
<p>Umgangssprachlich werden Flugzeuge mitunter auch Flieger genannt, der Ausdruck Flieger hat als Hauptbedeutung jedoch den Piloten.</p>
<p>Im rechtlichen Sprachgebrauch ist ein Flugzeug ein motorgetriebenes Luftfahrzeug, schwerer als (die von ihm verdrängte) Luft, das seinen Auftrieb durch Tragflächen erhält, die bei gleichbleibenden Flugbedingungen unverändert bleiben, allgemeinsprachlich Motorflugzeug genannt. Wenn in einem Gesetzestext also von Flugzeugen die Rede ist, dann sind immer nur Motorflugzeuge gemeint.</p>
<h2>Porsche</h2>
<p>Die Porsche AG ist ein deutscher Kraftfahrzeughersteller mit Sitz in Stuttgart-Zuffenhausen. Ursprung des Unternehmens ist ein 1931 von Ferdinand Porsche in Stuttgart gegründetes Konstruktionsbüro, das nach 1945 in einer Automobilfabrik aufging, die vor allem Sportwagen produzierte.</p>
<img class="float_right" src="http://lorempixel.com/400/200/transport/5" alt="Porsche">
<p>Die Porsche AG ist seit 2009 Teil des Volkswagen-Konzerns und ist nicht zu verwechseln mit der börsennotierten Porsche Automobil Holding (kurz Porsche SE), die seit 2009 Mehrheitsgesellschafter der Volkswagen AG ist.</p>
<p>Am 1. Dezember 1930 machte sich Ferdinand Porsche in Stuttgart, Kronenstraße 24 mit einem eigenen Konstruktionsbüro selbstständig. Er hatte 1893 als Mechaniker bei dem Elektromotorenhersteller Béla Egger & Co. zu arbeiten begonnen. 1897 wurde er im Alter von 22 Jahren Leiter der Versuchsabteilung und war unter anderem an der Entwicklung des Egger-Lohner-Elektromobils, auch als Porsche P1 bezeichnet, beteiligt. Ende 1899 wurde Porsche abgeworben und wechselte als Konstrukteur zu der k.u.k. Hofwagenfabrik Ludwig Lohner & Co. in Wien. Im selben Jahr konstruierte Porsche ein Nachfolgemodell der Elektrokutsche, das auf der Weltausstellung 1900 in Paris unter dem Namen „Lohner-Porsche" vorgestellt wurde.</p>
<h2>Intercity-Express</h2>
<img class="float_left" src="http://lorempixel.com/300/150/transport/9" alt="Intercity-Express">
<p>Der Intercity-Express (ICE) ist die schnellste Zuggattung der Deutschen Bahn AG. Der Intercity-Express gilt als das Flaggschiff im Schienenpersonenfernverkehr der Deutschen Bahn AG und ist darin der Nachfolger des Intercity (IC). Er bedient, in einem weitgehend getakteten Liniennetz, annähernd 180 ICE-Bahnhöfe in Deutschland und fünf Nachbarländern (Österreich, Schweiz, Frankreich, Belgien und Niederlande).</p>
<p>Ebenfalls als „ICE" bezeichnet werden die rund 280 zwischen 1990 und 2019 produzierten Hochgeschwindigkeits-Triebzüge, die von verschiedenen Herstellern stammen. Die Triebzüge verteilen sich auf fünf hauptsächliche Varianten – 60 ICE 1 (Auslieferung von 1991 bis 1993), 44 ICE 2 (Auslieferung 1996 und 1997), 91 ICE mit Neigetechnik (davon 71 elektrische Triebzüge (ICE T) mit Auslieferung von 1999 bis 2006 sowie 20 dieselgetriebene ICE (ICE TD) mit Auslieferung im Jahr 2001), 84 ICE 3 (67 Triebzüge der Baureihen 403 und 406 mit Auslieferung zwischen 2000 und 2006 plus 17 der Baureihe 407 (Velaro D) mit Auslieferung von 2014 bis 2017) sowie etwa 25 Triebzüge der neuesten Generation ICE 4 (Auslieferung Stand 2018), die im Jahr 2017 begonnen hat und erst zwischen 2020 und 2025 abgeschlossen sein wird. Rund 60 ICE Triebzüge verkehren ins Ausland.</p>
<p>Sie erreichen im Fahrgastbetrieb Höchstgeschwindigkeiten zwischen 200 und 300 km/h (in Frankreich 320 km/h). Im Jahr 2012 waren 76,6 Millionen Reisende im ICE unterwegs. Die durchschnittliche Reiseweite im ICE lag 2018 bei 331 Kilometern. Im Jahr 2018 beförderten die Züge 94 Millionen Fahrgäste, was einem Tagesdurchschnitt von etwa 260.000 Reisenden entspricht. Dies entspricht etwa 64 Prozent der Reisenden im Fernverkehr der Deutschen Bahn. Die Züge erbrachten dabei mit 31,1 Milliarden Personenkilometern 73 Prozent der Verkehrsleistung.</p>
<div class="info float_right">
<h2>Magnetschwebebahn</h2>
<p>Magnetschwebebahnen sind spurgeführte Landverkehrsmittel, die durch magnetische Kräfte in der Schwebe gehalten, in der Spur geführt, angetrieben und gebremst werden.</p>
</div>
<p>Die Grundlagenforschung und Entwicklung des spurgeführten Schnellverkehrs (Rad/Schiene und Magnetschwebebahn) wurde seit Anfang der 1970er Jahre vom Bundesministerium für Forschung und Technologie bis 1990 mit einem Umfang von 450 Millionen D-Mark gefördert. Davon entfielen etwa 70 Millionen D-Mark auf die Entwicklung des ICE.</p>
<p>Der ICE-Vorläufer InterCityExperimental wurde am 26. November 1985 der Öffentlichkeit vorgestellt. Am selben Tag stellte der Zug zwischen Gütersloh und Hamm mit 317 km/h einen neuen Weltrekord für Drehstrom-Schienenfahrzeuge auf. In den folgenden Jahren wurden die neu entwickelten Komponenten in ihrem Zusammenwirken bei bislang in Deutschland nicht erreichten Geschwindigkeiten erprobt. Aus den umfangreichen Ergebnissen des Versuchsprogramms sollten schließlich bedarfsgerechte Fahrzeuge für den ab den 1990er Jahren konzipierten Schnellverkehr entwickelt werden können. Darüber hinaus wurde das Fahrzeug bei zahlreichen Präsentationsfahrten eingesetzt, um die Fahrgastakzeptanz zukünftiger Hochgeschwindigkeitszüge zu prüfen, unter anderem im regulären Intercity-Verkehr mit Reisenden. Das Fahrzeug wurde auch für zahlreiche Sonderfahrten eingesetzt, unter anderem unternahm Michail Gorbatschow während eines Staatsbesuchs eine Fahrt mit dem neuen Zug.</p>
</main>
<aside class="sidebar">
</aside>
<footer id="pagefooter" class="pagefooter">
<p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/8994-flexbox-ersetzt-float-komplett/">https://www.html-seminar.de/</a></p>
</footer>
</body>
</html>Flexbox ersetzt float nicht, die haben schlicht unterschiedliche Aufgaben. Genau so wenig wie CSS-Grid ein besseres Flexbox ist. Auch die sind für unterschiedliche Aufgaben erstellt werden.
float ist (musste) früher oft mißbräuchlich verwendet werden, weil es Lösungen wie Flexbox und CSS-Grid nicht gab. Das wurde so zur Gewohnheit, dass vergessen wurde, das float für bestimmte Darstellungen nur eine Notlösung war, die zudem viele unerwünschte Nebenwirkungen verursachte, da die Anwendung nicht so einfach ist, wie viele Webseitenersteller glauben. Die Anwendung von Flexbox und CSS-Grid ist in der Hinsicht viel harmloser.
idee bevor ich seiteweise css poste
Ja. Solche Spielereien sind weltfremd und in der Praxis sinnlos. Deshalb werden sie von den Browserherstellern nur nebenbei berücksichtigt.
Du sitzt wahrscheinlich zu Hause vor einem großen Monitor mit Maus und Tastatur. Die Benutzer von Browsern verwenden aber eher Smartphones und Tablets, also Geräte mit Touchscreens. Da gibt es keine Hover-Effekte. Auch sind andere Möglichkeiten nur eingeschränkt oder erschwert möglich, die mit Maus und Tastatur kein Problem darstellen.
Obwohl dir noch die Grundlagen für aktuelles HTML und CSS fehlen und deshalb die Kommunikation und Hilfe mit dir und für dich schwierig ist, pickst du dir Spielereien heraus, die in der Praxis schon lange gestorben sind. Lerne am besten erst mal die Möglichkeiten und korrekte Anwendung von aktuellen HTML-Elementen. Davon haben deine zukünftigen Besucher mehr als durch die unnötigen Spielereien, die eine Webseite zudem noch unseriös und kindisch wirken lassen.
Du musst also zunächst die grundsätzliche Entscheidung treffen, ob die Webseseiten für dich und dein Ego erstellen willst? Oder doch eher den Besuchern deiner Webseite eine Freude machen und das Lesen erleichtern willst? Momentan bist du auf dem Ego-Trip.
www. <html-seminar class="de"></html-seminar>Das ist kein HTML.
.zeiger_zoom-inDas funktioniert nur wenn es im HTML-Quelltext ein Element mit der Klasse "zeiger_zoom-in" gibt. So ein Element gibt es in deinem Quelltext aber nicht.
Bei mir kommt es allerdings nicht als "Block" raus, sondern es verteilt sich auf die komplette Seite. Also nicht wie im "normalen" Buch wo es dann Absätze gibt.
Ich verstehe leider nicht was du meinst.
a) zu testen das der untere Absatz wieder nach Links geht
Verwende deutlich längere und mehrere Absätze. Ich kopiere mir für Tests immer welche aus Wikipedia. Dann siehst du die Auswirkungen viel deutlicher. Zum Beispiel
<p>Schon 1920 verband die kolumbianische Fluggesellschaft SCADTA (Sociedad Colombo Alemana de Transportes Aereos) mit drei Flugzeugen vom Typ Junkers F 13 der Junkers Flugzeugwerke in Dessau die Hafenstädte Barranquilla und Cartagena entlang des Magdalenenstromes mit der kolumbianischen Hauptstadt Bogota. Auch wurde am 5. Juni 1925 eine europäische Wasserflugverbindung von Danzig nach Stockholm eröffnet.</p>
<p>Die Städte Dresden, Magdeburg und Altona schlossen danach mit der Junkers Luftverkehr AG einen Vertrag, um ab 1925, zunächst für die Dauer von drei Monaten, einen regelmäßigen Luftverkehr auf der Elbe durchzuführen. Die Stadt Dresden kaufte die Maschinen und die Städte Altona und Magdeburg mussten die Selbstkosten des Betriebs in Höhe von 67.500 Reichsmark garantieren. Die Reichspost musste zusätzlich jeden Flug finanziell unterstützen.</p>
<p>Die Junkers Flugzeugwerke bauten zwei Flugzeuge vom Typ F 13, die in der Königsberger Werft mit Schwimmern versehen wurden. Die Flugzeuge hatten die Kennzeichen D 272 und D 583 (auch Silbermöwe und Wildente genannt). Eine weitere Maschine mit dem Kennzeichen D 433 kam später hinzu. Nach der Umrüstung hatte jede Maschine nur noch Platz für vier statt sechs Passagiere. Am Sonntag, dem 9. August 1925 traf das erste Flugzeug in Dresden ein. Altona erhielt ebenfalls eine umgerüstete Maschine.</p>die abstände zwischen den Buchstaben vielleicht etwas größer ist: letter-spacing.
Wenn du das letter-spacing besser sehen willst nimm zum Testen einfach deutlich höhere (übertriebene) Werte. Oder schreibe (wenn dein Wissen dazu bereits ausreicht) den Text zweimal hintereinander und weise nur einem das letter-spacing zu.
Ich meine statt
<p>Dies ist nun ein test da ich herausfinden möchte
ob ich das auch hinbekommen möchte, was ich auf der Website
html-semniar.de lerne</p>besser
<p>Dies ist nun ein test da ich herausfinden möchte ob ich das auch hinbekommen möchte, was ich auf der Website html-semniar.de lerne</p>Hinter dem Link zur design.css fehlt die schließende Klammer.
Tip: Mach im Quelltext keine Absätze, die dort nicht hingehören.
Da gibt es mehrere Möglichkeiten, je nachdem was im Quelltext steht. Für dein obriges Beispiel könnte in der CSS-Datei folgendes stehen:
p {
text-indent: 1.5em;
}Der Effekt wird aber erst richtig sichtbar wenn der Text innerhalb des p-Elements über mehrere Zeilen geht, also deutlich länger ist.
Die Anweisung zum Einzug der ersten Textzeile eines Absatzes lautet "text-indent" und wird in der CSS-Datei bestimmt.
Das entspricht den HTML-/CSS-Regeln. h2 und b stellen den enthaltenen Text jeweils fett dar. Durch b innerhalb von h2 wird der Text nicht fetter dargestellt, sondern das fett von h2 wird einfach durch das fett von b überschrieben. Die Darstellung ändert sich also nicht.
Das entspricht einer Grundregel von CSS, die sich bereits aus dem Namen Cascading Style Sheets ergibt. Cascading (Kaskade, hier kaskadierend) hat hier die Bedeutung, das bestehende Anweisungen durch später folgende überschrieben werden können, und zwar mehrfach. Daraus folgt gleichzeitig, dass Überschreibungen vorhandene Angaben nicht verstärken, sondern löschen. Davon gibt es nur wenige Ausnahmen.
font-size: 28tEs gibt in HTML / CSS keine Einheit t. Schriftgrößen werden üblicherweise in px, em oder rem angegeben. Die Einheit pt ist nur für Drucker vorgesehen.
Elemente wie strong und i dürfen nach den HTML-Regeln nicht zur Gestaltung verwendet werden. Das gilt bereits seit 20 Jahren und wurde mit dem aktuellen HTML (HTML5) noch einmal konkretisiert, da das bei vielen Webseitenerstellern nicht angekommen ist. Lernquellen, die das empfehlen oder fordern sind entweder veraltet oder es fehlt an Hintergrundwissen. Zumindest sollte bei der Verwendung solcher Elemente erklärt werden, wann sie in der Praxis überhaupt sinnvoll eingesetzt werden können.
Das Buch "CSS lernen - Webdesign erstellen" kann ich bei Amazon nicht finden. Aus welchem Jahr stammt es?
Woran kann es liegen, dass die Funktion auf dem Smartphone nicht funktioniert?
Weil das außer dir niemand will. Es ist ein absolutes No-Go in die normale Bedienung eines Browsers oder gar in das Betriebssystem einzugreifen. Schon der Versuch führt zur berechtigten Gegenwehr.
Padding kann auch bei flexbox verwendet werden.
Leider erklärst du trotz nachfrage nicht worum es überhaupt geht. Deine Infos sind nicht nachvollziehbar.
Nein.
Erst mal den gesamten HTML-Quelltext fertigmachen damit man das Verhalten der Seite überhaupt beurteilen kann.
Dann mit schmalem Fenster beginnen und schauen, wenn es sinnvoll ist, (in der Regel) Container anders anzuordnen. Und das dann nacheinander ins CSS eintragen.
Eintragungen ins CSS also erst wenn sie sinnvoll sind. Und entweder nur min-width-Angaben verwenden oder nur max-width-Angaben.