HTML

CSS- Rahmen soll am Text kleben

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Hallo, ich hab folgendes Css-sheet: #text a { padding: 0px 20px; border: 1px solid #000000; color: #ff6600; } Das sollte ja nun eine orange Schrift mit schwarzem Rahmen erzeugen. Nun möchte ich aber, das der Rahmen oben und unten an der Schrift sozusagen klebt, dass es also gar kein Abstand zwischen Rahmen und Schrift gibt. Dazu hab ich das top-padding und das bottom-padding ja bereits auf 0 gesetzt, aber trotzdem hält der Text noch den Abstand. Weiss jemand, wie man den Abstand zum Text nehmen kann? Vielen Dank für Tipps Gruss Mel

Antwort 1 von rfb

du könntest versuchen die Zeilenhöhe zu verringern (Eigenschaft line-height)

Antwort 2 von Mel

ah, von line-height hatte ich bisher noch nichts gelesen.
Super, werd ich gleich ausprobieren.

Ein grosses Dankeschön und gute Nacht
Gruss Mel

Antwort 3 von Dixi*

Hi, du kannst anstatt padding: 0px 20px das schreiben padding: 0px 20px 0px 20px das schreiben.

Antwort 4 von rfb

@Dixi*:
wo ist der Unterschied? Mels Schreibweise ist doch nur die Abkürzung für deinen Vorschlag.

Antwort 5 von Solo

Hi, falls das Problem weiterhin besteht, kann es sein, dass du den Text in einem Tag z.B. <p>... </p> stehen hast, verwende besser <div>... </div>.

Antwort 6 von MoRe99

Zitat:
Hi, falls das Problem weiterhin besteht, kann es sein, dass du den Text in einem Tag z.B. <p>... </p> stehen hast, verwende besser <div>... </div>.

Ich dachte, Text gehört zwischen <p> und </p>?

Antwort 7 von rfb

@Solo:
kannst du das irgendwie begründen?
Nachvollziehen kann ich das nämlich nicht. Mittels der Eigenschaften des Boxmodells kannst du doch den Blockelementen div und p identisches Layout verpassen.

Antwort 8 von Solo

Ich habe festgestellt, das Text zwischen <p> ... </p> einen größeren Abstand erzeugt, da es sich um ein Absatztag handelt, wobei div´s keinen Abstand erzeugen, ohne Nutzung von Styles.

Antwort 9 von rfb

Zitat:
ohne Nutzung von Styles

so wie es aussieht nutzt Mel aber CSS.
Und sich auf die CSS-Defaultwerte der Browser (das ist unter den Browsern auch nicht unbedingt gleich) zu verlassen ist sowieso keine gute Idee. Schließlich werden die schon dauernd durch User-Einstellungen (zB. als

user.css

gespeichert) überschrieben.

Antwort 10 von Solo

Bsser wäre, wenn Mel mal den HTML-Code für die betreffende Stelle hier posten würde, um Ihm wirklich helfen zu können.

Antwort 11 von Solo

Hier ein Beispiel, wie es funktionieren könnte:

<div align="justify" style="padding:0px 20px; border-width:1px 1px; border-style:solid; border-color:#F8E0B0; background-color:#FFFFE0">
<div>
<small>
Diese Seite wird je nach Zuspruch und Resonanz der Besucher fortgesetzt. Es sind deshalb Ihre Meinung, Hinweise oder Vorschläge gefragt. Diese können Sie mir gern über die <a href="" target=""><small> Kontakt</small></a>-Seite oder per <a href=""><small>E-Mail</small></a> mitteilen.</small>
</div>
</div>

Antwort 12 von rfb

@Solo:
CSS mitten im HTML?
gekoppelt mit align und <small>?
dazu noch verschachtelte DIVs?

Das kann gar nicht klappen - jedenfalls nicht zuverlässig, da

die CSS-Werte für das Inline-Element <small> nicht spezifiziert sind

ebenfalls die CSS-Werte für das innere DIV fehlen

ebenso die für den Link

Von deinem Beispiel kann ich wirklich nur abraten. Das ist eine Mischung von alten Layout über HTML-Elemente und -Attributen (beides depreaced = auf der Abschussliste des W3C) mit ein bisschen inkonsequentem CSS.

Antwort 13 von Solo

Danke für deine negative Bewertung meines Vorschlages, leider hilft das @Mail auch nicht weiter. Mein Beispiel funktioniert wenigstens. Von dir haben wir noch nichts gesehen, ausser Kritik.

Antwort 14 von rfb

Zitat:
Von dir haben wir noch nichts gesehen, ausser Kritik.

du hast Antwort 1 schon mal gelesen?

Antwort 15 von rfb

aber wenn du es ausführlicher magst:

a {
display:block;
line-height:10px;
height:12px;
width:auto;
overflow:hidden;
font-size:18px;
padding: 0 1ex;
border: 1px solid #000;
color: #f60;
background:inherit;
}

Es wäre also zB mit einer Mischung aus

line-height

font-size

height

overflow

und, da die beiden letzteren nur für Blockelemente gelten,

display

machbar.

background

kommt dazu, da zu einer

color

-Angabe immer eine Hintergrundfarbenangabe gehört.

Ich wollte eigentlich lieber auf Mels Rückmeldungen warten und fand das Problem an sich auch nicht sooo spannend.

Antwort 16 von Solo

Ich bezweifle nur das dein Vorschlag in allen Browsern funktioniert, inherit wird nur von Nascape verarbeitet.

Antwort 17 von rfb

Zitat:
inherit wird nur von Nascape verarbeitet.

laut www.css4you.de so ziemlich alle aktuellen Browser außer IE(6 - für IE7 gibts noch keine Aussagen).

Aber:
1. na dann ignoriert er es eben - was solls?
2.

inherit

ist nicht Bestandteil des Lösungsvorschlags sondern nur eine Ergänzung aus eher stilistischen Gründen (ohne

background

meckert der W3C-CSS-Validator bei

color

, und das mag ich nicht)
3. kann der Farbwert beliebig angepasst werden. Dies ist auch anzuraten. Aber ich kenne ja Mels Seiten nicht, also ist das nicht mein Bier.

PS: habs natürlich in allen gerade vorhanden Browsern getestet (IE, FF, Opera, Lynx) - nur Lynx stellt es nicht wie gewünscht dar ;-)

Antwort 18 von Mel

Uiuiui,

ich muss mich erst einmal entschuldigen, daß ich die zahlreichen Antworten übersehen hatte.
Vielen Dank für die Diskussion, auch wenn es sich um ein "langweiliges" Thema handelte.

Ich werd mich heute noch ransetzen und die Vorschläge mal ausprobieren und meld mich zurück, dann vor allem auch mit dem entsprechenden Quellcode.

Gruss Mel

Antwort 19 von Mel

Hallo zu später Nacht,

also, der Rahmen will und will nicht am Text kleben.
Daher hab ich jetzt einfach das Beispiel von rfb ausprobiert.
Das ja bei Euch zu funktionieren scheint.

--> Bei seinem Beispiel klebt der Rahmen nur dadurch am Text, daß height kleiner als die Schriftgroesse gesetzt wurde, oder?
--> Line-height hat in Bezug auf Rahmenabstand keine Auswirkungen, oder?

Wenn ich z.B. die height auf 18px setze (gemaess der Schriftgroesse) und dabei line-height auf 12 setze , dann erhalte ich wieder einen Freiraum zwischen Text und unteren Rahmen. Ist das bei Euch auch so?

Das ist bei mir sowohl beim IE, Firefox als auch Opera der Fall.

Gruss Mel

Antwort 20 von rfb

Zitat:
Line-height hat in Bezug auf Rahmenabstand keine Auswirkungen, oder?

wenn du gleichzeitig height angibst hat das Vorrang. Wahrscheinlich ist eine Kombination

height

und

overflow

die einfachste Lösung des Problems.

Antwort 21 von Solo

... und wie sieht es bei Antwort 11 aus? Der Rahmen passt sich dem Textinhalt an. Wenn der Rahmen größer sein soll, dann musst du nur noch margin-top:0px; und height:???px; für die div Höhe
einfügen.

Antwort 22 von rfb

@Solo:
siehe Antwort 12.
Die Kritik bleibt: das ist Layouten mit der Brechstange!

Antwort 23 von Solo

@rfb, mel

Ich möchte nur wissen, ob es bei Mel funktioniert. Was er daraus macht ist seine Sache. Es kann ja in einen valieden Zustand gebracht werden.

Antwort 24 von rfb

Zitat:
Es kann ja in einen valieden Zustand gebracht werden.

Es dreht sich nicht um valide sondern um sinnvoll - und das ist es nicht. Du trennst Inhalt und Form nicht sondern benutzt HTML-Tags, die in der Zeit bevor die Browser CSS unterstützten leider notwendig waren (also Anfang der 90er des letzten Jahrhunderts), aber indessen keinerlei Daseinsberechtigung mehr haben.

Und wie in Antwort 12 schon gesagt: wenn es klappt dann eher zufällig, denn jeder Browser hat andere CSS-Voreinstellungen um sowas wie <small> umzusetzen.