2 Listen nebeneinander mit Rahmen drumrum

[jüla]

Hallo,

ich möchte gerne zwei Listen nebeneinander haben und einen Rahmen drumrum. Dazu habe ich die Listen  wie folgt nebeneinander gesetzt:

  
#linkeListe {  
		list-style-type: none;  
		width:200px;  
		float:left;  
		background-color:#f00;  
	}  
  
#rechteListe {  
		list-style-type: none;  
		width:200px;  
		background-color:#0f0;  
		float:right;  
	}

Soweit so gut. Den Rahmen hat das umschließende div:

  
<div id="content">  
	<ul id="linkeListe">  
		<li>Book 1</li>  
		<li>Book 2</li>  
		<li>Book 3</li>  
	</ul>  
	<ul id="rechteListe">  
		<li>Book 4</li>  
		<li>Book 5</li>  
		<li>Book 6</li>  
	</ul>  
	<div style="float:none"></div>  
</div>

Da die Listen-Elemente eigentlich per php aus einer DB kommen, weiß ich nicht, wie hoch die Listen werden und kann daher die height des content-divs nicht setzen.

Gibt es eine Lösung dafür?

Danke,

jüla

[Shadowcrow]

'ǝɯɐu$ ıɥ

ich möchte gerne zwei Listen nebeneinander haben und einen Rahmen drumrum.

Da die Listen-Elemente eigentlich per php aus einer DB kommen, weiß ich nicht, wie hoch die Listen werden und kann daher die height des content-divs nicht setzen.

Wozu muss das DIV eigentlich eine feste Höhe haben und was spricht gegen height:100%; ?

ssnɹƃ
ʍopɐɥs

[jüla]

Wozu muss das DIV eigentlich eine feste Höhe haben und was spricht gegen height:100%; ?

Wenn ich das mache, geht das content-div über die untere Grenze des Fensters hinaus und es erscheinen scrollbars. Das liegt wahrscheinlich daran, dass ich noch einen head mit height=40px und eine navigation-bar mit height=20px darüber habe. Also wird das content-div wahrscheinlich 100% sein, aber 60px nach unten geschoben werden. Nicht ganz so schön.

Gibt es noch eine andere Möglichkeit?

jüla

[Gunnar Bittersmann]

@@jüla:

nuqneH

Gibt es eine Lösung dafür?

Mehrere.

Das 'div' auch floaten lassen. Oder ihm 'overflow: hidden' verpassen.

Qapla'

[jüla]

Das 'div' auch floaten lassen. Oder ihm 'overflow: hidden' verpassen.

Letzteres funktioniert prima.

Dann hätte ich noch zwei Fragen:

1. Habe ich das mit den beiden uls eigentlich so richtig gemacht? Mir kommt das float:right und float:left irgendwie komisch vor.

2. Ich hätte gerne zwei Überschriften über die beiden Listen, wie bekomme ich das am Besten hin?

jüla

[suit]

1. Habe ich das mit den beiden uls eigentlich so richtig gemacht? Mir kommt das float:right und float:left irgendwie komisch vor.

Wieso?

2. Ich hätte gerne zwei Überschriften über die beiden Listen, wie bekomme ich das am Besten hin?

Mit den geeigneten Elementen für Überschriften.

[Gunnar Bittersmann]

@@jüla:

nuqneH

2. Ich hätte gerne zwei Überschriften über die beiden Listen, wie bekomme ich das am Besten hin?

<table>  
  <thead>  
    <tr>  
      <th>Überschrift 1</th>  
      <th>Überschrift 2</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>  
        <ul>  
          <li>Book 1</li>  
          <li>Book 2</li>  
          <li>Book 3</li>  
        </ul>  
      </td>  
      <td>  
        <ul>  
          <li>Book 4</li>  
          <li>Book 5</li>  
          <li>Book 6</li>  
        </ul>  
      </td>  
    </tr>  
  </tbody>  
</table>

Dann muss nichts floaten, die Tabelle bekommt den Rahmen.

Oder:

<div id="content">  
  <div>  
    <h2>Überschrift 1</h2>  
    <ul>  
      <li>Book 1</li>  
      <li>Book 2</li>  
      <li>Book 3</li>  
    </ul>  
  </div>  
  <div>  
    <h2>Überschrift 2</h2>  
    <ul>  
      <li>Book 4</li>  
      <li>Book 5</li>  
      <li>Book 6</li>  
    </ul>  
  </div>  
</div>

Qapla'

[suit]

@@jüla:

nuqneH

2. Ich hätte gerne zwei Überschriften über die beiden Listen, wie bekomme ich das am Besten hin?

<table>

<thead>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <ul>
          <li>Book 1</li>
          <li>Book 2</li>
          <li>Book 3</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Book 4</li>
          <li>Book 5</li>
          <li>Book 6</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

>   
> Dann muss nichts floaten, die Tabelle bekommt den Rahmen.  
>   
> Oder:  
>   
> ~~~html

<div id="content">  

>   <div>  
>     <h2>Überschrift 1</h2>  
>     <ul>  
>       <li>Book 1</li>  
>       <li>Book 2</li>  
>       <li>Book 3</li>  
>     </ul>  
>   </div>  
>   <div>  
>     <h2>Überschrift 2</h2>  
>     <ul>  
>       <li>Book 4</li>  
>       <li>Book 5</li>  
>       <li>Book 6</li>  
>     </ul>  
>   </div>  
> </div>

Oder aber

<ul id="content">  
	<li>  
		<h2>Überschrift 1</h2>  
		<ul>  
			<li>Book 1</li>  
			<li>Book 2</li>  
			<li>Book 3</li>  
		</ul>  
	  </li>  
	  <li>  
		<h2>Überschrift 2</h2>  
		<ul>  
			<li>Book 4</li>  
			<li>Book 5</li>  
			<li>Book 6</li>  
		</ul>  
	</li>  
</ul>

[Gunnar Bittersmann]

@@jüla:

nuqneH

<ul id="linkeListe">
<li>Book 1</li>
<li>Book 2</li>
<li>Book 3</li>
</ul>
<ul id="rechteListe">
<li>Book 4</li>
<li>Book 5</li>
<li>Book 6</li>
</ul>

Sind das wirklich 2 getrennte Listen? Oder ist es eine Liste, die zweispaltig dargestellt werden soll?

"linkeListe" und "rechteListe" sind schlecht gewählte ID-Bezeichner. Wähle die Bezeichner nach der Funktion, nicht nach der gegenwärtig(!) gewünschten Darstellung!

Qapla'