CSS Navi ohne Text, aber mit Grafiken

Metal_Head · 05.11.2010

Hallo Leute,
ich bin gerade dabei, mir eine Navi zusammenzubasteln, aber irgendwie will die nicht so, wie ich es mir vorgestellt habe...

Es soll eine horizontale Navi werden, bestehend aus zwei Randgrafiken, die die eigentlichen Grafiken für die Navi einschliessen...
Ne normale Navi in CSS und HTML coden ist ja nicht schwer, aber sobald ich den Text weglassen will und durch zwei Grafiken, einmal normal und einmal Mouseover ersetzen will (alle unterschiedlich breit), hört's bei mir auf :'(

Klar, entweder ein container und dann float left OODDER eine Tabelle, nur weiter wills bei mir nicht...

Für den Weg der Erleuchtung wäre ich sehr verbunden!
Merci

P.S.: Almighty G**gle und die Suchfunktion hab ich schon benutzt, aber nichts gefunden, was mir den weg weisst...

CrazyLopp · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Also um anständig helfen zu können braucht man folgendes:

1. Wie sieht dein momentaner Stand aus?
2. Bitte den Code posten damit man sich einen Überblick verschaffen kann!

Metal_Head · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Sorry... ganz vergessen...
Ich hab jetzt mit Boxen und float: left gearbeitet.

HTML:

<body>
<div id="container">
    <div id="container_oben">
        <div id="header">
        <img src="Bilder/header.png" />
        </div>
        <div id="navi">
        <div class="navi_left"></div>
        <div class="menu_1"><a href="#"></a></div>
        <div class="menu_2"><a href="#"></a></div>
        <div class="menu_3"><a href="#"></a></div>
        <div class="menu_4"><a href="#"></a></div>
        <div class="menu_5"><a href="#"></a></div>
        <div class="navi_right"></div>
        </div>
        
    
    
    </div>
</div>

</body>

CSS:

Code:

#container{
    background-color:#FFF;
    width:auto;
    margin: 0 auto;
    padding: 0;
}

#container_oben{
    background-color:#FFF;
    width:1024px;
    height:244px;
}

#header{
    background-image:url(Bilder/header.png);
    width:1024px;
    height:185px;
}

#navi{
    width:1024px;
    height:59px;
}

#header_center > div { height: 59px; float: left; }
#header_center_left { width: 58px; background:url(Bilder/leer_1.png) }
#header_center_right { width: 57px; background: url(Bilder/leer_2.png) }

#menu_1 { width: 141px; background: url(Bilder/start.png); }
#menu_1:hover { background: url(Bilder/start_over.png) 141px 0px; }
#menu_2 { width: 205px; background: url(Bilder/ueber_uns.png); }
#menu_2:hover { background: url(Bilder/ueber_uns_over.png) 205px 0px; }
#menu_3 { width: 231px; background: url(Bilder/referenzen.png); }
#menu_3:hover { background: url(Bilder/referenzen_over.png) 231px 0px; }
#menu_4 { width: 185px; background: url(Bilder/kontakt.png); }
#menu_4:hover { background: url(Bilder/kontakt_over.png) 185px 0px; }
#menu_5 { width: 147px; background: url(Bilder/blog.png); }
#menu_5:hover { background: url(Bilder/blog_over.png) 147px 0px; }

Die Navi wurde aus dem Tutorial von blackout -> infinity - making of
adaptiert und sollte "eigentlich" passen...
Grössen der Grafiken, ect. wurden Angepasst...

vanilladragon · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

1. Also Navigationen macht man schonmal prinzipiell als Liste

<ul>
<li><a></a></li>
<li><a></a></li>
...
</ul>

und nicht als Tabelle...

2. des weiteren musst du den "a"s eine Klasse zuordnen

<ul>
<li> <a class="button1" href="index.html"></a> </li>
<li> <a class="button2" href="uebermich.html"></a> </li>
...
</ul>

3. In der CSS musst du dann noch entsprechend deine Bilder zuweisen

a.button1:link, a.button1:visited { background-image: url(img.jpg); }
a.button1:hover { background-image: url(img.jpg); }

Außerdem ist es sicherlich noch notwendig, den Listenelementen bestimmte "Einstellungen" zu geben (z.B. width, display, ... bla bla eben nach belieben)...

Hilft das weiter?

vanilla

EDIT:

HTML:

<body>
<div id="container">
    <div id="container_oben">
        <div id="header">
        <img src="Bilder/header.png" />
        </div>
        <div id="navi">
        <div class="navi_left"></div>
        <div class="menu_1"><a  href="#"></a></div>
        <div class="menu_2"><a  href="#"></a></div>
        <div class="menu_3"><a  href="#"></a></div>
        <div class="menu_4"><a  href="#"></a></div>
        <div class="menu_5"><a  href="#"></a></div>
        <div class="navi_right"></div>
        </div>
        
    
    
    </div>
</div>

</body>

Ach du scheiße!!!! Wer macht denn bitteschön aus DIVS eine NAVIGATION?!?!?! Das ist totaler Humbug!!! Falsch! Komplett falsch... siehe meine Aussagen oben...

Frit · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Eine Liste mit display: inline wäre hier angesagt. Ausserdem: Warum eine rein grafische Navi? Ist erstens nicht so gut für Suchmaschinen, zweitens ebenfalls nix in Hinsicht Barrierefreiheit. Die Alternative wären Textlinks, die gewünschten Effekte für beides, Schrift und Hintergrund, einmal normal, einmal in der :hover-Pseudoklasse definiert.

Metal_Head · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

@Frit:

So sieht z.B. eines der Navi-Elemente aus... Rein grafisch deswegen, wegen der Schrift...

@Vanilladragon:
So verstanden, aber haut es mir die Navi dann nicht, dank der Liste in die Vertikale und nicht in die Horizontale?
Selbst wenn ich die Liste in eine Box mit width:1024px und height:59px setze, oder hab ich da ein Denkfehler?
Probieren werde ich das auf jedenfall mal!

P.S.: Das mit den aus Div's ne Navi hab ich aus einem Tutorial hier vom Forum...

Edit: Nein, geht nicht... Es werden nur Punkte untereinander angezeigt.

vanilladragon · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Metal_Head schrieb:
@Frit:

So sieht z.B. eines der Navi-Elemente aus... Rein grafisch deswegen, wegen der Schrift...

@Vanilladragon:
So verstanden, aber haut es mir die Navi dann nicht, dank der Liste in die Vertikale und nicht in die Horizontale?
Selbst wenn ich die Liste in eine Box mit width:1024px und height:59px setze, oder hab ich da ein Denkfehler?
Probieren werde ich das auf jedenfall mal!

P.S.: Das mit den aus Div's ne Navi hab ich aus einem Tutorial hier vom Forum...

Edit: Nein, geht nicht... Es werden nur Punkte untereinander angezeigt.

Ich glaube du solltest dich erstmal mit den Listenelementen allgemein auseinandersetzen. Natürlich sind da punkte, weil eine Auflistung immer mit Zahl oder Punkt beginnt. Das kann man aber mit dem list-style ändern. Außerdem musst du den Listenelementen natürlich noch die höhe und breite geben, die deine Bilder einnehmen.

Display:inline würde ich für deine Navigation nicht verwenden. Wohl eher ein display:block (was natürlich den a zuordnet wird: ul#navi a { display: block; width: 150px; height: 70px; }).
Deine Menüpunkte bekommst du dann noch mit float:left nebeneinander (das muss dann bei li vereinbart werden: ul#navi li { width: 150px; height: 70px; float: left; } )
Die Größe, die deine Navi einnimmt hast du doch hoffentlich bei deiner ul-id reingeschrieben, oder?

Ich denke das wars so grob. So sollte es funktionieren

vanilla

Metal_Head · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Okay, mittlerweile klappt es doch ganz gut. Die Navigation funktioniert auch. Allerdings(!) wird mir bei Dreamweaver es so angezeigt:
<erledigt>

und in Firefox so:
<erledigt>

Dreamweaver is der sache am nähesten...
Nur sollte alles weiter nach links und die Grafik unten nach ganz rechts...

Edit:display:inline-block war der Fehler. display:inline funktioniert!

Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi...

In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an...

HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dimensionsfabrik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
    <div id="container_oben">
        <div id="header"></div>
        <div id="navi">
        <ul style="list-style: none; display:inline-block">
<li> <a class="button0" href="index.html"></a> </li>
<li> <a class="button1" href="index.html"></a> </li>
<li> <a class="button2" href="uebermich.html"></a> </li>
<li> <a class="button3" href="index.html"></a> </li>
<li> <a class="button4" href="uebermich.html"></a> </li>
<li> <a class="button5" href="index.html"></a> </li>
<li> <a class="button6" href="index.html"></a> </li>
</ul>
        </div>
        
    </div>
</div>

</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

body{
    background: #FFF;
    color: #000; /* Schriftfarbe */
    font: "Courier New", Courier, monospace;
    font-size: 12px/* Schriftgroesse und Schriftart */
    margin: 0px; /* Aussenabstand */
}

p, pre{
    padding: 0px 0px; /* Innenabstand */
    margin: 0px; /* Aussenanbstand */
    color: #000; /* Schriftfarbe */
} 

a {
    color: #000;
}
a:visited {
    color:#333;
}
a:hover {
    color: #333;
}
a:active {
    color:#333;
}


h1 {
    font-size: 24px;
    font-weight: normal;
 }

h2 {
    font-size: 18px;
    font-weight: normal;
}
#container{
    background-color:#FFF;
    width:auto;
    margin: 0 auto;
    padding: 0;
}

#container_oben{
    background-color:#FFF;
    width:1024px;
    height:244px;
}

#header{
    background-image:url(Bilder/header.png);
    width:1024px;
    height:185px;
}

#navi{
    width:1024px;
    height:59px;
    float:left;
}


a.button0:link, a.button0:visited {
    background-image: url(Bilder/leer_1.png);
    width:57px;
    height:59px;
    float:left;
}

a.button1:link, a.button1:visited {
    background-image: url(Bilder/start.png);
    float:left;
    width:141px;
    height:59px;
}
a.button1:hover {
    background-image: url(Bilder/start_over.png);
    float:left;
    width:141px;
    height:59px;
}

a.button2:link, a.button2:visited {
    background-image: url(Bilder/ueber_uns.png);
    float:left;
    width:205px;
    height:59px;
}
a.button2:hover {
    background-image: url(Bilder/ueber_uns_over.png);
    float:left;
    width:205px;
    height:59px;
}

a.button3:link, a.button3:visited {
    background-image: url(Bilder/referenzen.png);
    float:left;
    width:231px;
    height:59px;
}
a.button3:hover {
    background-image: url(Bilder/referenzen_over.png);
    float:left;
    width:231px;
    height:59px;
}

a.button4:link, a.button4:visited {
    background-image: url(Bilder/kontakt.png);
    float:left;
    width:185px;
    height:59px;
}
a.button4:hover {
    background-image: url(Bilder/kontakt_over.png);
    float:left;
    width:185px;
    height:59px;
}

a.button5:link, a.button5:visited {
    background-image: url(Bilder/blog.png);
    float:left;
    width:147px;
    height:59px;
}
a.button5:hover {
    background-image: url(Bilder/blog_over.png);
    float:left;
    width:147px;
    height:59px;
}
a.button6:link, a.button6:visited {
    background-image: url(Bilder/leer_2.png);
    float:left;
    width:57px;
    height:59px;
}

Fehler kann ich keine finden. Ein Freund von mir hat sich den Code auch angeschaut, aber fand auch nichts...
Unglaublich, was eine Navi für Arbeit machen kann...

Edit: display:inline-block war der Fehler. display:inline funktioniert!

Allerdings hab ich jetzt zuviel Abstand zwischen dem header und der Navi...

In Dreamweaver ist das wieder mal okay, Firefox zeigt mir ca. 1cm luft dazwischen an...

Edit 2: Auch erledigt... Hätte nur nochmal padding und margin auf 0 für die ul setzen sollen

vanilladragon · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Metal_Head schrieb:
display:inline-block war der Fehler. display:inline funktioniert!

Es soll ja auch display:block heißen und nicht display:inline-block ...

DENN: Ein Block-Element (display:block) markiert ein neues eigenständiges Element, was sich NICHT im Textfluss eingliedert... ein Inline-Element gliedert sich hingegen schon ein. Ein einfaches Beispiel: Wenn du ein Bild einfügst und es als Inline-Element deklarierst, dann läuft der z.B. danach folgende Text neben dem Bild her. Ist es aber ein Block-Element, so läuft der Text unter dem Bild weiter.
Du SOLLTEST also deine Navigation (da sie ja ein eigenständiges Element darstellt) als Block-Element daklarieren! Alles andere wäre Schwachsinn.

Wenn ich das Wort DREAMWEAVER höre... dann bekomme ich jetzt schon einen würgreiz... du solltest lieber anfangen es in einer ordentlichen software zu machen... dreamweaver kann nicht immer interpretieren was du überhaupt erreichen willst und zeigt dir teilweise Dinge an, die gar nicht relevant sind. z.B. Notepad++ wäre eine gute Lösung, da suchst bzw. musst du wenigstens eigenständig nach deinen FEhlern suchen... aber nun gut damit - solche Diskussionen hatte ich schon zu genüge.

vanilla

Metal_Head · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Danke für deine Hilfe!

Ja, das stimmt...
Naja, hab auch nur die Testversion...

vanilladragon · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Gern, dafür ist man ja da

Hauptsache du setzt auch wirklich alles so um *lach* sonst bin ich dir böse...

scherz

vanilla

Doitsu · 05.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Mal was anderes: Ein a-Tag darf nicht leer sein (  rein setzen). Wenn ich mich nicht irre zeigt der IE solche Dinger gar nicht (oder fehlerhaft) an.

Frit · 06.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Doitsu schrieb:
Mal was anderes: Ein a-Tag darf nicht leer sein (  rein setzen). Wenn ich mich nicht irre zeigt der IE solche Dinger gar nicht (oder fehlerhaft) an.

Am Besten da nochmal die Links als Text rein (mit display: none), so sind auch sie Suchmaschinen zufrieden...

vanilladragon · 06.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Doitsu schrieb:
Mal was anderes: Ein a-Tag darf nicht leer sein (  rein setzen). Wenn ich mich nicht irre zeigt der IE solche Dinger gar nicht (oder fehlerhaft) an.

Wieso darf ein a-Tag nicht leer sein? Wenn du dem a ein Bild zuweist ist es doch praktisch nicht mehr leer

.

<ul>
<li> <a class="button1" href="seite1.html" title="Das ist Seite 1"> </a> </li>
<li> <a class="button2" href="seite2.html" title="Das ist Seite 2"></a> </li>
<li> <a class="button3" href="seite3.html" title="Das ist Seite 3"></a> </li>
</ul>

So ist es absolut korrekt. Und das sollte auch im IE funktionieren.

vanilla

hubspe · 06.11.2010

AW: CSS Navi ohne Text, aber mit Grafiken

Frit schrieb:
Eine Liste mit display: inline wäre hier angesagt.

leider bei grafischen navis gar keine gute Idee, weil man da unzureichende Konrolle über die Darstellung hat.
Stichwort Inlineelemente!

Frit schrieb:
Ausserdem: Warum eine rein grafische Navi? Ist erstens nicht so gut für Suchmaschinen, zweitens ebenfalls nix in Hinsicht Barrierefreiheit.

Mit einer

Bitte kostenlos registrieren, damit du die Links siehst.

ist die Umsetzung einer rein grafischen navi sumatechnisch kein Problem.
Da sich dabei der Linktext unter der navi befindet ist auch bei ausgesch. Graiken der Zugang sichergestellt.

Frit schrieb:
Am Besten da nochmal die Links als Text rein (mit display: none), so sind auch sie Suchmaschinen zufrieden...

Die Idee ist wg. der Barrierefreiheit leider schlecht.
Hat ein Element display:none; wird es von den Screenreadern nicht mehr vorgelesen.