Sidebar unterteilen

    Hallo zusammen!

    Nachdem ich bisher immer super mit der Suchfunktion weiter gekommen bin (villt. hätt ich mich mal eher hier registrieren sollen, dann hätt ich mir das Code eintippen gespart... ;) ), muss ich nun doch mal ein Thema eröffnen, weil ich einfach nicht weiter komme.

    Ich möchte die Sidebar mit horizontalen Linien unterteilen. Hier erstmal der Link zu meinem Blog.

    Wie Ihr sehen könnt, hab ich die obere Linie schon hinbekommen, aber irgendwie krieg ich das mit den Linien dazwischen nicht hin. :-|

    Ihr habt sicher nen heißen Tipp für mich :) .

    • Gerade eben
    • 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

    Ich verstehe das Problem jetzt nicht.
    Du öffnest einfach deine sidebar.php und schreibst an passender/von dir gewünschter Stelle das

    HTML
    <hr />

    hin.

    "Eine gut gestellte Frage ist schon halb beantwortet."

    Hallo,

    das musst Du in der CSS (style.css (Zeile 344)) Datei editieren!
    Versuch es mal so:

    Code
    #side h2 {
[B] border-bottom:1px dotted #FF0000;[/B]
font-family:"Trebuchet MS",verdana,arial,helvetica;
font-size:12px;
font-weight:bold;
margin:0px;
padding-bottom:5px;
padding-left:0px;
padding-top:20px;
}

    Das Dicke ist das neu hinzugefügte.

    Tausche mal bottom (Linie unten) gegen top (Linie oben), also teste einfach mal rum:

    border-bottom:1px dotted #FF0000;

    oder

    border-top:1px dotted #FF0000;

    "dotted" steht jetzt für einen gepunkteten Rahmen!
    Hier hast Du einige Beispiel: border-style: Rahmenart: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

    1px = damit änderst Du die stärke der Linie.

    #FF0000; = steht jetzt für die Farbe Rot!

    Livebeispiel:

    Im Bild siehst Du unten "rechts" welche BORDER Einstellung auf dem Livebeispiel zu sehen ist!

    Ich hoffe Du hast es verstanden wenn nicht, frag einfach noch mal ok Svenja?!


    EDIT: mit

    HTML
    <hr />

    geht das natürlich auch, nur weiß ich da nicht, wie man das mit CSS verbindet. Also wie man das dann gestallten kann!

    Einmal editiert, zuletzt von Julia² (14. Juli 2007 um 15:26)

    Das mit dem <hr> und </hr> hat ja eben auch irgendwie nicht geklappt. Da war, außer der Linie ganz oben, nie was zu sehen. Ich tippe mal, ich hab das irgendwie an den falschen Stellen eingefügt.

    Danke Julia, mit Deinem super erklärten Tipp bin ich schon ne ganze Ecke weiter an das Wunschergebnis gekommen :) . Das einzige, was mich jetzt noch ein bißchen stört, sind die Abstände. Also über der Überschrift 1-2 px zu viel, unter den Punkten 1-2 px zu wenig.

    Dass die obere Linie bündig ist mit der Linie über den Posts, hab ich eben schon hinbekommen. Hast Du bei dem Rest noch nen Tipp?

    Erstmal zu <hr />! Das wird "nicht" mit </hr> abgeschlossen!! Du musst/sollst "nur" <hr /> einfügen!

    Beispiel:

    (Code)
    ...
    ..
    .
    <h2>Mehr...</h2><hr />
    .
    ..
    ...
    (Code)

    Wegen dem anderen muss ich leider noch etwas "nachdenken" Svenja. Ich melde mich wieder gleich! :-)


    wenn VOR dem h2 ein li ist ist der hr tag an dieser Stell einfach falsch

    lg

    Ah so, danke :D . Mit der Linie, die ich anfänglich ganz oben drüber hatte, hat es ja geklappt mit "meinem" hr-Befehl. Also hab ich das auch fröhlich weiter damit probiert. Kein Wunder, dass es nicht ging ;) . Wieder was dazu gelernt. Ich teste jetzt grad mal, wie es damit aussehen würde.

    Danke Monika!

    Dann muss es VOR dem <li> TAG (Angabe ohne Gewähr). Geht das Monika?

    Aber Monika beides geht ehrlich gesagt, zumindest bei mir, ob es dann valid ist oder nicht, dass weiß ich nicht. Was meinst Du?

    Auf der index.php bei den Posts hat´s geklappt mit dem <hr/> -Tag. Dank Eures Tipps hab ich die Linien nun nur unter den Beiträgen, so, wie ich es ursprünglich auch haben wollte.

    In der Sidebar hab ich die style.css wie folgt geändert:

    Aus

    Code
    #side h2 {
    font-family:"Trebuchet MS",verdana,arial,helvetica;
    font-size:12px;
    font-weight:bold;
    margin:0px;
    padding-bottom:5px;
    padding-left:0px;
    padding-top:20px;
}

    wurde

    Code
    #side h2 {
    border-top: 6px solid #CDBBB9;
    font-family: "Trebuchet MS", verdana, arial, helvetica;
    font-size: 14px;
    font-weight: bold;
    margin: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-top: 10px
}

    Jetzt ist das mit den Abständen besser und so gefällt´s mir schon mal richtig gut! Vielen Dank nochmal für die schnelle und unkomplizierte Hilfe!

    Schönes Wochenende!

    Zitat von Julia²

    Danke Monika!

    Dann muss es VOR dem <li> TAG (Angabe ohne Gewähr). Geht das Monika?

    Aber Monika beides geht ehrlich gesagt, zumindest bei mir, ob es dann valid ist oder nicht, dass weiß ich nicht. Was meinst Du?

    nein es ist dann nicht valide

    zwischen ul und li schiebt man keine andren html tags

    ob es geht ...in manchen Browsern vielleicht,

    doch wenn wer fragt, wäre richtiges html nicht schlecht ;)

    weil sonst kommen nach zwei Tagen die Anfragen:wieso sieht man Design im Browser X so komisch aus ;)

    lg

    Das ist richtig Monika! Jetzt weiß ich auch bescheid und kann mein altes Wissen abschminken (*g*) und bin nun um "richtiges" Wissen reicher.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden