div in div - innerer DIV Breite anpassen

elyion_g2 · 14.11.2011

Hi leute,

Danke erstmal, dass du dich für dieses Thema interessierst ...

Ich habe einen DIV erstellt, welcher eine Breite von 12000px hat...
nun habe ich in diesem div 4 weitere divs nebeneinander.

(horizontaler scroll hald...)

jetzt wollte ich fragen, ist es möglich / wie ist es möglich
diese DIVS die nebeneinander sind, immer in die mitte des fensters zu kriegen?

vielen vielen dank für eure antworten!!

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Wie willst du bei horizontalem scrollen die Elemente in die Mitte des Bildschirmes bekommen? Du müsstest mit Javascript nach dem laden der Seite die divs in der Mitte des Bildschrimes ein- und ausblenden, indem du das scrollen mit dem Mausrad abfragst. So können Leute ohne JS die Seite trotzdem normal verwenden, während die Leute mit JS immer das div zentriert zu sehen bekommen.

btw: Dein Threadtitel ist meiner Meinung nach unpassend gewählt, die Breite eines divs in einem div passt man folgendermaßen an:

HTML:

div div {width: 400px}

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

tut mir leid für den titel, es kam mir nichts passenderes in den sinn...

leute ohne js... spinnen die? da funktioniert ja das halbe web nicht mehr... naja das ist ein anderes thema..

das scrollen funktioniert über die maus nicht, das ist mittels URL's die auf eine ID gehen... per JS gelöst...

und wenn ich einen solchen link anklicke, müsste es nach links / rechts scrollen und mir den div in der mitte anzeigen... das ist das ziel der ganzen sache...

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Komisch, ich surfe ohne JS und es funktioniert das Meiste im Web. Nur faule Webprogrammierer setzen ihre Webseiten so um, dass sie ohne JS nicht funktionieren.

Dann hättest du deine Frage besser formulieren sollen. Wenn das schon per JS gelöst wird, wo ist dann dein Problem? Ein Element zentriert im Browser darzustellen?

Und wieso funktioniert das scrollen ohne Maus nicht? Das sind Benutzer schon gewöhnt. Oder meinst du, Benutzer sind so begeistert davon, dass sie bereit sind, nur für deine Webseite auf gewohnte Bedienelemente zu verzichten?

L. G.

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

nur da horizontale scrollen funktioniert nicht... das vertikale schon... man bedient die webseite wie eine normale webseite... nur werden die inhalte nicht neu geladen, sondern man scrollt nach links oder rechts für die anzeige.... das scrollen ohne JS funktioniert auch, aber hald ohne animation

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Du solltest dir angewöhnen, konkrete Fragen zu stellen. Was klappt bei deiner Umsetzung denn nicht? Oder möchtest du, dass dir jemand eine fertige Lösung vorsetzt?

Wird ein Javascript Framework verwendet?

L. G.

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

www.popchorgossau.ch/testseite <- so funktioniert das ganze ...
nur möchte ich dass dort, wo jetzt der text steht, .. jene div's immer in der mitte des fensters sind (momentan haben sie noch 100% breite -> kleiner kann ich sie nur linksbündig anwählen) ...

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Du solltest dir einmal eine logische HTML Struktur überlegen. Es ist nicht sonderlich sinnvoll, ein Menü 4 mal zu definieren.
Auch ist es sinnvoller, einen Text in einen Paragraphen (<p>) zu stecken als in eine Unterteilung (division, oder kurz <div>).

HTML:

<div id="inhalt">
<p style="margin:0 auto; width:200px">Lorem ipsum</p>
</div>

Das wäre mal ein grundsätzlicher Lösungsansatz, welcher dir den Text in deinem Inhaltsdiv zentriert. Nachdem das div jedoch breiter ist als der Bildschirm, musst du dir hierfür noch eine Lösung überlegen, die Größe auf den Bildschirm des jeweiligen Nutzers zu setzen.
Hier noch vielleicht hilft dir das auch weiter.

L. G.

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

das mit der formatierung ist mir auch klar, ich habe das so schnell zusammengebastelt, dass ich keine zeit hatte, diese details noch einzufügen... naja ..

ehm ... das mit dem iQuery plugin sollte eine alternative zu meinem scrolling sein? ... ich komme dort gar nicht nach, wo herunterladen / einfügen etc...

man müsst eigentlich nur machen können, dass die div's die jetzt noch breiter sind als das fenster, immer nur so breit sind wie das fenster.... damit könnte man den text dann in einen <div> einsetzen mit margin: 0px auto; und schon hätte man das problem gelöst...

aber ich weiss nicht wie... ansonsten muss zu diesem scroll eine andere alternative her.. und die, die du mir da gezeigt hast, sieht schonmal nicht schlecht aus... ich weiss nur wirklich nicht, wie herunterladen & einfügen....

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Dieses Plugin habe ich übrigens gefunden, indem ich auf den Link in meinem dritten Beitrag hier geklickt habe und das erste Suchergebnis ausgewählt habe. Ich stelle die absonderliche Behauptung auf, dass sich mit noch mehr Suchaufwand durchaus passendere Lösungen finden lassen.

Und du hast die Lösung deines Problems doch schon gepostet: onload führst du eine Javascriptfunktion aus, welche dir die Auflösung des Browserfensters zurückliefert. Dann musst du nur noch die Breite setzen und schon ist das Problem gelöst.

PS: Um das von mir verlinkte Plugin runterzuladen muss man "Download" (zu finden in der Navigation ganz oben) anklicken.

Hammy07 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Schau doch einfach mal hier:
http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites
Da gibt's einige gute Beispiele.

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Hammy07 schrieb:
Schau doch einfach mal hier:
http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites
Da gibt's einige gute Beispiele.

alle diese lösen mein problem auch nicht ... wenn ich eine seite dort anwähle, und scrolle ... und dann das fenster verkleinere, bleibt der inhalt, den man dann lesen können sollte, nicht in der mitte wie bei : margin: 0px auto; ...

----------------------------------

Myhar schrieb:
Und du hast die Lösung deines Problems doch schon gepostet: onload führst du eine Javascriptfunktion aus, welche dir die Auflösung des Browserfensters zurückliefert. Dann musst du nur noch die Breite setzen und schon ist das Problem gelöst.

Wie würde so eine funktion aussehen? ich habe jetzt schon 2 stunden gegoogelt und noch nichts schlaues gefunden.

und wie setze ich die breite in der css-datei... sprich, wie kann diese dann die breite des fensters aulesen?

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

habe nun doch noch was gefunden (wie kompliziert ist den google -.- ... )

Code:

function getSize() {
    var myWidth = 0, myHeight = 0;
 
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return [ myWidth, myHeight ];
}

nur, jetzt müsste man noch der css angeben, wo sie die breite herkriegt oder so ähnlich.. oder?

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Du kannst mit Javascript nicht die CSS Datei verändern. Du kannst jedoch die style Eigenschaften von einem Element verändern.

HTML:

document.getElementById("myId").style.width = "200px"

Beachte, dass du die Einheit beim Setzen von Breite/Höhe nicht vergisst. Du kannst mit style.width die Breite von jedem HTML Element verändern, du musst es nicht zwingend über getElementById holen.

L. G.

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

oke, aber wenn ich das so mache, dann lege ich ja trotzdem wieder selber ein wert fest. er nimmt dann nicht den ermittelten wert aus dem javascript von oben...

es müsste ja den wert ermitteln, und dann die breite des div's dem ermittelten wert anpassen...

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Ja, das hast du vollkommen richtig erkannt. Deshalb war das von mir auch nur als Beispiel und nicht als fertige Lösung zu sehen:

HTML:

document.getElementById("myId").style.width = meineVariable + "px";

Besser so?

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

ich kriegs nicht hin... tut mir leid ...

... hier ist das script eingebunden ... ich kenne javascript und solche dinge kaum ... ich weiss nur das man mit javascript und jquery zeug animieren kann und so....

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

was ich noch überlegt habe:

kann man nicht machen, dass wenn man anklickt, und er scrollt, diesen DIV nicht nach ganz links zieht, sondern in die mitte? .... so wäre mein problem auch gelöst...

Myhar · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

Zum Debuggen von Javascript eignen sich die Webdeveloper Tools der diversen Browser sehr gut. Ein Blick in die Konsole reicht aus, um den Fehler schon mal eingrenzen zu können.
Bei deinem Skript bemängelt er zB, dass er 'document.getElementById("section")' nicht ausführen kann. Das ist nicht verwunderlich, da es zum Aufruf der Zeile das Element mit der ID noch nicht gibt. Dieser Aufruf gehört erst nach dem Laden des DOM Baumes (zB onload Event, welches du bereits benutzt)

Auch kannst du nicht einfach myWidth verwenden, da die Variable nur innerhalb der Funktion getSize() definiert wurde. Du musst zuerst eine Variable deklarieren, mit welcher du die Funktion aufrufst (zb x = getSize(); )
Diese Funktion liefert dir ein Array zurück, sprich du kannst dann mit x[0] oder x[1] auf die Breite/Höhe zugreifen.

Code:

window.onload = function() { //die hast du schon

[...]

dieSchoensteVariableVonAllen = getSize();
document.getElementById("myId").style.width = dieSchoensteVariableVonAllen[0] + "px";

/*
Code ungetestet, Verwendung auf eigene Gefahr!
*/

L. G.

elyion_g2 · 14.11.2011

AW: div in div - innerer DIV Breite anpassen

danke danke danke!!!!!!!!!!!!!!!!!!

problem gelöst