Flexible Textbox

[Tomchy]

Hallo, guten Morgen!

Ich bitte die CSS-Spezialisten unter Euch um Rat.

Ich baue mir gerade eine Textbox mit folgenden Eckdaten:

• ein Container mit einem blau-weissem Hintergrundverlauf (von oben nach unten)
• im Container eine Textbox mit variabler Textmenge
• unten eine weisse Abschlussleiste mit runden Ecken, die die Textbox zum Seitenhintergrund abgrenzt.

Da ich ziemlich neu bin in CSS, bekomme ich es einfach nicht hin, dass die Textbox variabel nach unten gedehnt wird je nach Textmenge und sich daran dann die Abschlussleiste anfügt. Ich habe es auch schon mit height in % versucht aber da passiert nicht das gewünschte. Auch verschiedene Positionsvarianten habe ich probiert.

Bin dankbar für Eure Tipps!

Danke,
Tomchy

------------
<div id="container">

<div id="textbox">
     Inhalt der Textbox
  </div>

<div id="abschlussleiste-unten">
  </div>

</div>
------------

#container{
width: 160px;
height: 300px;
background-color: #FFFFFF;
background-image: url(../images/vertikaler-blau-weiss-verlauf.gif);
background-repeat: no-repeat;
}

#textbox{
width: 160px;
height: 180px;
position: absolute;
left:0px;
top:10px;
}

#abschlussleiste-unten{
width: 160px;
height: 20px;
margin: 0pt;
position: absolute;
left:0px;
bottom:0px;
background-image: url(../images/abschlussleiste-unten.gif);
background-repeat: no-repeat;
background-color: #134c95;
}

[Beat]

Ich baue mir gerade eine Textbox mit folgenden Eckdaten:

• ein Container mit einem blau-weissem Hintergrundverlauf (von oben nach unten)
• im Container eine Textbox mit variabler Textmenge
• unten eine weisse Abschlussleiste mit runden Ecken, die die Textbox zum Seitenhintergrund abgrenzt.

Für eine Zierleiste brauchst du kein Extra Markup
Dafür gibt es die CSS-Pseudoelemente

some_selector:before{}
some_selector:after{}

Du willst im übrigen position:absolute vermeiden.

mfg Beat

[Tomchy]

Hallo Beat,

some_selector:before{}
some_selector:after{}

Höre zum ersten Mal davon, finde auch nichts bei SELFTML.

Kannst du mir bitte mal aushelfen?

mfg Tomchy

[suit]

finde auch nichts bei SELFTML.

Die Suche in der Suchmaschine meiner Wahl nach "selfhtml after before" findet sofort <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm@title=diesen Artikel>.

[Tomchy]

Danke!

Ich suchte nach "some_selector"

mfg, Tomchy

[suit]

Ich suchte nach "some_selector"

Dir ist nicht in den sinn gekommen, dass some_selector für "Irgend einen Selektor" steht und nur als Platzhalter dient? :D

[Tomchy]

Dir ist nicht in den sinn gekommen, dass some_selector für "Irgend einen Selektor" steht und nur als Platzhalter dient? :D

Nein, wie gesagt: Newbie! :-)

Aber ich lerne dazu, habe das Problem nun Dank euch gelöst!

Schönes Wochenende wünsche ich!

mfg, Tomchy

[Thomchy]

Hallo,

#textbox:after {
content: url(../images/coolhotstuff-single-bottom.gif)" Text";
}

Kann man hier noch mehr Content in die gleichen Klammern einbauen? Ich möchte vor der Grafik z.B. noch ein Trennlinie <hr> einbauen, weiss aber nicht, wie die Syntax dazu ausehen muss, damit es funzt ... Oder wenn ich den Text vorne anfügen möchte.

mfg, Tomchy

[suit]

Kann man hier noch mehr Content in die gleichen Klammern einbauen?

Sicher, du kannst aber auch :after verschachteln

foo:after:after:before:after {} ist auch völlig ok.

Ich möchte vor der Grafik z.B. noch ein Trennlinie <hr> einbauen, weiss aber nicht, wie die Syntax dazu ausehen muss, damit es funzt

Eine Trennlinie vor der Grafik ist ggf. mit einem Rahmen schlauer zu lösen.

... Oder wenn ich den Text vorne anfügen möchte.

Für was die englischsprachigen Begriffe "before" und "after" stehen ist dir aber klar?

div:after {
  content: 'foo';
}

div:after:before {
  content: 'bar';
}

sieht im DOM etwa so aus

<div>  
 Normaler Inhalt  
 <after>  
  <before>  
   bar  
  </before>  
  foo  
 </after>  
</div>

Natürlich sind before und after keine "echten Elemente" und nicht wirklich da.

[Tomchy]

Für was die englischsprachigen Begriffe "before" und "after" stehen ist dir aber klar?

Nein ich meinte damit VOR dem url-Content. Muss ich da ein Semikolon oder was auch immer einfügen, damit es klappt?

mfg, Tomchy

[Beat]

#textbox:after {
content: url(../images/coolhotstuff-single-bottom.gif)" Text";
}

Kann man hier noch mehr Content in die gleichen Klammern einbauen? Ich möchte vor der Grafik z.B. noch ein Trennlinie <hr> einbauen, weiss aber nicht, wie die Syntax dazu ausehen muss, damit es funzt ... Oder wenn ich den Text vorne anfügen möchte.

Ich sprach von Schmuckelementen, nicht von Text.

mfg Beat

[suit]

Ich sprach von Schmuckelementen, nicht von Text.

Auch ein Text kann ein Schmuckelement sein:

<a href="http://.download.example.com/" title="25 MiB">foo</a>

a[href^=http://download.]:after {  
	content: "size: "attr(href);  
}

[Gunnar Bittersmann]

@@Beat:

nuqneH

Für eine Zierleiste brauchst du kein Extra Markup
Dafür gibt es die CSS-Pseudoelemente

Nein, für diese Zierleiste brauchst du keine CSS-Pseudoelemente.
Dafür gibt es die 'border-radius'-Eigenschaften mit browserspezifischen Präfixen. IE-Nutzer bekommen’s eckig; die wollen das so[tm].

Und für einen blau-weißen Hintergrundverlauf brauchst du kein Hintergrundbild.
Dafür gibt es Gradienten. IE kennt einen proprietären Filter.

Qapla'