CSS Text als ganzes umrahmen

[Scarred]

Hey,

Wie kann ich einen Text als ganzes umrahmen? Ich hab ein Bild als Hintergrund und versuche den Text zu umrahmen, er macht das aber nur Zeile für Zeile aber ich hätte es gern als ganzes umrahmt. Wie geht das?

 

[Kausalat]

Aus deiner Beschreibung werde ich nicht wirklich schlau. Hättest du vielleicht einen Screenshot oder ein Beispielbild, wie es aussehen sollte?

 

[sverebom]

Der entsprechende HTML-Code würde mich mehr interessieren. Ich kann mir schon denken, woran es hängt.

 

[Mr. Snoot]

Wie umrahmst du den Text denn?

Wenn er bspw. in einem Absatz <p> steht, dann gibst du dem Absatz den Rahmen mit:

<p style="border:1px solid black">Mein Text mit Rahmen</p>

 

[Hancock]

Den Text mit display:block formatieren. (display:inline ist mit border nicht sinnvoll)

 

[Scarred]

Also es scheitert daran, dass die Umrahmung sich durch die zeilen zieht, sprich bei 2 zeilen text, sind zwischen den zeilen noch einen rahmenstrich, da er den rahmen durch die zeilen zieht und die aber an den enden offen sind, außer beim ende des textes

 

[Kausalat]

Hast du möglicherweise statt z. B. eines Block-Elements (<div>, <p>) ein Inline-Element (<span>, <em> etc.) gestaltet?

Ansonsten gilt:
Her mit dem Quellcode, sonst wird das nichts.

 

[Scarred]

.text {

border-style: outset;
border-collapse: separate;
width: 300;
height: 0; 
background:gray; 
border-style: solid; 
border-width: 1; 
padding-left: 4; 
padding-right: 4; 
padding-top: 1; 
padding-bottom: 1;



}

hier ist die class für den text

 

[Hancock]

So und jetzt machste ein

display:block

rein und dann siehst gescheit aus.

.text { 
border-style: outset; 
border-collapse: separate; 
width: 300; 
height: 0; 
background:gray; 
border-style: solid; 
border-width: 1; 
padding-left: 4; 
padding-right: 4; 
padding-top: 1; 
padding-bottom: 1; 
display:block;
}

 

[S.o.T.]

.text {

border-style: outset;
border-collapse: separate;
width: 300;
height: 0; 
background:gray; 
border-style: solid; 
border-width: 1; 
padding-left: 4; 
padding-right: 4; 
padding-top: 1; 
padding-bottom: 1;



}

hier ist die class für den text

Also erst einmal muss dein Code DRINGEND gekürzt werden:

.text {
background: gray;
border: 1px solid;
height: 0; (Wofür ist das?)
padding: 1px 4px;
width: 300px;
}

Du darfst innerhalb einer Klasse keine Eigenschaften überschreiben (border).

Werte ohne Einheiten gehen nicht und Dinge wie border- oder padding-Werte solltest du zusammenfassen. Bei border spielt die Reihenfolge der Werte keine Rolle, bei padding müssen die Werte im Uhrzeigersinn notiert werden.

Dann solltest du uns noch sagen, auf welche Elemente du die Klasse anwendest, denn wie die Kollegen oben schon gesagt haben, ist es wichtig zu wissen, ob es ein Block-Level-Element ist oder ein Inline-Level-Element.

Ich glaube, du hast ein grundlegendes Problem mit CSS, da du nirgends Einheiten notierst, wo sie nötig sind. Hast du gerade erst angefangen damit? Dann bleib' am Ball und lerne weiter, wir helfen dir sehr gerne! Falls du schon länger dabei bist, wäre ich relativ verwirrt.

 

[Scarred]

Hab grad erstmal angefangen

Kenn mich noch nicht sogut aus, von daher sagt mir es auch nix ob es ein Inline oder Block Element ist

 

[XunnD]

Du darfst innerhalb einer Klasse keine Eigenschaften überschreiben (border).

Wieso "darf man das nicht? Bitte begründe Deine Behauptung.

 

[Kausalat]

@ XunnD:

Weil es einfach sinnfrei ist. Du kannst z. B. nicht in der selben Klasse sagen, der Hintergrund solle grün sein, und diesen Wunsch dann zwei Zeilen später wieder mit einer Anweisung für einen roten Hintergrund negieren. Analog dazu stünde hier "border-style: outset" gegen "border-style: solid".

 

[XunnD]

Mehrmals innerhalb einer Klasse ein CSS-Attribut festzulegen ist allerdings schon sinnfrei. Ich hatte sein Statement falsch verstanden. Hab's jetzt erst gesehen, danke.

 

[S.o.T.]

Wieso "darf man das nicht? Bitte begründe Deine Behauptung.

Weil dann logischerweise die vorangegangen Eigenschaften obsolet sind. Wenn du oben den Hintergrund als rot definierst und in der nächsten Zeile dann wieder als blau, dann ist das ganz schön sinnlos, findest du nicht? ^^

Edit: Hatte den Thread zu lange ungelesen in einem Tab offen. Habe die ganzen Antworten nicht mitbekommen, weil ich nach meiner Rückkehr an den PC den Tab nicht aktualisiert habe.

 

[XunnD]

Hab schon geschrieben, dass ich Deine Aussage missverstanden habe.

 

[S.o.T.]

Hab schon geschrieben, dass ich Deine Aussage missverstanden habe.

Yeah und ich habe geschrieben, dass ich das übersehen habe (siehe Edit). ;-)