CSS+<p>+<div />

[HELLinG3R]

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:

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?

[HELLinG3R]

okay, ich experimentiere grade mit den divtags rum:

CSS:

div.dotline{

background-image:url(pics/punkte.gif);

background-repeat:repeat-x;

margin-top:0px;

margin-bottom:10px;

min-height:1px;

font-family: arial, helvetica, sans-serif;

font-size: 12px;

color: #ff0000;

font-weight: normal;

border-width:0px;

background-color: #f8f8f8;

}

HTML:

<div class="dotline">

blabljfshguhgposaga<br>fjiodghdpsoi

<div class="dotline"></div>

</div>

das scheint ganz gut zu klappen...

[geloescht_JesterDay]

p.textbox {

	margin-top:0px;

	margin-bottom:0px;


        border-top-style: dotted;

        border-top-width: 2px;

        border-bottom-style: dotted;

        border-bottom-width: 2px;


        padding-left: 10px;


	font-family: arial, helvetica, sans-serif;

	font-size: 12px;

	color: #ff0000;

	font-weight: normal;



	background-color: #f8f8f8;

}



<p class="textbox">

blubbbla

</p>

So könnte es gehen, falls du sowas meinst...

EDIT:

deine besonders aussendenden Punkte bekommst du damit leider nich hin :\

[HELLinG3R]

ja, auf dotted bin ich auch schon gekommen, das ist aber problematisch, weil ich mich sehr genau an styleangaben halten soll.

Naja, so gehts ganz gut, im moment.