Liste ohne Punkte wirklich zentrieren

[salzberg]

Hallo zusammen,

ich hab' nach einigen Jahren Pause nun mal wieder mit HTML / CSS angefangen... arbeite zu Neubeginn mal mit den Videos zu responsive Seiten von Adobe... nur so nebenbei...

...hab' nun festgestellt, dass im Navigationsbereich die Wörter in der (ul-) Liste, zwar ungefähr, aber nicht genau in der horizontalen Mitte des Browser-Fensters erscheinen. Mir kommt es so vor, als ob die Sichtbarkeit der Listenpunkte zwar abgestellt wäre (list-style-type: none;), der Abstand zum Punkt + Platzbedarf für den Punkt, aber zu der Wortlänge mit dazugerechnet werden... und sich deswegen "nur" der jeweilige Text nicht in der Mitte befindet.

Kann das sein? ...oder muss es an etwas anderem liegen?

[Der Martin]

Hallo,

...hab' nun festgestellt, dass im Navigationsbereich die Wörter in der (ul-) Liste, zwar ungefähr, aber nicht genau in der horizontalen Mitte des Browser-Fensters erscheinen.

Mir kommt es so vor, als ob die Sichtbarkeit der Listenpunkte zwar abgestellt wäre (list-style-type: none;), der Abstand zum Punkt + Platzbedarf für den Punkt, aber zu der Wortlänge mit dazugerechnet werden... und sich deswegen "nur" der jeweilige Text nicht in der Mitte befindet.

Kann das sein?

das kann von hier aus ohne Einblick in deinen Quellcode niemand sagen. Vermutlich hast du die Bullets mit list-style-type: none; entfernt - gut möglich, dass dabei ein margin-left oder padding-left übrigbleibt. Das findest du aber mit den Entwicklertools deines Browsers ganz schnell heraus.

...oder muss es an etwas anderem liegen?

Vielleicht am Fettgehalt im Käse? ;-)

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Mir kommt es so vor, als ob die Sichtbarkeit der Listenpunkte zwar abgestellt wäre (list-style-type: none;)

das kann von hier aus ohne Einblick in deinen Quellcode niemand sagen. Vermutlich hast du die Bullets mit list-style-type: none; entfernt

Stand deine Vermutung nicht so im OP und ist damit genug Einblick?

gut möglich, dass dabei ein margin-left oder padding-left übrigbleibt.

Irgendwie hab ich in Erinnerung, dass verschiedene Browser das früher mal tatsächlich unterschiedlich umgesetzt hatten. Heute ist es wohl in allen Browsern padding-left.

(BTW, war zeichnest du Code nicht als solchen, sondern kursiv aus?)

LLAP 🖖

[Der Martin]

Hallo,

das kann von hier aus ohne Einblick in deinen Quellcode niemand sagen. Vermutlich hast du die Bullets mit list-style-type: none; entfernt

Stand deine Vermutung nicht so im OP und ist damit genug Einblick?

stimmt, jetzt sehe ich es auch. Habe ich vorhin überlesen.

gut möglich, dass dabei ein margin-left oder padding-left übrigbleibt.

Irgendwie hab ich in Erinnerung, dass verschiedene Browser das früher mal tatsächlich unterschiedlich umgesetzt hatten.

In der Tat. Ich habe vor über 10 Jahren mal Opera, Firefox und Internet Explorer verglichen. Ich weiß nicht mehr die genaue Zuordnung, aber ich weiß noch, dass

• einer der drei die Einrückung durch padding-left für ol/ul
• einer durch padding-left für li
• und einer durch margin-left für li

realisiert hatte.

Heute ist es wohl in allen Browsern padding-left.

Schön, wenn es einheitlich ist. Andernfalls müsste man darauf achten, dass man bei Eingriffen in die li-Einrückung immer alle beteiligten Eigenschaften explizit berücksichtigt.

(BTW, war zeichnest du Code nicht als solchen, sondern kursiv aus?)

Weil ich's kann? ;-)
Ernsthaft: Das Kästchen und die großen Abstände bei der Inline-Code-Auszeichnung gefallen mir nicht. Deswegen meide ich das.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

(BTW, war zeichnest du Code nicht als solchen, sondern kursiv aus?)

Weil ich's kann? ;-)
Ernsthaft: Das Kästchen und die großen Abstände bei der Inline-Code-Auszeichnung gefallen mir nicht. Deswegen meide ich das.

Visuelle anstatt logische Auszeichnung?

Aber ja, ich finde die Kästchen auch störend. Und da isser wieder, der Knoten im Taschentuch, der mich dran erinnert, das (u.v.a.m.) zu ändern.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

den Knoten kann jeder je nach Geschmäckle in sein eigenes Taschentuch zwirbeln (User-CSS in den Einstellungen):

code:not(.block) {
   border: none;
   background-color: transparent;
}

oder wie auch immer.

Rolf

[Gunnar Bittersmann]

@@Rolf B

den Knoten kann jeder je nach Geschmäckle in sein eigenes Taschentuch zwirbeln (User-CSS in den Einstellungen):

Klar kann das jeder tun. Es geht aber darum, einen guten Default zu erstellen, sodass das nicht jeder tun muss.

LLAP 🖖

[salzberg]

Hey, vielen Dank schon mal für die rege Beteiligung.

Ich bin g'rad woanders, als die Datei mit dem Code...

Bis ich ihn posten könnte mal vorab: ... hab' leider keine Ahnung, was padding-left bewirkt... vor allem in Bezug auf mein Problem

[Gunnar Bittersmann]

@@salzberg

... hab' leider keine Ahnung, was padding-left bewirkt...

Guckst du padding-left; s.a. Box-Modell.

vor allem in Bezug auf mein Problem

Eine Liste hat durchs browserinterne Stylesheet padding-left; das willst du auf 0 setzen.

LLAP 🖖

[salzberg]

war offenbar zu langsam, um den Beitrag nochmals zu editieren...

Inzwischen kamen mir noch Gedanken zu padding-left. Bedeutet das nun, dass das eingestellte Padding im Fall einer Liste, links vom Wort hinzugerechnet wird, oder ist mit dem padding der Abstand des (wenn auch nicht sichtbaren) Listenpunktes gemeint?

Was kann ich denn schreiben, wenn ich ober- und unterhalb padding haben möchte, aber links keines?

Da kam ja schon wieder ein Beitrag dazwischen 😀 ...ich probiere mal heute Abend...

[Matthias Apsel]

Hallo salzberg,

Bedeutet das nun, dass das eingestellte Padding im Fall einer Liste, links vom Wort hinzugerechnet wird, oder ist mit dem padding der Abstand des (wenn auch nicht sichtbaren) Listenpunktes gemeint?

Schau dir das Box-Modell an.

Was kann ich denn schreiben, wenn ich ober- und unterhalb padding haben möchte, aber links keines?

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/padding

Bis demnächst
Matthias

[salzberg]

So…

mit padding-left: 0; an der richtigen Stelle klappt es nun tatsächlich. Die Eigenschaft musste in die Anweisungen für die ul rein... ob wohl alle Elemente, um die es ging, auch li sowie a sind.

Hier noch der entsprechende css-Code:

.style-nav ul {
	list-style-type: none;
	padding-left: 0;
			 }
			
.style-nav ul li a {
	text-decoration: none;
	color: #999999;
	text-align: center;
	font-weight: 500;
	display: block;
	padding: 8px;
	}	

Vielen, vielen Dank für eure Hilfe!

[Gunnar Bittersmann]

@@salzberg

.style-nav ul li a {

Dazu noch der Hinweis: Mache Selektoren so spezifisch wie nötig, aber nicht mehr. Heißt in diesem Fall:

.style-nav a {

LLAP 🖖

[salzberg]

Danke für den Hinweis...

...aber in diesem Fall wollte ich nur die 'a' formatieren, die auch Listenenträge sind... ob man dann 'ul' weglassen könnte hab' ich nicht mehr ausprobiert.

[salzberg]

Auch wenn das Problem, zum Glück, ja generell gelöst ist ––- hier trotzdem noch ein kleiner Nachtrag zum Verständnis: (bekomme keinen Gedankenstrich eingefügt...)

Hallo salzberg,

Bedeutet das nun, dass das eingestellte Padding im Fall einer Liste, links vom Wort hinzugerechnet wird, oder ist mit dem padding der Abstand des (wenn auch nicht sichtbaren) Listenpunktes gemeint?

Schau dir das Box-Modell an.

An welcher Stelle des Padding bei einer Liste stheht, konnte ich hier nicht erkennen... ich gehe aber eher davon aus, dass der "Einrück"-Abstand zwischen "Normaltext" links und Listeneintragstext gemeint ist... ... und man diesen Abstand ja für die ganze Liste einstellt und nicht für einen einezelnen Listenpunkt... daher funktioniert, es wohl auch nur, wenn es bei den Anweisungen für die Liste (ul) steht.