XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Links Zentriert und nicht untereinander. (http://xhtmlforum.de/showthread.php?t=74301)

wizzardthegrey 29.01.2022 15:18

Links Zentriert und nicht untereinander.
 
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 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 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 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 29.01.2022 21:20

Ich teste das Morgen mal, melde mich dann.

Danke

top 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 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.-


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023