Hallo wolf,
ja Du hast wahrscheinlich Recht, dass dies von den Browsern nicht so einfach gewollt ist! 
Die Zeit wird es zeigen, ob es nich doch noch realisiert wird! 
Aber eine Zwischenlösung ist doch evt. auch schon hilfreich, wie ich es zuvor schon zeigte! 
Hey,
ich habe es mit automatischer Silbentrennung gemacht. Funktioniert aber leider noch nicht bei dem Browser von Goggle-Chrome!
article {
text-align:justify;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; /* Blocksatz mit automatischer Silbentrennung funktioniert noch nicht bei GoogleChrome*/
margin: 20px 20px 30px 255px;
}meine Seite: http://www.psk-og-horst-holstein.de/chronik.htm
Hey Basi,
Du bist ja wirklich eine liebe Seele! 
Früher habe ich Webcon Scriptly als Editor benutzt, jetzt Brackets, war der Vorschlag von Axel Pratzner in den Lehrvideos.
Ist zwar erst mal eine Umstellung, finde Brackets aber jetzt auch vorteilhafter!
Den Doppelpunkt hatte ich tatsächlich übersehen, wurde allerdings auch nicht als Fehler angezeigt! 
Den Fehler konnte ich leider bisher nicht finden.
Hier nun mein komplettes CSS:
* {
padding: 0;
margin: 0;
}
html, body {
font-family: arial, sans-serif;
font-size: 100%;
}
body {
background-color: #4A6BBE;
text-align: center;
}
#wrapper {
text-align: left;
width: 900px;
margin: 0 auto;
background-image: url(1_Logos/hg-steuerung.jpg);
border-left: black 1px solid;
border-right: black 1px solid;
}
header {
background-image: url(1_Logos/Banner.png);
width: 100%;
height: 154px;
}
header p {
color: midnightblue;
text-align: right;
font-size: 2em;
padding: 10px 40px 0 0;
text-shadow: 1px 1px 1px black;
opacity: 0.8;
}
nav {
width: 200px;
float: left;
margin-left: 30px;
}
nav ul {
list-style-type: none;
color: white; /* damit Aufzählungszeichen weiß angezeigt werden */
}
nav li {
margin-top: 1em;
}
nav ul ul {
list-style-type: square;
padding-left: 1.5em;
margin-bottom: 1em;
}
nav ul ul li:first-child {
/* Gegenarbeiten zu nav li { margin-top: 1em; */
margin-top: 0.4em;
}
nav a {
color: white;
text-decoration: none;
width: 100%;
display: inline-block;
line-height: 1.4em;
/* sonst Breite nicht sinnvoll handelbar */
box-sizing: border-box;
/* wird erst beim hervorheben der aktiven Zeile benötigt */
padding-left: 6px;
padding-right: 20px;
}
nav li.aktiv a {
background-color: midnightblue;
/* damit der Pfeil rechts nicht kommt */
background-image:none;
/* keine Unterstreichung, dass es nicht nach Link aussieht */
text-decoration: none;
/* Cursor normal, dass es nicht nach Link aussieht */
cursor: default;
}
nav a:hover {
text-decoration: underline;
background: url(1_Logos/dreieck2.gif) top right no-repeat;
}
article {
text-align:justify;
margin: 20px 20px 30px 255px;
}
article h1,
article h2
{
color: midnightblue;
text-align:left;
margin-bottom: 0.4em;
}
article p {
/* hyphens: auto; Silbentrennung in CSS3 funktioniert aber noch nicht in allen Browsern*/
padding-bottom: 1em;
line-height: 1.4em;
}
figure {
float: right;
margin: 0.4em 0em 0.4em 0.4em;
}
figcaption {
font-size: 80%;
text-align: center;
font-style: italic;
}
.bildlinks {
float: left;
margin: 0.4em 1em 0.4em 0;
}
.bildrechts {
float: right;
margin: 0.4em 0 0.4em 1em;
}
.bildbanner{
float: none;
}
img{
border-radius: 8px;
}
img:hover {/*Bilder werden größer dargestellt, wenn man mit der Maus darüber fährt */
box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
transition: all 0.5s ease-in-out;
transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
z-index: 2;
}
article ul {
padding-left: 1.4em;
line-height: 1.4em;
margin-bottom: 2em;
list-style-type: circle;
}
article ul ul {
margin-bottom: 0em;
list-style-type: square;
}
article li{
color: black;
list-style-type: disc;
margin: 0 0 0 20px;
}
table {
text-align: left;
width: 100%;
border: silver 1px solid;
border-collapse: collapse;
margin-bottom: 2em;
}
table thead {
background-color: midnightblue;
color: white;
}
table th,
table td {
padding:2px 3px;
border-right: black 1px solid;
}
tbody tr:nth-child(even) {background: rgba(204, 221, 238, 1)}
tbody tr:nth-child(odd) {background: rgba(204, 221, 238, 1)}
th,
td{
border: black 1px solid;
}
/* ab hierDefitionsliste */
dl {
margin-top: 1em;
margin-bottom: 2em;
}
dt {
display: inline-block;
float: left;
font-weight: bold;
text-align: left;
max-width: 155px;
}
dd {
margin-left: 165px;
margin-bottom: 1em;
text-align: left;
}
dl div {
clear: both;
margin-bottom: 1em;
border: 0;
}
footer {
background-color: midnightblue;
text-align: center;
clear:both;
line-height: 2em;
color: white;
font-size: 80%;
}
footer a {
color: silver;
text-decoration: none;
}
.videobereich{
background-color: aqua;
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.videoExtern{
background-color: darkgray;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tabelleKlein{
text-align: left;
font-size: 70%;
}
.tabelleZeile{
padding: 1px 2px;
}
/* für Nutzung über 900px Menü-Button ausblenden */
.menue-button {
display: none;
}
/* */
/* */
/* für Tablet und Co. - unter 900px (56.25em) */
@media only screen and ( max-width: 56.25em ) {
header {
background-image: url(1_logos/Banner.png);
height: 120px;
background-size: 100%;
background-position: left top;
background-repeat: no-repeat;
}
#wrapper {
width: 100% !important;
background-image: none;
border-left: 0;
border-right: 0;
}
body {
background-image: none;
background-color: white;
}
#steuerung {
display: none;
}
article {
margin: 1em 2em;
}
.img:hover {
box-shadow: none;
transition: none;
transform: none;
}
.bild{
width: 100%;
height: auto;
}
.menue-button {
background-color: crimson;
display: block;
position: absolute;
right: 20px;
top: 20px;
padding: 0.5em;
color: white;
left: auto;
cursor: pointer;
text-decoration: none;
}
.menue-button:hover {
color: black;
background: orange;
}
/* #steuerung */
#nav-menue:target #steuerung {
display: block;
}
#nav-menue:target .menue-button-beschr-open {
display: none;
}
#steuerung {
background-color: grey;
width: 100%;
float: none;
margin-left: 0;
margin-bottom: 1em;
}
#steuerung li {
border-top: 2px solid silver;
margin-top: 0;
}
#steuerung ul ul {
margin-bottom: 0;
}
#steuerung a {
padding: 0.5em;
text-decoration: none;
}
#steuerung a:hover {
color: black;
background: orange;
background-image: none;
}
#steuerung li.aktiv a {
background-color: black !important;
color: white !important;
}
}
/*
*/
/* für kleine Handy-Displays Breakpoint ab 500px = 31.23em*/
@media only screen and ( max-width: 31.25em ) {
header {
height: 100px;
background-size: 500px;
background-position: right top;
background-repeat: no-repeat;
}
.menue-button {
right: 20px;
top: 20px;
left: auto;
}
header p {
text-align: right;
font-weight: bold;
font-size: 1.3em;
padding: 0.6em 6.2em 0px 1em;
opacity: 1;
}
/* Defitionsliste */
dt {
float: none;
}
dd {
margin: 0;
line-height: 1.4em;
}
/* Bilder im Inhalt */
figure {
float: none;
margin: 0;
width: 90%;
}
figure img {
width: 100%;
height: auto;
}
table th, table td {
padding: 1em;
}
/*
tbody tr:nth-child(even) {background: none}
tbody tr:nth-child(odd) {background: none}
*/
tbody tr {background: none !important;}
th,
td {
border: silver 1px solid;
}
td {
border:1px solid silver;
}
table {
border:none;
font-size: 70%;
}
thead {
display:none;
}
tr {
float: left;
width: 90%;
margin-bottom: 1em;
}
td {
float: left;
width: 100%;
padding:1em;
}
td:before {
content:attr(data-label);
background: #eee;
border-right:2px solid black;
width: 20%;
float:left;
padding:1em;
font-weight: bold;
margin:-1em 1em -1em -1em;
}
}Hey,
ich hab ein Problem beim Umstellen auf Responsiv-WEB-Design:
im CSS habe ich folgenden Befehl gesetzt:
img:hover {/*Bilder werden größer dargestellt, wenn man mit der Maus darüber fährt */
border-radius: 8px;
-moz-box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.3);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
-webkit-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
-ms-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
-o-transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
transform: scale(2.0) rotate(0deg) translate(-40px, 25px) skew(0deg, 0deg);
z-index: 2;
}
Diesen habe ich versucht wie folgt im CSS nach dem Breakpoint wieder auszuschalten:
@media only screen and ( max-width: 56.25em ) {
header {
background-image: url(1_logos/Banner.png);
height: 120px;
background-size: 100%;
background-position: left top;
background-repeat: no-repeat;
}
#wrapper {
width: 100% !important;
background-image: none;
border-left: 0;
border-right: 0;
}
body {
background-image: none;
background-color: white;
}
#steuerung {
display: none;
}
article {
margin: 1em 2em;
}
.img:hover {
transform: none;
box-shadow: none:
}
nur leider Klappt es nicht! Wer kann mir einen Rat geben?
Hallo Basi,
herzlichen Dank für Deine schnelle Antwort, die sehr hilfreich ist.
Wir haben unsere diesjährige Hundeausstellung bereits in 5 Wochen, da krieg ich das zeitlich nicht mehr hin.
Danach werde ich mir gerne die Lehrvideos von Axel Pratzner bestellen und dies dann versuchen umzusetzen. 
Hallo Basi,
wenn man auf unsere Vereinshomepage geht müsste dort ein "Formular" aufgehen, wo der Hundebesitzer die Daten zur Anmeldung seines Hundes für eine Ausstellung eingeben kann und dieses dann automatisch nach Abschluss über einen "Button Absenden" evt. z. B. per Mail direkt an mich gesendet wird. (So könnte ich mir den Ablauf vorstellen).
Hallo Zusammen,
ich werde immer wieder gefragt ob wir denn nicht auf unserer Webseite des Hundeverein "Meldungen online" vornehmen könnten.
Leider habe ich gar keine Ahnung, wie man dies realisieren könnte. 
Zur Zeit ändere ich gerade unsere HP auf response Webdesign nach Herrn Pratzners Videoanleitungen und werde diese dann ins Netz stellen. Nach diesen Anleitungen konnte ich sehr gut arbeiten. Gibt es evt. für meine Wunschvorstellung auch ein "Lehrvideo"?
Hallo JR Cologne,
ja genau richtig und Du hast Recht, ich habe den Wald vor lauter Bäumen nicht gesehen! Ich hatte noch einen FIX-Wert drin im Bereich des Response-CSS, der störte.
Herzlichen Dank, so konnte ich das Problem lösen.
Ich bin dabei unsere Webseite für den Hundeverein in responsive Webdesign (HTML5 und CSS3) nach dem Lehrvideo von Herrn Axel Pratzner umzustellen. Die Anleitungen nach den Videos sind einfach super.
Ich habe nach dieser Anleitung auch alles sehr gut an mein Design anpassen können.
Leider habe ich ein Problem mit dem Banner: in der bisherigen Webseite ist der Banner als JPG-Datei 900 px breit. Beim responsive Webdesign wird dieser aber bei den Handys nur teilweise angezeigt.
Wie kann ich erreichen, dass der ganze Banner aber halt nur verkleinert dargestellt wird? Brauche ich hierzu JavaScript?
html, body {
font-family: arial, sans-serif;
font-size: 100%;
}
body {
background-color: #4A6BBE;
text-align: center;
/* background-image: url(bilder/hintergrund.png);*/
}
#wrapper {
text-align: left;
width: 900px;
margin: 0 auto;
background-image: url(bilder/hg-steuerung_01.jpg);
border-left: black 1px solid;
border-right: black 1px solid;
}
header {
background-image: url(bilder/Banner_005.png);
height: 170px;
}