Anfänger Frage zu Floating

html.newbie · 26. Dezember 2020

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

jonas3344 · 26. Dezember 2020

Vergiss das alles am Besten gleich wieder und lies Dich in Flexbox ein:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

m.scatello · 26. Dezember 2020

Zitat von html.newbie

Könnt ihr mir sagen ob das möglich

Ist möglich

Zitat von html.newbie

wenn ja wie?

Informiere dich über Flexbox und Grid

html.newbie · 26. Dezember 2020

Alles klar, das war sowieso das nächste Thema das ich mir anschauen wollte. Danke sehr

prodev · 26. Dezember 2020

Float kannst du in der heutigen Zeit vergessen, das braucht man eigentlich für nichts mehr. Lässt sich alles einfacher (und besser) mit Grid und Flexbox lösen

html.newbie · 27. Dezember 2020

Leute ich komme nicht klar. Sollte eigentlich nicht so schwer sein aber kriege es nicht hin. Könnt ihr mir einen Tipp geben?

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

MrMurphy · 27. Dezember 2020

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:

Code

body {
   margin: 0;
}
#testing {
   background-color: tomato;
   height: 100%;
}
#divlogo {
   padding: 20px;
}
#div1 {
   padding: 0px 50px;
}
#divNav {
   color: teal;
   border-style: solid;
}
img {
}
ul {
   background-color: #D0D8D0;
   padding: 0;
   margin: 0;
}
li {
   list-style-type: none;
}
li a {
   display: block;
   color: black;
   padding: 10px 0px 10px 15px;
   text-decoration: none;
}
li a.aktiv {
   background-color: #500000;
   color: white;
}
li a:hover:not(.aktiv) {
   background-color: #777;
   color: white;
}
/* CSS-Grid */
#testing {
   display: grid;
   grid-template-columns: 200px 1fr;
   grid-template-rows: auto 1fr;
   grid-template-areas:
      "logo text"
      "navi text"
   ;
}
#divlogo {
   grid-area: logo;
}
#divNav {
   grid-area: navi;
}
#div1 {
   grid-area: text;
}

Alles anzeigen

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.

html.newbie · 28. Dezember 2020

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?

MrMurphy · 28. Dezember 2020

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.

Anfänger Frage zu Floating

Jetzt mitmachen!

Teilen

Tags