Inhalt

    Zitat

    Jetzt hast du ja gar kein float mehr benutzt.


    Jetzt hab ich aber wieder dass Problem dass es mir alles verschoben hat :(
    Warum verschiebt es den alles?


    Mein Code:


    Index.html:



    CSS Datei:


    Statt "display:block;" musst du "list-item" hinschreiben:

    Code
    [...]
ul#navigation li a {
display: list-item;
[...]
}
ul#navigation li a:hover {
/* Display kannst du hier auch weglassen */
}
[...]

    Erstmal musst Du das Prinzip von "float" kennen. Du musst Dir jede Website als einen Fluss vorstellen. Das Wasser (der Inhalt) fliesst von oben nach unten, d.h. jedes Element reiht sich nach dem oberen unten an. Durch die Eigenschaft "float" und die beiden Werte "right" oder "left" nimmst du die angesprochenen Elemente aus diesem Fluss. Genauer gesagt sie bleiben im Fluss rechts oder links stecken, vorausgesetzt die Breite lässt es zu. Das ist auch der Knackpunkt, warum viele Mühe mit floaten haben. Nehmen wir Deine Website. Die drei Container "header", "inhalt" und "inhalt2" bleiben schön im Fluss, dann aber willst Du, dass die beiden Container "navigation" und "linksunten" nebeneinander stehen, genauer links bzw. rechts (bitte korrigieren wenn falsch verstanden). Das heisst die beiden vorgenannten Container müssen zusammen so breit wie dein Gesamtlayout sein. Jetzt aber nutzt du die ganze Seite was man am Besten mit Prozentangaben löst. Weiter zum Begriff "clear". Wenn du Elemente gefloatet hast, bleiben die nachfolgenden Elemente nicht im Fluss, sondern reihen sich seltsam den vorgehenden Elementen an. Das heisst du musst den nachfolgenden Elementen den Befehl geben sich wieder nach dem Fluss auszurichten, dafür kommt jetzt der Befehl "clear: both;". Einfach immer den Fluss im Hinterkopf behalten um sich die ganze Sache visuell vorzustellen.


    Hoffe du verstehst was ich gemeint habe.

    Zitat

    Hoffe du verstehst was ich gemeint habe.


    Ich glaube ich verstehe was du meinst :)
    Habs mal versucht, und die Objekte stehen richtig, nun hat es mir aber die Navigation verschoben unter der Text steht daneben ersichtlich im Screenshot muss ich jetzt die Navigation vergrößern? Ich hoffe dass ich es so richtig gemacht habe wie du es gemeint hast. Poste zur Sicherheit nochmal den Code.


    [Blockierte Grafik: http://s5.directupload.net/images/user/100622/temp/utm3v8u4.jpg]



    Index.html:



    CSS Datei:

    Du musst dem Inhalt und der Navigation jeweils eine Breite geben (am besten in %), und zwar so, dass sie beide noch nebeneinander Platz haben. Da die Navigation schon ne Breite hat, musst du den Inhalt anpassen. Einfach ausprobieren, womit es passt, ein Wert um die 80% müsste passen.

    Diese float- und clear Geschichte ist ziemlich kompliziert, da hatte ich am Anfang auch meine Probleme mit.. Ich habe es damals an einem Beispiel gelernt, deshalb habe ich dir auch mal eins gemacht, nur das was du brauchst.. wenn du diese Werte (außer die Farben, die sind nur Verdeutlichung und die Größen natürlich) nicht veränderst, sollte es passen. ggf. noch mit Faux Columns arbeiten, weiß ja nicht was du genau vorhast. Denke Problem bei dir ist, dass du im Moment noch zwei seperate Inhaltsbereiche hast - ich weiß nicht inwieweit das nötig ist, habe mal nur einen genommen, aber da hinein kannst du ja divs packen wie du willst:
    (Musst den CSS-Dateinamen anpassen^^):



    CSS:


    LG

    Zitat

    Du musst dem Inhalt und der Navigation jeweils eine Breite geben (am besten in %), und zwar so, dass sie beide noch nebeneinander Platz haben. Da die Navigation schon ne Breite hat, musst du den Inhalt anpassen. Einfach ausprobieren, womit es passt, ein Wert um die 80% müsste passen.


    Du meinst schon die Breite im Inhalt oder?? Kann sich dadurch die Navigation anpassen?


    Index.html





    design.css:


    Ne mögliche Idee wäre auch, dass du die Navigation im HTML über den Inhalt schreibst, dann kannst du beides nach links floaten, dann wäre das mit der Breite einfacher.. :)


    btw: Du gibst dem div#linksunten ein clear: both; damit hast du dann aber immer zwischen inhalt und footer den Abstand des #linksunten.


    LG

    Zitat

    Ne mögliche Idee wäre auch, dass du die Navigation im HTML über den Inhalt schreibst, dann kannst du beides nach links floaten, dann wäre das mit der Breite einfacher..


    Hab mal deine Variante genommen, aber wie bekomme ich nun den Inhalt nach oben und wie bekomme ich dass DIV "linksunten" nach oben dass es aufschließt mit der Navigation?


    Index.html:


    design.css:

    Zitat

    Richtig. Du musst nur deine Sachen noch reinschreiben, das wollte ich jetzt nicht alles übernehmen.. Probier es nachzuvollziehen..


    Ich hab mir mal dein Beispiel angeschaut, sehr verständlich... Was ich überhaupt nicht verstehe wie ich auf meiner Seite den Text nach oben bringe und das DIV nach oben dass es aufschließt. Weil normal müsste dass DIV eigentlich aufschließen, da es ja gleich nach Navigation ist, was es aber nicht macht. Ich kann zwar jetzt dein Beispiel verwenden, aber am Schluss hat es eigentlich keinen Sinn da ich es ja selbst verstehen muss, wie ich die Objekte usw. ausrichten kann...

    Probier mal mein Beispiel nach folgenden Sätzen zu verstehen:


    Zitat

    float: left/right bedeutet, dass sich das Element auf der linken/rechten Seite an den Rand oder ein bereits vorhandenes Element "anschmiegt".


    clear bezeichnet die Seite(n), auf der neben dem Element kein anderes Element stehen darf.


    Dann schau mal in dein Beispiel und schau, was du da eigentlich definiert hast und probier deine Probleme zu verstehen. Wenn es dann immer noch nicht klappt, probier mal dir das ganze mit so Pfeilen, wie sie auf der Seite waren, die ich vor dem Beispiel genannt hatte, zu verdeutlichen. So hab ich es damals gelernt - hat ganz gut funktioniert, würde ich sagen^^


    LG

    Zitat von "hume"

    Du meinst schon die Breite im Inhalt oder??


    Ja, der Code ist richtig, nur musst du den Nabigation-Teil noch etwas ändern.


    Dort hast du die Befehle nur für die Einträge (li) geltend gemacht, dass "li" musst du weglassen. Es soll ja für die ganze Navigation gelten und nicht für jedes "li" einzeln.


    Den anderen Fehler verrate ich dir jetzt mal nicht, solltst du ja selber rausfinden. Beachte das was Lauras gesagt hat und du findest ihn schon.


    Berichtigter Code:

    Code
    ul#navigation {
[...]
}


    Vorher:

    Code
    ul#navigation li {
[...]
}
    Zitat

    Dann schau mal in dein Beispiel und schau, was du da eigentlich definiert hast und probier deine Probleme zu verstehen. Wenn es dann immer noch nicht klappt, probier mal dir das ganze mit so Pfeilen, wie sie auf der Seite waren, die ich vor dem Beispiel genannt hatte, zu verdeutlichen. So hab ich es damals gelernt - hat ganz gut funktioniert, würde ich sagen^^


    Ich werde mir dass ganze genau anschauen und wie du sagtest probieren dass Problem zu verstehen.


    Code
    ul#navigation { 
[...] 
}


    Du meinst aber schon die CSS Datei oder? Weil in der Index.html Datei kann ich unmöglich dass "li" weglassen.


    Wenn du CSS Datei meinst hab ich sie folgendermaßen geändert, wie du es meintest. Ich hoffe ich habe dich richtig verstanden :)


    Zitat

    Steht da immer noch, das li^^


    Wurde gerade korrigiert. Hab es jetzt hin bekommen.


    Hier mal mein Code:


    Index.html:




    design.css:



    PS: Bitte um Aufklärung wenn etwas nicht korrekt sein sollte.

    Du hast immer noch zwei Inhalts divs.. funktioniert zwar so, wie du es jetzt gemacht hast, aber warum packst du das nicht in einen div?


    Aber float und clear hast du jetzt richtig angewendet, sehr gut :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden