mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 04:34 Benutzername: Passwort: Auto-Login

Thema: Navigation Horizontal mit CSS vom 20.09.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Navigation Horizontal mit CSS
Autor Nachricht
niederberger
Threadersteller

Dabei seit: 26.07.2005
Ort: Buochs NW - Schweiz
Alter: 46
Geschlecht: Männlich
Verfasst So 20.09.2009 13:37
Titel

Navigation Horizontal mit CSS

Antworten mit Zitat Zum Seitenanfang

Guten Tag

Ich suche nach einer Möglichkeit die folgende Tabelle komplett in CSS abzubilden mit einer Liste, dass die Elemente auf die breite zentriert werden. Die Problematik bei einer Listennavigation ist, dass ich diese nicht auf eine Breite von 100% ausrichten kann und die Elemente sich den verfügbaren Platz selbständig nehmen - die Navigationstexte haben ja eine unterschiedliche Breite und ich möchte die verfügbare breite nicht gleichmässig aufteilen.

Code:
<table width="100%">
<tr>
  <td align="center" valign="middle"><a href="#">A</a></td>
  <td align="center" valign="middle"><a href="#">B</a></td>
  <td align="center" valign="middle"><a href="#">C</a></td>
  <td align="center" valign="middle"><a href="#">D</a></td>
  <td align="center" valign="middle"><a href="#">E</a></td>
</tr>
</table>


Danke für die Tipps... Thomas.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Guenni007

Dabei seit: 12.06.2008
Ort: Bonn
Alter: -
Geschlecht: Männlich
Verfasst Mo 21.09.2009 08:43
Titel

Antworten mit Zitat Zum Seitenanfang

sehr schön und rein CSS kannst du dir das hier mal anschauen

http://www.yaml.de/fileadmin/examples/05_navigation/menu_shiny_buttons.html

wenn du mit Firefox unterwegs sein solltest empfiehlt sich die Webdeveloper Tools und Firebug zu installieren als Plugins.

Dort kannst du dann die css abgreifen um mal nachzuschauen, wie das Dirk Jesse in seinem sehr schönen Yaml-Framework gestaltet.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 21.09.2009 09:42
Titel

Re: Navigation Horizontal mit CSS

Antworten mit Zitat Zum Seitenanfang

niederberger hat geschrieben:
Die Problematik bei einer Listennavigation ist, dass ich diese nicht auf eine Breite von 100% ausrichten kann und die Elemente sich den verfügbaren Platz selbständig nehmen


Mit display:block; kannst du die Listen schon auf 100% Breite ziehen.


// Verschoben von Programmierung


Zuletzt bearbeitet von Kash am Mo 21.09.2009 09:43, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 21.09.2009 12:32
Titel

Re: Navigation Horizontal mit CSS

Antworten mit Zitat Zum Seitenanfang

niederberger hat geschrieben:
Die Problematik bei einer Listennavigation ist, dass ich diese nicht auf eine Breite von 100% ausrichten kann und die Elemente sich den verfügbaren Platz selbständig nehmen

Für gute Browser (inkl. IE 8 ) geht das problemlos mit den table-Eigenschaften, aber diese kennt der IE < 8 leider nicht. Für ihn müsstest Du eine Extra-Lösung bauen, indem die li individuelle Breiten in % bekommen.


Zuletzt bearbeitet von heiko_rs am Mo 21.09.2009 12:32, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
niederberger
Threadersteller

Dabei seit: 26.07.2005
Ort: Buochs NW - Schweiz
Alter: 46
Geschlecht: Männlich
Verfasst Fr 25.09.2009 06:52
Titel

Antworten mit Zitat Zum Seitenanfang

Spannend. Danke für die Tipps...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen css display bei horizontal
Div horizontal nebeneinander ?
[CSS] 100% horizontal Scrollbar im FF?
[CSS] Horizontal Scrollen
[CSS] Seite horizontal zentrieren
[CSS] Textnavigation horizontal zentrieren
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.