Erledigt - Ist die Navigation so machbar?

moppi · 31.03.2015

Hallo allerseits,

hier mal der Entwurf einer Navigation, wobei es hauptsächlich um die Frage geht, ob sich die Ecken der Links außerhalb der ul bzw. li darstellen lassen.

Bild1: Home

Bild2: a:hover

Bild3: a:active mit Verbindung zum Container

Was meint ihr dazu?

Gruß, Moppi

Enigmon · 31.03.2015

Machbar wäre es. Beim ersten überfliegen, würde ich das wahrscheinlich über eine Tabelle realisieren. Diese hätte 6 Zeilen:
1. Farbfüllung (blau, grün, gelb usw.), 2 Spalten zu einer zusammengefasst
2. Linkname, 2 Spalten zu einer zusammengefasst
3. 1. Spalte weiss, 2. Spalte grau
4. 1. Spalte weiss, 2. Spalte grau
5. Sublinks, 2 Spalten zu einer zusammengefasst
6. weiss bis zu letzten Spalte

Aber das ist nur ein Erster Gedanke. Gibt sicherlich bessere Lösungen.
Wenn du feste Breiten für die Links hast, kannst du es auch mit Bildern realisieren.

LG
Thomas

Myhar · 31.03.2015

Nein keine Tabelle. Vergiss, was @Enigmon gesagt hat, man nimmt keine Tabellen fürs Layout. Seit dem letzten Jahrtausend nicht mehr.

Das kannst du mit einer verschachtelten Liste genauso realisieren. Mit ::after, bzw. ::before solltest du die Elemente auch hinbekommen (oder mit wenigen zusätzlichen divs, oder spans.

Enigmon · 31.03.2015

@Myhar
Danke für den Hinweis..
(Keine Sorge, ist ehrlich gemeint.

)

Habe aber auch häufig festgestellt, dass manchmal einfache Dinge besser sind, als komplexere.

LG
Thomas

Myhar · 31.03.2015

Nein eine Tabelle ist nicht einfach. Und besser schon gar nicht. Tut mir leid für die harten Worte, aber die Art, wie man Webseiten erstellt hat sich in den letzten Jahren sehr stark verändert.

pierreleix · 31.03.2015

komisch, ich mach auch keine tabellen mehr, aber der erste gedanke fliegt so oft noch in diese richtung. man wird alt

berniecook · 31.03.2015

Myhar schrieb:
Nein eine Tabelle ist nicht einfach. Und besser schon gar nicht. Tut mir leid für die harten Worte, aber die Art, wie man Webseiten erstellt hat sich in den letzten Jahren sehr stark verändert.

Hallo,
kannst Du, nur zu meinem Verständnis, erläutern warum eine Tabelle nicht einfach ist, warum seit dem letzten Jahrtausend keine Tabellen mehr verwendet werden?

Als Webseitenerstellungslaie interessiert mich das doch sehr. Vor allen Dingen weil Du den Eindruck machst: " Todsünde, wenn Du eine Webseite mit Tabellen machst". Da muss ich das einfach mal hinterfragen...
Vielen Dank,

Grüße

pierreleix · 31.03.2015

mir wurde gesagt, dass es verschiedene gründe hat, vor allem der Umstieg auf css, der deutlich schlankere Quellcode und die lleichtere Anpassung an Ausgabemedien.
Persönlich finde ich ne schnelle Tabelle als flotten Problemlöser immer noch sympathisch

Myhar · 31.03.2015

@berniecook
Ich schreibe das deshalb nur so kurz hin weil es etwas länger dauern würde, alles zu erklären. Außerdem wurde das Thema schon oft diskutiert. "why no table layout" sind gute Stichwörter für die Suchmaschine deiner Wahl.
Meine wichtigsten Punkte:
Sicher, hat man Tabellen früher mal verwendet, mögen sie einem vorkommen wie eine "flotte Lösung". Hat man Ahnung von CSS, so ist die CSS Lösung in allen Fällen performanter und weniger Aufwändig. Man sollte sich nicht scheuen, sich weiterzuentwickeln.
Elemente im HTML haben eine Bedeutung. Möchte man Daten tabellarisch darstellen, verwendet man eine Tabelle. Sonst nie. Ein Layout ist keine tabellarische Darstellung von Daten.
Tabellen sind unflexibel. Als Stichwort dafür nur responsive Webdesign. Das geht mit Tabellen mal gar nicht

Edit: Ja, alle die automatisch an Tabellen denken, dürfen sich jetzt alt fühlen. Ich habe es vor 10 Jahren schon ohne Tabellen gelernt. Und ich fühl mich auch alt

noltehans · 31.03.2015

Tabellen- vs. CSS-Layout (aus dem Jahr 2008)

Enigmon · 31.03.2015

Nur mal so zur Info:
Es geht hier nicht um ein ganzes Seitenlayout!!!
Es geht hier um ein Navigations-Layout.

Ich lese bei allen immer nur Seitenlayout.
Tabelle ist lediglich ein Element, welches man in einem Seitenlayout und nicht für ein Seitenlayout verwendet werden sollte.

noltehans schrieb:
Tabellen- vs. CSS-Layout (aus dem Jahr 2008)

Wie da schon steht: von 2008!!!
Mittlerweile kann ich so gut wie alle Punkte dabei entkräften!
Aber auch da geht es nur um ein Seitenlayout.

LG
Thomas

moppi · 31.03.2015

Hallo allerseits,
vielleicht hätte ich dazu schreiben sollen, dass ich dieses Layout nach Möglichkeit ohne Hintergrundbilder und auch ohne Tabellen umsetzen möchte.
Im Moment siehts so aus:

Alles was rot ist, muss noch blau werden.

Hier der auch mal vorläufige Code:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>

<style type="text/css">


nav {
background-color: #9d9d9c;
height: auto;
margin: 0;
padding: 0;
width: 100%;
}

nav ul {
height: 40px;
margin: 0 auto;
width: 680px;
padding: 0;
}

nav ul li {
float: left;
height: 36px;
list-style: none;
width: 170px;
}

nav ul li a {
color: #fff;
background-color: #9d9d9c;
display: block;
font-size: 18px;
margin: 0 0 0 30px;
padding: 8px 0 5px 18px !important;
text-decoration: none;
text-transform: uppercase;

}

nav ul li:first-child {
border-top: 11px solid #51c4f1;
}

nav ul li:nth-child(2) {
border-top: 11px solid #a2c74a;
}

nav ul li:nth-child(3) {
border-top: 11px solid #f8ea1b;
}

nav ul li:nth-child(4) {
border-top: 11px solid #c0bfbf;
}

nav ul li:first-child:hover a {
background-color:#51c4f1;
height:50px;
}

nav ul li:nth-child(2):hover a {
background-color:#a2c74a;
}

nav ul li ul li:nth-child(2):hover a {
background-color:#51c4f1;
}

nav ul li:nth-child(3):hover a {
background-color:#f8ea1b;
}

nav ul li ul li:nth-child(3):hover a {
background-color:#51c4f1;
}

nav ul li:nth-child(4):hover a {
background-color:#c0bfbf;
}

nav ul li ul {
background:#51c4f1;
height: 29px;
margin: 0 auto;
padding:0 0 0 170px;
width: 540px;
visibility: hidden;
}

nav ul li:hover > ul {
visibility: visible;
display:block;
z-index:1000;
}

nav ul li ul li {
float: left;
list-style: none;
width: 170px;
border: none !important;
margin-top: -10px;
}

nav ul li ul li a{
height:25px !important;
padding: 3px 0 -25px 18px!important;
}

nav ul li ul li a:hover{
color: #000;
}

</style>

</head>

<body>

<nav>
<ul>
<li><a href="#">LINK</a>
<ul>
<li><a href="#">LINK</a>
<li><a href="#">LINKLINK</a>
<li><a href="#">LINKLINKLINK</a>
</ul>
</li>
<li><a href="#">LINK</a>
<li><a href="#">LINKLINK</a>
<li><a href="#">LINKLINKLINK</a>
</ul>
</nav>

</body>
</html>

Ich hab das ganze mal als Code geändert - Dobi78

@Dobi78
Danke!

Myhar · 01.04.2015

Mit nav > ul > li:first-child:before bzw. ul ul li:last-child:after solltest du diese doch hinbekommen? den content leer definieren (content: ""; ) und dann width, height und background-color setzen.

Noch kurz zu dem anderen Thema, das nichts mit dem Thread zu tun hat:

Enigmon schrieb:
Navigations-Layout.
Tabelle ist lediglich ein Element, welches man in einem Seitenlayout und nicht für ein Seitenlayout verwendet werden sollte.

Tabellen werden nicht fürs Layout genutzt. Egal, ob für eine Navigation oder eine ganze Seite. Egal warum.

Enigmon schrieb:
Wie da schon steht: von 2008!!!
Mittlerweile kann ich so gut wie alle Punkte dabei entkräften!
Aber auch da geht es nur um ein Seitenlayout.

Da bin ich aber gespannt. Weil die Punkte haben alle heute noch ihre Gültigkeit und stimmen noch genauso.

moppi · 01.04.2015

Danke Myhar, ich hab's jetzt so gemacht, da die roten Teile entfallen:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>

<style type="text/css">


nav {
    background-color: #9d9d9c;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
}

nav ul {
    height: 40px;
    margin: 0 auto;
    width: 680px;
    padding: 0;
}

nav ul li {
    float: left;
    height: 36px;
    list-style: none;
    width: 170px;
}

nav ul li a {
    color: #fff;
    background-color: #9d9d9c;
    display: block;
    font-size: 18px;
    margin: 0 0 0 30px;
    padding: 8px 0 5px 18px !important;
    text-decoration: none;
    text-transform: uppercase;
}

/* level1 top borders*/
nav ul li:first-child {
    border-top: 11px solid #51c4f1;
}

nav ul li:nth-child(2) {
    border-top: 11px solid #a2c74a;
}

nav ul li:nth-child(3) {
    border-top: 11px solid #f8ea1b;
}

nav ul li:nth-child(4) {
    border-top: 11px solid #c0bfbf;
}

/* level1 hover backgrounds */
nav ul li:first-child:hover a {
    background-color:#51c4f1;
    height:50px;
}

nav ul li:nth-child(2):hover a {
    background-color:#a2c74a;
    height:50px;
}

nav ul li:nth-child(3):hover a {
    background-color:#f8ea1b;
    height:50px;
}

nav ul li:nth-child(4):hover a {
    background-color:#c0bfbf;
    height:50px;
}


/* level2 */
nav ul li ul {
    height: 24px;
    margin: 0 auto;
    width: 540px;
    visibility: hidden;
}

nav ul li:hover > ul {
    visibility: visible;
    display:block;
    z-index:1000;
}

nav ul li ul li {
    float: left;
    list-style: none;
    width: 170px;
    border: none !important;
    margin-top: -10px;
}

nav ul li ul li a:hover, nav ul li a:hover{
    color: #000;
}

nav ul li ul li a{
    height:20px  !important;
    padding: 2px 0 -27px 18px!important;
}

/* level2 BLAU */
nav ul li:first-child ul {
    background:#51c4f1;
    padding:0 0 0 170px;
}

nav ul li:first-child ul li:nth-child(2):hover a {
    background-color:#51c4f1;
}

nav ul li:first-child ul li:nth-child(3):hover a {
    background-color:#51c4f1;
}

/* level2 GRÜN */
nav ul li:nth-child(2) ul {
    background:#a2c74a;
    margin-left:-170px;
    width: 710px;
}

nav ul li:nth-child(2) ul li:first-child  {
    margin-right:170px;
}

nav ul li:nth-child(2) ul li:nth-child(2):hover a {
    background-color:#a2c74a;
}

nav ul li:nth-child(2) ul li:nth-child(3):hover a {
    background-color:#a2c74a;
}

/* level2 GELB */
nav ul li:nth-child(3) ul {
    background:#f8ea1b;
    margin-left:-340px;
    width: 710px;
}

nav ul li:nth-child(3) ul li:nth-child(2)  {
    margin-right:170px;
}

nav ul li:nth-child(3) ul li:nth-child(2):hover a {
    background-color:#f8ea1b;
}

nav ul li:nth-child(3) ul li:nth-child(3):hover a {
    background-color:#f8ea1b;
}

/* level2 GRAU */
nav ul li:nth-child(4) ul {
    background:#c0bfbf;
    margin-left:-510px;
    width: 710px;
}
nav ul li:nth-child(4) ul li:nth-child(2):hover a {
    background-color:#c0bfbf;
}

nav ul li:nth-child(4) ul li:nth-child(3):hover a {
    background-color:#c0bfbf;
}



</style>

</head>

<body>

<nav role="navigation">
    <!--/ navigation -->
    <ul>
        <li><a href="#">LINK</a>        
            <ul>            
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINKLINK</a></li>
                <li><a href="#">LINKLINKLINK</a></li>
            </ul>
        </li>    
        <li><a href="#">LINKLINK</a>
            <ul>            
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINKLINK</a></li>
                <li><a href="#">LINKLINKLINK</a></li>
            </ul>
        </li>
        <li><a href="#">LINKLINK</a>
            <ul>            
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINKLINK</a></li>
                <li><a href="#">LINKLINKLINK</a></li>
            </ul>
        </li>
        <li><a href="#">LINKLINK</a>
            <ul>            
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINKLINK</a></li>
                <li><a href="#">LINKLINKLINK</a></li>
            </ul>
        </li>
    </ul>
</nav>

</body>
</html>

patrick_l · 01.04.2015

moppi schrieb:
Danke Myhar, ich hab's jetzt so gemacht, da die roten Teile entfallen:

Du hast in deinem Markup noch einen Fehler drin. Bei dem zweiten Dropdown fehlt ein schließender li-Tag. Zudem würde ich der Hauptnavigation bzw. dessen Nav-Element ein role="navigation" mitgeben.

HTML:

<nav role="navigation">
    <!--/ navigation -->
</nav>

Liebe Grüße, Patrick

moppi · 01.04.2015

patrick_l schrieb:
Du hast in deinem Markup noch einen Fehler drin. Bei dem zweiten Dropdown fehlt ein schließender li-Tag. Zudem würde ich der Hauptnavigation bzw. dessen Nav-Element ein role="navigation" mitgeben.

HTML:

<nav role="navigation">  </nav>

Liebe Grüße, Patrick

Danke Patrick - nehme beides gern auf!

moppi · 01.04.2015

Danke an alle, denn nun hat sich die Frage erledigt. Jetzt soll's doch so aussehen: