border-bottom

    hey...
    ich möchte bestimmten textabschnitten mit "border-bottom" (1px dotted #cccccc) formatieren. allerdings wird so ja nur das wort unterstrichen - ich will gerne, dass "border-bottom" über die gesamte länge meines div's geht. wie mache ich das?

    mfg

    glaub bei underline wird auch nur das wort unterstrichen.

    der rahmen geht ja über die gesamte breite des objektes.
    wo hast du denn den rahmen hinzugefügt ? vermutlich is
    der container eben auch nur so lang wie des wort.

    setz mal des wort in nen span-tag, gib dem die volle breite
    des div-containers und schaus nochmal an.

    wenns net hilft -> code posten

    hat leider nicht geklappt!
    mein div sieht folgender maßen aus...

    Code
    <div class="box2">
<h1><span class="Stil1">#</span> Archiv </h1>
<span class="Stil3">Februar 2009</span><br/>
<span class="Stil3">Januar 2009</span><br/>
<span class="Stil3">Dezember 2008</span><br/>
<span class="Stil3">November 2008</span><br/>
<span class="Stil3">Oktober 2008</span><br/> 
</div>

    box2

    span3

    Code
    .Stil3 {border-bottom:1px dotted #CCCCCC; width:100%;}

    nochmal zum verständnis - "border-bottom" soll nicht nur das wort unterstreichen, sondern bis ans ende des div's gehen...

    mfg

    ja dann gib dem div, dass so einen border bekommen soll doch den border.. geht auch bei span, p, usw, usw,...

    ich versteh die frage irgendwie nicht..
    wenn ich nem container nen rahmen geben will mach ich das.. und probier nich am text rum

    Zitat von synaptic

    ja dann gib dem div, dass so einen border bekommen soll doch den border.. geht auch bei span, p, usw, usw,...

    ich versteh die frage irgendwie nicht..
    wenn ich nem container nen rahmen geben will mach ich das.. und probier nich am text rum


    der div soll ja gar keinen rahmen bekommen! nur der text (Oktober 2008, November 2008, etc) soll einen bekommen. mit "text-decoration" geht das nicht, da so nur das wort unterstrichen wird. ich will, dass der gesamte rahmen unter dem wort bis zum recht rand des div's unterstrichen ist...

    mfg

    Du willst keinen Text formatieren, du willst eine Linie, die bis an den rechten Rand geht. Dein Text geht ja nicht bis an den Rand.

    Hi,

    was du da hingeschrieben hast ist semantisch eine <ul>.
    Das mit dem <span> ist imho unsinnig.

    <li> braucht list-style-type:none; und kein width, da es sich um ein Blockelement handelt.
    <li> bekommt dann noch den border-bottom.
    Falls die Linie rechts oder links kürzer sein soll, geht das über margin, die vertikalen Abstände zwischen den <li>'s kann man genauso regeln falls gewünscht. ;)

    koslowski

    danke koslowski!
    hat soweit geklappt...jetzt habe ich nur noch das problem, dass die liste immer noch eingerückt ist und einen absatz hat. das soll bitte weg und von der formatierung so aussehen, wie die anderen texte mit überschrift.
    Beispielseite

    mfg

    Einmal editiert, zuletzt von davidos_no.1 (22. Oktober 2008 um 17:05)

    Hi,

    Zitat von davidos_no.1

    danke koslowski!
    hat soweit geklappt...jetzt habe ich nur noch das problem, dass die liste immer noch eingerückt ist und einen absatz hat. das soll bitte weg und von der formatierung so aussehen, wie die anderen texte mit überschrift.
    Beispielseite

    mfg

    hast an den CSS-Prolog gedacht?

    Erste Zeile CSS-Datei:

    Code
    *  {
  padding:0;
  margin:0;
}

    das hört sich für mich so an, als hättest du die browserinternen Vorformatierungen noch nicht überschrieben. ;)

    koslowski

    Zitat von koslowski


    ....
    hast an den CSS-Prolog gedacht?

    Erste Zeile CSS-Datei:

    Code
    *  {
  padding:0;
  margin:0;
}

    ...


    sorry, aber ich weiß nicht genau, was du damit meinst!
    vielleicht hilft es weiter, wenn ich den code poste...

    Code
    .div {width:180px; height:auto;}
    Code
    .li {list-style-type:none; border-bottom:1px dotted #FF933A;}

    mfg

    Moin,

    wenn du nur den XHTML-Code hinschreibst und dir das im Browser anschaust, wirst du festellen, daß Überschriften fett gedruckt sind, <p> einen deutlichen Absatz macht, Listen etwas eingerückt sind, etc.
    Das heißt die Browser haben sozusagen schon intern CSS intus und formatieren dir da ungefragt was.

    Wären schön wenn das browserinterne CSS bei allen Browsern gleich wäre, da hätte man sich Arbeit gespart.
    Nur leider ist dem nicht so.

    z.B. ist list-style-position unterschiedlich. Bei dem einen Browser ist es outside und bei dem anderen inside.
    Um eine einheitliche Darstellung von Listenpunkten zu gewährleisten, mache ich mir immer eine kleine HG-Grafik und binde die ein.
    Sieht auch schöner aus, da ich ja entscheide wie die aussehen soll.

    * { padding:0; margin:0; } ist der sogenannte Generalreset, der in der ersten Zeile einer CSS-Datei steht.
    Da werden die Abstände genullt, also eine einheitliche Grundlage für alle Browser geschaffen. Davon ausgehend definiert man alle Abstände neu.
    Ist auch viel weniger Mehrarbeit als man denkt.

    Daneben gibts z.B. noch Eric Meyer's differenzierten Reset.

    Insgesamt ein heiß dikutiertes Thema, Reset oder nicht, wenn ja welchen denn nun.
    Der Generalreset ist sicher die unter Webdesignern gebräuchlichste Methode. ;)

    koslowski