Anfänger braucht Hilfe

bloodmoon47 · 02.11.2011

Navigation(.jpg) wird bei der Website nicht richtig angezeigt(Anfänger)

Hi Community,
ich hab jetzt seit paar Wochen mir die Grundlagen zu HTML und CSS angeignet und wollte jetzt mein erstes kleines Projekt starten.
Allerdings hab ich schon fast ganz am Anfang mein erstes Problem :hmpf:.
Und zwar wollte ich eine Navigationsleiste einfügen die ich in Photoshop erstellt hab, allerdings wird diese nicht korrekt angezeigt.

Bild dazu:

Die Codes sehen aus wie folgt: HTML( http://pastebin.com/BqTmz0wV) und CSS(http://pastebin.com/Bg4izHqm)

Kann mir jmd. anhand dieser Information sagen was ich falsch gemacht habe? Oder braucht ihr noch mehr Informationen?

Würde mich über eine Antwort/mögliche Lösung freuen.

mfg

Babamungipa · 02.11.2011

AW: Anfänger braucht Hilfe

Hallo bloodmoon,

ich kann Dir zwar leider bei Deiner Fragestellung nicht helfen, aber wenn Du bereits im Titel Deines Postings deutlich machst, worum's Dir geht, bekommst Du sicher schneller Feedback von Leuten die sich besser auskennen.

Du kannst das auch jetzt hinterher noch ändern (soviel ich weiß), über:

Bearbeiten/ Erweitert

LaFaSiLuc · 02.11.2011

AW: Anfänger braucht Hilfe

Wird vielleicht einfach das bild nicht gefunden? Vielleicht stimmt die Pfadangabe nicht.
Im Header muss auch Fernsehhaus stehen, nicht Fernsehaus - oder ist das neue rechtschreibung?

xuLLix · 02.11.2011

AW: Anfänger braucht Hilfe

LaFaSiLuc schrieb:
Wird vielleicht einfach das bild nicht gefunden? Vielleicht stimmt die Pfadangabe nicht.
Im Header muss auch Fernsehhaus stehen, nicht Fernsehaus - oder ist das neue rechtschreibung?

Darum geht es doch hier nicht

B²T:

Du kannst das ganze auch ohne Hintergrundgrafik im Navi realisieren, aber für das erste Projekt nicht wichtig

Warum genau willst du den text einrücken? vorallem um 9999px ???

Wenn du das veränderst passt das schon eher

Ich denke da liegt der Hund begraben... viel Erfolg weiterhin.

Grüße

bloodmoon47 · 02.11.2011

AW: Anfänger braucht Hilfe

LaFaSiLuc schrieb:
Wird vielleicht einfach das bild nicht gefunden? Vielleicht stimmt die Pfadangabe nicht.
Im Header muss auch Fernsehhaus stehen, nicht Fernsehaus - oder ist das neue rechtschreibung?

Wegen der Rechtschreibung - ich mach das ganze für einen Bekannten und so heißt nunmal sein Unternehmen... wäre doof wenn ich das Unternehmen umbenennen würde, oder?

xuLLix schrieb:
Darum geht es doch hier nicht

B²T:

Du kannst das ganze auch ohne Hintergrundgrafik im Navi realisieren, aber für das erste Projekt nicht wichtig

Warum genau willst du den text einrücken? vorallem um 9999px ???

Wenn du das veränderst passt das schon eher

Ich denke da liegt der Hund begraben... viel Erfolg weiterhin.

Grüße

Du meinst glaub ich das "text-indent:-9999px;" , oder?
Wenn ich das bei den Tutorials richtig verstanden hab, dient das doch nur um den Text, der normalerweise dort stehen sollte, auf minimale Größe zu bringen.
Wie kann ich das sonst schreiben?
Sorry, wiegesagt ich bin noch ein Anfänger und versteh noch nicht alles.
Und wie kann ich die Navigation deiner Meinung nach ohne Hintergrundgrafik realisieren?
Du meinst, dass das für den Anfang nicht wichtig wäre, aber wenn es nicht zu Fortgeschritten ist, würde ich es toll finden wenn du mir erklärst wie es sonst funktionieren könnte.

xuLLix · 03.11.2011

AW: Anfänger braucht Hilfe

Was den Namen angeht, gibt es doch die künstlerische Freiheit

text-indent dient zum Einrücken (nach Links oder Rechts) des Textes...

Was meinst du mit auf eine minimale Größe?

Ich versuche mir später mal die Zeit zu nehmen und dir das genauer zu erklären.

Jetzt muss ich zur Arbeit

Du kannst mich auch über Jabber ansprechen um3n@jabber.org meine ich... oder ICQ 103161651

Grüße

LaFaSiLuc · 03.11.2011

AW: Anfänger braucht Hilfe

Ich hatte das aus dem Bild so gesehen, dass anstelle des Bildes der Navigation nur dieser blaue Kasten angezeigt wird und nicht die Navigation selbst. Daher die Vermutung mit der Pfadangabe...
Oder wird die Navi angezeigt, aber mitten in der Wurst?

Nein: du möchtest eine Schiebetürennavigation bauen, sliding doors, aber da brauchst du für jeden Menupunkt eine separate Grafik (glaub ich)

Komisch, aber hier schreibst du es mit 2h ^^:
<a href="index.html">Radio- und Fernsehhaus Ost</a></h1>

Myhar · 03.11.2011

AW: Anfänger braucht Hilfe

Dass du mit Image replacement (der Teil mit text-indent -9999px arbeitest) ist schon einmal sehr gut, das habe ich noch von kaum einem Anfänger gesehen. (Hier noch ein guter Artikel mit verschiedenen Übersichten und Vor- und Nachteilen einzelner Image replacement Techniken )

Wie gesagt, dein "Design" kann man auch komplett ohne Bilder umsetzen:

HTML:

<ul>
    <li><a href="www.google.at">Test</a></li>
    <li><a href="www.google.at">Test</a></li>
    <li><a href="www.google.at">Test</a></li> 
</ul>

ul li {display:inline;float:left;}
ul li a{display:block;}

Das wäre das mindeste an CSS, um eine Liste so darzustellen, wie du sie gerne hättest. Darauf kannst du aufbauen.

Edit: Auch dir kann ich nahelegen, lieber die [ CODE ] Werkzeuge des Forums zu nützen, das ist angenehmer, als pastebin.

L. G.

dirtdiver2010 · 05.11.2011

AW: Navigation(.jpg) wird bei der Website nicht richtig angezeigt(Anfänger)

bloodmoon47 schrieb:
Hi Community,
Bild dazu:

Die Codes sehen aus wie folgt: HTML( http://pastebin.com/BqTmz0wV) und CSS(http://pastebin.com/Bg4izHqm)

Kann mir jmd. anhand dieser Information sagen was ich falsch gemacht habe? Oder braucht ihr noch mehr Informationen?

Hi,
also mal so was mir mal kurz aufgefallen ist:
du kannst dir das zweite div sparen, es reicht wenn du einen div id="header" machst und in den dann die h1 mit nem Bild und Link zur Startseite reinmachst und dann eine ul mit der Navigation. Anschliesend wieder das Header-Div schließen.
Dann weiß ich nicht wie deine Ordnerstruktur ist aber ich denke das in dem Pfad der Fehler sein kann (../images/navigation.jpg).
Das text-ident dient der Benutzerfreundlichkeit, sprich mit einem Screenreader der dir die Bilder der Navigation ja nicht anzeigen kann, erfährt man trotzdem wie die Links heißen.
Bei den einzelnen Navipunkten greifst du das Bild ja an verschiedenen Stellen ab, sind diese Positionen richtig? Z.B.: {background-position: -196px 0 px ; width:196;} Das kann auch noch eine Möglichkeit sein das er das Bild nicht anzeigt.
Ansonsten kannst du dir deine Seite mal mit Firebug für Firefox oder mit Chrome "Elemente untersuchen" anschauen, vielleicht findest du da noch einen Fehler.
U.U. vielleicht die Seite mal in einem Unterordner online Stellen das man sich das in Natura anschauen kann.