Float box design + script fehler suche.


Sempervivum

Erfahrenes Mitglied
OK, das finde ich aber nicht auf der Seite wieder, die Du online hast. Aber ich vermute mal, Du meinst, dass sich das sichtbare beim H1, nämlich die Schrift nicht verändert. Deren Größe wird jedoch durch font-size bestimmt. Mit den Breitenangabe änderst Du nur die Abmessungen des Elementes, nicht der Schrift darin. D. h. das, was ich hier mit einem hellblauen Rand markiert habe:
background-blend-mode.PNG
 

Andrin.Spitzer

Erfahrenes Mitglied
OK, das finde ich aber nicht auf der Seite wieder, die Du online hast. Aber ich vermute mal, Du meinst, dass sich das sichtbare beim H1, nämlich die Schrift nicht verändert. Deren Größe wird jedoch durch font-size bestimmt. Mit den Breitenangabe änderst Du nur die Abmessungen des Elementes, nicht der Schrift darin. D. h. das, was ich hier mit einem hellblauen Rand markiert habe:
Anhang anzeigen 66338
Musste auch die cookies löschen das ich es sehen konnte.

Hay. Das sehe ich auch so aber mein problem ist das wen ich den code so habe (schreib fom handy daher kein original code)

Code:
<main>
<h1>wen ich diesem h1 tag die selben 50 css werte gebe als width und max width</h1>

<div class="content">ist das nicht die selbe vreite wie wenn ich den n 1:1 selben code also width und max width diesem div gib</div>
</main>
 

Sempervivum

Erfahrenes Mitglied
Du hast da mehrere verschiedene Angaben, die sich auf angezeigte Breite auswirken: width, max-width und padding. width und max-width bestimmen die Breite ohne Padding. Beim Hintergrund ist jedoch das Padding eingeschlossen. Setze ich padding, width und max-width gleich, sind auch die sichtbaren Container gleich:
css-width.PNG
In deiner Originalversion ist jedoch fast alles unterschiedlich, deshalb unterscheidet sich die sichtbare Breite der Container.
 

Andrin.Spitzer

Erfahrenes Mitglied
Du hast da mehrere verschiedene Angaben, die sich auf angezeigte Breite auswirken: width, max-width und padding. width und max-width bestimmen die Breite ohne Padding. Beim Hintergrund ist jedoch das Padding eingeschlossen. Setze ich padding, width und max-width gleich, sind auch die sichtbaren Container gleich:
Anhang anzeigen 66339
In deiner Originalversion ist jedoch fast alles unterschiedlich, deshalb unterscheidet sich die sichtbare Breite der Container.
Achso das wusste ich ned.

Könntest du mir den code wie du es angepasst zeigen?
 

Sempervivum

Erfahrenes Mitglied
Gern:
CSS:
h1 {
    text-align: center;
    padding: 2em;
    width: 30em;
    /* max-width: 60%; */
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
    border: 2px solid red;
}

.content {
    margin: 4em auto;
    padding: 2em;
    width: 30em;
    /* max-width: 80%; */
    background-color: whitesmoke;
    border: 2px solid red;
}
 

Andrin.Spitzer

Erfahrenes Mitglied
Gern:
CSS:
h1 {
    text-align: center;
    padding: 2em;
    width: 30em;
    /* max-width: 60%; */
    font-family: Bahnschrift SemiBold;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    mix-blend-mode: screen;
    margin: 0em auto;
    background-color: rgba(255,255,255,1.00);
    border: 2px solid red;
}

.content {
    margin: 4em auto;
    padding: 2em;
    width: 30em;
    /* max-width: 80%; */
    background-color: whitesmoke;
    border: 2px solid red;
}
Danke schön.

Wie findest du den code so? Was könnte ich besser machen?
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay. Komme gut Dank deiner hilfe voran.
Allerdings kamm mir die frage wie ich den Text der navbar responsive machen kann. Habe mit % und vh probiert jedoch endet das bicht gut verallem bei grossen monitoren
 

Sempervivum

Erfahrenes Mitglied
I. allg. sind eher die kleinen Monitore das Problem, weil dann die Navbar horizontal nicht mehr hinein passt. Bei großem Browserfenster erkenne ich bei dir keine Probleme, die einzelnen Punkte werden auch nicht unnötig auseinander gezogen. Beschreibe doch mal, wo Du die Probleme siehst.
Was kleine Bildschirme, vor allem beim Handy betrifft, so ist es eine bewährte Praxis, die Nav zu verbergen und nur ein Hamburger-Symbol anzuzeigen. Tippt man darauf, öffnet sich die Nav. Versuche, dich darüber zu informieren.
 

Andrin.Spitzer

Erfahrenes Mitglied
I. allg. sind eher die kleinen Monitore das Problem, weil dann die Navbar horizontal nicht mehr hinein passt. Bei großem Browserfenster erkenne ich bei dir keine Probleme, die einzelnen Punkte werden auch nicht unnötig auseinander gezogen. Beschreibe doch mal, wo Du die Probleme siehst.
Was kleine Bildschirme, vor allem beim Handy betrifft, so ist es eine bewährte Praxis, die Nav zu verbergen und nur ein Hamburger-Symbol anzuzeigen. Tippt man darauf, öffnet sich die Nav. Versuche, dich darüber zu informieren.

Hay. Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross. So ist es bei grossen monitoren kein problem das stimmt.

Ich habe mich da etwas infomiert und bereits ne idee ausgedacht, deine meinung würde mich interessieren.

Ich stelle mir vor das die nav bar selbst bleibt der text jedoch durch so ein burger ersetzt wird.

Wen ich ihn antippe giptves ein popup menu mit den buttons das sich nach betötigen wider schliesst.
 

Sempervivum

Erfahrenes Mitglied
Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross.
Das leuchtet ein und bei font-size gibt es ja kein max-height oder max-size. Vielleicht besser mit Mediaqueries die Schriftgröße stufenweise anpassen?

Ich stelle mir vor das die nav bar selbst bleibt der text jedoch durch so ein burger ersetzt wird.
Das wäre genau das, was ich oben auch meinte. Ein Burger Menü ist sehr verbreitet und bewährt und jeden Benutzer kennt es. Kann ich empfehlen.
 

Andrin.Spitzer

Erfahrenes Mitglied
Das leuchtet ein und bei font-size gibt es ja kein max-height oder max-size. Vielleicht besser mit Mediaqueries die Schriftgröße stufenweise anpassen?
Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten. aber wenn ich das mit dem burger mache ist dieses problem so oder so aus der welt.
 

Sempervivum

Erfahrenes Mitglied
Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten.
Ich kann mich auch an so etwas erinnern, aber finde den Thread nicht wieder. An einen Einwand wegen Benutzerfreundlichkeit kann ich mich nicht erinnern. Hast Du den Thread noch zur Hand?
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay hab da was gefunden un bereits etwas angepasst.

Wie kann ich nun die standart nav durch diese ersetzten?


HTML:
<nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
  </div>
</nav>
CSS:
#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
 
  z-index: 1;
 
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
 
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
 
  cursor: pointer;
 
  opacity: 0;
  z-index: 2;
 
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
 
  background: #cdcdcd;
  border-radius: 3px;
 
  z-index: 1;
 
  transform-origin: 4px 0px;
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
 
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
 
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
 

Sempervivum

Erfahrenes Mitglied
Benutzerfreundlichkeit: Das trifft natürlich zu, ich kann mich erinnern, dass mir sehr kleine Schriftgrößen früher auch unangenehm aufgefallen sind. Dies bezieht sich jedoch nicht auf die Umschaltung mit Mediaqueries, da dabei die Schrift ja nicht beliebig klein wird sondern so, wie Du es für die kleinste Viewport-Breite festlegst.

Anpassung deines Menüs:
Dieses:
Code:
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
ist ja der Kern des Menüs und als erstes müsstest Du die Links und die Texte an deine Anforderungen anpassen. Und dann wieder mit CSS gestalten, so dass es so aussieht wie früher. Es sollte möglich sein, dein eigenes CSS von dem vorigen Stand dafür zu verwenden.
 

Andrin.Spitzer

Erfahrenes Mitglied
Code:
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
ist ja der Kern des Menüs und als erstes müsstest Du die Links und die Texte an deine Anforderungen anpassen. Und dann wieder mit CSS gestalten, so dass es so aussieht wie früher. Es sollte möglich sein, dein eigenes CSS von dem vorigen Stand dafür zu verwenden.
Hay ich komme etzt nicht richtig nach was du damit meinst das ist dan das burger menu das bei dem kleinen bildschirm bzw handy anstatt der standart nav erscheint.
 

Sempervivum

Erfahrenes Mitglied
Das Menü selber ist ein und das selbe, es wird nur variabel mit CSS gestaltet, d. h. breites Browserfenster: Menü ist immer sichtbar und horizontal angeordnet, d. h. so wie jetzt. Und schmales Browserfenster: Menü wird durch Tipp auf Burger sichtbar und ist vertikal angeordnet. Dazu brauchst Du dann ein abweichendes CSS.

Mir fällt gerade auf: Ein a-Tag direkt in einem ul ist nicht valide, Du musst es in das li verschieben:
<li><a href="#home">Home</a></li>
 
Zuletzt bearbeitet:

Andrin.Spitzer

Erfahrenes Mitglied
Achso du meinst das ich muss nicht ein 2tes menu erstellen das dass andere ersetzt sondern einfach ein 2tes css design das bei zu kleinem bild eingreift?
 

Sempervivum

Erfahrenes Mitglied
Ja genau. Wenn Du das Menü zwei Mal hättest, müsstest Du ja auch zwei editieren, wenn sich mal etwas ändert.
 

Neue Beiträge