Scrollbalken nach rechts

[proxo]

Servus Basti 1012 ,
einige Fragen habe ich noch zum Verständnis/Bearbeitung dieser Seite:

1. Du hast viele Angaben in px. Ich lese dauernd, das soll man vermeiden und em oder rem verwenden.

2. Was bedeutet: <style>
*{
margin:0;
padding:0;
}
Gesamte Seite füllt den Screen und Inhalt kann bis zu den Rändern reichen?

3. Wofür sind diese Elemente hier extra aufgeführt?
#body_footer,
#body_left,
header,
#body_right,
#main_top,
#body_right,

4. Die h2 hast du mittig plaziert:
<main>
<div id="main_top">
<h2>Seit 1976 für unsere Kunden zuverlässig am selben Ort.</h2>
</div>
Ich schaffe es nicht, sie links auszurichten (klingt wahrscheinlich lächerlich!). Sie ist betoniert!
#main_top{
display:flex;
padding: 10px;
}
Selbst mit einem #main_top_h2 geht´s nicht.

Herzlichen Dank für eine Antwort im Voraus.
Gruß proxo

 

[basti1012]

2. Was bedeutet: <style>
*{
margin:0;
padding:0;
}

Alle Elemente haben ihre eigene Feste Werte vorgegeben.Du kannst da ja mal border:1px solid black; eingeben und das margin,padding 0 löschen. Dann siehst du mal die Unterschiede wie viel Padding und margin die Elemente von sich aus haben.

1. Du hast viele Angaben in px. Ich lese dauernd, das soll man vermeiden und em oder rem verwenden.

Feste Größe von Elemente sollte man schon vermeiden, sonst wird es mit dem responsiven Design schon schwer.
Bei Schrift Größen sollte man em oder rem benutzen, weil sich die Größen irgendwie an den Elternelementen anpassen.
Da fragst du aber mal andere die dir das genauer erklären können.

4. Die h2 hast du mittig plaziert:
<main>
<div id="main_top">
<h2>Seit 1976 für unsere Kunden zuverlässig am selben Ort.</h2>
</div>
Ich schaffe es nicht, sie links auszurichten (klingt wahrscheinlich lächerlich!). Sie ist betoniert!
#main_top{
display:flex;
padding: 10px;
}

Das kannst du so machen

#main_top {
    display: flex;
    padding: 10px;
    justify-content: flex-start;
}

 

[basti1012]

3. Wofür sind diese Elemente hier extra aufgeführt?
#body_footer,
#body_left,
header,
#body_right,
#main_top,
#body_right,

Du hattest in deiner Vorgabe, bei allen Elemente die gleichen Angaben. So kann man in den Bereich gleich alle angaben auf einmal wechseln.
Ist kürzer als das in allen Elementen das nochmal auszuschreiben

 

[proxo]

Danke basti1012,
immer wieder interessanter Lernstoff!
Deine Antwort auf Frage <style> ist höchst interessant und vielseitig anwendbar. So kann man seine items bestens und gezielt platzieren.

Frage zu #main_top: Habe gerade gestern Abend mit dem Thema "justify-content" begonnen. Das kann ich ja bei "body-left" und "body-right" auch noch verwenden. Aber da muss man auch erst viel ausprobieren, um zu sehen wie die Effekte sind.

Zu 3.: Das leuchtet ein und ist sinnvoll, aber, dass man das jetzt einfach so untereinander aufzählen kann und dann funktioniert´s? Habe ich noch nirgendwo gelesen. Gilt also jeweils für den Bereich in den man es schreibt.

Zu 1.: Habe ich gelesen, dass man auch paddings und margins in em/rem angeben soll, eben wegen Responsivität.

Jetzt wird alles getestet, dauerd halt bei mir (noch) etwas länger.

Im Handy-Format habe ich noch das Problem, dass nach "Lang" kein "Cosmetics" erscheint. Da muss ich wohl noch am "flex-flow: row wrap;" arbeiten.

Langsam nimmt´s gute Form an.

Gruß
proxo

 

[basti1012]

Im Handy-Format habe ich noch das Problem, dass nach "Lang" kein "Cosmetics" erscheint. Da muss ich wohl noch am "flex-flow: row wrap;" arbeiten.

Wenn du es nicht hinbekommst.
Machst du an besten eine Testseite fertig (z. B. bei codepen.io). Dann kann man das Problem sehen und besser helfen.

 

[proxo]

Servus basti1012,
fühlt sich an wie ein Sieg! Ja, ich bin testweise online: http://hakellma.bplaced.net/
Hat etwas gedauert. Musste mich noch mit den Server-Themen vertraut machen und vor allem, welche links brauchen die Grafiken im Server-Verzeichnis.
Jetzt funktioniert (fast) alles:
Responding ist beim Handyformat nicht befriedigend, bei Tablets ok.
Vielleicht hast du noch eine Idee zur Verbesserung. Der Name "Lang Cosmetics" sollte ganz erscheinen.
Wenn möglich, auch die Logos, ist ja aber nicht unbedingt notwendig.
Grüßli

 

[basti1012]

Du solltest den Header keine feste Höhe geben , weil die Schrift dann kein Platz mehr hat.
Das sollte dann weg
max-height: 5em; im Header.
Optimal ist das aber auch nicht , weil die Bilder kein Platz mehr haben.
Du solltest im Handy Modus vielleicht ein Bild aus dem Header weglassen, und vielleicht die Schriftgröße ändern.
Vielleicht insgesamt so
Link zur Lösung

 

[proxo]

Servus basti1012,
merci für deine Antwort.
Ja, es ist verdammt eng auf dem Handy. Ich lasse jetzt beide Logos weg (damit sich niemand beschwert!) und die Schrift im "Angebot" habe ich soweit verkleinert, dass sie im Handyformat voll sichtbar wird. Eigentlich wollte ich sie nur für´s kleine Format unter @media all verkleinern, ist mir aber nicht gelungen. Ebenso wenig die Platzierung weiter links, ohne Padding, aber auch nicht mit justify-content: flex-start.
Macht aber nichts, geht so auch. Ich freue mich ja, wenn Vieles jetzt mit deiner Hilfe passt!
Dafür nochmals herzlichen Dank. Ich habe viel dazu gelernt.
Eine letzte Verständnisfrage noch: Wofür hast du
.big{
font-weight:900;
}
eingebaut? Ich habe dazu nicht viel gefunden, ausser, dass es ein "Klassenselektor" ist, hier also für die Schriftdicke. Was bezweckt das?
Besten Gruß

 

[basti1012]

Du hattest am Anfang ,glaube ich ,ja das benutzt <b> BLA</b>.
Daraus habe ich dann das gemacht <span class="big">BLA</span>.
font-weight:900 ersetzt dann das <b>, du kannst auch das <b> benutzen , doch ich finde es so schöner und übersichtlicher , und man könnte alles auf einmal änden wenn es nötig wäre.
Es gibt auch noch <em> und <strong> , die haben aber andere bedeutungen und werden anders angewendet.
https://developer.mozilla.org/de/docs/Web/HTML/Element/b

 

[proxo]

Danke für den Link! Kannte ich noch nicht.
Finde ich sehr gut, vom gesamten Aufbau und auch didaktisch. Habe mich etwas eingelesen und werde diese Quelle sicher weiter verwenden.
Zunächst habe ich mich mit dem letzten Buch von Peter Müller "Einsteig in HTML und CSS" schlau gemacht. War wirklich mein Einstieg.
Danach auch online:
http://de.html.net/
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Warum_Layouts_mit_CSS?
https://www.mediaevent.de/css/
Kann ich alles empfehlen.
Happy WE

 

[basti1012]

Ich kann dir noch das Empfehlen
https://www.html-seminar.de/
Die haben auch ein Forum wo ich und viele andere auch sind falls man Hilfe brauch.
Da gibt es auch noch Schwester Seiten für PHP und Python und auch alles Gut erklärt.