(komplex) Navigation in Tabelle

[Hannes]

Hallo,

ich habe euch hier ein Bild angehängt (http://www.heanz.at/bilder/temp.jpg).
Es zeigt meine Navigation, die ich mit Photoshop gemacht habe.
Nun will ich diese Geschichte in eine HTML Tabele packen, aber folgendes beachten:
Die Grafik ist in Wirklichkeit 1600 x 244 Groß (habe sie für euch verkleinert) - was ich erreichen will ist z.B. machbar, wenn man das Bild als Tabellen-Hintergrund einfügt und es zentriert. Das bewirkt, dass Leute, die eine kleiner Auflösung haben, den rechten und linken Rand nicht komplett sehen. Dafür sind auch die Buttons in der Mitte.
Ich bringe es zwar zusammen, den oberen Teil des Bildes so zu zentrieren, aber den unteren Teil nicht. Und wenn ich den oberen Teil, den unteren linken und unteren rechten Teil mit zentriert, links und rechtsbündig als Hintergrund festlege und danach die 6 mittleren Bilder normal einfüge (ich will ja die Navi anklicken können) passt der obere Teil des Musters nicht mit dem unteren zusammen.

Hoffentlich habt ihrs verstanden. :)

Im Endeffekt will ich nur diese Navigation einbauen, sie in der Mitte der Seite haben, und es so einstellen, dass bei kleineren Auflösungen der Rand rechts und links abgetrennt wird (wie eben bei einem zentrierten Tabellenhintergrundbild).

Danke im Voraus,
Hannes :)

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Im Endeffekt will ich nur diese Navigation einbauen, sie in der Mitte der Seite haben, und es so einstellen, dass bei kleineren Auflösungen der Rand rechts und links abgetrennt wird (wie eben bei einem zentrierten Tabellenhintergrundbild).

Ich würde eine ungeordnete Liste mit dem Bild als Hintergrund machen
und in jedes Listenelement einen Link mit Bild packen.
Die Ausrichtung und dass die Links nebeneinander sind macht man dann mit CSS.

Gruß
Alexander Brock

[Christoph Schnauß]

hallo Hannes,

ich habe euch hier ein Bild angehängt (http://www.heanz.at/bilder/temp.jpg).

Das ist kein Bild, sondern eine Adreßangabe. Wie du das als Verweis formatieren kanst, liest du bitte in der Forums-FAQ nach.

Die Grafik ist in Wirklichkeit 1600 x 244 Groß

Wiebitte? Du rechnest allen Ernstes damit, daß alle Leute, die deine Adresse besuchen, eine 1600 Pixel breite Grafik problemlos in ihrem Browser ohne Scrollen dargestellt bekommen?

Hoffentlich habt ihrs verstanden. :)

Ja. Du entfremdest eine Tabelle für nicht-tabellarische Inhalte. Du nimmst ein Grafikprogramm und benutzt es, um invaliden HTML-Code zu erzeugen.

Im Endeffekt will ich nur diese Navigation einbauen

Das erreichst du am besten, indem du auf deine Tabelle sowie auf Photoshop verzichtest und stattdessen mit CSS arbeitest.

Grüße aus Berlin

Christoph S.

[Tobias Kloth]

Hallo Christoph,

Die Grafik ist in Wirklichkeit 1600 x 244 Groß
Wiebitte? Du rechnest allen Ernstes damit, daß alle Leute, die deine Adresse besuchen, eine 1600 Pixel breite Grafik problemlos in ihrem Browser ohne Scrollen dargestellt bekommen?

kein Problem - mein Monitor ist 1920px breit (dass ich nicht im Vollbild surfe und evtl. nicht unbedingt zur Zielgruppe der Seite gehöre ist was anderes :-))

Grüße aus Nürnberg
To*scnr*bias

[Hannes]

Wiebitte? Du rechnest allen Ernstes damit, daß alle Leute, die deine Adresse besuchen, eine 1600 Pixel breite Grafik problemlos in ihrem Browser ohne Scrollen dargestellt bekommen?

Manche Leute haben 800 x 600 und manche haben eben 1600 x wasweisich. Deshalb will ich es auch so lösen, dass er sonst einfach abgeschnitten wird.

Das erreichst du am besten, indem du auf deine Tabelle sowie auf Photoshop verzichtest und stattdessen mit CSS arbeitest.

Wieso sollte ich auf Photoshop verzichten? Hab ich gesagt, PS wäre mein HTML-Programm? Irgendwo muss ich doch die Grafiken erstellen.

[Christoph Schnauß]

hallo,

Manche Leute haben 800 x 600 und manche haben eben 1600 x wasweisich.

Ich könnte auf meinem 21-Zoll-Monitor höchstens 1280x1024 einstellen, und das ist für meine Augen schon viel zu klein. Im übrigen kannst du niemals kalkulieren, welche "Auflösung" der Besucher deiner Webseite hat, und ob er dann auch den Browser immer als "Vollbild" fährt.

Deshalb will ich es auch so lösen, dass er sonst einfach abgeschnitten wird.

"Abschneiden" ist keine Lösung. Wenn du schon unbedingt eine Grafik haben mußt, sollte sie skaliert werden können.

Das erreichst du am besten, indem du auf deine Tabelle sowie auf Photoshop verzichtest und stattdessen mit CSS arbeitest.
Wieso sollte ich auf Photoshop verzichten?

Wichtiger ist dein Beharren auf einer Tabelle. _Das_ solltest du anders lösen. Photoshop ist ein recht gutes Grafikprogramm, und wenn du damit Grafiken erstellen willst, erzielst du in der Regel recht gute Ergebnisse. Es bietet dir nur leider auch die Opption, deine Grafik "webgerecht" zu exportieren, und produziert dafür untauglichen HTML-Code (das ist allerdings abhängig von der Version, die du installiert hast).

Grüße aus Berlin

Christoph S.

[Ashura]

Hallo Christoph.

"Abschneiden" ist keine Lösung. Wenn du schon unbedingt eine Grafik haben mußt, sollte sie skaliert werden können.

Doch, sogar eine sehr gute: http://jeenaparadies.net/

Einen schönen Sonntag noch.

Gruß, Ashura

[Hannes]

Hallo Christoph.

"Abschneiden" ist keine Lösung. Wenn du schon unbedingt eine Grafik haben mußt, sollte sie skaliert werden können.

Doch, sogar eine sehr gute: http://jeenaparadies.net/

Einen schönen Sonntag noch.

Gruß, Ashura

Genau so hatte ich mir das vorgestellt. Wenn ich per CSS die Grafik als Hintergrund definiere und dann noch zentriere würde alles passen, jedoch muss ich dann noch die Buttons einfügen, und ich habe keinen Plan wie.

[Ingo Turski]

Hi,

jedoch muss ich dann noch die Buttons einfügen, und ich habe keinen Plan wie.

Du mußt hierzu die Buttons vom Hintergrund freistellen und als transparente gifs speichern.

freundliche Grüße
Ingo

[Christoph Schnauß]

hallo Ashura,

"Abschneiden" ist keine Lösung. Wenn du schon unbedingt eine Grafik haben mußt, sollte sie skaliert werden können.
Doch, sogar eine sehr gute: http://jeenaparadies.net/

Jeena hat neuerdings auf seiner Seite oben einen dicken weißen inhaltsleeren Balken. Ob der irgendwann abgeschnitten wird oder nicht, ist irrelevant. Es ist keine Grafik, sondern laut Quelltext ein Flashfilm. Er hat bedauerlicherweise versäumt, eine Alternative anzugeben, die Seite sieht mit dem dicken weißen Balken oben drüber ziemlich häßlich aus.

Oder meinst du irgendwas andres?

Grüße aus Berlin

Christoph S.

[Detlef G.]

Hallo Christoph

Jeena hat neuerdings auf seiner Seite oben einen dicken weißen inhaltsleeren Balken.

Wo kommt der denn bei dir her?
Ich bekomme in Firefox, Opera und IE (alle ohne Flash) keinen weißen Balken.

Wäre ja interessant zu erfahren, warum bei dir die Hintergrundgrafik nicht
angezeigt wird.

Auf Wiederlesen
Detlef

[Christoph Schnauß]

hallo Detlef,

Ich bekomme in Firefox, Opera und IE (alle ohne Flash) keinen weißen Balken.

Macromedia stellt für Konqueror keine flash-plugins bereit.

Wäre ja interessant zu erfahren, warum bei dir die Hintergrundgrafik nicht
angezeigt wird.

Es ist laut Quelltext einfach keine vorhanden, das dafür vorgesehene DIV bleibt einfach leer.

Grüße aus Berlin

Christoph S.

[Detlef G.]

Hallo Christoph

Ich bekomme in Firefox, Opera und IE (alle ohne Flash) keinen weißen Balken.

^^^^

Macromedia stellt für Konqueror keine flash-plugins bereit.

Wie ich schrieb: "alle ohne Flash".

Es ist laut Quelltext einfach keine vorhanden, das dafür vorgesehene DIV bleibt einfach leer.

body {  
 background: url(header.png) black top left no-repeat;

...

Dann füllt dein Konqueror das Div oder die objekts wohl einfach mit weißer
Farbe, ohne dazu aufgefordert zu sein.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

body {

background: url(header.png) black top left no-repeat;

>  ...  
>   
> Dann füllt dein Konqueror das Div oder die objekts wohl einfach mit weißer  
> Farbe, ohne dazu aufgefordert zu sein.  
  
wenn er nicht einmal "black" annimmt, vermute ich, daß er mit der - unlogischen, wenn auch validen - Reihenfolge nicht zurecht kommt.  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)

[Jeena Paradies]

Hallo,

body {

background: url(header.png) black top left no-repeat;

  

> wenn er nicht einmal "black" annimmt, vermute ich, daß er mit der - unlogischen, wenn auch validen - Reihenfolge nicht zurecht kommt.  

Das "black" nimmt er schon an, sonst hätte Christoph ja auch rechts und links weiße Balken, anscheinend hat er eher mit dem leeren div Probleme, bzw. zeigt er anstatt des Flashfilmes eine Weiße Fläche an. Warum? Das weiß ich nicht. Normalerweise ist es doch so, dass wenn kein Plugin vorhanden ist das <object> einfach ignoriert wird.  
  
Grüße  
Jeena Paradies

-- 
[Eure Startseite](http://jeenaparadies.net/weblog/2005/sep/startseite) oder habt ihr gar keine? | [Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)

[Christoph Schnauß]

hallo,

sonst hätte Christoph ja auch rechts und links weiße Balken, anscheinend hat er eher mit dem leeren div Probleme, bzw. zeigt er anstatt des Flashfilmes eine Weiße Fläche an. Warum? Das weiß ich nicht.

Es war nun grade mal Konqueror 3.1 (den ich für das CVS für SELFHTML 8.1.1 als Testbrowser brauche). Der kann sehr Vieles, was mit CSS gemacht wird, noch nicht, mit Konqueror 3.4 sehe ich tatsächlich auch eine Grafik anstelle des vorgeschlagenen Flash-Filmchens

Normalerweise ist es doch so, dass wenn kein Plugin vorhanden ist das <object> einfach ignoriert wird.

Ja. Und genau das hat halt zur Anzeige eines "weißen Balkens" geführt. Das DIV war da, und war auch definiert, hatte aber keinen Inhalt  -  und ich habe allerdings versäumt, in der CSS nachzuschauen, ob da die von mir als fehlend angemerkte Alternative vorgesehen wäre.

Grüße aus Berlin

Christoph S.

[Jeena Paradies]

Hallo,

Ja. Und genau das hat halt zur Anzeige eines "weißen Balkens" geführt. Das DIV war da, und war auch definiert, hatte aber keinen Inhalt

Ein <div> ohne Inhalt und ohne irgendwelche Angaben sollte eigentlich auch gar nicht angezeigt werden, zumindest nicht sichtbar. Das ist ja sowieso total nutzlos da, ich musste es eigentlich nur wegen des Validators reinbauen, weil ein <object> als Inlineelement nicht direkt in <body> drinn sein darf.

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

Ein <div> ohne Inhalt und ohne irgendwelche Angaben sollte eigentlich auch gar nicht angezeigt werden, zumindest nicht sichtbar.

Aber die object haben definierte Größen. Da kann es schon sein, daß ein Browser diesen Platz reserviert und dann erst feststellt, daß er ihn mangels Plugin nicht nutzen kann.
Abhilfe könnte sein, die Hintergrundgrafik auch für dieses DIV anzugeben.

freundliche Grüße
Ingo

[Christoph Schnauß]

hallo Ingo,

Abhilfe könnte sein, die Hintergrundgrafik auch für dieses DIV anzugeben.

Ja, genau das bringts dann tatsächlich. Ich habs in einer kleinen Testseite mal durchgespielt, und da war dann der "weiße Balken" tatsächlich fort und es stand die Grafik da.

Im übrigen: Auch Detlef hatte durchaus recht. Unter Windows habe ich mit IE, Firefox und Opera (und ohne Flash-plugin) auch keinen weißen Balken zu sehen bekommen, aber ich habe halt zum Zeitpunkt meines Postings kein Windows gefahren ...

Grüße aus Berlin

Christoph S.

[Jeena Paradies]

Hallo,

Macromedia stellt für Konqueror keine flash-plugins bereit.

Wie der Opera kann auch der Konqueror Netscape Plugins nutzen.

Grüße
Jeena Paradies