• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

100% Width-Problem

slisystem

slisystem

Neues Mitglied
Servus,
ich habe ein kleines Problem. Ich entwickle gerade folgende Website: DanielBogdoll | e.shuffle
Exemplarisch betrachte ich jetzt mal nur den obersten, großen, hellblauen DIV-Container. Dieser hat eine Breite von 100%.
Jetzt ist allerdings, speziell bei Smartphones, das Problem, dass die Bildschirmweite geringer ist als der gesamte Inhalt der Page, so dass man also horizontal scrollen kann. Kann man hier auch sehen, wenn man das Fenster einfach klein genug zieht, was die Seitenlänge betrifft.

Das 100%-Width aus CSS betrifft, was man dann feststellt, offenbar _nur_ die aktuelle Fenstergröße, denn sobald man scrollt, ist der Container nicht mehr breit genug, hier im Chrome-Browser: Problem.jpg

Ich denke, dass das Problem irgendwie nicht allzu schwierig sein kann, komme jedoch trotz überlegen und googlen auf keine Lösung...auch kleine Tricks wie Width = 200% und overflow:hidden funktionieren nicht - bin für jede Hilfe dankbar :) Der Container hat im Quellcode die ID "eshuffle".

Grüße,
Daniel
 
Hallo,

schulde aber mit entwickeln hat das nicht viel zu tun und von Smartphones bist noch weiter weck.
Alles in iframes, wenn nicht in suchmaschienen gefunden werden möchtest geht das auch einfacher, da kann man den SUMA sagen bitte merke dir die Seite nicht.

Arbeitest mit ganz schönes geschiebe (margin-left: 396px;) es soll user geben die kein 50'' haben und Smartphone fang ich mal erst nicht an :O)

auch kleine Tricks wie Width = 200%
Zum Vergrößern anklicken....
damit hättest das nur noch schlimmer gemacht :O)

Aufzeichnen.JPG

ordne das erstmal und überleg noch mal ob das echt alles so sein muss.

Cheffchen
 
Das typische Foren-Symptom ;)

Ich bin euch dankbar, dass ihr mir Tipps geben wollt, aber ich bin Anfänger und habe die Seite aus teils älteren Tutorials heraus aufgebaut - nicht überall die beste Methode zu haben und noch nicht alles richtig deklariert zu haben - einige Seiten haben schon Doctypes, der Angleich an alle ist nur noch nicht fertig, ist ja auch Beta - hat mit meinem doch sehr konkreten Problem sehr wenig zu tun.

Der Code wird sich mit der Zeit, sprich mit meinen Erfahrungen, von allein optimieren, und das gesamte Konstrukt wird sich irgendwann auch von iFrames wegbewegen - dass es Alternativen gibt, habe ich schon herausgefunden, wollte sie jedoch vorerst nicht implementieren, da alles schon so steht und vorerst fertig ist - unendlich viel Zeit habe ich leider nicht.

Wenn es also eine simple Lösung für das hier beschriebene Problem gibt, wäre ich euch sehr verbunden, diese zu erfahren :)

Grüße,
Daniel
 
Leider gibt es dafür keine simple Lösung, da wie schon gesagt der Grundgerüst nicht in Ordnung ist. :(
 
Das sieht jetzt aber völlig anders aus als deine erste gezeigte Seite. Welches Problem hast Du nun mit der neuen Seite? Ich kann sie prima in kleineren Viewports anschauen.
 
slisystem schrieb:
Das typische Foren-Symptom ;)

Grüße,
Daniel
Zum Vergrößern anklicken....

Und das typische Einsteiger-Syndrom. Du suchst nach einer einfachen Antwort und unterschätzt den notwendigen Lernaufwand. Wenn du vom Kenntnisstand bereits soweit wärest, dass sich das Problem über ein Forenpost lösen ließe, würde die Frage gar nicht auftauchen. ;)

Ich gebe dir trotzdem eine einfache Antwort. Bau deine Seite hierauf auf:

Bootstrap

Wenn du damit klar kommst, hat sich dein Styling-Problem erledigt, und solange du damit nicht klar kommst, stelle dein Projekt zurück und beschäftige dich mit Tutorials und Fachbüchern.
 
@threadi: Dann hast du mein Problem von Anfang an nicht verstanden. Wenn du die Seite jetzt soweit verkleinerst, dass unten ein Scrollbalken erscheint und du nach rechts scrollt, hört oben der DIV wieder auf - dafür suche ich eine Lösung.

@Tronjer: Bevor ich ein Framework benutze, würde ich lieber erst auf unterster Ebene arbeiten.

Ich dachte, es ist ein simples Problem und es gibt eine simple Antwort, nur komme ich nicht drauf. Wenn dem nicht so ist, muss ich mir natürlich etwas anderes überlegen ;)
 
Oh, ich hab das sofort verstanden. Ich verstehe nur nicht wie man für das selbe Problem plötzlich eine Seite mit einem völlig anderen Layout anbringen kann?

So oder so. Du hast immernoch im Layout-Konzept einige Probleme. Du positionierst generell alles absolut. So etwas

Code: 
div { position: absolute; ... }

hab ich noch nie gesehen.

Die Ursache für dein Problem ist aber nicht nur dieses fehlende Verständnis für den Aufbau von CSS-Eigenschaften. Du hast auch nicht erkannt, dass dein Problem beim horizontalen Scrollen mit dem body selbst zusammenhängt. Wenn man das Fenster kleiner macht und der Scrollbalken erscheint, dann geht der body immernoch nur bis zum ursprünglichen Fensterrand - also ohne das man nach rechts scrollt.

Das kann man z.B. so lösen, dass man den body absolut positioniert. Also:

Code: 
body { position: absolute; }

In meinem Firefox klappt das prima - mit Firebug kann man das schnell zusammenbauen und testen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben