Danke Euch Allen!
MrMurphy: Das mit "class" hat geklappt!!!!
-----
Könnt Ihr mir evtl. in Forums-Eigener-Sache noch helfen: Obwohl ich es in meinem Portal aktiviert habe, bekomme ich keine eMail-Benachrichtigungen, wenn Ihr antwortet. Weiter sehe ich bei mir zu Hause meine Signatur nicht, obwohl diese auch in meinem Portal eingerichtet ist?!
Muss ich noch irgendwo einen Haken setzen, den ich übersehen habe... 
Moin moin aus dem hohen Norden!
Ich wünsche Allen ein frohes und besinnliches Weihnachtsfest!
-----
Ich habe in meinem html-Script einen <section id="main">-Bereich und in diesem einen article-Bereich definiert. In dem article-Bereich liegen mehrere Bilder.
In meinem css-Style spreche ich mit "#main article img" die Formatierung der Bilder an.
Der Nachteil ist nun, dass das css-Style alle Bilder gleich formatiert.
Was muss ich tun, wenn ich die Bilder einzeln im css-Style ansprechen bzw. formatieren möchte?
Natürlich habe ich dazu im Netz gesucht und Tips mit "id" gefunden. Aber egal was ich anstelle, es funktioniert nicht bei mir.
Moin Jav!
Also wenn "position:fixed" unter #nav mit aufgeführt wird, kann man "body>#nav" kpl. weglassen. Habe ich soeben getestet.
Das mit "body>#nav" habe ich auf irgend einer Seite im Netz gefunden, als ich Tips gesucht habe zum Thema "CSS Feststehendes Menu responded Designe". Ich lasse es jetzt weg und löse es so:
#nav {
z-index:1;
position:fixed;
width:100%;
height:auto;
}Moin nochmals Alle zusammen!
Ich weiß nun nicht, ob es eine Lösung im Sinne einer "Sticky Footer" Ausführung ist, aber ich habe bei meiner Suche unter diesem Begriff so einiges gesehen und gefunden.
Ich habe für den Footer nun folgendes gemacht: Eine div-Box erstellt...
body>#footer {
position:fixed;
}
#footer {
z-index:1;
width:100%;
height:auto;
position:fixed;
bottom:0px;
}...und im html-Style den gesamten Footer in diese div-Box gepackt.
Jetzt ist die Footer-Leiste ständig sichtbar und (!!!) nun auch ganz unten bei meinem größeren Display bei mir zu Hause.
Mein Menü habe ich mit fixed auch "festsetzen können. Der Bereich dazwischen scrollt wie es sich gehört und mit dem responded Design funktioniert auch alles wie es soll. Das das Menu jetzt ständig sichtbar ist, finde ich auch wesentlich besser und komfortabeler für Besucher meiner Page!
Danke Euch Allen nochmals!!!
Danke für Eure Antworten!
Ich schau mir das mit dem "Sticky Footer" an ...hoffe nur, die Zusammenhänge zu verstehen 
Ich bin mir nicht ganz sicher, ob ich mich richtig mitgeteilt habe: Mein "Footer" muss NICHT fest fixiert unten am Rand sein, also nicht ständig sichtbar sein. Die ganze Seite (inkl. Footer) darf scrollbar sein.
Jav: Danke für Deine Mühe, meine Problem-Fragen "nachzubauen"!!! Macht man ja nicht mal eben so! Dafür ein 
-----
Besteht denn generell die Möglichkeit , das Menu oben und den Footer unten im responded Design fest zu setzen. So dass nur der Kontex dazwischen scrollt?
Denn wenn man das Problem damit lösen kann, dass der Footer fest und immer sichtbar unten sitzt, dann müsste auch das Menu oben fest und immer sichtbar sein. Sonst sieht es - für mein Empfinden - nicht gut aus.
Was muss ich in meinem CSS Style ändern?
-----
MrMurphy: Darf ich vorstellen...
html-seminar.de/woltlab/attachment/1062/
Miss Murphy! Die heimliche Obrigkeit in unserem Hause 
Danke für Deine Antwort Jay!
...aber leider ist das Problem damit nicht gelöst.
Es betrifft auch nur Seiten, die mit ihrer gesamten Ausdehnung über die Vertikale in die Höhe des Monitors passen. Die Scrollleiste erscheint hier natürlich nicht am Monitorrand.
Ist der Inhalt der Seiten über die vertikale Ausdehnung größer, erscheint brav die Scrollleiste am rechten Rand > scrollt man jetzt die Seite nach oben weg bis der Footer erscheint, so bleibt dieser jetzt brav ganz unten stehen.
Moin moin aus dem hohen Norden!
An einem Monitor in meiner gemütlichen Höhle ist der Footer nicht ganz unten im Desktop. Es handelt sich um einen Monitor mit der Auflösung 1920px x 1200px.
html-seminar.de/woltlab/attachment/1058/
...siehe die roten Pfeile.
Ich komme nicht dahinter, woran das liegt und erbitte Eure Hilfe.
Meine Homepage ist im "Responded Design" konzipiert.
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="images/png/menu-button001.png" alt="Menu" /></a></li>
</ul>
</section>
<nav class="nav">
<ul>
<li><a href="sides/inside01.php" class="active">Inside</a></li>
<li><a href="sides/songs01.php">Songs</a></li>
<li><a href="sides/video01.php">Videos</a></li>
<li><a href="sides/kontakt01.php">Kontakt</a></li>
</ul>
</nav>
<header>
<img src="images/png/LPK-001.png" alt="" />
</header>
<section id="main">
<article>
<?php
include("txt/article01.txt");
?>
</article>
<aside>
<section>
<?php
include("txt/aktuell01.txt");
?>
</section>
<section>
<?php
include("txt/termine01.txt");
?>
</section>
</aside>
</section>
<footer>
<ul>
<li><a href="sides/rechtliches01.php">Rechtliches</a></li>
<li><a href="sides/impressum-disclaimer01.php">Impressum/Disclaimer</a></li>
<li>© 2017 Lenni Paul Klimek</li>
</ul>
</footer>
</body>
</html>html {
width:100%;
height:100%;
background:url(../images/png/LenniPaulKlimek-2580x1731-001.png) center center fixed;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
body {
width:100%;
height:100%;
font-size:100%;
}
* {
padding:0em;
margin:0em;
}
/* ##### */
h1 {
font-size:2.5em;
line-height:1.8em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left;
}
h2 {
font-size:1.563em;
line-height:1.8em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left;
}
/* ### Nur fuer Kontakt-Fehler-Test ### */
h3 {
font-size:1.375em;
line-height:1.8em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left;
}
/* ### */
p {
line-height:1.25em;
font-family:Arial;
font-weight:100;
color:#ffffff;
margin:0em;
padding:1.25em;
text-align:left; /*justify; */
}
/* ### Links-Einstellungen ### */
ul {
margin:0px;
padding:0px;
}
li {
list-style:square;
font-family:Arial;
font-weight:100;
color:#ffffff;
line-height:1.25em;
margin:0.313em 0em 0.313em 0em;
padding:0em;
}
img {
width:90%;
height:auto;
max-width:100%;
}
a:active, a:link, a:visited, a:focus, a:hover {
color: #ffffff;
text-decoration: none;
outline: none;
text-decoration:none;
}
/* ##### On Top Bar ##### */
#menubar {
display:block;
background:#333333;
}
#menubar ul {
display:block;
width:4.375em; /* Größe des Menu-Button */
padding:0.9em;
}
#menubar ul li {
display:inline;
}
#menubar ul li a.menubutton {
display:none;
}
/* ##### Navigation ##### */
nav {
display:block;
height:2.5em;
background:#333333;
text-align:center;
}
nav ul {
display:block;
}
nav ul li {
display:inline;
margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
color:#ffffff;
font-size:1.125em;
line-height:2.5em;
padding:0.563em 0.938em 0.375em 0.983em;
transition:background 0.2s;
/* -webkit-transition:background 0.2s; */
}
nav ul li a:hover {
background:#333333;
border-bottom:0.188em solid #ffffff;
}
nav ul li a:active {
border-bottom:0.188em solid #ff0000; /* #E7590B */
}
/* ##### Header ##### */
header {
display:block;
/* background:#333333; */
text-align:center;
}
header img {
width:90%;
height:auto;
max-width:560px;
}
/* ##### Content Area ##### */
#main {
display:block;
width:96%;
max-width:980px;
margin:1.25em auto;
padding:0em;
}
#main article {
display:inline-block;
width:65.3%;
/* background:#333333; */
vertical-align:top;
margin:0em;
padding:0em;
text-align:center;
}
#main article img {
width: 100%;
height: auto;
}
#main aside {
display:inline-block;
width:30.6%;
margin-left:3%;
padding:0em;
vertical-align:top;
}
#main aside section {
margin-bottom:1.563em;
/* background:#333333; */
border-bottom:0.125em solid #ffffff;
}
#main article h2 {
padding:1em 1.8em 1em 1.8em;
}
#main aside section ul {
padding:0em 1.875em 1.25em 2.5em;
}
/* ##### Kontaktformular ##### */
table {
text-align:left;
padding:1.25em;
margin:0em;
width:80%;
height:auto;
max-width:90%;
}
p1 {
font-family:Arial;
font-weight:100;
color:#ffffff;
}
input[type="text"]{
background:#EEE;
width: 100%;
}
textarea {
background:#EEE;
width:100%;
}
input[type="submit"] {
background:#DDD;
color:#ff0000;
font-size:100%;
font-weight:bold;
}
/* ##### Footer ##### */
footer {
display:block;
background:#333333;
text-align:center;
bottom:0px;
}
footer ul {
display:block;
width:100%;
max-width:980px;
text-align:center;
margin:0px auto;
}
footer ul li {
display:inline;
font-size:0.8em;
line-height:2.8em;
color:#ffffff;
padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
color:#ffffff;
}
/* ##### Mobile Style ##### */
@media screen and (max-width:800px) {
html {
background-image: url(../images/png/LenniPaulKlimek-800x537-001.png);
}
body {
font-size:90%;
}
}
@media screen and (max-width:600px) {
#main aside, #main article {
width:100%;
display:block;
margin:0.625em 0em 0.625em 0em;
}
#main article {
border-bottom:0.125em solid #ffffff;
}
}
@media screen and (min-width:550px) {
nav.nav {
display:block !important;
}
}
@media screen and (max-width:550px) {
html {
background-image: url(../images/png/LenniPaulKlimek-500x336-001.png);
}
body {
font-size:86%;
}
header img {
height:100%;
}
#menubar ul li a.menubutton {
display:block;
}
nav {
display:none;
height:auto;
}
nav ul li {
display:block;
margin:0.3em 0em 0.3em 0em;
}
p1{
font-size:80%;
}
}Danke Euch Allen!
Habe - so hoffe ich - die Lösung gefunden.
Egal wo und wie ich suche im Netz, das Hintergrundbild einer Page wird im "html" Style hinterlegt. Ich hatte es primär im "body" Style.
Daraufhin habe ich jetzt mein CSS-Style - in Erinnerung an mein im Theard #1 gepostetes Style - folgendermaßen verändert:
html {
width:100%;
height:100%;
background:url(../images/png/LenniPaulKlimek-2580x1731-001.png) center center fixed;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
body {
font-size:100%;
}
* {
padding:0em;
margin:0em;
}...aber dann muss man auch daran denken, "@media screen and...." Style-Angaben anzupassen...
@media screen and (max-width:800px) {
html {
background-image: url(../images/png/LenniPaulKlimek-800x537-001.png);
}
}
@media screen and (max-width:550px) {
html {
background-image: url(../images/png/LenniPaulKlimek-500x336-001.png);
}
}...denn diese standen ja zuvor unter "body" und nicht "html"
-----
Also so alles geändert läuft es jetzt auch im Chrome-Browser meines Smartphones. Dem Firefox und IE11 war es egal, ob das Hintergrundbild im "body" oder "hmtl" Style hinterlegt waren...
Sollte ich erkennbaren Tünnef in meinen hier geposteten CSS-Styles geschrieben haben > ich bin offen für jede konstruktive Hilfe!
Allen, die hier mit Interesse mit dabei sind: DANKE!
...wenn da auch 2 Bilder liegen.
...genau diesen Gedanken hatte ich auch. Und ich habe Versuche unternommen, den "html, body" Style zu splitten in "html" (an 1. Stelle im Stylesheet) und "body"... ...aber dazu reicht mein Wissen nicht aus. In Frefox ist das Hintergrundbild ganz weg, wenn es nur im "html" Style liegt... ...usw. usw.
Danke Dir nochmals!
Danke für Deine Antwort Jav!
Ich bin Deinem Rat gefolgt und habe "background-attachment:fixed;" weiter nach unten gesetzt und "width:100%;" und "height:100%;" mit dazu genommen.
Weiter habe ich Aussagen dazu gefunden, das Chrome (und Safari) Anweisungen zu Hintergrundbildern im html-CSS benötigt. Ich habe daraufhin mein CSS-Style folgendermaßen geändert:
html, body {
background-image:url(../images/png/LenniPaulKlimek-2580x1731-001.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
background-color:#333333;
background-attachment:fixed;
width:100%;
height:100%;
font-size:100%;
margin:0em;
padding:0em;
}Jetzt passiert in Chrome auf meinem Smartphon folgendes...
html-seminar.de/woltlab/attachment/1056/
...das sieht ja schon mal gut aus - WENN da nicht folgendes beim hochziehen des Displays passieren würde...
html-seminar.de/woltlab/attachment/1057/
Es scheint so zu sein, dass das Hintergrundbild im Chrome 2x übereinander liegt und das obenliegende geht beim nach oben ziehen mit nach oben und das darunter liegende kommt zum Vorschein und bleibt stehen 
Bin ich der Lösung trotzdem auf der Spur? Nur was mache ich falsch?!
Moin moin aus dem hohen Norden!
Dieses ist mein 1. Beitrag bei Euch und ich halte es für angebracht, ein wenig zu meiner Person zu sagen: Ich bin nicht der Crack in Sachen Homepage-Programmierung, verstehe aber ein wenig die Zusammenhänge. Ich programmiere für den eigenen Bedarf und habe keine professionellen Ambitionen in bzw. auf diesem Gebiet. Trotzdem sollte etwas von mir erschaffendes einigermaßen laufen. Und da tun sich dann ab und zu Probleme auf, bei dem ich Hilfe brauche.
Ich habe mir mit Hilfe dieses und dieses YouTube-Videos eine kleine Webside im responded Design erschaffen, die mir vom Umfang her völlig genügt!
Ich habe nur ein Problem mit dem Seiten-Hintergrundbild. Ich habe 2 jpg-Dateien angehängt. Es sind Screenshots von meinem Smartphone. Im Firefox-Browser wird das Hintergrundbild richtig scaliert bzw. verkleinert angezeigt:
html-seminar.de/woltlab/attachment/1054/
Der Chrome-Browser auf meinem Smartphone macht dieses nicht. Das zeigt auch der Screenshots:
html-seminar.de/woltlab/attachment/1055/
Ich habe mein Hintergrundbild im CSS-Style folgendermaßen eingebunden:
body {
background-image:url(../images/png/LenniPaulKlimek-2580x1731-001.png);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
-webkit-background-size: cover;
background-color:#333333;
font-size:100%;
margin:0em;
padding:0em;
}...und dann noch weiter...
@media screen and (max-width:800px) {
body {
background-image: url(../images/png/LenniPaulKlimek-800x537-001.png);
}
}
@media screen and (min-width:550px) {
nav.nav {
display:block !important;
}
}
@media screen and (max-width:550px) {
body {
background-image: url(../images/png/LenniPaulKlimek-500x336-001.png);
}Und da ich mich als Gitarrist öffentlich darstelle UND es aus dem "CSS-Schnipseln" ja auch mein Name ersichtlich ist, bin ich keine anonyme Person. Hier der Link zu meiner Page:
Könnt Ihr mir helfen? ...warum wird das Hintergrundbild im Chrome-Browser auf meinem Smartphone nicht richtig angezeigt?
Vielen Dank für Eure Antworten!
LG
Skogtroll