• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bestimmte Spaltenanzahl

F

Feiron

Neues Mitglied
Hallo html Community,

Da ich gedacht hatte mich mit Html auszukennen bin ich vorher noch nicht auf dieses Problem gestossen, es mag vielleicht blöd und leicht klingen aber ich weiss einfach nicht weiter.

Ich versuche es mal zu erklären.

Im Internet bin ich auf eine bestimmte Engine getroffen die durch ein Admin Panel gewisse Items erstellt. Diese Items werden mit der Anzahl immer 1 pro Zeile angezeigt.

Nun zu meinen Wünschen: Ich hatte versucht diese Items jeweils stats in Zeilen in Spalten aufzuteilen. Das hat nach einigen Minuten umschreiben des Quelltextes auch funktioniert, nur hatte ich dann bemerkt das es meine fixe Tabelle sprengt, da diese Items eine recht grosse Beschreibung haben.

Ist es ihrgendwie möglich die Anzahl der Spalten die die Tabelle besitzen darf und bei Überschreitung dieser Anzahl eine neue Zeile beginnt?

Hier ein Shema:

Standardmässige Anordnung
Code: 
#Item 1
#Item 2
#Item 3
#Item 4
#Item 5
#Item 6
#Item 7
Gewünschte Anordnung
Code: 
#Item 1 #Item 2 #Item 3
#Item 4 #Item 5 #Item 6
#Item 7

Ich bedanke mich im Vorraus und verbleibe mit freundlichen Grüssen
Feiron
 
Dafür kannst du eine Liste benutzen, die Listenelemente floaten, ihnen eine feste Breite geben und der Liste die 3-fache Breite, dann brechen die Listenelemente automatisch um.
 
Danke für deine Antwort _Thor_

könntest du mir eventuell mit einem Beispielcode zeigen wie das dann ungefähr aussehen soll?

danke

mfg
Feiron
 
Naja, ne Liste wirst du doch hinbekommen, oder? Dann noch nach float in Verbindung mit CSS suchen und schon hast du es.

Zeig mal was du hast, dann kann ich dir weiterhelfen.
 
Hier ist der Code nicht bearbeitete und in standardmässigen Auflistung.

HTML: 
 <table cellspacing="0" cellpadding="0" border="0" class="w100 item">
        <tr>
         <th colspan="5" class="sub left clickable" onclick="switchGroupDisplay('buildingGroup{$item.id}', true);">{$item.name|escape:"htmlall"}{if $item.level > 0} ({$item.level}){/if} {if $item.bonuslevel}(+{$item.bonuslevel} {#bonusLevel#}){/if}</th>
         <th class="sub close right"><a href="javascript:void(0);" onclick="switchGroupDisplay('buildingGroup{$item.id}', true);"><img src="{$skinpath}/images/icon/arrow_down.gif" border="0" /></a></th>
        </tr>
       <tbody id="buildingGroup{$item.id}">
        <tr>
         <td rowspan="2" class="buildcell_left"><img src="imgupload.fv?img={$item.image}" /></td>
         <td colspan="4" class="buildcell">{$item.techtree|escape:"htmlall"}</td>
         <td class="buildcell">&nbsp;</td>
        </tr>
        <tr>
         <td class="right bold" colspan="4">

         {*
          *    display resources changes for this item
          * $item.cost_res1 i.e. are the changes for the first resource
          *}
         {foreach from=$item key=itemKey item=itemValue}
          {if strlen($itemKey) > 8 && $itemKey|substr:0:5 == 'cost_' && $itemValue <> 0}
           {assign var="resourceKey" value=$itemKey|substr:8:2}
           {math equation="resourceKey - 1" resourceKey=$resourceKey assign="resourceIndex"}
           {if $languageData.resource_image[$resourceIndex]}
            <img src="imgupload.fv?img={$languageData.resource_image[$resourceIndex]}" class="resource" />
           {/if}
           {if $itemValue > 1 || $itemValue < 1}{$languageData.resources_multiple[$resourceIndex]|escape:"htmlall"}{else}{$languageData.resource_single[$resourceIndex]|escape:"htmlall"}{/if} {if $itemValue > 0}-{elseif $itemValue < 0}+{/if}{$itemValue|number_format:"0":",":"."|replace:"-":""} {$languageData.resource_unit[$resourceIndex]|escape:"htmlall"}<br />
          {/if}
         {/foreach}
         </td>
         <td class="right bold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$item.duration}</td>
        </tr>
          {if $item.maxlevel > 0 && $item.maxlevel == $item.level}
          {elseif $item.active_queue && $item.working}
        <tr>
         <td colspan="6" class="submit right">
           <font id="timer">{#buildTime#}: {$item.lefttime}&nbsp;&nbsp;&nbsp;<button type="button" onclick="self.location.href='{$item.link_cancel}&tplvars[tagfilter]={$tplvars.tagfilter}';">{#cancel#}</button></font><script language="JavaScript">init_countdown('timer','{$item.leftseconds}', '<button type="button" onclick="self.location.href=\'{$link_self}&tplvars[tagfilter]={$tplvars.tagfilter}\';">{#buildingDone#}</button>', '{#buildTime#}: ', '&nbsp;&nbsp;&nbsp;<button onclick=\'self.location.href = "{$item.link_cancel}&tplvars[tagfilter]={$tplvars.tagfilter}";\'>{#cancel#}</button>');</script>
         </td>
        </tr>
          {elseif !$item.available}
        <tr>
         <td colspan="6" class="submit right">
           &nbsp;
         </td>
        </tr>
          {elseif !$item.resource_present}
        <tr>
         <td colspan="6" class="submit right">
           {if $item.link_demolish && $item.texts.text_decrease}<button type="button" class="nonbutton" onclick="self.location.href='{$item.link_demolish}&tplvars[tagfilter]={$tplvars.tagfilter}';">{$item.texts.text_decrease|replace:"[name]":$item.name|replace:"[level]":$item.level|escape:"htmlall"}</button>&nbsp;&nbsp;{/if}
           {$smarty.config.resourceCountdownPrefix|replace:"[resources]":$smarty.config.resources}&nbsp;<span id="resourcecountdown{$item.id}"></span>&nbsp;.<script language="JavaScript">init_countdown('resourcecountdown{$item.id}','{$item.resource_countdown}', '00:00:00', '', '');</script>
         </td>
         </td>
        </tr>
          {elseif $item.active_queue && !$item.working}
        <tr>
         <td colspan="6" class="submit right">
           &nbsp;
         </td>
        </tr>
          {elseif !$object_space_left}
        <tr>
         <td colspan="6" class="submit right">
           {if $item.link_demolish && $item.texts.text_decrease}<button type="button" class="nonbutton" onclick="self.location.href='{$item.link_demolish}&tplvars[tagfilter]={$tplvars.tagfilter}';">{$item.texts.text_decrease|replace:"[level]":$item.level|replace:"[name]":$item.name|escape:"htmlall"}</button>&nbsp;&nbsp;{/if}
         </td>
        </tr>
          {elseif $item.resource_present}
        <tr>
         <td colspan="6" class="submit right">
            {if $item.link_demolish && $item.texts.text_decrease}<button type="button" class="nonbutton" onclick="self.location.href='{$item.link_demolish}&tplvars[tagfilter]={$tplvars.tagfilter}';">{$item.texts.text_decrease|replace:"[level]":$item.level|replace:"[name]":$item.name|escape:"htmlall"}</button>&nbsp;&nbsp;{/if}
         <button type="button" onclick="self.location.href='{$item.link_extend}&tplvars[tagfilter]={$tplvars.tagfilter}';">{$item.texts.text_increase|replace:"[level]":$item.newlevel|replace:"[name]":$item.name|escape:"htmlall"}</button>
         </td>
         </td>
        </tr>
          {/if}
        </tbody>
       </table>
 
Naja, du müsstest zählen, wieviele Items du hast, die Anzahl durch die Anzahl der Items teilen, die in einer Zeile sein sollen und dann wenn nötig, eine neue Zeile erstellen.

Mit einer Liste bräuchtest du das nicht.
 
Da liegt mein Problem, es hat mehrere Listen die mit Tags auf Seiten aufgeteilt werden, die eine hat 5 die andere 4 usw, Ich weis einfach nicht wie ich das so umstellen kann.
Habe auch eine Seite gesehen die die selbe Engine benutz und das so aufgeteilt hat wie ich es beschrieben habe.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben