CSS: p und ul/li in einer zeile

**wahsaga** · 09.05.2006, 10:59

Re: CSS: p und ul/li in einer zeile

Original geschrieben von php_rookie
momentan scheitere ich daran, dass zwar die list-elemente nebeneinander aufscheinen, der text in "bar" aber unterhalb der liste ausgegeben wird.

Das muss ja auch so sein, wenn P bei dir im Quellcode hinter der UL steht, und du beide floatest ...

**php_rookie** · 09.05.2006, 11:06

schon klar, aber wie krieg ich P und UL/LI in eine zeile?

**wahsaga** · 09.05.2006, 11:15

Ich schrieb doch, dass bei dieser Verwendung von Float die Reihenfolge der Elemente im Quelltext falsch herum ist.

Wenn du sagst, "ich kann nix sehen", und ich sage dir "du stehst ja auch mit dem Gesicht zur falschen Seite" - kommst du dann selber auf die Idee, dich mal umzudrehen, oder musst du erst wieder nachfragen "und was soll ich jetzt machen ...?"

**php_rookie** · 09.05.2006, 11:31

die reihenfolge im quelltext ist AFAIK egal, solange man richtig floatet, sprich man kann entweder float:left durch float:right ersetzen vice versa, oder die reihenfolge im quelltext vertauschen (nicht empfehlenswert, da in dieser reihenfolge erwünscht, da die darstellung bei deaktiviertem CSS sonst darunter leidet). es möge sich jeder selbst ein urteil bilden.

die varianten 1.1 und 1.2 bzw. 2.1 bzw. 2.2 erzeugen identische ausgaben....

variante 1.1:

PHP-Code:


<html>

<head>

<title>test</title>

<style type="text/css">

div {

    width: 660px;

}

#foo {

    float: right;

}

#foo li {    

    display: inline;

    float: left;

    width: 85px;

    text-align: center;

    background-color: #ccc;

}

#bar {

    float: left;

}

</style>

</head>



<body>

<div>

    <ul id="foo">

        <li>item1</li>

        <li>item2</li>

    </ul>

    <p id="bar">Text</p>

</div>

</body>

</html>

variante 1.2:

PHP-Code:


<html>

<head>

<title>test</title>

<style type="text/css">

div {

    width: 660px;

}

#foo {

    float: right;

}

#foo li {    

    display: inline;

    float: left;

    width: 85px;

    text-align: center;

    background-color: #ccc;

}

#bar {

    float: left;

}

</style>

</head>



<body>

<div>

    <p id="bar">Text</p>

    <ul id="foo">

        <li>item1</li>

        <li>item2</li>

    </ul>    

</div>

</body>

</html>

variante 2.1:

PHP-Code:


<html>

<head>

<title>test</title>

<style type="text/css">

div {

    width: 660px;

}

#foo {

    float: left;

}

#foo li {    

    display: inline;

    float: left;

    width: 85px;

    text-align: center;

    background-color: #ccc;

}

#bar {

    float: right;

}

</style>

</head>



<body>

<div>

    <ul id="foo">

        <li>item1</li>

        <li>item2</li>

    </ul>

    <p id="bar">Text</p>

</div>

</body>

</html>

variante 2.2:

PHP-Code:


<html>

<head>

<title>test</title>

<style type="text/css">

div {

    width: 660px;

}

#foo {

    float: left;

}

#foo li {    

    display: inline;

    float: left;

    width: 85px;

    text-align: center;

    background-color: #ccc;

}

#bar {

    float: right;

}

</style>

</head>



<body>

<div>

    <p id="bar">Text</p>

    <ul id="foo">

        <li>item1</li>

        <li>item2</li>

    </ul>    

</div>

</body>

</html>

bin gerade draufgekommen, dass sich das problem von selbst gelöst hat. danke trotzdem.

**php_rookie** · 09.05.2006, 11:39

zu früh gefreut. das oben beschriebene problem tritt erst auf, wenn ich eine DL drum herum baue:

Code:

[b]
<dl>
  <dt>test</dt>
  <dd>[/b]
    <div>
      <ul id="foo">
        <li>item1</li>
	<li>item2</li>
      </ul>
      <p id="bar">Text</p>
    </div>[b]
  </dd>
</dl>[/b]

ohne fett hervorgehobene teile funktioniert es wie gewollt.

liegt das auch an der falschen reihenfolge im quelltext?

**wahsaga** · 09.05.2006, 12:04

Original geschrieben von php_rookie
die reihenfolge im quelltext ist AFAIK egal, solange man richtig floatet, sprich man kann entweder float:left durch float:right ersetzen vice versa, oder die reihenfolge im quelltext vertauschen

Nein, egal ist die Reihenfolge nicht - je nachdem, wie du float anwendest, sind die Auswirkungen unterschiedlich.

Floatest du das erste Element nach rechts, und das nachfolgende nach links - dann muss das nachfolgende in einer neuen "Zeile" dargestellt werden.

Aber warum willst du denn überhaupt beide Elemente floaten?
Es reicht doch vollkommen aus, wenn du das erste zu einer Seite floatest.

das oben beschriebene problem tritt erst auf, wenn ich eine DL drum herum baue [...]
liegt das auch an der falschen reihenfolge im quelltext?

K.A. so auf Anhieb, da würde mich mal ein komplettes Online-Beispiel interessieren.
Damit man auch sieht, ob dt/dd auch noch formatiert sind, oder ob du die Default-Formatierungen des Browsers bestehen lassen hast, etc.

**php_rookie** · 09.05.2006, 12:22

Nein, egal ist die Reihenfolge nicht - je nachdem, wie du float anwendest, sind die Auswirkungen unterschiedlich.

statt die reihenfolge im quelltext umzudrehen, dreh ich lieber float um. das wollte ich oben damit sagen.

mit einem online-beispiel kann ich im moment nicht dienen. vll. reicht auch folgende zusammenstellung:

Code:

<html>
<head>
<title>test</title>
<style type="text/css">
div {
    width: 660px;
}
#foo {
    float: right;
}
#foo li {    
    display: inline;
    float: left;
    width: 85px;
    text-align: center;
    background-color: #ccc;
}
#bar {
    float: left;
}
</style>
</head>

<body>
[b]<dl>
  <dt>test</dt>
  <dd>[/b]
    <div>
      <ul id="foo">
        <li>item1</li>
	<li>item2</li>
      </ul>
      <p id="bar">Text</p>
    </div>
[b]  </dd>
</dl>[/b]
</body>
</html>

wie gesagt, ohne die fett markierten teile funktioniert es, ohne nicht.

PS:

Aber warum willst du denn überhaupt beide Elemente floaten?

ich denke das wars. "bar" zu floaten war überflüssig. danke dir!

**php_rookie** · 09.05.2006, 13:45

ich werd noch narrisch :-(

DT und DD hätte ich gerne nebeneinander. mit float: left; funktioniert es allerdings nicht (nimmt man es raus hat man zumindest eine brauchbare darstellung, nur halt nicht nebeneinander):

Code:

<html>
<head>
<title>test</title>
<style type="text/css">
ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 600px;
}
#posting {
  background-color: #bbb;
}
#posting dt {
  [b]float: left;[/b]
  width: 150px;
  background-color: #eee;
}
#posting dd {
  width: 450px;
  margin: 0;
  background-color: #ddd;
}
#actions {
  float: right;
}
#actions li {
  float: left;
  width: 85px;
  text-align: center;
  background-color: #ccc;
  margin: 1px;
}
hr {
  background-color: #aaa;
  color: #999;
  border: #999;
  height: 1px;
}
</style>
</head>

<body>
<div id="wrapper">
  <dl id="posting">
    <dt>
      <ul>
        <li>Nickname</li>
        <li><a href="#">E-Mail</a></li>
        <li>01.02.03 - 04:05</li>
        <li>127.0.0.1</li>
      </ul>
    </dt>
    <dd>
      <ul id="actions">
        <li><a href="#">editieren</a></li>
        <li><a href="#">antworten</a></li>
      </ul>
      <p>Betreff</p>
      <hr />
      <p>Nachrichtentext<br />ueber<br />mehrere<br />Zeilen</p>
    </dd>
  </dl>
</div>
</body>
</html>

weiß hier noch jemand rat? ich wäre zu dank verbunden!

**wahsaga** · 09.05.2006, 13:48

Im IE passt das DD bei der von dir angegebenen Breite nicht mehr neben das DT. Lass die Breitenangabe für DD doch mal ganz weg ...

**php_rookie** · 09.05.2006, 14:08

danke, aber dann fließt der inhalt des DD um das DT herum, wie text um ein bild. gibt es eine möglichkeit das als "starren kasten" anzuzeigen? also dass der nachrichtentext schön in einer linie untereinander steht?

**wahsaga** · 09.05.2006, 14:12

Original geschrieben von php_rookie
danke, aber dann fließt der inhalt des DD um das DT herum, wie text um ein bild.

Natürlich tut er das ... (Man, müssen wir jetzt jede grundlegende Eigenschaft des Verhaltens von float einzeln durchkauen ...?)

Wenn du das nicht willst, vergebe halt auch noch ein entsprechendes margin-left.

**php_rookie** · 09.05.2006, 14:16

super, danke!

CSS: p und ul/li in einer zeile