frage zu viewportorientiertem design

[hokage555]

hi leute ;-)

ich habe mich mittlerweile entschieden mein nächstes projekt viewportabhängig zu gestallten
will heißen, verwendung von %, em, etc.
soweit so gut, dass allseitsbekannte bilderproblem ist es noch nicht^^,
sondern viel mehr etwas viel grundlegenderes.

es geht um diese testseite:

Startseite

die vertikale navigation habe ich mit em festgeletg, also viewportunabhängig.
das problem ist jetzt, dass der main content + die horizontale navigation logischerweise nur rechts kleiner werden soll, sich anpassen soll, denn links würde es schließlich mit dem vertikalen menu überlappen.

soweit sogut. es passt sich jetzt auch rechts an den viewport an, aber leider nicht zu 100%^^
das liegt natürlich an dem margin-left, was der mainbereich erhalten hat.
somit taucht letztendlich bei ca 800px breite doch eine horizontale scrolleiste auf ^^

gibt es eine alternative, so ein design umzusetzen, ohne horizontale scrollbar?

oder meint ihr ich sollte in diesem fall diesen kompromiss machen?

ich bin natürlich auch sonst sehr für kritik am code offen, da ich in sachen viewportorientiertes dsign totaler neuling bin ;-)

grüße hokage

 

[prm]

Das Problem dürfte die relative Positionierung der Vertikal-Navi sein.
Ich würde es mal so versuchen:
Einen horizontal zentrierten #wrapper mit porzentualer Breite, z.B. 90%.
Da rein die links gefloatete Navi. Die kann eine prozentuale oder fixe Breite haben.
Dann der Inhalt mit

#seite{
margin-left: {Gesamtbreite Vertikal-Navi}
min-height:500px;
margin-top: 30px;
margin-bottom: 30px;
border:1px solid #000000;
}

 

[hokage555]

danke schonmal für den tipp ;-)

werd ich demnächst testen hört sich auf alle fälle schonmal gut an xD

grüße hokage

*edit: jetzt klappt das ganze
danke dir für deine hilfe ;-)

noch eine kleine frage

würdet ihr die horizontale leiste so lassen, oder auch an den viewport anpassen? also mit % angaben. weil dann würde das ganze ja nicht untereinander dargestellt bei verkleinertem viewport.

 

[prm]

Ich würde den Links in der horizontalen Navi entweder überhaupt keinen width-Wert zuweisen (dafür etwas padding links und rechts) oder einen, der sich am längsten Link-Text orientiert.
"einen Tod muss man immer sterben" :-(