<ul> und float: left;

Status
Nicht offen für weitere Antworten.
T

The_S

Top Contributor
So, heute ist mein CSS Tag ^^

Ich möchte folgende Darstellung erreichen:

Code: 
  *   Anfang         Ende
   *   Anfang2        Ende

Praktisch eine zweispaltige Liste. Für die Liste verwende ich den <ul> tag und für den Text ein Label. Damit die zweite Spalte mit dem richtigen Abstand zur ersten Spalte steht, setze ich der ersten Spalte ein width- und ein float-Attribute. Leider ist jetzt die erste Spalte vor dem Listenpunkt. Wenn ich das float weglasse, wird aber kein Abstand eingehalten. Was kann ich da machen?

Zum Testen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<body>
<ul>
	[*]<label style="width: 400px; float: left;">Das steht am Anfang</label>Das soll nach hinten
	[*]<label style="width: 400px; float: left;">1</label>2
	[*]<label style="width: 400px;">Das steht am Anfang</label>Das soll nach hinten
	[*]<label style="width: 400px;">1</label>2
[/list]
</body>
</html>

Danke
 
T

The_S

Top Contributor
Weil ich diverse JavaScript Effekte eingebaut habe, die mit einer Tabelle nur schwer realisierbar sind ;) .

So eine mehrspaltige Liste würde natürlcih auch gehen, zur not kann ich ja bestimmt irgendwie die Aufzählungszeichen ausblenden und stattdessen eigene im Text setzen ...
 
D

Drake

Bekanntes Mitglied
Hallo,

folgendes funktioniert wie gewünscht:

Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Titel</title>

    <style type="text/css">
    
    #list li {
        display: block;
        clear: both;
    }
    
    div.listLeft {
        float: left;
        width: 10em;
    }
    
    div.listRight {
    
    }
    
    </style>
</head>
<body>
<ul id="list">
    [*]
        <div class="listLeft">1</div>
        <div class="listRight">text</div>
    
    
    [*]
        <div class="listLeft">2</div>
        <div class="listRight">text</div>
    
    
    [*]
        <div class="listLeft">3</div>
        <div class="listRight">text</div>
    
[/list]
</body>
</html>

aus dem doctype kann man natürlich auch transitional machen, hängt davon ab was man wie umsetzen möchte.

Anmerkung am Rande, bitte <label> nicht so missbrauchen.

mfg
Drake
 
G

Gelöschtes Mitglied 6946

Gast
du könntest, statt float zu verwenden, aus dem element auch einen inline-block machen (display: inline-block;). dann erzeugt es keinen zeilenumbruch wie ein "richtiges" block-element, gleichzeitig aber kannst du wie jedem block breite, höhe und solche späße zuordnen.

problem: ff 2 kann das nicht (was mich schon oft genervt hat), aber in diesem fall kannst du dir mit display: -moz-inline-box; behelfen - schreib das einfach über den inline-block befehl. wenn der ff den nicht kennt, nimmt er seinen eigenen kram (der zwar scheiße ist, in deinem fall aber ausreicht). der ie6 kennt inline-block auch nicht, aber dafür hat der generell kein problem damit, wenn inline-elemente ne breitenangabe haben.

Code: 
<style type="text/css">
li span.label {
  display: -moz-inline-box;
  display: inline-block;
  width: 400px;
}
</style>

...

<ul> 
   [*]<span class="label">Das steht am Anfang</span>Das soll nach hinten 
   [*]<span class="label">1</span>2 
   [*]<span class="label">Das steht am Anfang</span>Das soll nach hinten 
   [*]<span class="label">1</span>2 
[/list]
 
D

Drake

Bekanntes Mitglied
Ok, mein Bsp. war ein Schnellschuss, bei näherer Betrachtung funktioniert es nicht wie gewollt, ff lässt die bullets weg und ie7 verschluckt sich daran, der zweite Vorschlag liefert dagegen das gewünschte Ergebniss.

mfg
Drake
 
Status
Nicht offen für weitere Antworten.

Aktuelle Jobs

Neue Themen


Oben