Links Zentriert und nicht untereinander.

wizzardthegrey · #1 (**permalink**) 29.01.2022, 15:18

Guten Tag

Ich habe folgendes problem.
Ich bin dabei weine Website zu programmieren, was auch alles soweit funktioniert. Nur ein problem habe ich gerade, damit ihr es euch anschauen könnt, klickt auf den Link.
Asel 800

auf der Linken seite die Links:
Sehenswertes Heimatpflege Kulturelles Pinnwand Jubiläumsjahr 2011 Partnergem. Görlach

Die wedern leider nicht so angezeigt, wie ich es mir wünsche.
Sie werden im eigenen div Zentriert angezeigt, ich möchte aber das sie Untereinander angezeigt werden.

Alles andere ist so, wie ich es haben möchte.
Wo liegt der Fehler?

Hier mein derzeitiger css Code dazu.

Code:

#page-verein {
	background: url(../bilder/background.png);
	border-radius: 10px 10px 10px 10px;
	border: 2px solid #FFFFFF;
	color: #000000;;
	width:50%;
	margin: 0 auto;
	margin-top: 5px;
	text-align: center;
}

.vereinsnav {
	background: url(../bilder/background.png);
	float: left;
	width:24%;
}

MrMurphy · #2 (**permalink**) 29.01.2022, 16:24

Nun ja, die Links werden nicht zentriert angezeigt, sondern hintereinander. Soviele, wie in eine Zeile passen.

Das liegt daran, dass die li-Elemente der Navigation mittels CSS die Anweisung "display: inline;" erhalten. Wenn du das löscht stehen die Links untereinander.

Zusätzlicher Hinweis: Mit der Verwendung von "float" wirst du erfahrungsgemäß Probleme bekommen. Beschäftige dich statt dessen mit Flexbox (display: flex;") und CSS-Grid ("display: grid;")

wizzardthegrey · #3 (**permalink**) 29.01.2022, 17:45

Danke für die Antwort

Ich habe ja 2 Linkleisten die Obere soll ja nebeneinander liegen, nur die Linke soll untereinander sein.

Wie bewerkstelle ich das denn?

MrMurphy · #4 (**permalink**) 29.01.2022, 18:43

In der Datei "style.css" den Eintrag

Code:

#li-02 {
	display: inline;
	list-style: none;
	margin-left: 5px;
}

suchen und "display: inline;" löschen.

wizzardthegrey · #5 (**permalink**) 29.01.2022, 21:20

Ich teste das Morgen mal, melde mich dann.

Danke

top · #6 (**permalink**) 29.01.2022, 23:52

Auch wenn es hier nicht das Problem verursacht noch folgendes:

Nutze für solche Fälle class und nicht id.

Jede id darf auf einer Seite nur ein einziges Mal verwendet werden. Mit der gleichen class darfst du beliebig viele HTML-Objekte markieren.

wizzardthegrey · #7 (**permalink**) 30.01.2022, 10:32

Guten Morgen

Ich habe gerade

Zitat:

#li-02 {
display: inline
list-style: none;
margin-left: 5px;
}

zu

Code:

.li-02 {
	list-style: none;
	margin-left: 5px;
}

geändert und das hat geklappt (logisch) auf die einfachsten dinge kommt man leider nicht.

Weiterhin habe ich alle ids zu class geändert, danke für den hinweis.

jetzt kann ich endlich weitermachen.-

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.	Picasso	CSS	36	03.01.2011 20:41
links zentriert in navi	Das_M	(X)HTML	4	13.02.2008 17:39
Testcase Netscape: Box immer zentriert, daher unlesbar	Leeloo	CSS	0	08.09.2007 19:28
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 19:20
links in externem fenster öffnen... HELP Plz!!	NoPlanClan	CSS	4	12.01.2004 19:54