Menubar wird nicht richtig positioniert

[Crizzo]

Wo klemmt es denn jetzt? Du hast doch in deinen Beiträgen schon den Code für die Navigation gepostet gehabt, den musst du jetzt nur in deine CSS-Datei packen und die neue Datei hochladen.

@Button-Effekt:
Du kannst dir das so vorstellen. Der Button hat ein Sichtfenster von 174*60px. Die Grafik ist aber 174*120px, also genau doppelt so hoch. Jetzt zeigt der normale Status den oberen Teil des Buttons an, also die ersten 60px von oben und der a:hover (Maus überm Button) zeigt die unteren 60px an, also von Pixel 61 bis 120.

[lokalbook]

Wo klemmt es denn jetzt? Du hast doch in deinen Beiträgen schon den Code für die Navigation gepostet gehabt, den musst du jetzt nur in deine CSS-Datei packen und die neue Datei hochladen.

@Button-Effekt:
Du kannst dir das so vorstellen. Der Button hat ein Sichtfenster von 174*60px. Die Grafik ist aber 174*120px, also genau doppelt so hoch. Jetzt zeigt der normale Status den oberen Teil des Buttons an, also die ersten 60px von oben und der a:hover (Maus überm Button) zeigt die unteren 60px an, also von Pixel 61 bis 120.

Hey,

jo hochgeladen hab ich das ganze sieht aber ziemlich alles verschoben aus http://lokalbook.de/lokalbook

Aber warum, peil das nicht ganz wo da noch die fehler liegen warum das nicht nebeneinander sauber dargestellt wird.

Gruß Tobi

[Crizzo]

Wir bauen das jetzt mal anders, wir basteln jetzt mal eine Test-Seite, wo nur die Navigation drin ist.

Hier hab ich dir jetzt einen Dummy erstellt, den du jetzt nur noch anpassen musst: https://www.phpbb.de/support/pastebin.p ... view&s=840

Du machst jetzt folgendes: du kopierst aus dem Dummy den Code raus und speicherst ihn in einer .html-Datei auf deinem PC.
Dann ergänzt du die Grafiken, sprich diese Zeilen:

Code: Alles auswählen

background-image: url(navi3.png) ;

musst du anpassen, dass da deine Button-Grafiken geladen werden (die Grafiken müssen beide Modi drin haben. D.h. normal und bei "Maus drüber" und zwar untereinander.

Dann passt du die Breite und Höhe (Höhe = halbe Buttonhöhe!) an, dass machst du an diesen drei Stellen:

#navi li {
float: left;
width: 50px;
}

#navi a,
#navi strong {
display: block;
height: 30px;
width: 100%;
position: relative;
}

#navi span {
position: absolute;
width: 100%;
height: 30px;
top: 0;
left: 0;
}

Dann speicherst du das und lädst es hoch. Dann sollten schon eine funktionierende, gut aussehende Navigation mit drei Menüpunkten angezeigt werden. Erst wenn das alles funktioniert, baust du sie von dieser Testseite in dein Forum ein!

[lokalbook]

Hab das ganze jetzt so habe hier den Script online:

Demo: http://lokalbook.wmw.cc/menu.html


Der Code:

https://www.phpbb.de/support/pastebin.p ... view&s=841

Was ist daran noch falsch, hab die restlichen 3 Menupunkte auch noch hinzugefügt und die hälfte der Grafik ist 49px.

Gruß

[Crizzo]

Die Breite stimmt nicht und der "Forum" und "Home"-Button haben keine Hintergrundgrafik, da noch eine Angabe im CSS fehlt.

An diesen Stellen:

Code: Alles auswählen

#navi #team a span {
background-image: url(http://lokalbook.de/lokalbook/hp/menubar/images/button_colocation.gif) ;
}

muss nach diesem #navi #team a span noch eine Zeile nach diesem Muster ergänzt werden #navi #team strong span, sieht dann bei #team so aus:

Code: Alles auswählen

#navi #team a span, #navi #team strong span {
background-image: url(http://lokalbook.de/lokalbook/hp/menubar/images/button_colocation.gif) ;
}

[lokalbook]

Hey

jo, prblem ist jetzt noch bei der Länge der Grafiken, die sind alle unterschiedlich lang. So siehts aus: http://lokalbook.wmw.cc/menu.html


Aktueller Code: https://www.phpbb.de/support/pastebin.p ... view&s=842

Gruß Tobi

[Crizzo]

Dann darfst du die Länge eben nicht dort:

Code: Alles auswählen

#navi li {
        float: left;
        width: 200px;
        }

allgemein einstellen. Sondern schreibst sowas:

Code: Alles auswählen

#navi #home {
        width: 200px;
        }
#navi #team {
        width: 180px;
}
#navi #forum {
        width: 160px;
        }  

Hier fehlt noch fast überall das Zeichen für die ID: #:

#navi #home a:hover span, #navi #team a:hover span, #navi kontakt a:hover span, #navi forum a:hover span, #navi user a:hover span, #navi impressum a:hover span {
background-position: left bottom;
}

Vor "kontakt, forum, user, impressum.

[lokalbook]

Hey,

jetzt wird das ganze schon ganz gut Danke, aber die Farben werden noch nicht überall angezeigt, woran liegt da noch der fehler?

upps des float: left hats ein bisschen verschoben, aber des is ja jetzt erstmals egal:

Aktueller Script: https://www.phpbb.de/support/pastebin.p ... view&s=843

und so siehts bis jetzt aus: http://lokalbook.wmw.cc/menu.html

Danke.

[Crizzo]

Bei "Webhosting" gibt es keinen Effekt, weil dort statt dem <a> ein <strong> steht, was so viel heißt wie "Hier bist du gerade, Link aktiv". Wenn du dieses <strong> nicht willst, dann schreib auch bei <li id="home"><strong>Home<span></span></strong></li> auch ein <a href="#"> </a> statt des <strong>.

Die anderen funktionieren nicht, weil du die Fehler, die ich im letzten Beitrag am Ende noch genannt hab, immer noch nicht bereinigt hast (das in rot).

[lokalbook]

Bei "Webhosting" gibt es keinen Effekt, weil dort statt dem <a> ein <strong> steht, was so viel heißt wie "Hier bist du gerade, Link aktiv". Wenn du dieses <strong> nicht willst, dann schreib auch bei <li id="home"><strong>Home<span></span></strong></li> auch ein <a href="#"> </a> statt des <strong>.

das ist schon gut so, Danke. V-Server (steht unter Forum im Code) wird noch nicht orange dargestellt finde den Fehler auch nicht siehe: http://lokalbook.wmw.cc/menu.html

Danke für deine Gedult

Gruß