• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

Funktionsweiße - Banner/Bild 100% Breite skalierbar

godlike

Warp drölf
Veteran

godlike
Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
Ja, gerade das hier gefunden: http://cssslider.com/de/ Die Breite passt sich der Bildschirmbreite an und beim Skalieren ändert sich die Höhe dazu - sprich der Content darunter passt sich an. Nun überlege ich wie genau das funktioniert ganz ohne JavaScript. Einfach nur ein DIV mit 100% Breite und Höhe kann das ja nicht sein. Kann mir wer dazu auf die Sprünge helfen?

Hab diverse Einweg-Mailadressen durch wegen dem Test-Download aber der frisst keine einzige davon :/

Gruß godlike
 
Zuletzt bearbeitet:

theSplit

1998
Veteran Barkeeper

theSplit
Registriert
3 Aug. 2014
Beiträge
28.573
So wie ich das sehe wird die Animation über CSS Animationen gemacht, zum Beispiel translateX(Offset) und die smoothe Bewegung mit "transition", dann mittels Positionierung in einem nicht Overflow Div dessen Inhalt "gescrollt" wird. (So würde ich es bauen).
Die Positionierung könnte man absolute zum Elternelement machen in %. (Breite)
Dazu Media Queries die zum Beispiel bei bestimmen Auflösungen das Padding von dem "Text" darunter mittels padding positionieren und die Animation kommt durch die Transition.

Hab jetzt aber auch nicht all zu tief in die Demo auf der Seite geschaut.

Die Höhe passt sich ja automatisch durch die 100% Breite (zumindest bei Bildern) und oder Media Queries.

PS: Ich glaube der Trick ist das es in einem iFrame liegt, mit der Höhe? :unknown:
 
Zuletzt bearbeitet:

godlike

Warp drölf
Veteran

godlike
Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
  • Thread Starter Thread Starter
  • #4
Danke schon mal für eure Tipps :T

Hintergrund ist Folgender. Ich bastel grade eine kleine Seite die ganz oben ein Menü beinhaltet (100% Breite), darunter soll ein Head-Bereich (Hintergrundbildbild + Logo) folgen mit ebenfalls 100% Breite und darunter der Content-Bereich, in einem zentrierten Wrapper, mit eben keinen 100% Breite sondern z.B. nur 70%. Meine erste Version hatte ich das Hintetgrundbild einfach im body per CSS platziert und das Logo als Bild darüber. Das Blöde dabei ist das es so quasi ja kein Inhaltselement ist das den Content im Wrapper nach unten drückt wenn ich z.B. das Browserfenster vergrößere. Bei dem Beispiel von oben funktioniert das ja aber. Also fließend und responsive.

Ich schau mir das nun mal an wie die das gemacht haben.

PS: Ich glaube der Trick ist das es in einem iFrame liegt, mit der Höhe?
unknown.png
Zum Vergrößern anklicken....
Oke wenn das so ist vertraue ich lieber auf eine eigene Lösung...

edit: So was in der Art

[src=html4strict]<body>
<div class="header background">Logo</div>
<div id="pagewrap">
<div>
<h1 id="home">Überschrift</h1>
Lorem ipsum dolor sit amet in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</div>
</div>
</div>
</body>[/src]

[src=css]html, body {
height: 100%;
width: 100%;
}
#pagewrap {
padding: 5px;
max-width: 900px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
.header {
display: inline-block;
position: relative;
height: 360px;
width: 100%;
top: 100px;
}
.background {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
}[/src]
Funktioniert zwar vom Prinzip her, wenn das Browserfenster allerdings größer oder kleiner wird bleibt der Inhalt im Wrapper ja immer an der selben Stelle.
 
Zuletzt bearbeitet:

godlike

Warp drölf
Veteran

godlike
Registriert
13 Juli 2013
Beiträge
14.327
Ort
Topkekistan
  • Thread Starter Thread Starter
  • #6
Ja, das hatte ich bis dato auch so gemacht. Dachte aber das geht irgendwie dynamischer. Bei media querys hab ich ja quasi Sprünge drin. Alternativ wäre eine Höhe in Prozentwerten muss ich mir mal noch genauer überlegen. Wollte halt so gut es geht kein JavaScript benutzen wo es nicht unbedingt notwendig ist. Aber Ok mit den media querys geht es ja schon einigermaßen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben