Frame - iFrame - Layer und Suchmaschinen

[Karotte]

Hallo!

Ich möchte meine Seite gerne als Visitenkarte machen. Es gibt zu den einzelnen Menüpunkten nicht viel Text, daher würde das gut passen. Nur bei zwei Punkten ist etwas mehr Text und daher brauche ich da einen Weg, in einem Fenster mit festgelegter Größe einen Scrollbalken zu haben.

Nun ist es ja mit Frame oder iFrame immer das Problem, dass bei Besuchern, die über Suchmaschinen quer einsteigen, nur die kahle Seite angezeigt wird, ohne Kopf und Navi.

Als Alternativen haben ich noch scrollbare Boxen, Layer und "overflow" gefunden. Habe bisher keine Ahnung davon, da Anfängerin, daher 2 Fragen an Euch:

1. Es gibt in den Suchmaschinen-Suchergebnissen immer wieder Frame-Seiten, bei denen egal, welche Seite über die Suche gefunden wurde, man immer auf der Startseite landet. Da muss dann der Besucher zwar auf der Seite wieder suchen, was er braucht, aber es wird zumindest die komplette Seite mit Navi, etc. angezeigt. Bei umfangreichen Seiten sicher nicht sehr besucherfreundlich, aber meine Seite wäre sehr klein und übersichtlich, da sieht man sofort, wonach man sucht. Aber WIE erreicht man, dass in dem Link, den die Suchmaschinen ausgeben, die Indexseite steht??

2. Wie verhält es sich mit den Alternativen zum iFrame: Scrollbare Boxen mittels Layer und overflow? Kommt man da über Suchmaschinen auf die "komplette" Seite mit Navi oder ist da das gleiche Problem?

Habt schon mal vielen Dank für Eure Hilfe!
Grüße von Karotte

[Beat]

Ich möchte meine Seite gerne als Visitenkarte machen.

Eine öffentlich zugängliche oder ein Narrenspiel?

Es gibt zu den einzelnen Menüpunkten nicht viel Text, daher würde das gut passen. Nur bei zwei Punkten ist etwas mehr Text und daher brauche ich da einen Weg, in einem Fenster mit festgelegter Größe einen Scrollbalken zu haben.
Nun ist es ja mit Frame oder iFrame immer das Problem, dass bei Besuchern, die über Suchmaschinen quer einsteigen, nur die kahle Seite angezeigt wird, ohne Kopf und Navi.

Fein dass du das erkennst. Also hat sich das erledigt.
Dir würde meine Ränder dann auch nicht gefallen, die Frames hinzaubern gegen den Willen des Autors.

Als Alternativen haben ich noch scrollbare Boxen, Layer und "overflow" gefunden. Habe bisher keine Ahnung davon, da Anfängerin,

Ok in einer geeigneten Dokumentation bist du ja.
Dann mach dich mal schlau über
CSS height, max-height, overflow
Viel mehr brauchst du für deine Zwecke nicht.

1. Es gibt in den Suchmaschinen-Suchergebnissen immer wieder Frame-Seiten, bei denen egal, welche Seite über die Suche gefunden wurde, man immer auf der Startseite landet. Da muss dann der Besucher zwar auf der Seite wieder suchen, was er braucht, aber es wird zumindest die komplette Seite mit Navi, etc. angezeigt. Bei umfangreichen Seiten sicher nicht sehr besucherfreundlich, aber meine Seite wäre sehr klein und übersichtlich, da sieht man sofort, wonach man sucht. Aber WIE erreicht man, dass in dem Link, den die Suchmaschinen ausgeben, die Indexseite steht??

Dazu braucht es auf jeder Seite ein Script, dass veranlasst, dass onload das gesamte Frameset geladen wird, falls nicht vorhanden.

2. Wie verhält es sich mit den Alternativen zum iFrame: Scrollbare Boxen mittels Layer und overflow? Kommt man da über Suchmaschinen auf die "komplette" Seite mit Navi oder ist da das gleiche Problem?

Gleiches Problem.

mfg Beat

[Karotte]

»» Ich möchte meine Seite gerne als Visitenkarte machen.

Eine öffentlich zugängliche oder ein Narrenspiel?

Die Frage verstehe ich nicht.

Gleiches Problem.

Ok, dann hat sich das für mich erledigt und ich mache keine Seite im Visitenkartenformat mit Scrollbox.
Schade...... finde die ganz hübsch.

Grüße von Karotte.

[Beat]

Ok, dann hat sich das für mich erledigt und ich mache keine Seite im Visitenkartenformat mit Scrollbox.
Schade...... finde die ganz hübsch.

Was hat denn der Begriff Visitenkarte mit Frames zu tun?
Visitenkarte meint schlicht eine Internetpräsenz für Personen oder
Firmen, die sich und Ihre Kontaktpunkte präsentieren.

Eine Scorollbox bedarf keine Frames. Das geht wirklich mit 0815 CSS

mfg Beat

[Karotte]

Was hat denn der Begriff Visitenkarte mit Frames zu tun?
Visitenkarte meint schlicht eine Internetpräsenz für Personen oder
Firmen, die sich und Ihre Kontaktpunkte präsentieren.

Ich meine mit Visitenkarte ein Layout wie hier als Beispiel:
http://www.siebert-shiatsu.de
Das Layout bleibt immer so klein und eben nicht wie "übliche" Internetseiten. Da aber zu einem Menüpunkt etwas mehr Text ist, wollte ich eine scrollbare Box haben.

Eine Scorollbox bedarf keine Frames. Das geht wirklich mit 0815 CSS

Ja, schon, aber Du sagst, das Problem mit den Suchmaschinen wäre das gleiche wie mit einem iFrame!

Gruß von Karotte

[Shadowcrow]

hi $name,

| Eine Scorollbox bedarf keine Frames. Das geht wirklich mit 0815 CSS
|
Ja, schon, aber Du sagst, das Problem mit den Suchmaschinen wäre das gleiche wie mit einem iFrame!

nee, das stimmt nicht, wenn du ein DIV/SPAN scrollbar machst hast du keine probleme, das element ist doch integraler bestandteil der seite und kann garnicht "einzeln" aufgerufen werden.

gruss
shadow

[Karotte]

hallo shadow, hallo Beat,

ach so! Dann wäre das doch eine Alternative für das Suchmaschinenproblem!
Das ist ja schön. Dann mache ich mich mal an eine Scrollbox mit CSS :-)

Vielen Dank!
Gruß von Karotte

[ChrisB]

Hi,

ach so! Dann wäre das doch eine Alternative für das Suchmaschinenproblem!
Das ist ja schön. Dann mache ich mich mal an eine Scrollbox mit CSS :-)

Dann bliebe nur noch das Bedienbarkeitsproblem.

Den Platz zur Anzeige des Inhaltes erst künstlich auf einen Bruchteil des reell vorhandenen einzuschränken, und dann darin den überlangen Inhalt wieder scrollbar zu machen, würde mich als Nutzer der Seite eher nerven als begeistern.

MfG ChrisB

[Karotte]

Hallo Chris,

Dann bliebe nur noch das Bedienbarkeitsproblem.

Den Platz zur Anzeige des Inhaltes erst künstlich auf einen Bruchteil des reell vorhandenen einzuschränken, und dann darin den überlangen Inhalt wieder scrollbar zu machen, würde mich als Nutzer der Seite eher nerven als begeistern.

Also, bei mir handelt es sich nur um 1 oder 2 Menüpunkte, bei denen man scrollen müsste und ich persönlich würde das nicht unangenehm finden. Auf "normalen" Internetseiten muss ich ja auch scrollen, weil nicht der ganze Seitentext auf den Bildschirm passt. Irgendwie geht ja ohne Scrollen im Netz gar nichts. Gibt ja auch extra die Scrollrad-Mäuse ;-)

Hier hast Du ein Beispiel:

http://www.ariane-fischer.de/ariane_fischer_selbstdarstellung.php

Ich finde es für eine Darstellung kleiner Dienstleistungsbetriebe oder Praxen als Visitenkarte hübsch :-)

Viele Grüße von Karotte

[cygnus]

Hallo :)

Gibt ja auch extra die Scrollrad-Mäuse ;-)

Ich finde es für eine Darstellung kleiner Dienstleistungsbetriebe oder Praxen als Visitenkarte hübsch :-)

Es sieht sehr hübsch aus.
Ich muss es allerdings zoomen, um es auch lesen zu können.
Ich bekomme dadurch nicht nur weitere zwei Scrollbalken zusätzlich auf den Bildschirm,
sondern auch die Ansicht ist jetzt nicht mehr so hübsch.

mfg
cygnus

[Karotte]

Hallo cygnus,

ja, gezoomt habe ich solche Visitenkarten natürlich noch nicht :-)
Die Schrift ist doch eigentlich so wie anderen Seiten auch üblich.

Aber ich habe jetzt mal aus Interesse "normale" Webseiten gezoomt...
Uiih, da kommen aber z. T. grauslige Sachen bei raus... :-(
Das Layout ist bei vielen offenbar nicht "Zoom-Stabil" ;-)

Viele Grüße von Karotte

[Beat]

Das Layout ist bei vielen offenbar nicht "Zoom-Stabil" ;-)

Ich mags lieber zoomlabil.

mfg Beat

[Karotte]

»» Das Layout ist bei vielen offenbar nicht "Zoom-Stabil" ;-)

Ich mags lieber zoomlabil.

Habe nach dem Beitrag von cygnus zum ersten Mal Seiten gezoomt, weil er die Visitenkarte danach nicht mehr ansehnlich fand. Ich habe etliche normale Webseiten gehabt, bei denen es durch das Zoomen das Layout zerfetzt hat... Das ist aber auch nicht schön! Magst Du das denn?

Viele Grüße von Karotte

[cygnus]

Hallo :)

Ich habe etliche normale Webseiten gehabt, bei denen es durch das Zoomen das Layout zerfetzt hat... Das ist aber auch nicht schön! Magst Du das denn?

Nee, das mag er nicht.
Er mag Seiten aus Gummi, die immer gleich aussehen, egal wie man zoomt.
Das geht.

mfg
cygnus

[Beat]

Ich habe etliche normale Webseiten gehabt, bei denen es durch das Zoomen das Layout zerfetzt hat... Das ist aber auch nicht schön! Magst Du das denn?

Nee, das mag er nicht.
Er mag Seiten aus Gummi, die immer gleich aussehen, egal wie man zoomt.
Das geht.

eHome-Latexery?

mfg Beat

[Karotte]

Hallo cygnus, hallo Beat :-)

Er mag Seiten aus Gummi, die immer gleich aussehen, egal wie man zoomt.
Das geht.

WIE geht das??!! Das interessiert mich auch. Habt Ihr da ein paar Anhaltspunkte für mich? Wäre doch gut, wenn ich das auch gleich mit berücksichtigen würde. Wenn ich schon ganz neu anfange!
Worauf kommt es an, damit eine Seite sich nicht so grauslig verunstaltet, wenn jemand zoomt?

Danke Euch!
Viele Grüße von Karotte

[Beat]

Er mag Seiten aus Gummi, die immer gleich aussehen, egal wie man zoomt.
Das geht.
WIE geht das??!! Das interessiert mich auch. Habt Ihr da ein paar Anhaltspunkte für mich? Wäre doch gut, wenn ich das auch gleich mit berücksichtigen würde. Wenn ich schon ganz neu anfange!
Worauf kommt es an, damit eine Seite sich nicht so grauslig verunstaltet, wenn jemand zoomt?

Artefakte lassen sich besonders bei Text-Zoom nicht vermeiden.
Bei FF3-Text-und-Bilderzoom gibt es immer noch die bekannten Rundungsfehler.
Man darf es also vor allem nicht Pixel-genau nehmen wollen.

Nun das "wie man das macht..."
Man sucht nach den Begriffen "Liquid Design" oder auch "Holy Grail" oder "Faux Column" oder welchen populären Link man da gerade vertreten will.

Ich schicke die alle in die Wüste. Denn ich finde, bevor man einzieht (nämlich mit seinem Inhalt als Gast auf einem fremden PC) dürfte man sich der Ausmasse des Viewports zuerst bewusst werden, wenn man schon den Luxus
von Javascript zur Verfügung hat. Ansonsten empfehle ich den Verzicht auf Mehrspaltigkeit und begnüge sich mit die display:block. Dann besteht sogar die Chance, dass man es auf dem Handy oder Subnotebook noch lesen kann.

mfg Beat

[Karotte]

Nun das "wie man das macht..."
Man sucht nach den Begriffen "Liquid Design" oder auch "Holy Grail" oder "Faux Column" oder welchen populären Link man da gerade vertreten will.

Ansonsten empfehle ich den Verzicht auf Mehrspaltigkeit und begnüge sich mit die display:block.

Anfängerfrage:
Heisst "Mehrspaltigkeit"! auch 2 oder 3 DIV-Container nebeneinander?
(Bin gerade dabei den Umstieg vom Tabellen-Layout zu CSS zu lernen und weine dem <table> schon hinterher!)

Viele Grüße von Karotte

[Beat]

Heisst "Mehrspaltigkeit"! auch 2 oder 3 DIV-Container nebeneinander?
(Bin gerade dabei den Umstieg vom Tabellen-Layout zu CSS zu lernen und weine dem <table> schon hinterher!)

Den Begriff Spalte git es nur in der menschlichen visuellen Wahrnehmung.
HTML kennt kein <column> Element. Es kennt ediglich <col> und <colgroup> als Spaltengruppierungs-Elemente mit höchst dürftiger CSS Unterstützung.

Es dürfen auch andere Elemente am mehrspalten-Layout beteiligt sein wie <dl>, <ul>, <ol> ...

Das Tabellen-Ausreden hat die Pharma-Industrie beflügelt.

Man befördert statt desen den Float-Missbrauch
float:left;

meine Sache ist das nicht. Ich denke. mit float wird man nicht schlecht glücklich.
display:inline-block;
verspricht da schon bessere Resultate sofern der MSIE6 in die Tonne darf.

Es gibt auch table Äquivalente mit css:
display:table;
display:table-row;
display:table-cell;

mfg Beat

[Karotte]

Es gibt auch table Äquivalente mit css:
display:table;
display:table-row;
display:table-cell;

Ich sitze seit ein paar Tagen über Peter Müllers "Little Boxes" und auch css4you und natürlich selfhtml. :-)
Schwierig, schwierig...

Auch wenn es vielerorts Aufschreie gibt, so hatte ich schon mal den Gedanken für meine bescheidenen Zwecke einfach beim Tabellen-Layout zu bleiben. Habe nur wenige kleine Seiten und der html-Tabellenaufbau "sitzt" bei mir ;-) Ich bin ja auch kein Profi-Web-Designer, die müssen natürlich auf dem aktuellen Stand arbeiten. Oder sollten es zumindest tun. Aber bei kleinen Seiten...sooo schlimm ist es ja auch nicht, wenn da mit Tabellenlayout gearbeitet wurde. Ich als Laien-Besucher merke das eigentlich nicht.

Viele Grüße von Karotte

[suit]

Ich bin ja auch kein Profi-Web-Designer, die müssen natürlich auf dem aktuellen Stand arbeiten.

Nein, als Profi braucht man scheinbar nicht zwangsläufig Ahnung von dem was man tut :) Dass ein Profi-Webentwickler am aktuellen Stand arbeitet, Standardkonform arbeitet oder sonstwas, ist meistens eine seltenheit. Üblicherweise haben die Hobby-Entwickler wesentlich mehr am Kasten :)

Oder sollten es zumindest tun.

:)

Ich als Laien-Besucher merke das eigentlich nicht.

Wenn man nicht in den Quelltext sieht und keinerlei Einschränkungen hat, ist das wahrscheinlich auch egal. Ich persönlich fühle mich aber mit einem CSS-Layout einfach "wohler" :) das ist wie beim Modellbauen, da muss man etwa Idealismus mitbringen.

[Længlich]

Chiáh-tàu iáh boë!

display:inline-block;
verspricht da schon bessere Resultate sofern der MSIE6 in die Tonne darf.

Halt Dich fest: IE6 kann das!
Er versteht display:inline-block; zwar nicht, nimmt es aber zum Anlaß, hasLayout auf true zu setzen. Bei Inline-Elementen bist Du damit schon am Ziel, denn Inline-Elemente mit hasLayout verhalten sich fast genau so wie die Inline-Block-Elemente laut Standard (v.a. akzeptieren sie width- und height-Angaben). Block-Elemente setzt Du einfach danach mit dem Star-HTML-Hack (oder im Extra-IE6-Stylesheet) auf display:inline;, wobei hasLayout komischerweise nicht auf false zurückgesetzt wird*. Ziel erreicht. :-)

Der Browser, der tatsächlich aussteigt, ist Firefox 2 - für den kenne ich auch keinen passenden Hack. Alle anderen verbreiteten (inclusive Firefox 3 und IE 7) verstehen display:inline-block; problemlos.

Viele Grüße vom Længlich

* Liegt vermutlich daran, daß display intern an der Stelle immer noch auf block steht. Da display:block; hasLayout nicht triggert, sieht IE6 wohl auch keinen Grund, es zurückzusetzen, wenn display sich ändert.

[Beat]

display:inline-block;
verspricht da schon bessere Resultate sofern der MSIE6 in die Tonne darf.

Halt Dich fest: IE6 kann das!

Er kann display:inline.

Er versteht display:inline-block; zwar nicht, nimmt es aber zum Anlaß, hasLayout auf true zu setzen. Bei Inline-Elementen bist Du damit schon am Ziel, denn Inline-Elemente mit hasLayout verhalten sich fast genau so wie die Inline-Block-Elemente laut Standard (v.a. akzeptieren sie width- und height-Angaben). Block-Elemente setzt Du einfach danach mit dem Star-HTML-Hack (oder im Extra-IE6-Stylesheet) auf display:inline;, wobei hasLayout komischerweise nicht auf false zurückgesetzt wird*. Ziel erreicht. :-)

Ja Ok... Mach ich auch so.

Im Opera, der immer noch ein paar Erbkrankheiten vom MSIE hat, muss ich beim Label Element zuerst display:inline notieren, danach display:inline-block.

Der Browser, der tatsächlich aussteigt, ist Firefox 2 - für den kenne ich auch keinen passenden Hack. Alle anderen verbreiteten (inclusive Firefox 3 und IE 7) verstehen display:inline-block; problemlos.

"IE7" und "problemlos" muss wohl ein Typo sein.

Naja, da FF2 kein Buro-Browser ist, sind dessen Anwender ja irgendwie selber Schuld. Den vernachlässige ich einfach mal.

mfg Beat

[molily]

Er versteht display:inline-block; zwar nicht, nimmt es aber zum Anlaß, hasLayout auf true zu setzen. Bei Inline-Elementen bist Du damit schon am Ziel, denn Inline-Elemente mit hasLayout verhalten sich fast genau so wie die Inline-Block-Elemente laut Standard (v.a. akzeptieren sie width- und height-Angaben).

Das tun sie auch ohne display:inline-block, width und height triggern selbst schon hasLayout.

Block-Elemente setzt Du einfach danach mit dem Star-HTML-Hack (oder im Extra-IE6-Stylesheet) auf display:inline;, wobei hasLayout komischerweise nicht auf false zurückgesetzt wird*.

Wieso komischerweise?
Wenn width oder height bleiben, bleibt auch hasLayout.

Der Browser, der tatsächlich aussteigt, ist Firefox 2 - für den kenne ich auch keinen passenden Hack.

Doch, das geht:
display: -moz-inline-stack; /* inline-block workaround for Firefox 2 */
display: inline-block;

Mathias

[Længlich]

Yiem longx nyei fai!

»» Block-Elemente setzt Du einfach danach mit dem Star-HTML-Hack (oder im Extra-IE6-Stylesheet) auf display:inline;, wobei hasLayout komischerweise nicht auf false zurückgesetzt wird*.

Wieso komischerweise?
Wenn width oder height bleiben, bleibt auch hasLayout.

Width und height hatte ich in meiner Testseite gar nicht gesetzt, sondern nur:

.whatever  
{  
    display:inline-block;  
}  
* html .whatever  
{  
    display:inline;  
}

Damit bleibt hasLayout an (überprüft mit Developer Toolbar), und wenn der Inhalt Zeilenumbrüche bzw. Blockelemente enthält, sieht man einen deutlichen Unterschied zu einem entsprechenden Inline-Element ohne hasLayout.
Du hast natürlich in dem Punkt recht, daß width / height alleine genügt, wenn man die setzen möchte.

»» Der Browser, der tatsächlich aussteigt, ist Firefox 2 - für den kenne ich auch keinen passenden Hack.

Doch, das geht:
display: -moz-inline-stack; /* inline-block workaround for Firefox 2 */
display: inline-block;

Hey, das ist ja super! Danke!

Viele Grüße vom Længlich

[cygnus]

Hallo Karotte,

Die Schrift ist doch eigentlich so wie anderen Seiten auch üblich.

Ja natürlich.
Das Thema Schriftgröße scheint mir manchmal fast so geheimnisvoll wie ein Gespräch über Hämorrhoiden.

Ich habe meinen Browser gebeten, mir normale Schriften mit 16 px und kleine Schriften mit mindestens 12 px zu präsentieren, trotzdem muss ich so manche Seite zoomen.

Nicht dass Du nun denkst, ich trage Glasbausteine auf der Nase, ich brauche im wahren Leben (Zeitschriften, Bücher) nur ein wenig Lesebrille, weil meine Arme im Laufe der Jahre kürzer geworden sind, aber verflixterweise nützt die Lesebrille mir nicht das Geringste vor dem Bildschirm.

Wahrscheinlich haben viele Menschen das Problem, sich zwischen Lesen und Layoutbewunderung entscheiden zu müssen.

mfg
cygnus

[Beat]

Ja, schon, aber Du sagst, das Problem mit den Suchmaschinen wäre das gleiche wie mit einem iFrame!

Sorry, da habe ich mich in deinem text grob vertan, weil ich den vergleich zwischen Frames und iframes im Kopf hatte.

Solange du auf Frames oder iframes verzichtest, musst du den gesamten Inhalt in einem einzigen Dokument anbringen. Ein gast aus der Suchmaschine erhält also die komplette Seite.

Scrollbars gibt es als overflow CSS Eigenschaft auf (fast) beliebige Blockelemente anwendbar[1]. Das ist eine bedeutsame Erweiterung für die GUI Gestaltung..

[1] bekannte Ausnahmen sind Tabellen, aber das sind auch keine Block-Elemente

mfg Beat