Tutorial HTML, CSS u. PHP - Forum

[revils]

Ich mein zB die index.php, da was in den header oder so schreiben?

Der Code sieht so aus...Mit der style.css im Verzeichniss /styles/style.css

Code: Alles auswählen

src: url('../brockscript.ttf') format ('truescript')

[Sarkkan]

oke.. fangen wir also noch einmal von gaaaanz vorne an, was relative Pfade betrifft

Mit relativen Pfadangaben relativ zum Basis-URI referenzieren

Diese Variante können Sie wählen, wenn Sie den jeweils aktuellen URI als Bezugs-URI wählen. Dann können Sie von hieraus relativ adressieren. Die HTML-Datei mit dem URI http://de.selfhtml.org/html/allgemein/referenzieren.htm enthält beispielsweise zum Referenzieren einer Grafik folgende Angabe: ../../src/logo.gif. Das bedeutet: gehe zwei Verzeichnisse nach oben, von dort aus ins Unterverzeichnis src und dort findest du die Datei logo.gif. Absolut gesehen hat diese Datei also den URI http://de.selfhtml.org/src/logo.gif.

Diese Form der relativen Adressierung ist innerhalb von Web-Projekten sehr zu empfehlen. Der Grund ist, dass Sie das Web-Projekt auf diese Weise problemlos an eine andere Adresse verschieben können, und trotzdem funktionieren noch alle projektinternen Verweise und Grafikreferenzen. Gerade wenn Sie Ihr Projekt auch mal auf CD-ROM oder anderen Medien veröffentlichen wollen, ist die relative Adressierung ein Muss.

Beispiele:

Code: Alles auswählen

./
farben.htm
./farben.htm
bilder/grafik.gif
./bilder/grafik.gif
../
../../../../woanders/datei.htm

Erläuterung:

Eine Datei im gleichen Verzeichnis wie dem aktuellen können Sie einfach durch Angabe des Dateinamens referenzieren - im obigen Beispiel etwa die Datei farben.htm. Das aktuelle Verzeichnis referenzieren Sie durch ./ - also einem Punkt, gefolgt von einem Schrägstrich. Die Adressierung von farben.htm und ./farben.htm im obigen Beispiel hat also den gleichen Effekt.

Eine Angabe wie bilder/grafik.gif referenziert eine Datei namens grafik.gif im Verzeichnis bilder, das ein Unterverzeichnis des aktuellen Verzeichnisses ist. Die Notation ./bilder/grafik.gif hat wieder den gleichen Effekt wie bilder/grafik.gif.

Mit ../ referenzieren Sie das Verzeichnis über dem aktuellen Verzeichnis, egal wie es heißt. Mit ../../ referenzieren Sie das Verzeichnis über dem Verzeichnis über dem aktuellen Verzeichnis usw. Von jedem der so adressierten Verzeichnisse können Sie wieder auf deren Unterverzeichnisse zugreifen, wie im letzten der obigen Beispiele gezeigt.

Demnach muss unser Verweis ausgehend von unserer Style-Datei zu unseren Schriftarten wie lauten?^^

[Sören]

Alternativ geht es auch mit absoluter Pfadangabe: "/fonts/brockscript.ttf".

[Sarkkan]

Alternativ geht es auch mit absoluter Pfadangabe: "/fonts/brockscript.ttf".

Und dann verschiebe ich mir das auf die Festplatte oder auf meinem Localhost in einem unterordner..

[revils]

Folgendes, ich habe jetzt das Fonts-Verzeichnis in das Styles-Verzeichnis gepackt also:

Code: Alles auswählen

|_images
|_includes
|_ightbox
|_styles
    |_fonts
        |_font1.ttf
        |_font2.woff
    |_style.css


Das steht in der Style.css
@font-face Code

Unbenannt.PNG (11.43 KiB) 123-mal betrachtet

Und hier solls das erstemal benutzt werden

Unbenannt2.PNG (3.51 KiB) 123-mal betrachtet

Kann das denn so falsch sein?

[Sören]

Hm, vielleicht irgendwo ein Schreibfehler bei den Dateinamen?
Hast dus mal in anderen Browsern als Firefox ausprobiert?

@Sarkkan
OK, daran hab ich nicht gedacht.
Ich handhabe das normalerweise mit Variablen, je nachdem, ob localhost oder nicht, aber bei reinem CSS geht das ja schlecht.

[revils]

Ja hab ich und es stimm alles. Ich kann es mir nicht erklären...

EDIT:

Ich habe jetzt einfach Google Web Fonts benutzt.

Code: Alles auswählen

<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>

Damit hat es funktioniert und sollte somit so aussehen. In FF wie im IE. Also es geht um die Überschrift

Unbenannt.PNG

EDIT2:

Ich hab jetzt die Navi verbessert und Schatten hinzugefügt

http://www.riensartwork.de

[revils]

Und was sagt ihr jetzt?

[Basiii]

Jetzt komme ich vom Untermenü gar nicht mehr zum Punkt "Video" ohne die Maus komplett heraus zu bewegen, beim überfahren des Punktes "Special Work" ändert sich die Breite des Untermenüs, das wirkt auch nicht sehr schön.

Ich weiß auch nicht warum du dich so an diesem Teil festbeißt, kurzer Ausflug in die Welt der Musiker:

"Ein guter Musiker beißt sich nicht stundenlang an einem Teil eines Musikstückes fest, wenn etwas nicht sofort passt wird etwas anderes ausprobiert."

Ich sehe bei deinem, in der Tat noch winzigen, Menü nicht mal wirklich den Sinn eines Pop Up Menüs, es erschwert die Bedienung, will dir nicht richtig gelingen und sieht nicht mal schön aus, lasse doch einfach unter dem Punkt Gallery ein Untermenü anzeigen, ein wenig Einrücken und fertig.

Was soll eigentlich das da:

Code: Alles auswählen

    <div id="steuerung">
        <ul id="navi">
            [...]       
        </ul>
    </div>


ul ist schon ein Block Element, und wenn nicht könntest du auch eines draus machen, also mach den div weg bevor jemand mit Ahnung schaut

Dein CCS Code.. es ist Ansichtssache, aber ich finde den furchtbar eingerückt ;)

Wenn du übrigens mit der Seite kommerziell werden möchtest solltest du die deutschen Begriffe im Quellcode wie zum Beispiel "Steuerung" am Besten noch durch englische Begriffe ( "Menu" ) ersetzen, das wirkt professioneller.

[revils]

Also ich akzeptiere deine Kritik und nehme sie mir auf jeden fall zu Herzen...
aber furchtbar eingerückt?^^ Das tut in der Tat weh ;)

Danke schon mal

[Sarkkan]

Also ich akzeptiere deine Kritik und nehme sie mir auf jeden fall zu Herzen...
aber furchtbar eingerückt?^^ Das tut in der Tat weh ;)

Danke schon mal

Also da muss ich dich wirklich in Schutz nehmen, furchbar eingerückt ist es nicht
Es ist halt nur einfach total grauenvoll, wie gewollt und nicht gekonnt und dann mal Lust und dann wieder net
Du verfolgst ja nicht mal für dich einen eigenen Struktur-Stil^^
(Bezieht sich nicht nur auf deinen CSS-Code )

[revils]

Ok, jetzt sehe ich auch warum ihr mein Einrücken ansprecht....in meinen Editor ist alles sauer eingerückt,
aber im Firefox wenn ich "Seitenquelltext anzeigen" drücke, sieht alles sehr bescheiden aus.
Kann man da was machen?

[Sarkkan]

Welchen Editor verwendest du?
Nutzt du Tab zum einrücken, oder die Leertaste? Wenn Leertaste wie viele "Einheiten"?
Wenn Tab, echte Tabs oder werden die in Leerzeichen umgewandelt?

[revils]

Webocton - scriptly

Ich benutze die Tabtaste.

Jedenfalls hab ich schonmal die DIV in der Navi gelöscht und meine CSS angepasst (englische Kommentare, da wo es nicht eigentlich klar ist)