Mehrere Textrahmen in einer Zeile
Stefan
- css
Hallo zusammen!
Ich suche nach einer Möglichkeit folgendes mit CSS zu realisieren:
Ich möchte in einer Zeile mehrere Rahmen hintereinander haben, deren Breite sich ihrem Inhalt (Text) anpasst. Etwa so:
------------------------------------------------
| -------- -------- -------- -------- |
| |Text 1| |Text 2| |Text 3| |Text 4| |
| -------- -------- -------- -------- |
------------------------------------------------
Der große Rahmen außen herum ist ein DIV mit 100% Breite. Innerhalb dieses äußeren DIV sollen die Textrahmen zentriert sein. Ich möchte Hintergrundfarbe, Rahmen, Größe und Abstände der Textrahmen verändern können. Ich habe es mit DIVs und float versucht. Diese passen ihre Größe aber nicht an ihren Inhalt an, sondern teilen immer die gesamte verfügbare Breite unter sich auf.
Wie kann ich das machen?
Schönen Gruß,
Stefan
Grüße,
.ding{
border:solid 2px;
}
<span class="ding">text</span>
MFG
bleicher
Hallo bleicher,
.ding{
border:solid 2px;
}<span class="ding">text</span>
Wie gesagt möchte ich auch Größe und Abstand (margin / padding) der Textboxen einstellen können.
Mit span habe ich es so versucht:
<div style="margin:0 auto;">
<span style="border:1px solid black;padding:5px;">Text</span>
</div>
Das umgebende Div wird dabei aber in der Höhe nur soweit ausgedehnt, dass der Text hineinpasst, nicht der Rahmen. Das sieht dann in etwa so aus:
--------
--------------------
| | Text | |
--------------------
--------
Gibts andere Möglichkeiten?
Grüße,
Stefan
Grüße,
also erstens - n welchem browser?
2) margin der spans versucht? padding ist der text-rahmen abstand - rahmen - rest ist margin
MFG
bleicher
Hallo
- margin der spans versucht? padding ist der text-rahmen abstand - rahmen - rest ist margin
Rest ist _nichts_, da <span> ein Inlineelement ist und selbige _kein_ margin haben. Also Texte in <span>s, die rein -beispielsweise- in ein <div>, selbigem text-align:center; verpasst, den <span>s padding uund border zugewiesen und mal schauen, ob's in die richtige Richtung geht.
Tschö, Auge
Hallo!
Also Texte in <span>s, die rein -beispielsweise- in ein <div>, selbigem text-align:center; verpasst, den <span>s padding uund border zugewiesen und mal schauen, ob's in die richtige Richtung geht.
Hab schon eine Menge probiert in der Richtung. Mit padding bekomme ich beim span zwar Hintergrund und Rahmen ausgedehnt, aber diese überlappen dann die umliegenden Elemente. Mit line-height wiederum kann ich die umliegenden Elemente "wegschieben". Beides kombinieren ist leider nicht gut möglich, da die Wirkung des padding ja unmittelbar von der Schriftgröße abhängt, die von line-height nur bedingt. Da ich die Schriftgrößen in em angebe komme ich so nicht weiter.
Ich fürchte ich muss mal wieder auf ein Tabellen-Layout zurückfallen. :-(
Gruß!
Hi,
Wie gesagt möchte ich auch Größe und Abstand (margin / padding) der Textboxen einstellen können.
Das ist was anderes, als du eingangs sagtest:
Ich möchte in einer Zeile mehrere Rahmen hintereinander haben, deren Breite sich ihrem Inhalt (Text) anpasst.
Oder meinst du mit "Groesse" nur die Hoehe?
Dann hilft dir eventuell(!) line-height weiter.
Gibts andere Möglichkeiten?
display:inline-block waere eigentlich das Mittel der Wahl - dann gibt's auch mit der Zentrierung keine Probleme, wie bei float.
Leider koennen Firefoexe das erst ab Version 3.
MfG ChrisB