kostenloser Webspace werbefrei: lima-city

Tabellenproblem - dynamische Größe einer Zelle?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   replikator

   replikator hat kostenlosen Webspace.

   22:15, 5.1.2012

   Hi Leute,
   ich habe vor eine "Brotkrümel"-Navigation manuell in meine Seite (in arbeit) einzubauen. Dazu habe ich mich entschieden diese in Form einer "Tabelle" zu realisieren. Möchte diese grafisch ein bisschen aufwerten, aber bevor ich soweit bin möchte ich doch erst noch folgendes Problem lösen. Hier erstmal der "Grundcode" der Navigation:
   
   

   <table width="100%" border="0">
     <tr>
       <td><a href="">Start</a></td>
       <td>&raquo;</td>
       <td><a href=""><em>Kategorie 1</em></a></td>
       <td>&raquo;</td>
       <td><a href=""><em>Unterkategorie 1</em></a></td>
       <td>&raquo;</td>
       <td><em>Content 1</em></td>
     </tr>
   </table>

   
   
   So... nun möchte ich gerne das die einzelnen Zellen der Tabelle sich automatisch der Größe des Textes anpassen. Ist das überhaupt möglich?? Oder müsste man jede Zelle mehr oder weniger individuell anpassen mit "weight="xx%". Weil es könnte sein das ich mehrere Schritte habe... also in dem Muster von oben.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   23:26, 5.1.2012

   Welchen Sinn macht da eine Tabelle?
   
   Die einfachste Möglichkeit wäre, die Links einfach hintereinander zu hängen.
   
   

   <a href="">Start</a> &raquo; <a href=""><em>Kategorie 1</em></a> &raquo;<a href=""><em>Unterkategorie 1</em></a> &raquo; <em>Content 1</em>

   
   
   Die sauberste Lösung wäre eine, mit CSS passend formatierte, Liste:
   
   

   <ul>
       <li><a href="">Start</a></li>
       <li><a href="">Kategorie 1</a></li>
       <li><a href="">Unterkategorie 1</a></li>
       <li>Content 1</li>
   </ul>

   
   beispielhaftes CSS zur Liste:
   

   a{text-decoration:none;font-style:italic;}
   #breadcrumb li{display:inline;border-left: 1px solid #000;padding: 0 10px 0 10px;}
   #breadcrumb li:first-child{border-left: 0px solid #000;}
   #breadcrumb li:first-child a{font-style:normal;}

   
   
   Wenn Du bei der Liste auch die raquo's als Trenner haben möchtest, kannst Du einfach den Rahmen der Listenelemente löschen und stattdessen ein passend positioniertes Hintergrundbild setzen. ;)
   
   
   Beitrag zuletzt geändert: 5.1.2012 23:36:51 von fatfreddy

4. copynpaste

   

   copynpaste hat kostenlosen Webspace.

   23:31, 5.1.2012

   Wieso nimmst du denn eine Tabelle? Tabellenlayouts sind total veraltet, aber gut..
   
   Theoretisch müsste sich eine Zelle (bzw Spalte) automatisch der Höhe des Inhaltes anpassen (so lange nicht anders definiert).
   Andernfalls kannst du mal height auto probieren.
   
   Allerdings empfehle ich dir trotzdem noch diese Tabelle liegen zu lassen und es moderner einzurichten.
   Navigationsleisten - Selfhtml

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?