Anfänger Frage zu Floating

  • Hey Leute, erstmal vielen Dank für dieses Forum. Ich profitiere sehr von den vielen Threads hier.

    Ich habe mir HTML&CSS Videos reingezogen und versuche mich nun an meiner ersten Seite. Nach ein paar Zeilen Code bin ich schon stehen geblieben. Ich habe eine einfache Navigationsleiste, Ein Bild (soll ein Logo auf der oberen linken ecke sein) und ein LoremIpsum Text.

    Es wird alles soweit korrekt dargestellt. Als zweiter Schritt versuche vergeben diesen Lorem Ipsum Text direkt neben dem Logo zu platzieren bzw. der Paragraph soll neben dem Logo anfangen. Ich habe schon viele Möglichkeiten mit float versucht doch ich kriege es nicht hin. Vielleicht funktioniert das auch nicht so wie ich es haben möchte. Könnt ihr mir sagen ob das möglich ist und wenn ja wie?


    https://codepen.io/coderfx/pen/YzGEvYm

  • Tipp ist schwierig. Zum einen wissen wir nicht was dir genau vorschwebt. Das Logo-Bild liegt uns nicht vor. Und einige Angaben deines CSS kollidieren mit den notwendigen Anweisungen für deine vermeintlichen Vorstellungen. Zu Beginn kannst du dein CSS mal komplett löschen und durch das folgende ersetzen:


    Wenn die Anordnung grundsätzlich stimmt kannst du anfangen Größen, Abstände, Farben und so weiter anzupassen.


    Das ist aber nur ein Versuch dir bei der Lösung deines Problems zu helfen. Korrektes HTML sieht noch etwas anders aus und beim CSS wären teilweise andere Einheiten außer px sinnvoller.

  • So hallo nochmal, ich habe nun mehr mit Grid gearbeitet und habe das was ich wollte hinbekommen.


    https://codepen.io/coderfx/pen/WNGXYZJ


    Normalerweise ist an der linken oberen Ecke ein Logo bzw Bild, das direkt an die untere Navbar anknüpft. Nun habe ich ein weiteres Problem. Wenn ich im HTML Code einen neuen paragraphen einfüge verschiebt sich die Navigation weiter nach unten. Könnt ihr mir erklären wieso der das macht und wie ich das lösen kann?

  • Durch das "margin-top: -170%;" ist die Navigation überhaupt nicht sichtbar.


    Und wo willst du einen neuen Absatz (den meinst du wohl mit paragraphen) überhaupt einfügen? In das divstart?


    Bei meiner Lösung kannst du problemlos zusätzliche Absätze hinzufügen. Warum verwendest du die die nicht? Wie sollen wir dir helfen wenn du die Hilfen offensichtlich ignorierst?


    Du hast das Grid halt zeilenweise aufgebaut. Der Text befindet sich in einer Zeile mit dem Logo. Bei mehr Text wird die Zeilenhöhe größer und alles in der nächsten Zeile wird weiter "runtergedrückt".


    Und fr ist nicht immer die sinnvollste Einheit. Die Höhe von Containern sollte sich nach deren Inhalt richten und nur in notwendigen Ausnahmefällen vorgegeben werden.


    Du kannst mal im #divstart


    Code
    grid-row: 1;

    durch


    Code
    grid-row: 1 / span 2;

    ersetzen. Die "-170%" natürlich löschen.

Jetzt mitmachen!

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