Einheitliche Tabellenbreite, durchgehende Tabellenüberschrift und einklappbare Navigationsleiste

[Guybrush]

Hallo,

ich möchte meinen Lebenslauf als Tabelle in einer Webseite abbilden. Dieser ist in der Excel/PDF so formatiert, dass die einzelnen Abschnitte (Persönliches, Schulische Laufbahn, Berufliche Laufbahn) als Überschrift größer geschrieben sind und einen dunkelroten durchgehenden Strich als Einteilung haben.

Unter der Überschrift, kommen dann links Zeitraum (gleiche Farbe wie der Strich) und darunter dann das Wort Tätigkeitsbeschreibung (nochmals gleiche Farbe und kursiv). Rechts hat man neben dem Zeitraum den Firmennamen (fettgedruckt schwarz) und darunter (also dann neben dem Wort Tätigkeitsbeschreibung) eine Tätigkeitsbeschreibung (ohne weitere Formatierung).

Um das ganze auf der Webseite abzubilden ist jeder Abschnitt eine Tabelle. Jeder Abschnittsname (Persönliches...) ist der Tabellenkopf und um die einzelnen Zellen jeweils richtig zu formatieren habe ich für jede einzelne Art der Formatierung eine id erstellt.

Mein CSS-sheet sieht nun wie folgt aus:

th {text-align: left; font-size: 1.8em; border-bottom: DarkBlue 1px solid;}

#zeitraum {color: DarkBlue;}

#beschreibung {color: DarkBlue; font-style:italic; font-size: 0.9em;}

#firmenname {font-weight:bold;}

Mit meinem Ergebnis bin ich zufrieden, dennoch würde ich gerne wissen, ob es generelle elegantere Lösungen gibt, als mehrere Einzeltabellen und ids für die Formatierung der Zelleninhalte.

Vor allem jedoch möchte ich zwei Dinge umsetzen, bei denen mir noch nicht klar ist wie ich dies machen kann:

• Ich möchte, dass der Strich unter der jeweiligen Tätigkeit durchgehend bis zum Ende der Seite und nicht nur so breit wie die Zelle des Tabellenkopfes ist. Wie setze ich das um? Neben der ersten Tabelle (Persönliches) befindet sich mein Foto, welches ich mit float: right; an die rechte Seite gemacht habe. Hört der durchlaufende Strich dann automatisch vor dem Foto auf?

• Die Breite der ersten Spalte orientiert sich bei jeder der Tabellen (und somit auch Abschnitte der Bewerbung) an der Länge des Tabellenkopfes. Somit ist der Beginn der zweiten Spalte in jeder Tabelle unterschiedlich. Ich möchte jedoch, dass dies für alle Tabellen einheitlich ist, da es für die Abbildung des Lebenslaufes sauberer aussieht. Wie kann ich das umsetzen?

Neben der Formatierung der Tabelle möchte ich noch meine Navigationsleiste anpassen. Hier möchte ich, dass weitere Elemente der Navigationsleiste bei der Verkleinerung des Browserfensters in ein klickbares Menü (Symbol mit drei Strichen) verschwinden anstatt dass sich eine zweite Zeile erstellt.

Neben der generellen Formatierung von Farbe, Hintergrund, Rand... von nav, nav a und von nav a:hover habe ich folgende Formatierung verwendet um eine Leiste zu haben:

nav li {list-style-type: none; display: inline-block;}

Ist diese Methode überhaupt elegant um eine Navigationsleiste zu haben? Wie kann ich darauf aufbauend das klickbare Menü bei Verkleinerung haben?

[Henry]

Hallo Guybrush,

es ist schwierig sich davon ein Bild zu machen ohne ein Bild/Vorlage zu sehen. Vielleicht könntest du einen Screenshot oder mehr Quelltext zeigen oder noch besser einen Link zur Seite. Deine Daten kannst du durch Musterdaten ersetzen.

Bis dahin ist vielleicht aber auch der Artikel für dich interessant.

Gruss
Henry