CSS+<p>+<div />

[Beni]

hallo leute!
ich möchte Folgendes bewerkstelligen:

Ich habe eine Textbox variabler Größe.
Das Textfeld ist grau hinterlegt und soll am oberen und unteren Ende mit punkten begrenzt werden. Die punkte haben besonderes Aussehen und kommen aus einem .GIF.

Ich habe es im moment so realisiert:
HTML:
<div class="dotline" />
   <p class="textbox">
      foo
      bla blubb
   </p>
<div class="dotline" />

CSS:
/**
* Gepunktete Linie im div-container
**/
div.dotline{
   margin-top:0px;
   padding-top:0px;
   padding-bottom:1px;
   background-image:url(pics/punkte.gif);
   background-repeat:repeat-x;
}

/**
* Normaler schwarzer Text, eingerückt
**/
p.textbox {
   margin-top:0px;
   margin-bottom:0px;
   margin-left:10px;

font-family: arial, helvetica, sans-serif;
   font-size: 12px;
   color: #ff0000;
   font-weight: normal;

border-width:0px;

background-color: #f8f8f8;
}

Okay, so weit so gut.
ich möchte nun aber erreichen, dass immer vor dem Textfeld ein kleiner Zwischenraum ist.
Zweckmässig wäre es, wenn ich die divs einfach in den <p> teil übernemen könnte, was aber aus irgendeinem grund dann nicht mehr interpretiert wird (der Textabschnitt hat dann keine Formatierung mehr)

Habe ich da was übersehen / nicht bedacht?
wie könnte ich das lösen, möglichst so, dass ich nur noch sagen muss
<p class="textbox">
blubbbla
</p>
und die linien sind automatisch da?

[wahsaga]

hi,

Zweckmässig wäre es, wenn ich die divs einfach in den <p> teil übernemen könnte, was aber aus irgendeinem grund dann nicht mehr interpretiert wird (der Textabschnitt hat dann keine Formatierung mehr)

Habe ich da was übersehen / nicht bedacht?

du hast nicht bedacht, dass <p> keine block level elemente wie <div> beinhalten darf.

wie könnte ich das lösen, möglichst so, dass ich nur noch sagen muss
<p class="textbox">
blubbbla
</p>
und die linien sind automatisch da?

du könntest evtl. die pseudoformate :before und :after benutzen, um die grafik einzubinden - allerdings ist das nicht IE-tauglich.
da wirst du wohl bei deiner jetzigen oder einer aähnlichen lösung bleiben müssen (beispielsweise das bild oben als hintergrundbild einbinden, und unten in den <p> einen zusätzlichen <span> aufnehmen, der dann das untere ebenfalls als hintergrundbild aufnimmt.

gruß,
wahsaga

[MudGuard]

Hi,

<div class="dotline" />

obwohl das korrektes XML (und auch korrektes XHTML) ist, würde ich dazu raten, die Kurzschreibweise nur bei Elementen mit content-Model EMPTY anzuwenden (img, link, meta usw.).
Bei Elementen, die nur zufällig keinen Inhalt haben, würde ich zwei tags schreiben.

Für eine horizontale Linie gibt es ja eigentlich auch ein spezielles Element (hr).

<p class="textbox">
      foo
      bla blubb
   </p>
<div class="dotline" />

Die divs wegzulassen und

p.textbox { border-style: dotted none; border-width:1px; border-color:blue; }

zu verwenden kommt nicht in Frage?

cu,
Andreas

[Beni]

(An deinen vorredner: Danke für den Hinweis mit dem <p>, ich wusste nicht, dass p kein div enthalten darf ;) )

nein, dottet kommt leider nicht infrage, daran habe ich auch schon gedacht. :(

Im moment experimentiere ich mit den divtags, ich benutze im moment die divs asl "p"'s, was ja leagl ist, oder?

HTML:
<div class="dotline">
 blabljfshguhgposaga<br>fjiodghdpsoi
 <div class="dotline"></div>
</div>

CSS:
div.dotline{
 background-image:url(pics/punkte.gif);
 background-repeat:repeat-x;

margin-top:10px;
 margin-bottom:0px;
 min-height:1px;

font-family: arial, helvetica, sans-serif;
 font-size: 12px;
 color: #ff0000;
 font-weight: normal;

border-width:0px;

background-color: #f8f8f8;
}

Das klappt eigentlich ganz gut so, kann ich das so lassen, oder wird es inkompatibilitäten zwischen IE/NS geben?

Danke für eure antworten!

[wahsaga]

hi,

Im moment experimentiere ich mit den divtags, ich benutze im moment die divs asl "p"'s, was ja leagl ist, oder?

"legal" im sinne von nicht-invalide ja - aber semantisch fragwürdig.

HTML:
<div class="dotline">
blabljfshguhgposaga<br>fjiodghdpsoi
<div class="dotline"></div>
</div>

was spricht dagegen, es nach meinem vorschlag zu machen, mit

<p class="dotline">
 blabljfshguhgposaga<br>fjiodghdpsoi
 <span class="dotline2"></span>
</p>

du müsstest nur noch dafür sorgen, dass der span per display:block als block level element _formatiert_ wird, bevor du ihm ein hintergrundbild verpasst.

gruß,
wahsaga