Scrollbalken nach rechts

proxo · 17.04.2021

Servus miteinander.

Ich bin neu hier und habe natürlich ein Problem zu lösen.
Seit letzten Sommer beschäftige ich mich mit HTML/CSS, was mir sehr gut gefällt (Anfänger).
Deshalb habe ich jetzt für meine Freundin eine einfache Homepage gebastelt. Das funktionierte etwas zäh, aber es geht.
Inzwischen habe ich das Ganze auch responsiv gemacht, mit zufrieden stellendem Ergebnis.
Seit 2 Wochen versuche ich jetzt den letzten kleinen Makel zu beseitigen:
Die fertige Seite lässt sich nach rechts scrollen. Der gesamte Inhalt steht auf der Seite und ragt nicht darüber hinaus, das Hintergrundbild endet exakt am rechten Screenrand, danach kommt aber noch ein weisser Streifen, ist aber nicht die background-Farbe.
Ich habe alle margins und paddings getestet, aber nichts gefunden. Meistens liegt es wohl daran.

Ich bitte um Tipps, was ich noch tun könnte, bzw. wie.
Besten Dank im Voraus

scatello · 17.04.2021

Mit diesen Informationen kann dir niemand helfen. Ein Link zur Seite würde die Sache vereinfachen.

proxo · 17.04.2021

Die Seite ist ja noch nicht online.
Natürlich könnte ich das HTML-Gerüst und das CSS hier einstellen.

scatello · 17.04.2021

proxo schrieb:
Die Seite ist ja noch nicht online.

Das könnte man aber ändern, zur Not bei einem Freehoster.

basti1012 · 18.04.2021

proxo schrieb:
Die fertige Seite lässt sich nach rechts scrollen. Der gesamte Inhalt steht auf der Seite und ragt nicht darüber hinaus, das Hintergrundbild endet exakt am rechten Screenrand, danach kommt aber noch ein weisser Streifen, ist aber nicht die background-Farbe.

Benutzt du Flexbox ? = ich denke nein.
Benutzt du feste Größen wie width:800px; beim body ? = Ich schätze Ja.
@scatello hat es ja schon gesagt wir brauchen Code.
Beim Frechster ist bplaced.net ganz gut.
Wenn dein Code nicht so groß ist, kannst du ihn auch bei codepen.io reinstellen.
Noch was:
Webseiten, die man nach rechts und Links scrollen kann, sind nicht benutzerfreundlich und nervig.
Macht man es richtig (z. B. mit Flexbox) , braucht man nicht scrollen.

scatello · 18.04.2021

basti1012 schrieb:
Beim Frechster ist bplaced.net ganz gut.

Beim was?

basti1012 schrieb:
Webseiten, die man nach rechts und Links scrollen kann, sind nicht benutzerfreundlich und nervig.

Genau deshalb hat doch Proxo hier gefragt.

proxo · 18.04.2021

basti1012 schrieb:
Benutzt du Flexbox ? = ich denke nein.

Code:

body {
    display: flex;
      flex-flow: row wrap;       
    font-family: "Century Schoolbook L";
  text-align: left;
  font-size: 1em;
  color: #993399;
 
    }

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, header h1, header h2, header p, ul, ul p, ul h2, ul li, footer {
  flex: 1 100%;
}

@media screen and (max-width: 110em) {
        body {
        background-color: whitesmoke;
        color: #993399;
        }
        #Fotoweg {
        display: none;       
        }   
    }
    
    
@media all and (min-width: 35em) {
  body {
    flex: 3 1 0%;
  }

basti1012 · 19.04.2021

Wo ist der Rest?
Damit kann man deinen Fehler nicht finden.
Poste deinen ganzen Code (wenn er nicht zu lang ist)-
Oder kopiere den hier rein https://codepen.io/

proxo · 19.04.2021

Seitenaufbau: Die Texte und ein Foto in HTML wurden weg gelassen.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<link href="/Test_mitHomepage-final/stylebox_final_flex.css" rel="stylesheet">

</head>

<body>

<article>
<header>
<h1></h1>
</header>

<header>
<h2></h2>
</header>

<main>
<div>
<ul id=""><h2><b>..............</b></h2>

<br><li>......</li>
</ul></div>

<div>
<p><ul id="">

</ul></p></div>

<div>

<p id=""> (2 Links) </p>
</div>

</main></article>

<footer>
<p id="footer">
<a href="Impressum und Datenschutz</a>
</footer>

</body></html>

CSS

html {
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>home Lang</title>
<style type="text/css">
color: black;
background: white url("file:/home/hans/Homepage_final/Home_neu_final-Dateien/Hintergrundbild_kleiner.jpg") no-repeat scroll 50% 0%;
}

/* Kompaktes Layout für mobile Geräte */
body {
display: flex;
flex-flow: row wrap;
font-family: "Century Schoolbook L";
text-align: left;
font-size: 1em;
color: #993399;

}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, header h1, header h2, header p, ul, ul p, ul h2, ul li, footer {
flex: 1 100%;
}

@media screen and (max-width: 110em) {
body {
background-color: whitesmoke;
color: #993399;
}
#Fotoweg {
display: none;
}
}

@media all and (min-width: 35em) {
body {
flex: 3 1 0%;
}

header {
font-family: "Century Schoolbook L";
color: #953195;
background-color: rgba(199, 199, 249, 0.95);
}

header h1 {
font-size: 2em;
height: 1em;
margin-bottom: 0rem; margin-left: 1.2em; padding: 1.0rem; padding-bottom: 2rem; margin-top: 0em; padding-right: 2em; margin-right: -5.5em; width: 60em;

}

header h1 img {
align: right; padding: 0.0em; padding-right: 1em; margin-right: 3.5em;

}

header h1 img {
align: right; padding: 0,0em; padding-right: 2em; margin-right: 4em;

}

header h2 {
height: 1em;
margin-bottom: 0.0rem; margin-left: 2rem; padding: 1.5rem; padding-bottom: 2rem;

}

header p {
height: 1.5em;
margin-bottom: 0rem; margin-left: 1rem; padding: 1.0rem; padding-bottom: 2rem;

}

ul {
height: 29em; width:40em;
margin-bottom: 0rem; margin-left: 0rem; padding: 3rem; padding-bottom: 1rem; padding-top: 1rem; margin-top: 0em;
background-color: rgba(199, 199, 249, 0.95);

}

ul p {

height: 26.3em; width: 20em; color: #953195; font-size: 1.3rem;
margin-bottom: 0rem; margin-left: 0rem; padding-top: 0rem; padding-bottom: 2rem; padding-left: 0rem;

}

ul h2 {

height: 1.5em; color: #953195;
margin-bottom: 1rem; margin-left: 0.5rem; padding: 0.5rem; padding-bottom: 0.5rem;

}

ul li {
height: 1.1em; color: #953195; font-size: 1.5rem;
margin-bottom: -1rem; margin-left: 5rem; padding: 0.5rem; padding-bottom: 1rem;

}

#angebot {
position: relative;
top: 1.5em; left: 0em;
background-color: rgba(199, 199, 249, 0.95);
font-family: "Century Schoolbook L";
text-align: left;
font-size: 1em;
color: #953195;
width: 60%; height: 29em; margin: 0 em; padding-left: 2.5em; padding-top: 1em;

}

#offnungszeiten {
position: relative;
top: -23.4em; right: 3em; left: 59.7em;
background-color: rgba(199, 199, 249, 0.95);
font-family: "Century Schoolbook L";
text-align: left;
font-size: 1.3em;
color: #953195;
height: 19.5em; width: 21.5em; margin: 0 1em; padding-left: 5em; padding-top: 3.5em; margin-right: 0em;

}

#Online-Kauf {
position: relative;
background-color: rgba(199, 199, 249, 0.95);
font-family: "Century Schoolbook L";
margin: -23em 0 0 0; padding: 1em; text-align: center;
font-size: 1.3em;
color: #953195;
}

#footer {
font-family: "Century Schoolbook L";
color: #953195;
background-color: rgba(199, 199, 249, 0.95);
height: .7em;
margin-bottom: 0.0rem; margin-left: 0rem; padding: .5rem; padding-bottom: 1rem; padding-left: 2rem; padding-right:2rem; margin-right: 95rem;
}

basti1012 · 20.04.2021

Da ist ja nur Schrott bei.
Deinen ganzen festen werte wie
top:-23rem,
margin-right:95rem
und so weiter ergeben kein sinn.
Das kann man so auch nicht mit Pfusch retten.
Mach mal eine Zeichnung fertig wie das aussehen soll, weil so kann ich mir das nicht mal Vorstellen.
Dann hast du hier noch Fehler

Code:

<a href="Impressum und Datenschutz</a>

oder wie hier

Code:

<ul id=""><h2><b>..............</b></h2>

Leere id Attibuten ergeben für mich auch kein sinn.

proxo · 20.04.2021

Vielen Dank für die Antwort.
Ohne feste Werte hab ich´ s leider nicht hingebracht.
~~Ohne "margin-right:95rem" geht der Balken rechts bis zum Ende.~~
Trotzdem: Alles steht am richtigen Platz und funktioniert auch.
Auch Impressum und Datenschutz. Die ul id ist natürlich nicht leer.

edit: gerade nochmal geprüft: es geht ohne "margin-right:95rem". Dafür gibt´s ja das padding-right.

scatello · 20.04.2021

Guck mal, hier findest du ein fast perfektes Beispiel für deine Seite: https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/

proxo · 20.04.2021

Danke für den Link!
Flexbox ist mir natürlich inzwischen bekannt. Aber wie gesagt, ich habe mit HTML ganz von vorne begonnen und viele lange (einsame) Nächte damit verbracht, mich in die Materie einzuarbeiten. Ich bin auch stolz darauf, dass mir die Umsetzung der Idee so gelungen ist.
Dass der Code kritischen Profiaugen nicht standhalten wird, ist doch klar. Wäre sonst auch sehr merkwürdig!
Flexbox hat schon sehr viele Vorteile. Heisst: Wieder viel, viel lesen und ausprobieren. (Die Sommernächte sind kürzer!

)
Was mich aber nach wie vor interessiert, ist, was ist die Ursache für den Scrollbalken. Ich kann´s nach wie vor nicht finden.

Übrigens sieht das auf dem Handy auch nicht soooo schlecht aus!

proxo · 23.04.2021

@basti1012

War das jetzt die ganze qualifizierte Hilfe, die ich in diesem Forum erwarten darf?

Da ist ja nur Schrott bei.

Das kann man so auch nicht mit Pfusch retten.

basti1012 · 23.04.2021

was erwatest du den ?
Habe gesagt mach es mit Flexbox dann hat sich das erledigt.
Deine ganzen Festen Werte verursachen das poblem.

basti1012 schrieb:
Mach mal eine Zeichnung fertig wie das aussehen soll, weil so kann ich mir das nicht mal Vorstellen.

Ich zeig dir dann mal ein Beispiel wie es geht.
Den rest mußt du dann auf alle deinen anderen unterseiten selber machen.
Ich weiß wie es geht und denke das ich da nee halbe Stunde brauche.
Du solltest dir trotzdem das Thema Flexbox durchlesen.
Ich kann dir zwar zeigen wie die Startseite( den Code den du gepostet hast ) aussieht, doch du mußt verstehen wie es geht.
Du mußt deine ganzen Unterseiten auch so anpassen , das geht aber nur wenn du es verstehst wie es geht .

Mach mal Skizze oder Bild wie es aussehen soll ( das was dein gepostet Code machen soll )

basti1012 · 23.04.2021

poste dazu mal deinen Code mit inhalt( lorem ipsum texte oder so ).
Deine Leren Elemente bingen mi nicht viel weil ich nicht weiß was da ein soll ( texte, bilder usw ).
Oder eine bild erstellen wie es aussehen soll dann kann ich mir da selber was reinfummeln

proxo · 23.04.2021

Servus basti1012,
schön, von dir nochmal zu hören!
Natürlich habe ich mich bereits einige Stunden mit dem Thema Flexbox beschäftigt (2Tutorials und 1Buch). Die ersten Versuche, meine Seite vorsichtig umzubauen, zeigen, dass ich das bislang bestimmt noch nicht gut verstanden habe. Aber: Learning by doing. Mit einer Stunde wäre schön, aber völlig unrealistisch für mich.
Wie die fertige Seite aussieht, s. Anhang oben (Homepage_Foto.png). So soll sie auch mit Flexbox bleiben.
Mein CSS steht bereits oben, den HTML mit Inhalt jetzt noch hier.
Besten Dank im Voraus für deine Mühe!

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Start Lang Cosmetics</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<link href="/home/hans/Homepage_final/Home_neu_final-Dateien/stylebox_final_flex.css" rel="stylesheet">

</head>

<body>


<article>
<header>
<h1>Herzlich Willkommen bei LANG Cosmetics<img src="/home/hans/Homepage_final/Home_neu_final-Dateien/Logo Ayer.png" align="right" alt="Logo A" max-width="150" height="50"/>
<img src="/home/hans/Homepage_final/Home_neu_final-Dateien/Maria-G-Schriftzug.png" align="right" alt="Logo MG" max-width="200" height="48" /></h1>
</header>

<header>
<h2>Seit 1976 für unsere Kunden zuverlässig am selben Ort.</h2>
</header>


<main>
<div>
<ul id="angebot"><h2><b>Wir verwöhnen Sie mit Produkten von Maria Galland
und Ayer <br>in entspannter Atmosphäre:</b></h2>

<figure id="Fotoweg"; style="float: right; text-align: left; margin: 0 0 0 1rem;">
<img src="/home/hans/Homepage_final/Home_neu_final-Dateien/Netti_4b.png"
alt="Foto"
max-width="100%"
height="auto">
</figure>

<br><li>Maria Galland Beauty Treatments</li>
<li>Gesichtspflege mit Ayer</li>
<li>Maniküre</li>
<li>Medizinische Fußpflege</li>
<li>Fußreflexzonenmassage (System: Hanne Marquardt)</li>
<li>Pediküre, auch mit Lack</li>
<li>Enthaarung / Wachs</li>
<li>Brauenfärben</li>
<li>Wimpernfärben</li></ul></div>

<div>
<p><ul id="offnungszeiten">
<b>Unsere Geschäftszeiten: </b><br>
Mo, Di, Do, Fr: 9 – 18 Uhr <br>
Mi: 9 – 12 Uhr <br>
<br>Und nach Vereinbarung. <br>
<br>
<b>Behandlungen nur <br>nach telefonischer Vereinbarung</b>
<br>
<b>Tel.: 089-932299</b><br>
<br>LANG Cosmetics<br>
81927 München, Ostpreussenstr. 35<br>

</ul></p></div>

<div>

<p id="Online-Kauf"><b>Falls Sie gerade verhindert sind persönlich bei uns Ihre gewohnten Produkte einzukaufen, können Sie das hier auch bequem direkt Online machen:</b><br>
<b>Maria Galland:</b> <a href="http://www.mariagalland.com/de_DE/home?INSTid=6021035" id="BG_1596540997012_32169" target="_blank">Maria Galland Online Shop</a>
      <b>Ayer:</b> <a href="https://ayer-cosmetics.com/de/?sPartner=anette-lang" target="_blank">Ayer Online Shop</a></p></div>

</main></article>


<footer>
<p id="footer">
<a href="file:/home/hans/Homepage_final/Home_neu_final-Dateien/Impressum_Datenschutz_neu.html" target="_blank">Impressum und Datenschutz</a>
</footer>

</body></html>

basti1012 · 24.04.2021

Ist noch nicht perfekt , sollte aber zeigen, wie es gehen könnte
Link zur Lösung

proxo · 24.04.2021

DANKE für deine Mühe!

Das ist für mich eine große Hilfe und wird die restliche Bearbeitungszeit erheblich verkürzen.
Dein Entwurf zeigt mir auch, wie das wirklich funktioniert. Da war ich noch um einiges daneben.
Wünsche dir ein HAPPY WEEKEND!

basti1012 · 24.04.2021

Paar Kleinigkeiten wirst du wohl noch ändern müssen , gerade dann wenn du die Originalbilder benutzt, dann könnte es sein das man noch etwas ändern musst.
Probier es aus und wenn du nicht weiter kommst sag bescheid.