ComputerBase Menü
Aktuelles

CSS Positionierungs-Problem (für Profis und die, die ALLE Tricks kennen). unlösbar?!

Das Stichwort steht auf der Homepage selbst: Browser based Storytelling
In irgendeiner Form also 'Geschichten erzählen mit dem Web (und über das Web)' würde ich jetzt mal sagen ;)

Falls es soweit ist und ich mich hier nicht melde, schreib(t) mir bitte eine PM, dann gibt's auch mehr Infos. Evtl. ja auch ein paar Einladungen zum Beta-Test (wenn der Chef nix dagegen hat)
 
Sieht wirklich super aus (was man bis jetzt halt so sieht).

Bei einer solchen "Konkurrenz" durch Web2.0 kann man als einfacher Programmierer ja wirklich einpacken.

Bookmarke mir das auch mal. Ist bestimmt interessant das in einem späteren Stadium zu sehen.
Wieviele arbeiten an dem Projekt und wie lange?
 
Auf der HomePage sieht man doch nix vom Projekt :D
Da sind doch nur n haufen Bilder, die man durch die Gegend schieben kann...

Bei uns sind grob 8 Programmierer + Rest (also Designer, PR, Papierkram, Die hellen Köpfe mit den Idee, etc.)
Die Arbeit läuft seit einem Jahr, wobei man eigentlich nur das letzte halbe Jahr voll zählen sollte, da da die komplette Software quasi nochmal neu geschrieben wurde mit neuer Daten-Struktur etc.
 
Schon alleine das ist faszinierend und eine super Idee.
Wo sieht man schon eine Webseite bei der man mal einfach solche Dinge verschieben kann?!

Am besten kann man dann noch das Seitenmenü anpacken und an jedes beliebige Kante andocken :)

Bin auf jeden Fall gespannt auf mehr.
 
Hab mich ein bischen mit der Problemstellung auseinander gesetzt. Soweit ist dies nicht eine Frage der Technik oder des Tricks. Es trifft ein konzeptionelles Problem auf. Die blaue Box braucht, um es mit reinen CSS-Angaben zu bewerkstelligen, in der Horizontalen die "fixed"-Positionierung und in der Vertikalen eine "absolute" oder "relative". Und so eine Mischvariation gibt es nicht. Natürlich kann man tricksen, aber nicht wenn sich das Element gleichzeitig innerhalb und ausserhalb eines Elements befindet, um dann zudem nur den horizontalen Scrollbalken zu ignorieren. Dafür bräuchte es ein "inner-fixed" oder so. Kurzum, es geht nicht ohne dynamische Nachbearbeitung -> JS.

Nun gibt es ja mit JS zig Möglichkeiten. Dabei würde ich weniger die Variante wählen, die mit einen Scroll-Event arbeitet, da dadurch ja ständig angepasst werden müsste. Das Problem ließe sich aber umlagern.... ich hab hier eine Variante, die zumindestens die Grundsituation erledigen sollte. Eine Erklärung würde hier jedoch in diesem Post den Rahmen sprengen.

Code: 
<!DOCTYPE html>
<html>
<head> 
 <title>...</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <style type="text/css">
 body 			{margin:0;}
 #blueboxholder 	{position:absolute; top:0px; left:0px; right:0px; overflow:visible;}
 #wrapper 		{position:absolute; top:0px; left:0px; right:50px; bottom:0px; overflow:auto;} 
 div.row 			{position:relative; display:block; margin:0 0 5px 0; background:yellow;}
 div.bluebox 		{position:absolute; right:0px; width:50px; background:blue;}
 div.row div.bluebox{top:0px; right:0px; height:100%;}
 </style>
</head>
<body>

<div id="wrapper">
 <div class="row" style="width:4000px; height:20px;"><div class="bluebox"></div></div>  
 <div class="row" style="width:8000px; height:50px;"><div class="bluebox"></div></div>
 <div class="row" style="width:700px; height:30px;"><div class="bluebox"></div></div>
 ...
</div>
<div id="blueboxholder"></div>

<script>
 $(document).ready(function(){
    var blueboxholder = $('#blueboxholder');
    $('#wrapper > div.row > div.bluebox').each(function(){
	var p = $(this).parent();
	$(this).css({'height':p.height()+'px','top':p.position().top+'px'}).detach().appendTo(blueboxholder);		
		});
 });
</script>

 
</body>
</html>
 
Hallo!

Danke für deine Lösung. Der Einfachheit halber hätte ich noch hinzufügen können, dass die Layer alle gleich lang sind ;) Aber das ist ja eher sekundär.
Deine Lösung (denke ich) verstehe ich soweit:
Du hast die blauen Boxen erst(!) im Layer, um die Höhe zu ermitteln und dann holst du sie per 'detach' raus und packst sie in den blueboxholder um sie 'absolute' an den rechten Rand zu fixieren.

Leider kann ich damit nichts anfangen, weil wir mit GWT arbeiten und das Einbinden von jQuery das Programm nur noch größer machen würde. Zur Info: Unser kompilierter und hoch-optimierter JS-Code ist aktuell 4MB groß (also nur JS ohne Bilder oder sonstwas). Ich hab es inzwischen so gelöst wie oben beschrieben:
- Alle Layer sind in einem Container und alle Boxen in einem eigenen Container. So kann man den Layer-Container einfach 10000px breit machen und der Container für die Boxen ist 'position: absolute; right:0'.
- Klick auf die Box vergrößert den Layer
- Box liest neue Layergröße aus und vergrößert sich dementsprechend
Funktioniert soweit ganz gut =)

Trotzdem danke :)
 
Hehe ja ja... je nach Rahmenbedingung (bspw. alle Elemente sind anfangs gleichhoch) ist eine andere Umsetzung effektiver. Mir war auch gar nicht danach, dir jQuery als Lösung unterzujubeln. jQuery ist ja auch nur Javascript. Im Prinzip muss man nur einen Teil der Darstellung nachberechnen, wie du es in deiner Lösung auch beschrieben hast. Und da der berechnene Aufwand (Resize, Positionierung) nur zu Zeit der "Veränderung" stattfindet, wäre es damit auch die performante Lösung.

Viel Erfolg (und Spass noch)

PS: Und bin wohl auch gespannt, was ihr da zusammen "frickelt". :D
 
Leider ist das Feature, worum es hier geht, in der ersten Version wohl auf 5 Layer beschränkt, weil die Zeit aktuell wohl nicht reicht für das dynamische hinzufügen und löschen. Andere Features haben vorrang und naja: Ich denke, dass man die Software mit allein 5 Layern nicht soo gut ausschöpfen kann. We'll see.


Aktuell ist schon irgendwie 'frickeln' angesagt, weil alle 10-15 Minuten 'ne Email vom Feature-/Bug-Tracker rein kommt. Dann können Dinge halt nicht vollständig implementiert werden oder kleinere Bugs gefixt werden...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

marco=24=
  • Umfrage Umfrage
Problem für Profis
2
Antworten
23
Aufrufe
1.832
Radiobot
R
N
Problem für Profis
Antworten
4
Aufrufe
1.192
Netrunner
N
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 171 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz