PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS - Text auf Breite eines Elementes ziehen

Gast
2008-10-26, 16:05:27
Hallo,
ich möchte eine Art Logo in Textform in eine HTML Seite einbinden. Das ganze soll gleichzeitig ein mailto:-Link sein.
Das Logo soll wie folgt in 3 Zeilen aufgeteilt sein:

Text darüber <<Soll in kleinerer Schrift sein
Fetter Text <<Soll in großer Schrift und fett sein
Mailadresse <<Soll wie der obere Text wieder klein sein


Soweit so gut. Jetzt möchte ich aber, dass die erste und dritte Zeile genauso breit wie die zweite Zeile sein sollen. Sprich sie sollen in die Breite gezogen werden. Daran scheitert es leider.

Ich hab mir gedacht ich setze einfach ein <a href="mailto:xxx"> um den gesamten Text und dazwischen 3 spans in denen die Textgröße definiert wird und stelle mit padding ein, dass links und rechts kein Rand sein soll. Funktioniert leider nicht :( Habt ihr ne Idee? Vielen Dank schonmal!
huskarl
2008-10-27, 04:11:53
hab ich auch schonmal nach gesucht, allerdings nix gefunden ausser: http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_stretch

und das wird leiter selten unterstützt.

gruß,

huskarl
Caliginis
2008-10-27, 05:45:37
Das müsste doch eigentlich mit Blocksatz gehen. Ich hab das jetzt zwar nicht selber getestet, aber probieren würde ich das mal.

text-align: justify;
darph
2008-10-27, 08:34:09
Das müsste doch eigentlich mit Blocksatz gehen. Ich hab das jetzt zwar nicht selber getestet, aber probieren würde ich das mal.

text-align: justify;
Das ändert in den meisten Browsern nur die Leerzeichen zwischen Wörtern, nicht aber zwischen den Zeichen in einem Buchstaben. Das funktioniert in seinem Fall nicht, weil es außerdem nie auf die letzte Zeile angewandt wird. Da er ja nur letzte Zeilen hat …

Spans, die ja per Definition inline sind, wirst du kaum eine Spaltenbreite geben können. Da wirst du Blöcke nehmen müssen, dann wiederum ist es aber verboten, einen Anchor um alle herum zu machen. In einem Inline-Element darf sich kein Blockelement befinden.
tomtom
2008-10-27, 12:47:29
Wenn ich das richtig verstanden habe, sollen also alle 3 Zeilen ausgefüllt sein, also gleich breit wie es Zeile 2 vorgibt?
Wenn ja, dann hab ich hier ein kleines Beispiel geschrieben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Test</title>

<style type="text/css">
body
{
font-family: Trebuchet MS;
font-size: 0.625em;
}
</style>

</head>
<body>
<p>
<span style="font-size: 2em; letter-spacing: 0.3em;">Text darüber</span><br />
<span style="font-size: 3em; font-weight: bold;">FETTER TEXT</span><br />
<span style="font-size: 1em; letter-spacing: 1em;">mail@mail.com</span><br />
</p>
</body>
</html>

Abhängig von der verwendeten Schriftart und der Schriftgrößen, sowie der Zeichenbreite und Zeichenanzahl/Zeile musst du halt mit den letter-spacing-Werten spielen. Geht halt leider nur Auge mal Pi, funktioniert aber.

Ich hab das Ganze hier mal mit em-Werten angeben, weil du dadurch den Vorteil hast, die Abstände auf 3 Kommastellen genau anzupassen.
Die 0.625em im Body bei der font-size entsprechen dabei 10px (Zeile 1 hat also font-size: 20px; Zeile 2 font-size: 30px;...).
Natürlich kannst du die font-size auch in pt angeben und die letter-spacings beispielsweise in px - mit em klappts aber genauer ;)

Hoffe, dass ich dein Anliegen richtig verstanden habe, ansonsten kann mein Post ignoriert werden ;)

Grüße
Gast
2008-10-27, 19:15:59
Danke für die Antworten... Mh schade ich dachte das wär vielleicht irgendwie möglich

@tomtom: jo du hast mich richtig verstanden ;) Hab mir auch schon überlegt dass es so geht allerdings is mir das zu gewurstelt. Denke ich werds einfach als Grafik machen...
Gast
2008-11-06, 17:39:51
So,
ich hab mal ein wenig weitergemacht, allerdings bin ich mir nicht so ganz sicher ob ich das wirklich richtig mache. Um das gesamte Formular soll ein div mit 800px Breite, damit sich das ganze nicht zu weit zieht. Darin sind dann erst die beiden Logos, das erste links und das andere auf der rechten Seite. Danach kommt das Formular, wiederrum in einem div, dass das ganze Formular mit einer gestrichelten Linie umgeben soll.
In dem Formular selbst soll links die Beschreibung der Felder stehen, und rechts die Formularfelder.
Hier ist mein Code:
<body>
<div style="width: 800px">
<a href="mailto:mail@to.de"><img src="dmlogo.gif" style="border-style:none;float:left"></a><img src="logo.gif" style="float:right">
<div style="clear:left">

<div style="width:100%; border-style:dashed; border-width:1px; border-color:#786e64; padding:10px">
<form action="bla.php" method="get">
<span style="font-size:12px;float:left">Auftraggeber</span><input type="text" maxlength="30" name="auftraggeber" style="width:200px;float:right;"><br>
<span style="font-size:12px;float:left">Betreff</span><input type="text" maxlength="30" name="betreff" style="width:200px;float:right;">
</form>
</div>


</div>

</body>

Leider werden die einzelnen Zeilen nicht wie beabsichtigt untereinander angezeigt... Was mache ich falsch?
nino
2008-11-06, 17:49:45
ok, mit einem Clear:right zwischen den einzelnen Inputs gehts jetzt. Aber komischerweise geht der div-rand immer mitten durch das unterste input. Ich hab schon mit Margin und Padding probiert, damit kann ich aber leider nicht ändern, dass er einen bestimmten Rand zur unteren Kante des letzten Inputs einhält?
edit: mit padding:0 beim umgebenden div gehts jetzt plötzlich? glaub ich muss noch ein bisschen üben...