border-bottom

davidos_no.1

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

Bandit

Ähm, kann es sein, dass du text-decoration:underline; suchst?

driver

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

davidos_no.1

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

Code

.box2
{
    padding-left:2px;
    padding-right:2px;
    width:200px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    vertical-align:top;
}

Alles anzeigen

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

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

davidos_no.1

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

synaptic

Zitat von synaptic

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

dann stopf den text in ein span-tag oder p-tag und gib diesem den border-bottom

davidos_no.1

Zitat von synaptic

dann stopf den text in ein span-tag oder p-tag und gib diesem den border-bottom

les doch mal den code - habe ich doch schon gemacht...

Bandit

Hast du es schon mit div statt span probiert?

davidos_no.1

Zitat von bandit600

Hast du es schon mit div statt span probiert?

wie div statt span? ich will doch den text formatieren und nicht den div...

Bandit

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.

sejuma

Wie wär's damit?

Code

<hr style="color: #ccc; height: 1px; border: dotted;">

koslowski

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

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

davidos_no.1

hab auch schon bei selfhtml geguckt aber keine passenden anweisungen gefunden

koslowski

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

davidos_no.1

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 class="div">
    <h1><span class="color01">#</span> Sobre Brasil</h1>
    <br/>
  <ul>
    <li class="li"><a class="navi02" href="">Data-Sapiens.net</a></li>
    <li class="li"><a class="navi02" href="">Data-Sapiens.net</a></li>
    <li class="li"><a class="navi02" href="">Data-Sapiens.net</a></li>
    <li class="li"><a class="navi02" href="">Data-Sapiens.net</a></li>
    <li class="li"><a class="navi02" href="">Data-Sapiens.net</a></li>
    <li class="li"><a class="navi02" href="">Data-Sapiens.net</a></li>
  </ul>
</div>

Alles anzeigen

Code

.div {width:180px; height:auto;}

Code

.li {list-style-type:none; border-bottom:1px dotted #FF933A;}

mfg

davidos_no.1

habe das in eine meiner vier css-dateien eingesetzt - jetzt ist die liste bündig, aber der rest ist total verschobene...

mfg

davidos_no.1

ich korrigiere mich!!! hat doch geklappt...
nicht <li>, sondern <ul> brauchte die anweisungen margin/padding = 0

mfg und danke

koslowski

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

Tags