Navis werden in Breite/Höhe gestreckt (Grid-Layout)

Martinus33 · Sonntag um 17:45

Hallo,
ich baue gerade lokal im VSC meine alte Wordpress-Site nach, die vor Jahren mit einem Websitebuilder gemacht wurde.
Sie soll jetzt nur noch HTML/CSS haben, kein CMS.

Das Groblayout wird jetzt ein Grid mit drei Spalten, mit grid-template-areas. Grid-Container ist ein wrapper-div. Header, footer, nav1, nav2 ect. sind die Grid Items.

div.grid-container {
display: grid;
max-width: 1115px;
padding: 0.5rem;
grid-template-columns: 1fr 3fr 1fr;
border: 1px solid black;
grid-template-areas:
"header header header"
"headnav headnav headnav"
"sidenav main aside"
"footer footer footer";
}

Die beiden Navs sind ganz normale nav, ul, li, a, mit den üblichen Dingen, die man so macht. Denke ich mal.
Beide, die horizontale und die vertikale strecken sich nun aber bis ganz nach rechts bzw. ganz nach unten (die nav-boxen). Obwohl die Anzahl der Menüpunkte das gar nicht bräuchte, vom Inhalt her (Menüpunkte) die Navs also gar nicht so breit bzw. hoch sind.

Sieht so aus:

Wahrscheinlich ist das "normal", aber wie kann ich das am günstigsten korrigieren, also dass die Navs rechts bzw. unten "randtechnisch" beim letzten Menüpunkt enden?
Was bietet sich da am besten an? Ich hoffe, dass das nicht so bleiben muss.

Die <a> sind Blocks und haben width: auto.
Die <li> und das <ul> sind Inline-Blocks, <ul> hat width: 100% (wäre auto besser?)

Das Ganze soll dann desktop first noch mobile-friendly werden und die horiz. Navi möchte ich evtl. noch zentrieren, momentan beginnt sie links.

floq0r · Sonntag um 18:09

Der Code und das formatting für diese navs fehlt, bitte den kompletten Code. Am besten gleich ein jsfiddle.

Martinus33 · Sonntag um 19:53

Das Nachfolgende ist für die horiz. Navi:

Code:

<body>
  <div class="grid-container">

    <header>
    </header>

<nav class="headnav"><ul class="headnav-haupt-ul">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">6</a></li>
      </ul>
    </nav>

    <nav>seitennav</nav>
    
    <main> 
      <article> </aricle> 
    </main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>



CSS:
   
div.grid-container {
    display: grid;
    max-width: 1115px;
    padding: 0.5rem;
    grid-template-columns: 1fr 3fr 1fr;
    border: 1px solid black;
    grid-template-areas:
    "header header header"
    "headnav headnav headnav"
    "sidenav main aside"
    "footer footer footer";
}


nav.headnav {
    grid-area: headnav;
    background-color:#fff8e8;
}



    nav.headnav {
    border: 1px solid #000000;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: #6A3333 3px 3px 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: visible;
}

ul.headnav-haupt-ul {
    list-style-type: none;
    display: inline-block;
    width: 100%;
}

.headnav-haupt-ul li {
    display: inline-block;
}


.headnav-haupt-ul li > a {
    display: block;
    width: auto;
    /* -moz-box-sizing: border-box;  
    box-sizing: border-box;  brauche ich das jetzt noch? */
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 14px;
    padding-bottom: 14px;
    outline: none;
    white-space: normal;
    border-style: solid;
    border-color: #000000;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

floq0r · Gestern um 09:56

Da fehlt jetzt immer noch die gesamte HTML Struktur - mach ein fiddle damit man sich das im Inspector anschauen kann. Nur so kann man vernünftig feststellen wie die children im grid ihre Dimensionen bekommen. Änder halt deine Inhalte ab wenn die so privat sind.

Martinus33 · Gestern um 12:17

Ich habe die gesamte HTML-Struktur ergänzt oben, fiddle sagt mir nichts. Ich bin nur Gelegenheits-Coder.

Der div.wrapper ist Grid Container, die sematischen Strukturelemente wie header und eben nav sind die Grid Items.

Ich habe mal rumprobiert und der horiz. headernav, also der nav selbst "width fit-content" gegeben:
nav.headnav {
width: fit-content
}

Das scheint zu klappen. Die Nav endet jetzt rechts beim letzten Menüpunkt und wird nicht mehr bis ganz rechts rausgezogen. Scheint also auch ohne Grid-Eigenschaften zu gehen oder ist das keine gute Lösung und schränkt mich bez. desktop first responsive dann irgendwie ein? Sieht so aus jetzt, vorher ging es bis ganz rechts zum roten Rand:

floq0r · Gestern um 14:50

https://jsfiddle.net/

main und sidenav haben kein grid-area, im closing-tag von "article" fehlt ein t. Wo ist das element mit dem grid-area "header" und wo ist der ganze Content?
Ob das guter practice ist kann ich erst sagen wenn ich sehe wie die ganze Seite aussehen soll.

Martinus33 · Gestern um 15:27

Was hat die sich nicht am Platzbedarf der Menüpunkte orientierte Streckung einer horiz. Nav in einem Grid mit dem (sehr umfangreichen) Hauptcontent an ganz anderer Stelle zu tun oder gar mit dem fehlenden "t" in "article"?

Wir lassen es dann besser... Am Schluss kommst du noch mit einer Rechtschreibprüfung des Hauptcontents.

floq0r · Gestern um 15:36

Stell dir vor du hast ein Problem mit deinem Auto und erwartest dir von einer Werkstatt, dass sie das Problem telefonisch lösen. Ich sehe nicht ein warum ich mir (gratis wohlgemerkt) die Zusammenhänge auf deiner Website zusammenreimen soll wenn ich dir bei Besichtigung des fertigen Konstrukts sofort eine bessere Antwort geben könnte. Es kann sein, dass du dein Problem mit width: fit-content; löst. Wenn das Layout aber schon von vornherein beschissen ist - und davon muss ich anhand deiner unvollständigen Informationen ausgehen - dann wirst du morgen den nächsten Thread aufmachen. Das kann ich dir aber nicht beantworten wenn ich nur fragmentarische Informationen bekomme.

Martinus33 · Gestern um 23:33

Falsch. Ich "erwarte" gar nichts, wenn keiner etwas sagen will oder kann, ist das völlig in Ordnung. Wir sind in einem Forum. Und so ein Forum ist eben keine "Werkstatt", zu der man hinfahren könnte (und tut üblicherweise) und die ihrer Natur nach ein Geschäftsbetrieb ist und die sicher keine kostenlosen Telefonberatungen zur Selbstreparatur macht.

Ich habe eine ganz spezifische Frage zu einem ganz spezifischen Teil einer Seite gestellt. Klar muss man dessen Einbettung in das Ganze kennen, aber das habe ich mehrfach beschrieben und den Zusammenhang erklärt, mitsamt allem nötigen Code und screenshots: Ein wrapper-div als Grid-container und die nav wie andere Strukturelemente (header, main usw.) als Grid Items.
Eine horiz. nav im komplett geposteten, dreispaltigen Grid. Die nav geht dort über alle drei Spalten und leider auch gestreckt am Frontend, obwohl die Menüpunkte gar nicht so viele/groß sind.

Wenn ich einer von denen wäre, die in einem Satz fragen "Ich habe ein Grid und meine Nav dort ist zu lang, wie kann ich die kürzer machen", dann ist das was anderes.
Aber angeblich den kompletten Hauptcontent und den Inhalt vom header unbedingt zu brauchen, weil anders keine vernünftige Beurteilung möglich sein soll... ein fehlendes "t" in einem Wort... weil "das Gesamte sehen müssen" und sonst nur "fragmentarisch"... Das ist Unsinn.

Wir lassen es.
Für stille Mitleser: fit-content klappt, übrigens auch bei der vertik. Nav. und es ist recht flexibel, für responsive-Zwecke geeignet.
Es gibt aber auch spezielle Grid-feature zum Positionieren, die etwas Ähnliches machen.

Janush · Heute um 14:43

Ich weiß, man kann es nicht mehr hören, aber knall das so bei chat gpt order so rein und du hast deine Lösung sofort mit Erklärung. Ist schade, aber in die Richtung geht es nun mal.

floq0r · Heute um 14:48

@Martinus33
Du hättest ein jsfiddle erstellen können so wie ich es vorgeschlagen habe und wie es andernorts auch üblich ist. Einen mehrheitlich kaputten HTML-Code aus deinem Code-Tag zu lesen ist eine Zumutung.

Meine Schwäche scheint wohl das Bestreben zu sein eine vernünftige Lösung zu finden und meine Erfahrung lehrt mich, dass solche Fragen nie das Ende vom Lied sind. Hättest du Ahnung von der ganzen Thematik dann würdest du eine gesamtheitliche Betrachtung nicht als Unsinn bezeichnen. Wie und ob dein grid vernünftig funktioniert kann ich/man mangels Informationen nicht beurteilen.

Suche

Navis werden in Breite/Höhe gestreckt (Grid-Layout)

Martinus33

Lt. Commander

floq0r

Captain

Martinus33

Lt. Commander

floq0r

Captain

Martinus33

Lt. Commander

floq0r

Captain

Martinus33

Lt. Commander

floq0r

Captain

Martinus33

Lt. Commander

Janush

Lieutenant

floq0r

Captain