dicker36: float left header und banner probleme

Hallo an Alle,

danke für ihren Hilfen und Tipps

  1. Frage floaten links geht nicht, aber wenn ich Position fixed eingebe geht mein Banner links und mein Tabelle rechts

ohne Gridsystem klappt alles wunderbar, aber mit gridsystem klappt leider nicht

body {
  font-family: 'PT Sans Narrow', 'Abel', sans-serif;
  font-size: 16px;
  margin: 0;
  background-color: #e1cc4f;
}

* {
  box-sizing: border-box;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.header-nav {
  background-color: #e1cc4f;
  height: 110px;
  width: 100%;
  position: relative;
  font-weight: bold;
  font-size: 1.1rem;
}

.header-nav a > img {
  height: 160px;
  width: auto;
  float: left;
  margin: .55rem;
  margin-left: 2rem;

  }

.header-nav ul {
  margin-top: 3rem;
  margin-right: 2rem;
  float: right;


}

.header-nav  ul > li {
  Display: inline-block;
  height: 100%;
  padding: 0 .4rem 0 .4rem;
  top: 2.4rem;

}

.header-nav .col-6 {
  padding-top: 0;
  padding-bottom: 0;
}

.header-nav, .container,
.header-nav, .row,
.header-nav, ".col-6 {
  height: 100%;

/* === Header-Banner === */

.header-banner {
  width: 100%;
  height: 0;
  padding-top: 17.448%;
  /* 335 : 1920 x 100 Prozent  */
  background: url("../img/banner.png") no-repeat;
  background-size: contain;
}

 /* === Grid-System(Sichtbarkeit) ===
.border, .border * {
border: 1px solid #91c4ff;
}

[class*='col-'] {
  background-color: #bfddff;
}

p {
  background-color: #91c4ff;
  padding: 0;
  margin: 0;
  color: #FFF;
  text-align: center;
} */


/* === Grid-System === */

/* .container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
} */

.container a > img {
float: left;
margin: .55rem;

}

.row::after {
  content: "";
  clear: both;
  display: block;
}

/* === Attribute findet alle colums (Spalten) === */

/* [class*='col-'] {
  float: left;
  min-height: 1px;
  padding: .8rem;
  background-color: #bfddff;
} */

/* === Breiten der Spaten === */
.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-6 { width: 100%;    }

@media (max-width: 1024px) {
  .col-1 { width: 33.333%; }
}

@media (max-width: 768px) {
  .col-1 { width: 50%;  }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
}

@media (max-width: 480px) {
  .col-1 { width: 100%; }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
}
  1. Hallo dicker36,

    leider sind Glaskugeln gerade ausverkauft.

    Bitte liefere soviel Informationen nach, dass man weiß, was Du eigentlich tust. Am besten eine Online-Version der Seite.

    "Grid geht nicht" - ja, das liegt an der Ursache. Welche? Man weiß ja nicht mal wie Du das Grid aufzubauen versuchst.

    Wenn Du keine Onlineversion zeigen kannst, dann baue das Problem in einem Weblabor nach (jsfiddle, codepen oder Ähnlich). Andernfalls müssten wir das nämlich für Dich tun. Und eigentlich willst Du ja Hilfe, und kein genervtes Stirnrunzeln bekommen.

    Achso - ich bin kein Pirat und mag Bootstrap Bill nicht, aber Du? Irgendwie sehen deine Klassennamen bootstrappy aus.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. danke für die schnelle Antwort

      https://jsfiddle.net/n8os3pgv/

      1. Hallo dicker36,

        ja, und? Ich sehe jetzt ein Logo und 4 Menüpunkte. Kann man so machen.

        Wenn man das Fenster schmaler macht, beginnen die Menüpunkte umzubrechen. Sollte man nicht so machen. Aber Du hast ja die Media-Breaks nicht mit ins Fiddle kopiert.

        Sprich Dich Aus!*

        Welche Darstellung erwartest Du? Was willst Du erreichen? Was läuft unerwartet? Vage Hinweise auf float, grid und position:fixed reichen wohl nicht.

        Wie gesagt: Glaskugeln sind ausverkauft, und Telepathieverstärker leider auch.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. danke,

          siehe link https://dramaticextrasmalllinuxkernel--dicker36.repl.co/index.html

          ich möchte den Banner nach links verschieben die Navigationsleiste nach rechts

          vorher ging es,

          Mein Aufgabe ist responsive Internetseite erstellen und dafür habe ich gridsystem erstellt

          1. Hallo dicker36,

            ich weiß nicht, wie Du Dir da eine Unterstützung vorstellst. Du hast ein Bild vor Augen, du weißt was passieren soll, aber sonst niemand. Ich verlassen das Thema dann erst mal.

            Solltest Du es schaffen, dein Problem ausführlich und gründlich zu beschreiben, melde ich mich vielleicht noch mal. Sollte es jemand anders schaffen, aus deinen Andeutungen schlauer zu werden, dann möge sich dieser andere melden.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Ich lerne zu Zeit html und css und möchte mir eigene Internetseite programmieren.

              Ich weiß ungefähr, wo das Fehler ist. Über die Seite getskeleton habe ich in Stylesheet zwei css datei eingefügt und die machen probleme (die Floaten nicht).

              https://DramaticExtrasmallLinuxkernel--dicker36.repl.coQuelltext hier
              
          2. @@dicker36

            siehe link

            Bei den Buttons mausgerutscht? 🔗 ist für Links, </> ist für Code. Geändert.

            Bei der Wahl des Tags auch? Was hat das mit PHP zu tun? Geändert in CSS.

            🖖 Stay hard! Stay hungry! Stay alive! Stay home!

            --
            Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
          3. @@dicker36

            siehe link https://dramaticextrasmalllinuxkernel--dicker36.repl.co/index.html

            ich möchte den Banner nach links verschieben die Navigationsleiste nach rechts

            Was bezeichnest du als „Banner“? Und mit „Navigationsleiste“ meinst du die vier Farbklechse? Zu einer benutzbaren Navigation gehört, dass sie erkennbar ist; Text also lesbar. Deiner hat viel zu wenig Kontrast.

            Links wie Buttons aussehen zu lassen ist auch eher so’ne Schnapsidee.

            Es fehlt immer noch eine verständliche Beschreibung, aus der hervorgeht, wie das bei schmalem und bei breitem Viewport aussehen soll. Und dazwischen.

            Mein Aufgabe ist responsive Internetseite erstellen und dafür habe ich gridsystem erstellt

            Ist das eine Hausaufgabe oder ein Projekt für ein wirklich existierendes Taxi-Unternehmen? Im zweiten Fall würde ich dringend die Hinzuziehung eines Grafikdesigners anregen.

            🖖 Stay hard! Stay hungry! Stay alive! Stay home!

            --
            Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
            1. @Gunnar Bittersmann,

              sorry ich habe falschen Ausdruck benutzt, eigentlich wollte ich damit sagen Navigationsleiste(nicht Banner), da ich noch frisch bin mit lernen, konnte ich leider nicht genau beschreiben sorry nochmals und danke für ihren Mühen.

              1. @@dicker36

                sorry ich habe falschen Ausdruck benutzt, eigentlich wollte ich damit sagen Navigationsleiste(nicht Banner), da ich noch frisch bin mit lernen, konnte ich leider nicht genau beschreiben

                Dann heißt es: ich möchte die Navigationsleiste nach links verschieben die Navigationsleiste nach rechts. 😄

                Du meinst, du möchtest das Logo nach links verschieben und die Navigationsleiste nach rechts?

                Logo         Navigationsleiste  
                Slogan (von Marketing erdacht)
                

                Das kriegst du wahlweise mit Floats, mit Flexbox oder mit Grid hin.


                vorher ging es

                Nein. Mit Tastatur geht bei schmalem Viewport gar nichts.

                Du darfst das Öffnen des Menüs nicht per :hover machen. Das Hamburger-Icon muss in einem <button> sein, am besten in einem Toggle-Button.

                Ich hab hier mal solch ein responsive menu umgesetzt; einige Erklärungen gibt’s auch dazu.

                🖖 Stay hard! Stay hungry! Stay alive! Stay home!

                --
                Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
                1. danke nochmals vom Herzen,

                  lerne gerade neu html bin immer wieder überfordert