Hallo
wie positioniere ich z.b. einen Text an eine bestimmte Stelle im outer wrapper
Gar nicht. Heutzutage sollen sich die Elemente den unterschiedlichen Endgeräten und damit den Bildschirmbreiten anpassen. Bestimmte Positionierungen sollten deshalb vermieden werden.
Gruss
MrMurphy
Hallo Jochen
Bist du sicher dass das Button-Element überhaupt richtig ist? Deine Beschreibung hört sich eher nach dem a-Element für die Links an.
Für 10 Bilder in einer Reihe erscheint mir die bisherige Breite des wrapper arg knapp bemessen.
Gruss
MrMurphy
Hallo
Bekommt jeder seine eigenen Css Anweisungen?
Ja klar, da du unbedingt
Die möchte ich über position:absolute positionieren.
haben willst.
position: absolute ist halt zum Anordnen von Elementen so ziemlich das unsinnigste Verfahren. Aktuell am sinnvollsten ist Flexbox.
Gruss
MrMurphy
Hallo
Du hast im CSS einmal position falsch geschrieben, ein i vergessen.
Gruss
MrMurphy
Hallo
Was mach ich nur falsch?
Leider sehr viel. Die Erklärung zu allen Problemen würde ein ganzes Buch füllen. Deshalb nur ein paar Beispiele.
Zunächst hat
Sticky-Footer am unteren Rand
nichts mit
Der #header sollte immer oben stehen. Der #fussbereich sollte permanent unten angeheftet sein, wobei der #inhalt wegen variierenden Datenmengen scrollbar sein.
zu tun. Das sind zwei unterschiedliche Techniken, die aber beide heutzutage nicht mehr verwendet werden sollten und brauchen.
Der Sticky-Footer ist bei Webseiten mit Inhalt meist schlicht überflüssig, da der Inhalt in der Regel mehr als eine Bildschirmseite füllt.
Die angehefteten und stets sichtbaren header und footer nehmen unnötig Platz weg und stören deshalb bei der Darstellung auf kleinen Bildschirmen. Zudem sollte in das normale Scrollverhalten von Browsern nicht eingegriffen werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">XHTML wurde bereits 2008 offiziell begraben und sollte seitdem nicht mehr verwendet werden, auch wenn die Browser es noch unterstützen. Neue Webseiten sollten mit HTML5 erstellt werden.
body { font-family: Verdana, sans-serif, Arial} {font-size: 14px }Die Klammern sind falsch gesetzt, hier darf nur ein Klammerpaar stehen.
<!-- a { padding: 3px; } a:focus { background-color: yellow; color: black;} -->Im CSS darf nicht mit HTML-Mitteln auskommentiert werden.
text-decoration: blink
Mal abgesehen davon, dass grundsätzlich auf blinkende Elemente verzichtet werden sollte, muss und wird blink nicht von allen Browsern unterstützt. Siehe zum Beispiel
https://wiki.selfhtml.org/wiki/CSS/Eigen…text-decoration
<body bgcolor="grey" oncontextmenu="return false">Attribute wie bgcolor oder align sind bereits seit der Einführung von CSS2 im Jahr 2000 veraltet und sollten bereits seitdem nicht mehr vewendet werden.
Gleiches gilt für überflüssige JavaScript-Befehle.
<div id="seite">Den ganzen Inhalt umschließende Container waren immer schon überflüssig, deshalb weglassen.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3" height="38">Das table-Element darf nicht zum Layouten mißbraucht werden. Zumal Tabellen verschiedene Verhaltensweisen aufweisen, die für andere Inhalte unerwünscht sind.
height="19"Die Höhe von Elementen wird von deren Inhalt bestimmt. Die meisten height-Angaben sind deshalb überflüssig und sollten so weit wie möglich vermieden werden.
<font ...Das font-Element ist veraltet und sollte nicht mehr verwendet werden.
<center>Gleiches gilt für das center-Element. Und natürlich alle anderen veralteten Elemente.
<p>Inhalt1</p>Auch zum Üben sollte sinnvoller Inhalt verwendet werden, da sich Webseiten mit Inhalt meist anders verhalten als mit solchen künstlichen Inhalten.
Bei deinen Farbkombinationen ist der Text kaum noch lesbar.
background-image: url(bg-04.jpg)Gleiches gilt für Bilder hinter Text.
opacity: 0.5;Durch opacity werden auch alle Kindelemente, zum Beispiel der Text, transparent und deutlich schlechter lesbar.
Deine Webseite ist weder flexibel noch responsive. Das wird von heutigen Webseiten aber erwartet.
Der HTML-Quelltext könnte mit aktuellem HTML zum Beispiel folgendermaßen aussehen: Wobei ich als Testtext Texte aus Wikipedia verwende, da er sich ähnlich wie der spätere Inhalt verhält:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>ISAs Sport- und Line Dance Seiten</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="pageheader">
<nav id="navigation" class="main-menu">
<a href="">Home</a>
<a href="">ISA</a>
<a href="">Fit mit ISA</a>
<a href="">Line Dance</a>
<a href="">Links</a>
<a href="">Highlights</a>
<a href="">Forum</a>
<a href="">Dance Chat</a>
</nav>
</header>
<main id="content" class="main-area">
<h1>Line Dance</h1>
<p>Line Dance ist eine choreografierte Tanzform, bei der einzelne Tänzer unabhängig von der Geschlechtszugehörigkeit in Reihen und Linien vor- und nebeneinander tanzen. Die Tänze sind passend zur Musik choreografiert, die meist aus den Kategorien Country und Pop stammt.</p>
<h2>Geschichte</h2>
<p>Die ursprüngliche Form des Tanzes ist – wie die Entwicklung des Volkstanzes in vielen Kulturen zeigt – der Gruppentanz. Line Dance ist konzeptionell ein Gruppentanz, auch wenn Soli möglich sind. Er wird deshalb häufig als eine moderne Ausprägung des ursprünglichen Gruppentanzes gesehen. Damit bildet der heutige Line Dance (nicht zu verwechseln mit anderen historischen Linien-Tanz-Arten) das Gegenstück zu allen traditionellen und modernen Formen des Paartanzes.</p>
<p>Der Line Dance entwickelte sich gemäß den gesicherten Berichten im Laufe des 20. Jahrhunderts hauptsächlich in den USA, teilweise aus dem Showtanz. Die amerikanische Fernsehsendung American Band Stand (1952 bis 1989) hatte bereits im ersten Jahr 1952 eine wöchentliche Rubrik, in der die jeweils neuesten Line Dances vorgestellt wurden. Der Beitrag von Line Dance zur damaligen Tanzkultur in Clubs und Tanzlokalen war eine Ergänzung zum vorherrschenden Paartanz. In Europa, bedingt durch die Nachkriegsordnung des Zweiten Weltkriegs und der verbreiteten Meinung, dass insbesondere die amerikanische Musik besonders modern sei, wurde auch Line Dance, etwa ab den 1960er Jahren, in Diskotheken öffentlich praktiziert. Einer der bekanntesten noch heute getanzten Line Dances, der Electric Slide – auch als Freestyle bekannt, wurde 1976 von Ric Silver zu der Eröffnung der Discothek Vamps am Broadway in New York City choreografiert. Zusätzliche öffentliche Beachtung erhielt Line Dance unter anderem durch eine szenische Darstellung im erfolgreichen Tanz-Film Saturday Night Fever mit John Travolta aus dem Jahr 1977, der die Tanzclub- und Disco-Szene im New Yorker Stadtteil Brooklyn als Rahmen aufgreift.</p>
<p>Schließlich wurde der Line Dance von der US-Country-Industrie als ergänzendes Marketing-Instrument aufgegriffen. Diese kombinierte ihn mit ihrer Musik und bestimmte damit dessen primäre Wahrnehmung in der Öffentlichkeit für mehrere Jahrzehnte. Das führte unter anderem zur Zuordnung von Line Dance zur Kategorie Country & Westerntanz. Als Meilenstein zur endgültigen amerikanischen und weltweiten Verbreitung gilt der Musik-Titel Achy Breaky Heart in der 1992er Interpretation des US-Musikers Billy Ray Cyrus, dem mehrere sehr bekannte und beliebte Line Dances choreografisch und faktisch durch die Tanzpraxis zugeordnet sind.</p>
<p>Zwischenzeitlich hat sich Line Dance in Art und Umfang zu einer eigenständigen, mehr als nur abendfüllenden Tanzart entwickelt. Das verwendete Musikspektrum besteht weiterhin aus Pop- und Disco- und Country-Stücken, jedoch sind viele andere tanzbarer Gernes dazu gekommen, so etwa Rock, Klassik und die zahlreichen Arten regionaler Musik, so dass im Endeffekt keine wirkliche musikalische Begrenzung mehr möglich ist. In Deutschland ist Line Dance als Freizeitsport seit 2002 anerkannt. Im Rahmen des Deutschen Tanzsportabzeichens (DTSA) gibt es eine eigene Prüfung für Line Dance.</p>
<p>Aus <a href="https://de.wikipedia.org/wiki/Line_Dance">Wikipedia</a></p>
</main>
<footer class="pagefooter">
<p>ISAs Homepage</p>
</footer>
</body>
</html>Der Rest dann mit aktuellem CSS.
Gruss
MrMurphy
Hallo
Bei Breitenangaben in Prozent wird der rechte Scrollbalken nicht berücksichtigt. Die Breite ist bei 100 Prozent die sichtbare Fläche ohne den Scrollbalken.
Du verwendest für die Breite die Einheit vw.
Bei der Einheit vw wird hingegen die gesamte Fensterbreite berücksichtigt, also auch der Bereich hinter dem rechten Scrollbalken. Damit dieser Bereich hinter dem Scrollbalken bei 100vw sichtbar werden erscheint zusätzlich der untere Scrollbalken.
Das grundsätzliche Problem dabei ist, das die Breite des Scrollbalkens nicht vorgegeben ist. Die ist also von Browser zu Browser unterschiedlich. Zumal der Scrollbalken in der Regel bei wenig Inhalt noch ausgeblendet wird. Mit der Einheit vw kann also nicht zuverlässig die gesamte Fensterbreite gefüllt werden. Für seitenbreitenfüllende Webseiten ist also Prozent sinnvoller.
Gruss
MrMurphy
Hallo
Der Link funktioniert nicht.
Deshalb mal ins blaue ein Hinweis auf einen typischen Anfängerfehler:
Die Breite von Elementen besteht aus
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
Wenn du der Breite (width) 100vw gibst bleibt für weitere Breitenangaben kein Platz mehr.
Du musst in die Gesamtbreite alle genannten Werte einrechnen.
Alternativ können mit dem Border-Box-Modell padding und border automatisch von der Breite abgezogen werden. margin muss aber auch in diesem Fall der Breite zugerechnet werden.
Um einem Element das Border-Box-Modell zuzuweisen benötigt es im CSS die Anweisung
box-sizing: border-box;Allerdings funktioniert das Border-Box-Modell nicht in allen Konstellationen und Browsern problemlos. Selbst in Browsern, die (angeblich) das Border-Box-Modell umsetzen können, kann es in Einzelfällen Probleme geben. Darüber finden sich im Web aber kaum Informationen. Deshalb muss man es immer selbst in den üblichen Browsern mit seiner Website testen.
Von daher ist es mit Vorsicht zu verwenden.
Gruss
MrMurphy
Hallo
Die Außenbreite besteht aus width + padding + border + margin. Die brauchst du also einfach nur zusammenrechnen.
Oder du wählst alternativ das border-box-Modell (css box-sizing). Das funktioniert aber in nicht in allen Lebenslagen problemlos und margin musst du trotzdem noch berechnen.
Gruss
MrMurphy
Hallo
Ich kann dein Problem aus deiner Beschreibung leider nicht nachvollziehen. Löst es dein Problem wenn du statt
<a href="Kontakt.html"></a><a href="Kontakt.html">Kontakt</a>schreibst?
Gruss
MrMurphy
Hallo
Ich würde das ganze mit Flexbox machen und dadurch zusätzlich das HTML und CSS weiter vereinfachen.
Zu diesem HTML
<nav>
<a href="index.html">Home</a>
<a href="beratungsumfang.html">Beratungsumfang</a>
<a href="ablauf.html">Prozesse</a>
<a href="impressum.html">Impressum</a>
</nav>zum Beispiel dieses CSS
nav {
background-color: #7C2D48;
box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.75);
display: flex;
justify-content: center;
}
nav a {
color: #FFFFFF;
text-decoration: none;
outline: none;
padding: 0.2rem 0.5rem;
margin: 0.3rem 0;
}
nav a:nth-last-child(1n+2) {
border-right: 1px solid #ffa323;
}
nav a:hover,
nav a:focus {
background-color: #6D273F;
}Das CSS kann später auch problemlos zu einem Responsive Layout erweitert werden.
Gruss
MrMurphy
Hallo
Du schließt das a-Element mit
</href>Es muss jedoch mit
</a>geschlossen werden.
Gruss
MrMurphy
Hallo
Ich möchte jetzt allerdings gerne einen Start-Content festlegen. Sprich Content, der angezeigt wird, noch bevor ich einen Menü-Eintrag anwähle - also eine Startseite quasi.
Dafür kannst du das Attribut checked verwenden.
Hast du bei deinem Problem auch an die Nutzer von Touchscreens gedacht, die bekanntlich keinen hover-Effekt kennen? Oder sollen die deine Seite nur eingeschränkt nutzen können?
Gruss
MrMurphy
Hallo
Ich habe deinen Quellcode mal zeitweise zum Ausprobieren auf meinem Textaccout bei bplaced.net bereitgestellt:
Gruss
MrMurphy
Hallo
Bei mir funktioniert das CSS auch unter XAMPP.
Gruss
MrMurphy
Hallo
Dein Quelltext ist in Ordnung.
Hast du die Seite mal in einem anderen Browser angeschaut oder die Seite in dem Browser aktualisiert, bei den meisten mit Strg+F5?
Gruss
MrMurphy
Hallo
Auch mit dem HTML und CSS funktionieren die CSS-Anweisungen.
Allerdings scheint es noch weitere CSS-Dateien zu geben, die du weiterhin verheimlichst.
Wie sollen wir dir helfen wenn du uns die entscheidenden Informationen vorenthälst? Es macht keinen Spaß immer weiter nachfragen zu müssen.
Deshalb wäre ein Link zu der Seite sinnvoller.
Gruss
MrMurphy
Hallo
Es ist leider recht mühsam dir helfen zu wollen. Der HTML-Quelltext fehlt noch.
Gruss
MrMurphy
Hallo
Da dein hier gezeigter Quelltext funktioniert hast du entweder einen anderen Quelltext oder das Problem liegt in dem Teil des Quelltextes, den du uns vorenthälst.
Am Besten wäre deshalb ein Link zu der Seite.
Gruss
MrMurphy
Hallo
Ich gehe mal davon aus, dass im Original auch das parent-div geschlossen wird.
Das Parent DIV hat keine Hintergrundfarbe mehr
Doch, du siehst sie nur nicht.
Durch float wird das gefloatete Element #child aus dem Dokumentenfluss gehoben und gibt seinen Platz frei. Dadurch hat #parent keinen Inhalt mehr und seine Höhe schrumpft auf Null.
Um solche Probleme zu vermeiden solltest du dich genauer mit dem Floaten beschäftigen, speziell mit dem Clearen. Merksatz: Kein float ohne clear.
Siehe zum Beispiel
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
und
http://www.thestyleworks.de/basics/float-rule.shtml
Fügt man beim parent DIV "margin-bottom: 100px" ein, verschiebt es das Child DIV nach unten.
Das liegt an den sogenannten Collapsing Margins. Siehe zum Beispiel
http://www.thestyleworks.de/basics/margins.shtml
Mit dem Suchbegriff Collapsing Margins sollte die Suchmaschine deiner Wahl noch viele zusätzliche Erklärungen finden.
Du kannst #parent ja mal spaßeshalber ein border-bottom von 1px solid black mit auf den Weg geben und schauen, wie sich die margin-bottom dann verhalten.
Das sind alles vorgeschriebene Regeln. Statt float sollte für das Layout heutzutage sinnvoller Flexbox verwendet werden.
Gruss
MrMurphy
Hallo
Dann trägst du die Angaben am besten für den body ein.
Die Abstände (margin) des body musst du auf 0 setzen.
Gleichzeitig musst du die Wiederholung des background-images (background-repeat) ausschalten und die Höhe (background-size) bestimmen. Also zum Beispiel
body {
background-image: linear-gradient(
90deg,
hsla(195, 47%, 42%, 1) 0%,
hsla(195, 47%, 42%, 1) 12.5%,
hsla(185, 51%, 59%, 1) 12.5%,
hsla(185, 51%, 59%, 1) 25%,
hsla(147, 51%, 48%, 1) 25%,
hsla(147, 51%, 48%, 1) 37.5%,
hsla(80, 64%, 56%, 1) 37.5%,
hsla(80, 64%, 56%, 1) 50%,
hsla(58, 80%, 57%, 1) 50%,
hsla(58, 80%, 57%, 1) 62.5%,
hsla(38, 91%, 58%, 1) 62.5%,
hsla(38, 91%, 58%, 1) 75%,
hsla(25, 81%, 51%, 1) 75%,
hsla(25, 81%, 51%, 1) 87.5%,
hsla(16, 73%, 50%, 1) 87.5%,
hsla(16, 73%, 50%, 1) 100%
);
background-size: auto 50px;
background-repeat: no-repeat;
margin: 0;
}Das auto bei background-size steht für die Breite, da die Höhe immer über den zweiten Wert bestimmt wird.
Gruss
MrMurphy