CSS: Abstände zwischen Links in einer Sidebar

  • Hallo werte Forums-Mitglieder!

    Ich habe ein wirklich kleines Problem:

    Und zwar würde ich gerne per CSS die Abstände von Links/Verknüpfungen in einer Sidebar regeln. Die sollten alle in grösserem Abstand voneinander erscheinen.

    Also nicht so:

    Blogroll:
    http://www.google.de
    http://www.blabla.de
    http://www.hansdampf.de

    sondern:

    Blogroll:
    http://www.google.de

    http://www.blabla.de

    http://www.hansdampf.de

    usw.

    Der Abstand sollte auch einstellbar sein, damit ich ein wenig rumexperimentieren kann, wie es am besten wirkt.

    Habe es schon mit allerlei "margin" und "padding" probiert, aber die verändern immer die Abstände der kompletten Sidebar.

    Im Prinzip eben alles, was in "ul" und "li" im Sidebar steht sollte zwecks Abstand anpassbar sein.

    Danke im Vorraus!

    Viele Grüße,
    lynx

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ja und wo kann man sich jetzt dein Blog anschauen?

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • maxe: Leider noch gar nicht, will erst noch mein Theme mit "Theme Test Drive" fertigstellen. Wenn alles klappt, dann irgendwann im Juli, spätestens im August!

  • Morris: Das ist kein Problem! Folgendes habe ich in der CSS notiert:

    Code
    .sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 190px;
    }

    Hier habe ich wie erwähnt mit "padding" und "margin" rumgespielt, das setzt mir jedoch die Sidebar um...

    Viele Grüße,
    lynx

  • 1) padding und margin haben immer 4 Werte im UZS: oben-rechts-unten-links
    2) man kann sie aber auch mit verkürzten Werten darstellen: oben/unten - rechts/links
    3) oder einfach auf einen Wert reduzieren: oben/rechts/unten/links

    zB
    Ad 1) padding/margin: 10px 2px 5px 4px;
    Ad 2) padding margin: 3px 1px;
    Ad 3) padding/margin: 0px;

    Anm 1.: Bei 1) kann der letzte (links) Wert weggelassen werden. Dann intepretiert das der Browser als "deckungsgleich mit rechts"
    Anm 2.: Bei 3) kann die Einheit (s. Dein Bsp oben) "px" entfallen
    Anm 3.: Du kannst als Einheit auch "em" nehmen, falls Du Dein gesamtes Layout incl. Innen-/Außenabständen skalierbar machen willst.

    Fazit: Css-Lektüre konsultieren: zB CSS 4 You - The Finest in Stylesheets

  • Stellst du uns auch noch den Code zur Verfügung, auf den die CSS angewendet werden? Erst dann haben wir allen relevanten Code zur Verfügung :)

    Gruß
    Mo

  • Oh Mann, war die komplett falsche Passage. :-(

    Habe es aber inzwischen hinbekommen! Das, was mir kaiser erzählt hat, hat völlig ausgereicht für diesen Effekt.

    Ich habe "Boxen" gemacht für die Sidebar und dementsprechend auch dort "ul" und "li" geregelt. Bei "li" musste ich nur "margin: 3px" einfügen oder eben den Wert, den man für passend für den Abstand hält. War also schon auf dem richtigen Weg, aber mein eigenes CSS verplant...

    Die Firma dankt, ne!

    Die Ressource für CSS, also der Link, war übrigens sehr gut! Werde mich zukünftig dort orientieren. Manchmal fehlt nicht viel... :-)

    Viele Grüße,
    lynx

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!