Problem Positionierung von Textzeilen neben einem größeren Text Block

Ich versuche, zwei Zeilen Text neben einem einzigen Wort wie "Montag" mit nur HTML und CSS ähnlich dem, was Sie in der folgenden Screenshot sehen.Problem Positionierung von Textzeilen neben einem größeren Text Block

alt text

Im Endprodukt die beiden Linien, die gerade „hallo“ und „blah“ sagen wird mit ein wenig Text und Eingabefelder ersetzt werden. Die Screenshot Version wurde mit dem folgenden Code erreicht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body { 
    font:12pt Arial, Helvetica, sans-serif; 
} 
dl, dd, dt { 
    margin:0px; 
    padding:0px; 
} 
dl { 
    clear:both; 
} 
dt { 
    float:left; 
    font-size:2.75em; 
    color:#ccc; 
    letter-spacing:-7px; 
    margin-right:10px; 
} 
--> 
</style> 
</head> 

<body> 
<dl> 
    <dt>MONDAY</dt> 
    <dd>hi</dd> 
    <dd>blah</dd> 
</dl> 

<dl> 
    <dt>WEDNESDAY</dt> 
    <dd>hi</dd> 
    <dd>blah</dd> 
</dl> 
</body> 
</html>

ich es möchte, so dass alles vertikal gut mit der Spitze des Wortes „Montag“ ausgerichtet ist ... dh die Spitze der Top-Linie ausgerichtet ist, und das Ende der unteren Zeile ist mit dem unteren Ende des Wortes "Montag" ausgerichtet. Ich denke nicht, dass die Verwendung von Definitionslisten sehr vielseitig oder der richtige Weg ist, dieses Aussehen zu erreichen. Irgendwelche Vorschläge, wie man das macht? Ich würde mich lieber von Bildern fernhalten, damit alles schön aussieht, wenn jemand die Seite hochskaliert ... aber wirf alle deine Gedanken da draußen hin. Vielen Dank.

Quelle

2009-08-20 blcArmadillo

Sie wollen etwas in der Form von dem, was ich hier habe. Du musst für Pixel-Perfektion experimentieren. Der Grund, warum ich keine Definitionsliste verwende, ist, dass Sie beide Definitionen nicht als Block manipulieren können, auf den es sich stützt. Das Schlüsselelement hier ist die manuelle Einstellung der Zeilenhöhe. Das genaue Markup ist hier nicht wichtig, aber dies ist eine Möglichkeit, wie es gemacht werden kann.

<h2>MONDAY</h2> 
<ul> 
    <li>hi</li> 
    <li>blah</li> 
</ul> 

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    padding: 100px 0 0 100px; 
} 
h2 { 
    font: 40px sans; 
    width: 200px; 
    line-height: 36px; 
    float: left; 
} 
ul { 
    height: 40px; 
    float: left; 
    list-style-type: none; 
    margin-top: -2px; 
} 
li { 
    font: 16px sans; 
    line-height: 16px; 
    margin-top: 2px; 
}

(Eine weitere Eigenschaft, die nützlich sein kann, ist vertical-align, die verwendet werden, um den Text in der Textzeile zu positionieren, anstatt die Textzeile schrumpft den Text angepasst.

Beachten Sie auch, dass der physische Text wird kleiner aussehen als die eingestellte Texthöhe, weil Sie Unterlängen berücksichtigen müssen - die Teile von Buchstaben, die unterhalb der Textzeile liegen, wie Kleinbuchstaben, P, Y, usw., weshalb Sie dies tun müssen spielen Sie mit den genauen Pixelbeträgen, wenn Sie die Schriftgröße ändern.Things können auch zwischen den Schriftarten variieren - Sie wollen eine, die plattformübergreifend gut unterstützt wird, um auf allen Plattformen gute Ergebnisse zu erzielen.

Quelle

2009-08-20 02:35:31

ich mit der folgenden Lösung zu kommen haben (lassen Sie mich wissen, was Sie davon halten):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="reset.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
body { 
    font:12pt Arial, Helvetica, sans-serif; 
} 
.container { 
    position:relative; 
} 
.day { 
    font-size:2.75em; 
    color:#ccc; 
    letter-spacing:-7px; 
    margin-right:15px; 
} 
.line1 { 
    position:absolute; 
    top:0px; 
    margin-top:5px; 
} 
.line2 { 
    position:absolute; 
    bottom:0px; 
    margin-bottom:7px; 
} 

--> 
</style> 
</head> 

<body> 
<div class="container"> 
<span class="day">MONDAY</span> 
<span class="line1">hi</span> 
<span class="line2">blah</span> 
</div> 
</body> 
</html>

ich noch andere Ideen sehen möchten also, wenn Sie einen haben, bitte posten. Vielen Dank.

Quelle

2009-08-20 03:22:30 blcArmadillo

Es funktioniert. line1 ist ein Pixel zu hoch für mich (FF 3.5.2, Fedora Linux). (Obwohl das nur passieren wird, unabhängig von der Methode.) Der Hauptgrund, warum ich es so gemacht habe (im Gegensatz zu diesem Weg) war, dass dies eine CSS-Klasse für jedes HTML-Element erfordert, und ich lieber vermeiden, wenn möglich. Das funktioniert aber auch gut. –

Problem Positionierung von Textzeilen neben einem größeren Text Block

Antwort

Verwandte Themen