nicht angemeldet
div soll gleiche hoehe wie span bekommen
Hallo ihr lieben,
ich versuche gerade eine Website auf die Beine zu stellen, die ein Tabellen Layout bekommen soll. Dabei gibt es so etwas wie ein label mit dazugehörigem Text. Siehe:
_______________________________________
<head>
<style>
.container {
margin-right: .2em;
margin-bottom: 1em;
}
.links {
padding-left: 0.9em;
position: relative;
text-align: right;
width: 10em;
}
.rechts {
width: 10em;
position: absolute;
text-align: left;
margin-left: 1.4em;
}
</style>
</head>
<body>
<div class="container">
<div class="links">Dies ist ein langer Text mit Zeilenumbruch<span class="rechts">unten</span></div>
</div>
<div class="container">
<div class="links">kurzer Text<span class="rechts">Dies ist
ein langer Text, der innerhalb des divs sitzt und viel zu weit nach
unten geht</span></div>
</div>
<div class="container">
<div class="links">oben<span class="rechts">unten</span></div>
</div>
</body>
_______________________________________
Das einzige Problem, was ich mit dem Code habe, ist dass in der zweiten Zeile der Text des Spans viel zu lang wird. Was muss ich ändern, damit das dazugehörige div.links genau so hoch wird, wie der span.rechts?
-
ich versuche gerade eine Website auf die Beine zu stellen, die ein Tabellen Layout bekommen soll.
Meinst du ein <table> Layout oder meinst du ein Grid?
.rechts {
width: 10em;
position: absolute;
text-align: left;
margin-left: 1.4em;
}...
<div class="container">
<div class="links">oben<span class="rechts">unten</span></div>
</div>Das einzige Problem, was ich mit dem Code habe, ist dass in der zweiten Zeile der Text des Spans viel zu lang wird. Was muss ich ändern, damit das dazugehörige div.links genau so hoch wird, wie der span.rechts?
Höre auf, mit position absolute das span aus dem normalen Flow zu nehmen.
Verwende vielmehr float oder inline-block.
Das was du tun willst, könnte eventtuell durch eine <dl> besses Markup erhalten.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
ich habe versucht deinen Tip mit dl umzusetzen.
<head> <style> dl { width: 30em; } dt { width: 10em; background: #eafeaf; } dd { width: 10em; background: #aefaef; } </style> </head> <body> <dl> <dt>Dies ist ein langer Text mit Zeilenumbruch</dt> <dd>unten</dd> </dl> <dl> <dt>kurzer Text</dt> <dd>Dies ist ein langer Text, der innerhalb des divs sitzt und viel zu weit nach unten geht</dd> </dl> <dl> <dt>oben</dt> <dd>unten</dd> </dl> </body>Wie kann ich die Beschreibung (dd) rechts neben den Bezeichner (dt) setzen? Float: left auf dd funktioniert nicht.
-
<dl>
<dt>Dies ist ein langer Text mit Zeilenumbruch</dt>
<dd>unten</dd>
</dl><dl>
<dt>kurzer Text</dt>
<dd>Dies ist
ein langer Text, der innerhalb des divs sitzt und viel zu weit nach
unten geht</dd>
</dl><dl>
<dt>oben</dt>
<dd>unten</dd>
</dl>
Wie kann ich die Beschreibung (dd) rechts neben den Bezeichner (dt) setzen? Float: left auf dd funktioniert nicht.Erkläre mal, welches Grid du willst. Deine Labels deuten auf etwas ganz anderes hin.
Willst du ein grid mit zwei Spalten, so kannst du
dt{ float:left; clear:left;width:nn%;}
dd{ float:left; width:mm%;}
anwenden.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
ich wollte ein grid mit zwei Spalten, also genau das was du beschrieben hast. Das ist die Lösung meines kleinen Problems. Vielen lieben Dank!
-
Nun habe ich doch noch eine Frage: wie kann man dd unten ausrichten? Mit
<dd valign="bottom">habe ich keinen Erfolg.-
Nun habe ich doch noch eine Frage: wie kann man dd unten ausrichten? Mit
<dd valign="bottom">habe ich keinen Erfolg.Du suchst die Eigenschaft verical-align. Diese aber wird eventuell nicht das tun, was du glaubst.
Wenn du dies willst, musst du anders vorgehen.
dl { vertical-align:bottom; }
dt, dd
{ display:inline-block; }
dt { width:20%; }
dt { width:77%; }mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Du suchst die Eigenschaft verical-align. Diese aber wird eventuell nicht das tun, was du glaubst.
Stimmt. Der Text sollte unten ausgerichtet werden. Wie muss ich dabei vorgehen, damit der Text unten ausgerichtet wird?
-
Du suchst die Eigenschaft verical-align. Diese aber wird eventuell nicht das tun, was du glaubst.
Stimmt. Der Text sollte unten ausgerichtet werden. Wie muss ich dabei vorgehen, damit der Text unten ausgerichtet wird?
Was hast du bei meinem Hinweis nicht verstanden?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Was hast du bei meinem Hinweis nicht verstanden?
Ich habe nicht verstanden wie ich dabei den Text unten ausrichte.
-
Was hast du bei meinem Hinweis nicht verstanden?
Ich habe nicht verstanden wie ich dabei den Text unten ausrichte.Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css"> <!-- dl{ vertical-align:bottom;} dt, dd{display:inline-block; border:1px solid black;} dt{width:30%} dt{width:60%} --> </style> </head> <body> <dl> <dt>10a</dt><dd>11a<br>11b<br>11c</dd> <dt>20a<br>20b<br>20c<br>20d</dt><dd>11a<br>11b</dd> </dl> </body> </html>Wenn dein Browser micht in der Lage ist, den Code so darzustellen, dass "unten ausgerichtet" zutrifft, dann nimm einen browser, der dazu in der Lage ist.
Andernfalls korrigiere deine Ausdrucksweise in eine verständliche Form.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
bitte entschuldige, wenn ich mich zuvor undeutlich ausgedrückt habe.
Zwar funktioniert dein beschriebener Code im Firefox wie gewünscht (der Text der rechten Spalte wird unten ausgerichtet), der Internet Explorer kann damit aber nicht umgehen. Es ist für wichtig, dass der Code auch im IE läuft.
-
bitte entschuldige, wenn ich mich zuvor undeutlich ausgedrückt habe.
Zwar funktioniert dein beschriebener Code im Firefox wie gewünscht (der Text der rechten Spalte wird unten ausgerichtet), der Internet Explorer kann damit aber nicht umgehen. Es ist für wichtig, dass der Code auch im IE läuft.MSIE bis Version 7 braucht schlicht {display:inline}
Schreibe also deine Korrektur nach einer Methode deiner Wahl, Conditional Comments oder star Hack
* html whatever{...}mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
-
-
-
-
-
-
-
-
hei,
< http://aromaart.lv/lat/>
moechtes du sowas haben, wie isses bei products? Die Namen des produkts immer unten sind, gibt es da eine zeile oder 2.
Du musst dem ausseren div position:relative angeben, und innerem position:absolute; bottom:0;
Oder eine Beispiel hier: < http://gut.lv/pro/satori/sakumlapa.html>
aud der sidebar, wo die komentare stehen, das link Komentari liegt auch immer unten in einem div.LG,
Inita