Ein paar CSS-Fragen

    Hi,

    Hoffe ich darf nochmals kurz stören. :D Habe eine erste Designvorlage für eine Homepage erstellt. Nachdem ich in einem anderen Thread Hilfe erhalten habe, hoffe ich jemand kann mir hier auch ein paar Tipps geben.

    Page
    Stylesheet

    Meine Fragen:

    1. Weshlb ist die Navigation Links höher als die Navigation rechts? Eigendlich müssten beide auf der Höhe der linken Navigation sein.

    2. Wie kann ich den Abstand zwischen den einzelnen "Boxen" verändern? Gibt es die Möglichkeit dem Absatz-Tags (

    ), welche die Boxen umschliessen, eine class zuzuweisen, welche beispielsweise eine 10px Abstand vom oberen Rand formatiert? (gehört eigendlich zur Frage des anderen Threads, ich hoffe, dass es OK ist wenn ich die Fragen hier zusammenfasse).

    3. Die Boxen sind mit dem Listenformat formatiert. Nun möchte ich aber auch die Möglichkeit haben, Text einzufügen (Beispiel: Letzte Box auf der rechten Seite). Die Formatierung hier ist eine riesige Bastlerei. Irgendwie habe ich hier ein Problem mit dem Padding oder Margin. Im Firefox wird es korrekt dargestellt. Im IE nicht. Wie mache ich dies richtig?

    4. Last but not least: Bin ich auf dem richtigen Weg? Kann ein CSS-Profi kurz über den ganzen Code schauen und mir ein Feedback geben?

    Danke für eure Unterstützung! :smilie124:

    Liebe Grüsse

    Sojo

    1. Weil du secnav und prinav unterschiedlich positioniert hast.
    secnav ist absolut 181 px vom oberen Bildschirmrand positioniert.
    prinav dagegen 10 px relativ von topnav zuzüglich Absatzabstand.

    Bei deinem unproblematischen Layout solltest du generell auf position absolute und relative verzichten. Das kannst du besser über margin und float lösen.

    2. ja:

    Code
    p.navi {margin-top:10px;}

    3. Nimm doch einen einfachen div und verzichte auf ul und li. Du musst dnn dazu noch die entsprechenden Klassen für Überschrift und Inhalt definieren.

    4. Deine CSS-Datei gefällt mir vom Grundaufbau nicht. Da muss mann sehr viel nach rechts scrollen, um alle Angaben zu sehen. Besorg dir vielleicht mal den Editor phase 5 falls noch nicht vorhanden. Der macht automatisch Zeilenumbrüche.

    Siehe Nr. 1: auf position besser verzichten.
    Für die Zwischenüberschriften in der Navi

    Code
    <ul class="navtitle">[*]Tutorials[/list]


    kannst du auf ul und li verzichten. Definiere dafür vielleicht ein h oder eine span-class.

    Die top-navi verschiebt sich nach unten bei kleinerem Bildschrimfenster, was am padding-left-Wert liegt.

    Sieh dich wegen den Navi's mal hier etwas um: http://css.maxdesign.com.au/listamatic/

    Insgesamt aber für ein Anfängerwerk sehr ordentlich. Weiter so!

    Danke für deine Hilfe (nochmals!)!

    Eine "Zwischenfrage":

    Habe momentan vor allem Mühe mit dem floaten und den horizontalen Navigationen.

    A: Wenn ich die Div's floate habe ich das Problem, dass, wenn man den Browser zusammenschiebt, die Divs bei zu wenig Platz anfangen sich unter einander anzuordnen. Wie kann ich das verhindern?

    B: Die horizontale Navigation hat mich bereits extrem viele Nerven gekostet. Wie würde ich es denn richtig machen, damit die Navigation rechts auf der Höhe der rechten Navigationsboxen abschliesst? Die Navigation habe ich übrigens von deinem Link.

    C:

    Zitat von sejuma
    Code
    p.navi {margin-top:10px;}


    Wenn ich das im stylesheet eintrage macht es mir einen 10px-Abstand am oberen Bildschirmrand über dem header... weisst du warum?

    A: Schon klar. Aber wie? Die ganzen Divs in ein grosses Div packen?
    C: Danke. aber müsste dies nicht nur für a) Absätze zählen die b) die Klasse navi haben?

    A: Das wäre eine Möglichkeit wenn Du mit metrischen Breiten arbeiten möchtest. Dann musst Du nur noch den einzelnen Divs innerhalb des Seiten-Divs eine entsprechende Breite zuweisen. Ansonsten würden Prozentzahlen sogar ohne Seiten-Div funktionieren. Am besten dann aber mit 99% arbeiten.

    C: So sollte es sein. Ob da Vererbung eine Rolle spielen könnte weiß ich leider nicht, da ich davon keinen Schimmer hab.

    A.
    Du könntest z.B. den linken und rechten Navis eine fixe Pixelbreite geben und dem content die width: auto; Damit wird nur der "schmäler" Sofern nur Text ist das vollkommen unproblematisch. Bei Bildern mit ner bestimmten Pixelbreite klappt das dann auch nicht mehr immer. Aber so klein sind die Bildschirmbreiten ja mittlerweile nicht mehr.

    B.

    C.
    Da steht aber kein p über'm header. Und schon gar nicht mit dieser Klasse. Kann eigentlich nicht sein.

    Du kannst dann auf die ersten Absätze links und rechts verzichten. Nimm dafür bei prinav und secnav einen entsprechenden margin-top.

    Versuch das mal noch umzusetzen, und melde dich dann ggf. noch mal.