Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Ist die Navigation so machbar?“

moppi

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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
 

Enigmon

Nicht mehr ganz neu hier

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

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

LG
Thomas
 

Myhar

Hat es drauf

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.
 

berniecook

Photo-Fan

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

Maître Nageur

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

Hat es drauf

@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 :D

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 :D
 

Enigmon

Nicht mehr ganz neu hier

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.

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
 
Zuletzt bearbeitet:

moppi

Noch nicht viel geschrieben

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!
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

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


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

Noch nicht viel geschrieben

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>
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

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

Noch nicht viel geschrieben

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

Danke Patrick - nehme beides gern auf!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben