✔ mit CSS Auflistung - riesen Probleme!!

[think_deluxe]

Hi an Alle...

ich habe ein Problem, ich möchte eine Auflistung machen, dass nach jedem zweiten Eintrag ein Umbruch passieren soll.

Sprich:
bei 5 Einträgen sollen 3 Zeilen entstehen mit je 2 spalten

|... 1 Eintrag ...| - |... 2 Eintrag ...| - Umbruch
|... 3 Eintrag ...| - |... 4 Eintrag ...| - Umbruch
|... 5 Eintrag ...| - |... usw. ...| - Umbruch


Ich hoffe es ist verständlich.

mein derzeitiger Code:

<?PHP
for($i=1;$i<$anz_models;$i++) {
$x = ($i - 1);
?>	
<p style="border:1px solid #000; width: 250px; margin: 5px;">
  	<?echo $i?><br />
  	<?echo $x.$models[$x]['model']?>
 </p>  
  <?PHP
  if(($i % $spalte) == 0){
  $zeile++;
  ?>
  <br />
  <?PHP
  }
}
  ?>

Vielen Dank im Vorraus...

 

[Maik]

Hi,

zeichne die Auflistung mit dem semantisch dafür vorgesehenen ul-Listenelement aus:

<ul class="clearfix">
    <li>1. Eintrag</li>
    <li>2. Eintrag</li>
    <li>3. Eintrag</li>
    <li>4. Eintrag</li>
    <li>5. Eintrag</li>
    <li>... usw. ...</li>
</ul>

und formatier die Elemente mit CSS wie folgt:

ul {
margin:0;
padding:0;
list-style:none;
width:250px;
}
li {
float:left;
width:50%;
}

/* easyclearing-Methode zum Beenden der Floatumgebung  */
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik

 

[think_deluxe]

Vielen Dank Maik,

grundsätzlich ist es genau das was ich suche, jedoch kann ich nun keinen "border" setzen, denn dann wird alles untereinander gesetzt... leider!!

gibt es noch eine ähnliche möglichkeit?

 

[Maik]

So dürfte es jetzt passen ;-)

ul {
margin:0;
padding:0;
list-style:none;
width:524px;
}
li {
float:left;
display:inline;
width:250px;
margin:5px;
border:1px solid #000;
}

mfg Maik

 

[think_deluxe]

Vielen Dank...

wunderbar, alles zur vollsten Zufriedenstellung...

 

[Maik]

Hi,

um nochmal auf meinen ersten Vorschlag zurückzukommen: er funktioniert gleichermaßen, wenn einfach der Außenabstand und Rahmen des li-Elements an sein Nachfolgeelement p übergeben wird

So zählen diese beiden Eigenschaften nach der Lehre des CSS-Boxmodells nicht mehr zur width:50%-Deklaration, denn ihr Summand

2*50% + 4*5px + 2*1px = 100% + 22px

ist immer größer als die 100% (= 500px), die der Anzeigebereich (das ul-Element) seinem Inhalt in der Breite zur Verfügung stellt, was zum frühzeitigen Umbrechen der Elemente führt.

<ul class="clearfix">
    <li><p>1. Eintrag</p></li>
    <li><p>2. Eintrag</p></li>
    <li><p>3. Eintrag</p></li>
    <li><p>4. Eintrag</p></li>
    <li><p>5. Eintrag</p></li>
    <!--<li><p>... usw. ...</p></li>-->
</ul>

ul {
margin:0;
padding:0;
list-style:none;
width:500px; /* Zwei Spalten à 250px */
}
li {
float:left;
width:50%;
}
li p {
margin:5px;
border:1px solid #000;
}

mfg Maik