Frage Kachel-Design mit horizontaler Darstellung

[ManuelLemke]

Hi. Inzwischen habe ich rausgefunden, man kann Bilder (und andere Elemente?) doch nebeneinander (in einer Zeile) anordnen. Man kann statt Bildern ebenfalls in Kästen Text (.txt) als Objekt einbauen, man kann iFrames einfügen.

Aber nun will ich das Ganze zusamenfügen in eine Maske (1 Hauptteil für Inhalte, der Div trägt die ID "Inhalt", ein Header, paar Schaltflächen und Menus...) . Da gibts folgende Fragen bzw. Herausforderungen.

1. Wie kann ich Text-Darstellung noch besser anpassen?
1.1 Breite darf 900 Pixel nicht unterschreiten und nicht breiter sein als 1024 Pixels aber Scrollbalken sollen außen (am rechten Seitenrand) sein - nicht am direkt Rand des Objekt-Kastens (weil es sonst diverse verschachtelte Elemente mit paar Zentimeter Scrollbalken nebeneinander zu sehen gibt).
1.2 Wenn ich das im Vollbildschirm betrachte sieht es gut aus, aber wenn ich es drucken will, wird Text abgeschnitten.
1.3 Das Ausklapp-Menu (mit der Schaltfläche zum drucken) wird mitgedruckt. Aber es überdeckt den Text.

2. Bildergalerie (Elemente) machen Schwierigkeiten. Weis nicht wer sowas zuhause kennt.
- Bei meiner Bildergalerie (das sind private Bilder, ich verlinke das hier nicht) habe ich eine Exceltabelle gebaut, und die Dateinamen mit einem Tool hinein kopieren und die Pfadangaben jeweils ergänzt). Die fertigen Objekte aus der Tabelle habe ich ins HTML hineinkopiert. Soweit so gut, funktioniert. Man sieht nun kleine Bilder (die habe ich mit einem weiteren Programm alle auf einmal generiert) und vergrößerte Bilder (4x so groß/ Programm) zoomen heraus wenn ich mit Mauszeiger drüberfahre.

2.1 Mit float kann ich nur erreichen, dass Bilder rechts neben dem gezoomten Hoover-Bild in Kacheln angeordnet werden. Jedoch bleiben Bilder zur Linken in 1 Reihe. Soll = Bilder sollen beim zeigen komplett umfließen, also auch auf linker Seite den Rest der Zeile ausfüllen mit den Miniaturbildern (1/4 so groß wie vergrößerte Vorschaubilder).
2.2 Die kleinen Vorschaubilder füllen den Bildschirm bis unten. Aber beim Vergrößern (Mauszeiger) ragen Grafiken am unteren Bildschirmrand hinaus und werden von dem Bildschirmrand abgeschnitten.
2.3 Die Anordnung von kleinen Bildern am Ende von Zeilen wird beim zeigen/ vergrößern durch das 4-fache Vorschaubild in nächste Zeile verschoben. Hundertstel Sekunden später ist an der Stelle wo die Maus drauf zeigt keine Schaltfläche mehr, so dass paar Hundertstelsekunden später die gezoomte Vorschau verschwindet und das Daumennagelbild wieder an seine Stelle verrückt...
- Der Bildschirm flackert
- man kann kein Bild anklicken. (Die Bilder sind alle verlinkt zu dem Bild in Originalgröße).
2.4 bei mehreren Tausend Bildern funktioniert der Zoom-Effekt nichtmehr, keine Ahnung weshalb. Es sind auch einige Zeilen vollkommen verrutscht (Lücken)...
2.5 Um alle Bilder anzuzeigen (reibungslos) muss man mit dem Mauszeiger in einer Zeile von rechts nach links über die Bilder bewegen. Das Auswählen von links nach rechts bewirkt, dass die Zoom-Bilder (Hoover-) die kleinen Bilder zur Seite verschieben aber sobald man das Zoom-Bild verlässt (Mauszeiger weiterbewegt) schnippen alle verkleinerten Bilder zurück nach links - dadurch befindet sich der Cursor 4 kleine Bilder zu weit rechts!

3. Wie kann ich mehrere Inhalte nebeneinander (horizontal) besser darstellen?
Mehrere Elemente z.B. Text über die <Object> Funktion sollen ähnlich wie Bilder nebeneinander angeordnet werden. Man soll horizontal Scrollen können. Wie bereits in 2.3 erwähnt, werden Bilder am unteren Bildschirmrand abgeschnitten, erstrecht wenn ich die Kastenhöhe begrenze. Als Breite habe ich 100% angegeben (was sich leider nach Bildschirmbreite und nicht an Gesamtbreite der dar zu stellenden Inhalte in dem Kasten bemisst) und linksbündig, oben-bündig, unten-bündig (mit beschriebenem Rand wo die Bilder abgeschnitten werden/ verschwinden) und rechts habe ich den Wert offengelassen (Anzahl an Bildern/ Elementen soll später ergänzt werden können!).

3.1 Wie stellt man das so an, dass man immer weiter nach rechts blättert, um Bilder usw. zu betrachten?


Irgendwer 'ne konstruktive Idee für Fix einer oder sogar mehrere der geschilderten Bugs?
Danke.

 

[djheke]

Link zur Seite?

 

[ManuelLemke]

Link zur Seite?

Kann ich leider nicht bekanntgeben.
Die Struktur an der Stelle wo Hauptelemente (das nachfolgende ist so ein Hauptelement/ für Bilder und Texte ... also "Kästen") importiert werden sollen, ist (hier Beispiel mit einer externen Roh-Text-Datei)

<div id="Inhalt" style="position:absolute;z-index:2;left:60px;top:90px;right:0px;min-width:1060px;Bottom:0px;border-top-left-radius:14px;background-color:#e9eaed;">
<object data="Textdatei.txt" type="text/plain"; style="position:absolute; left:0px; right:71px; max-width:1060px; width:100%; height:100%;background-color:#FFF;">
</object>
</div>

Die Struktur für das Bild-Element ist wie folgt (darin sind kleine Bilder = 160x120 Pixels, zoom-Bilder = 640x480Pixels, originale als Link).

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
...
</style>
</head>

<body style="margin:0">
<style type="text/css" title="text/css">
...
</style>

<div id="Bildschirm" style="position:fixed;z-index:0; width:100%; height:100%; overflow:visible; background-color:#FFF; background-image:url(FotosHochzeit/Herz.jpg); background-repeat:repeat"></div>
<div id="Inhalt" style="position:absolute;z-index:1; overflow:visible; width:100%; height:100%;">
<Span style="position:absolute; top:12px; ">
<p class="MsoNormal" Style="text-align:left">

<a href="Fotos/Foto1.jpg" target="Bildschirm"><img src="Fotos/klein-Foto1.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto1.jpg'" onmouseout="src='Fotos/klein-Foto1.jpg'" /></a>
<a href="Fotos/Foto2.jpg" target="Bildschirm"><img src="Fotos/klein-Foto2.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto2.jpg'" onmouseout="src='Fotos/klein-Foto2.jpg'" /></a>
<a href="Fotos/Foto3.jpg" target="Bildschirm"><img src="Fotos/klein-Foto3.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto3.jpg'" onmouseout="src='Fotos/klein-Foto3.jpg'" /></a>
<a href="Fotos/Foto4.jpg" target="Bildschirm"><img src="Fotos/klein-Foto4.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto4.jpg'" onmouseout="src='Fotos/klein-Foto4.jpg'" /></a>
...

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</p></Span>

</div>
</body></html>

 

[djheke]

Mit den Infos kann ich nichts anfangen. K.A. was du willst.

 

[ManuelLemke]

Kannst Du vielleicht lesen? Steht doch da was ich will (das es funktioniert, was sonst?).
Das sindse wieder, "Kandidaten" wo erst fachsimpeln, dann rummotzen dass irgendwas nicht perfekt wäre (ja warum wende ich mich denn überhaupt ans Forum - wenns fertig wäre bräuchte ich die Frage nicht stellen!), dann weiterfragen "warum" man überhaupt das will wie beschrieben, dann oftmals zuletzt "geht nicht" oder "keine Ahnung"!

Das ist ein Forum - kein Chat! Wenn Du kein Plan hast, wieso antwortest Du dann auf meine Frage?

Mit den Infos kann ich nichts anfangen. K.A. was du willst.

 

[bodo92]

Krass wie unverschämt manche Leute hier sind.
Du bist nicht mal seit einem Monat angemeldet hast 11 Beiträge und erlaubst dir über Jahrelange Mitglieder in dieser Community zu Urteilen und dann auch noch absolut unangebracht und falsch!

Ein Forum ist nicht da um sich kostenlos(!) Code zu schnorren sondern um sich gegenseitig zu Helfen und um Erfahrungen Auszutauschen.

Ich bin auch Anfänger und brauche noch hier und da Hilfe, versuche aber auch anderen zu helfen, auch habe ich schon falsch geantwortet, das ist zwar nicht schön für den Fragesteller aber hier kann dann jemand der es weiß Aufklären und das Verbessern. Und dass ganze nennt sich dann Forum!

 

[djheke]

Kannst Du vielleicht lesen? Steht doch da was ich will (das es funktioniert, was sonst?).
Das sindse wieder, "Kandidaten" wo erst fachsimpeln, dann rummotzen dass irgendwas nicht perfekt wäre (ja warum wende ich mich denn überhaupt ans Forum - wenns fertig wäre bräuchte ich die Frage nicht stellen!), dann weiterfragen "warum" man überhaupt das will wie beschrieben, dann oftmals zuletzt "geht nicht" oder "keine Ahnung"!

Das ist ein Forum - kein Chat! Wenn Du kein Plan hast, wieso antwortest Du dann auf meine Frage?

Ja, lesen kann ich. Das ist hier nicht die Jbbörse.Kauf dir ein komplettes profi Layout und nerv hier nicht jedes Mal rum.

 

[ManuelLemke]

Das HTML-Forum ist dafür, HTML-Probleme zu lösen und Ideen zu teilen - gerade für Starter.
Ich habe alle Parameter mitsamt auftretenden Schwierigkeiten exakt geschildert.
Wer nicht helfen will, sollte keine Antwort posten - so einfach ist das!
Der Ton ist angemessen. Ich erlebe hier andauernd, dass irgendwelche selbsternannten "Stammitglieder" nur klugscheißen aber dann keine Lösungen anbieten. Und wiederum Fragesteller betteln völlig umsonst um einen Lösungsansatz, schreiben auf Nachfrage den gesamten Lebenslauf von HTML und müssen sich auchnoch bedanken für unbrauchbare Ratschläge! So sieht das aus. - Sollte aber nicht.

Ich will nicht, dass eine Frage aussiet wie beantwortet.

Wenn Ihr keine Antwort wisst aber Ecuh angesprochen fühlt und dann Schwachsinn postet ist es kontraproduktiv. Es hält diejenigen, welche vielleicht tatsächlich Rat wüssten davon ab eine Lösung zu senden, weil der Thread ausschaut wie bearbeitet.

Also solltet Ihr vielleicht mal erstmal lesen und dann weniger nervige Kommentare posten/ -garkeine, wenn ihr's nicht wisst.



Hör ma Bodo Nummer 92, Du kannst gerne Speichel lecken bei den Mitgliedern die hier länger sind. Dauer der Mitgliedschaft entspricht nicht unbedingt Fachkompetenz. Außerdem habe ich hier meinen Code gepostet und mit nem Fehlerkatalog um Rat gebeten. Trifft also nicht zu.

Krass wie unverschämt manche Leute hier sind.
Du bist nicht mal seit einem Monat angemeldet hast 11 Beiträge und erlaubst dir über Jahrelange Mitglieder in dieser Community zu Urteilen und dann auch noch absolut unangebracht und falsch!

Ein Forum ist nicht da um sich kostenlos(!) Code zu schnorren sondern um sich gegenseitig zu Helfen und um Erfahrungen Auszutauschen.

Ich bin auch Anfänger und brauche noch hier und da Hilfe, versuche aber auch anderen zu helfen, auch habe ich schon falsch geantwortet, das ist zwar nicht schön für den Fragesteller aber hier kann dann jemand der es weiß Aufklären und das Verbessern. Und dass ganze nennt sich dann Forum!

Das Forum ist dafür, dass man HTML selber baut! Fehlerhafte Antworten und Klugscheißerei nerven!

Ja, lesen kann ich. Das ist hier nicht die Jbbörse.Kauf dir ein komplettes profi Layout.

 

[ManuelLemke]

Um zurück zum Thema zu kehren,
Wie erreicht man, dass die Scrolleiste rechts angeordnet ist, wenn ein Inhalt an der linken Seite angeordnet ist? Siehe, Beispiel mit eingebautem Text hier

<div id="Inhalt" style="position:absolute;z-index:2;left:60px;top:90px;right:0px;min-width:1060px;Bottom:0px;border-top-left-radius:14px;background-color:#e9eaed;">
<object data="Textdatei.txt" type="text/plain"; style="position:absolute; left:0px; right:71px; max-width:1060px; width:100%; height:100%;background-color:#FFF;">
</object>
</div>


Wie kann ich erreichen, dass die Bildschaltflächen um das jeweilige Zoom-Bild herum gleichmäßig verteilt werden, statt am unteren Bildschrimrand abgeschnitten zu werden?

Wie kann ich erreichen, dass Inhalte (Bilder) nicht nach unten verschoben werden dass man horizontal scrollen muss, sondern horizontal (über Bildschirmbreite hinau) gescrollt werden können (horizontal)?

 

[Tronjer]

Das HTML-Forum ist dafür, HTML-Probleme zu lösen und Ideen zu teilen

Rofl, magst noch Ketchup zu den Pommes?

Es gibt hier etwa ein halbes Dutzend User, die Hilfe leisten (können), sofern der Fragesteller Grundlagenwissen mitbringt, Eigeninitiative zeigt und freundlich auftritt - und du kannst dir sicher sein, dass jeder von ihnen diesen Thread gelesen hat. Dabei gehört @djheke, den du gleich zu Beginn vor den Kopf gestoßen hast, zu denen, die sich selbst dann noch engagieren, wenn Leute wie ich längst abwinken, weil die Fragestellung bereits zeigt, dass der TE zu faul ist, sich die Basics eigenständig zu erarbeiten oder nicht das notwendige Verständnis mitbringt.

Wenn ich dir einen Rat geben darf, dann suche dir ein anderes Hobby oder zumindest ein anderes Forum. Hier wirst du nach diesem Auftritt kaum noch Unterstützung bekommen.

 

[nookie]

Also mal Butter bei die Fische.

Wenn du hier eine vernümpftige Antwort bzw. Hilfe bekommen möchtest, solltest du auch bereit sein gewisse Informationen mitzuliefern oder entsprechend zu kennzeichnen. Jaja, ist angeblich alles oben ausführlich beschrieben.
Dazu gehört aber auch das man z.B. Quellcode in einen CODE-Tag packt. So ist er einfach besser leserlich.

Ein Link zu deiner Seite würde uns und anderen auch erheblich bei der Fehlersuche helfen, geht einfach schneller. Aufgrund deiner Beschreibung kann ich mir noch lange keine genau Vorstellung von deiner Seite machen.

1. Wie kann ich Text-Darstellung noch besser anpassen?

Hier weiß man z.B. nicht genau was du überhaupt willst? Wenn dich Typography im Netz interessiert, ist hier z.B. ein interessanter Artikel dazu.

1.1 Breite darf 900 Pixel nicht unterschreiten und nicht breiter sein als 1024 Pixels aber Scrollbalken sollen außen (am rechten Seitenrand) sein - nicht am direkt Rand des Objekt-Kastens (weil es sonst diverse verschachtelte Elemente mit paar Zentimeter Scrollbalken nebeneinander zu sehen gibt).

Was darf nicht breiter sein?

...

Mit den restlichen Fragestellungen, kann ich persönlich nichts anfangen.

3.1 Wie stellt man das so an, dass man immer weiter nach rechts blättert, um Bilder usw. zu betrachten?

Lad dir ein Skript wie bspw. Lightbox oder setz es selber mit JS, HTML und ein bisschen CSS um.

 

[ManuelLemke]

Hab nur keine Lust, einfach alles doppelt zu posten, neu zu formulieren. (Das hat niemand.)
Ich frag mich, "Unglaublich. Haben die das jetzt gelesen..." (insofern nicht als Beleidigung, sondern Frage zu verstehen) "... oder nur grob überflogen."

Warum tun hier alle wie Mr. Röhrich "Das ist 'ne Kunst für sich. Da kann nicht einfach so jeder,... das muss man erst Jahre-lang für studieren."

Kann man das jetzt endlich nachvollziehen?

Ich lerne gern >>Learing-by-Practise<< und google zeitgemäß nach Lösungen bevor ich Fragen poste. Aber soll ich erst alles auswendig lernen?! Das ist die Erwartung, an das HTML-Forum,
Ich suche soweit nach eigenen Lösungen, wenn ich dann nicht weiter weis, frag ich jemanden. Ist das nicht korrekt?

Es wäre hilfreicher, Link zu einem Tutorial zu posten. Aus beantworteten Fragen, könnte man eine Art Bibliothek aus Tutorials hier anlegen. Aber die Einstellung, den Fragesteller erst alles posten zu lassen, dann rum zu meckern, dann zu warten, bis man das allein geschafft hat. Also ist das HTML-Forum aus Sicht von DJTheke und co. überflüssig und nur für Fortgeschrittene gedacht. Duch Art der Antworten liegt der Eindruck nahe, dass nicht (von vorn herein nicht) das Interesse, das an zu packen, -besteht, nach dem Motto: "Was ich mir nicht vorstellen kann, kann auch niemand sonst" und nicht alle Nutzer gleich sind, sondern ein primitives Revierdenken vorherrscht. Nochmal einige Beispiele

Mit den Infos kann ich nichts anfangen. K.A. was du willst.

Kauf dir ein komplettes profi Layout und nerv hier nicht

-assozial- !Wer hat den Nutzer DJTheke denn gefragt? Frage richtet sich an den/ die -jenigen, wer tatsächlich helfen will und weiter weis.

Die Code-Schaltfläche habe ich soweit gefunden - insofern nehme ich Kritik, die umsetzbar/ konstruktiv -ist zu herzen, man lernt ja nicht aus.

Meine Heimseite will ich nicht verlinken, weil das nur ermutigt, weiter am Thema vorbei zu mäkeln. Ist 'ne ganz einfache Heimseite, die nach und nach vervollständigt wird, dabei lernt man Stück für Stück dazu. Irgendwas auswendig lernen bringt nichts. Ich muss schon sehen, wie sich etwas auswirkt.
Ich habe den bisherigen Quellcode der Seite gepostet.
Ich erkläre es aber noch mal. (Was kann man da falsch verstehen?)

Es gibt 2 Varianten derselben Seite, einmal mit Text, einmal mit verlinkten Bildern (Kacheln), welche sich je nach Browser-Breite automatisch anpassen sollen.


Zuerst die Variante mit Bildern, die ist so aufgebaut, (wer sich damit beschäftigt, sieht selbst, wie sich die Darstellung der Bilder verhält, wenn man mit dem Cursor rüberfährt, dass unten am Bildschirm Inhalte abgeschnitten werden (trotz der vielen <br/><br/><br/><br/>... unten) , dass Bilder um das vergrößerte Bild nicht herumfließen, sondern nach rechts verschoben werden und so weiter.

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
...
</style>
</head>

<body style="margin:0">
<style type="text/css" title="text/css">
...
</style>

<div id="Bildschirm" style="position:fixed;z-index:0; width:100%; height:100%; overflow:visible; background-color:#FFF; background-image:url(FotosHochzeit/Herz.jpg); background-repeat:repeat"></div>
<div id="Inhalt" style="position:absolute;z-index:1; overflow:visible; width:100%; height:100%;">
<Span style="position:absolute; top:12px; ">
<p class="MsoNormal" Style="text-align:left">

<a href="Fotos/Foto1.jpg" target="Bildschirm"><img src="Fotos/klein-Foto1.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto1.jpg'" onmouseout="src='Fotos/klein-Foto1.jpg'" /></a>
<a href="Fotos/Foto2.jpg" target="Bildschirm"><img src="Fotos/klein-Foto2.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto2.jpg'" onmouseout="src='Fotos/klein-Foto2.jpg'" /></a>
<a href="Fotos/Foto3.jpg" target="Bildschirm"><img src="Fotos/klein-Foto3.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto3.jpg'" onmouseout="src='Fotos/klein-Foto3.jpg'" /></a>
<a href="Fotos/Foto4.jpg" target="Bildschirm"><img src="Fotos/klein-Foto4.jpg" align="left" alt="" onmouseover="src='Fotos/hoover-Foto4.jpg'" onmouseout="src='Fotos/klein-Foto4.jpg'" /></a>
...

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</p></Span>

</div>
</body></html>

Das ist die selbe Seite nun mit einem importierten Textinhalt, welcher nicht breiter sein darf.
Die Inhalte (Text/ Bilder) sollen da eingeblendet werden (importiert werden als Object oder iFrame), wo der Inhalt ist.

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
...
</style>
</head>

<body style="margin:0">
<style type="text/css" title="text/css">
...
</style>

<div id="Inhalt" style="position:absolute;z-index:2;left:60px;top:90px;right:0px;min-width:1060px;Bottom:0px;border-top-left-radius:14px;background-color:#e9eaed;">
<object data="Textdatei.txt" type="text/plain"; style="position:absolute; left:0px; right:71px; max-width:1060px; width:100%; height:100%;background-color:#FFF;">
</object>
</div>

</body></html>

Entweder werden Bilder oder Text (spätestens beim Ausdrucken) abgeschnitten.

 

[Elroy]

Hallo.

Auch das ich mich bei dir jetzt unbeliebt mache:
Hier ist ein Link der dir denn Unterschied zwischen Inlne Elementen und Block Elementen erklärt und wie man sie anordnen darf: http://little-boxes.de/lb1/3.4-ueber-block--und-inline-elemente.html

Lies dir das erst einmal durch und korregiere dann deinen Code.

Um dir weiter zu helfen müsste ich jetzt eine Testseite erstellen denn nur anhand deines Codes kann ich nicht sehen was wo abgeschnitten wird. Da ich aber weder deine Bilder noch deinen Text habe und du auch keinen Lin k posten willst ist von meiner Seite jede Hilfe zum Scheitern verurteilt.

Ich kann nur vermuten das dein Problem bei der absoluten positionierung liegt, das ist aber nur geraten. Vielleicht findest du ja noch jemanden der dir bei deinem Problem besser helfen kann.

Gruss
Elroy