float left header und banner probleme

[dicker36]

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%; }
}

[Rolf B]

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

[dicker36]

danke für die schnelle Antwort

https://jsfiddle.net/n8os3pgv/

[Rolf B]

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

[dicker36]

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

[Rolf B]

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

[dicker36]

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

[Gunnar Bittersmann]

@@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!

[Gunnar Bittersmann]

@@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!

[dicker36]

@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.

[Gunnar Bittersmann]

@@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!

[dicker36]

danke nochmals vom Herzen,

lerne gerade neu html bin immer wieder überfordert