Faaabi: Ist das möglich? eine art riesen Seite? Homepage

Hallo zusammen,
ich hoffe ich bin hier richtig.
Habe bereits Erfahrungen mit html und wollte mal fragen ob folgendes möglich ist & wen ja wie?
Habe schon nach Antworten gesucht aber noch keine  gefunden, denke dass ich da aber mit html allein nicht weit kommen werde.

Es handelt sich um eine einzige Seite. Dafür soll diese ziemlich groß sein. Sprich viel Puffer zum nach unten/oben und links/rechts scrollen, lassen wir sie mal z.B. 10000x10000 px sein.
(Sprich sprengt den rahmen des monitors und browsers)

1.Wie stell ich diese größe ein?
2.Ich hätte gerne einen Mittelpunkt in dieser Seite, lassen wir diesen mal 250x250 sein.
Dieser soll beim Aufruf der Seite direkt gezeigt werden.(=Besucher landen direkt auf der mitte der Seite)
3.statt runter/hoch und Links/rechts zu scrollen...würde ich gerne die seite mit der maus ziehen können &  mit scrollen weiter weg zoomen können.. ist das überhaupt möglich ?

Hoffe ihr könnt mir da weiter helfen oder sagen ob ich überhaupt noch im Machbaren liege,
was ich dafür brauche..?
Lg :)

  1. @@Faaabi:

    nuqneH

    was ich dafür brauche..?

    impress.js?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hallo,

    Hoffe ihr könnt mir da weiter helfen oder sagen ob ich überhaupt noch im Machbaren liege,
    was ich dafür brauche..?

    Machbar ist generell sogar sehr einfach und im Prinzip auch nur mit HTML und CSS.

    • dem <body> die Dimensionen von 10000px x 10000px geben
    • Container im Inhalt innerhalb dieses Bereiches zu positionieren und ihnen eine ID geben
    • die IDs mit einem Link (<a href="#woanders">woanders hin</a>) anspringen

    fertig.

    Eleganter wird es jedoch, wenn man ein bisschen Scripting mit einbringt z.B.

    Gruß
    Ole

    1. Danke ihr beiden für die schnellen Antworten :)

      Habe es nun hinbekommen Größe des bodys &  die Positionierungen meiner site in die Mitte zu tipslen :o
      So nun folgendes:
      1.Wenn die Site geöffnet wird, dass man direkt in der Mitte ist/landet.(Hauptteil) (ich weiß nicht ob Ole das meinte mit der IP?)

      2. Sind solche Scripte kostenlos und kann man diese einfach so für sich benutzen? Auch auf einer öffentlichen Website. Egal ob Privat oder Geschäftlich ?
      Kann ich mit diesen Scripten auch meine oben genannten wünsche einstellen?
      Sprich: Zeiger zum ziehen & Mausrad für weiter weg zoomen bis zum vollbild der kompletten großen site?

      Danke schonmal im vorraus ;)
      Lg & eine gute Nacht.

      1. Hallo

        1.Wenn die Site geöffnet wird, dass man direkt in der Mitte ist/landet.(Hauptteil) (ich weiß nicht ob Ole das meinte mit der IP?)

        ID nicht IP :)

        Generell zeigt der Browser ja immer die Ecke oben-links an, wenn eine Seite geladen wird. Wenn du dort nicht deinen Einstieg hast, kannst du mit Javascript dorthin springen.

        Dass kannst du auf 2 Arten machen:
        1. Du rufst die Seite nochmal auf, erweiterst aber die URL um "#deineID" (wobei "deineID" die ID des Startcontainers enthät)
        2. du scrollst an die entsprechende position ( scrollTo() )

        Den initialien Seitenausschnitt würde ich dann aber leer lassen.

        1. Sind solche Scripte kostenlos und kann man diese einfach so für sich benutzen? Auch auf einer öffentlichen Website. Egal ob Privat oder Geschäftlich ?

        Die meisten ja. Im einzelnen wirst du das an den entsprechenden Lizenzmodellen ersehen können.

        Sprich: Zeiger zum ziehen & Mausrad für weiter weg zoomen bis zum vollbild der kompletten großen site?

        Auch das geht mit Javascript.

        Dazu kann man (vermutlich, da ungetestet) z.B. http://jqueryui.com/draggable/ und http://www.jacklmoore.com/wheelzoom/ nutzen.

        Gruß
        Ole

        1. Abend / Morgen o_Ô
          Komme mir irgentwie blöd vor da ich jetzt schon 4Stunden dran bin das gleiche Problem zu lösen :D
          habe nun versucht mit css das bild in die mitte zu holen... schauts euch einfach selber an
          :&

          html

          <!DOCTYPE html>  
            
          <html>  
              <head>  
                 <title>  
          Bla bla  
                 </title>  
                 <link href="style.css" type="text/css" rel="stylesheet" />  
            
                     <a href="#container">hier klicken </a>  
            
              </head>  
              <body >  
              <div id="container">  
              <header>  
              <h1>NAME</h1>  
              <h2>blablbla</h2>  
              </header>  
              </div>  
              </body>  
          </html>
          

          css

               * {  
                   padding: 0px;  
                   margin:0px;  
                   font-family: Arial, Verdana, sans-serif;  
               }  
          body {  
              width: 20000px;  
              height: 15000px;  
              background-color: #3F3F3F;  
          }  
          header {  
              height: 75px;  
              width: 500px;  
              background-color:#C0C0C0;  
              border-radius: 10px;  
            
               }  
              header h1 {  
                         font-family: Verdana;  
                         font-style: italic;  
                         padding-left: 10px;  
                         font-size: 25pt;  
                         text-shadow: white 1px 1px 1px;  
              }  
                     header h2 {  
                         font-family: Verdana;  
                         font-style: italic;  
                         padding-left:100px;  
                         font-size: 15pt;  
            
              }  
            
                    div#container {  
            
                    background: #CCC;  
          border-radius:10px;  
          color: #333;  
          position: absolute;  
          height: 600px;  
          width: 500px;  
          margin-top: 7200px;  
           margin-left: 9750px;  
            
            
            
                    }  
            
          
          

          Problem 1: Die seite soll von Anfang an dort landen/starten. ohne davor auf "hier klicken zu drücken" ...Wo kommt der ID code rein?

          Problem 2: Ich bekomm es einfach nicht hin (nachdem ich nun "mittig" gelandet bin
          meine eigentliche seite auch mittig zusehen. die box mit bla bla bla erscheint etwa links, rechts... oder wie auch immer.

          Immernoch.. Hilfe ! :)
          Danke Ole für die scripts :)

          1. @@Faaabi:

            nuqneH

            Immernoch.. Hilfe ! :)
            Danke Ole für die scripts :)

            Du hast dir angesehen, wie’s mit impress.js gemacht wird?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Hallo

            Problem 1: Die seite soll von Anfang an dort landen/starten. ohne davor auf "hier klicken zu drücken" ...Wo kommt der ID code rein?

            Dazu habe ich dir 2 Möglichkeiten in meinem letzten Beitrag aufgezeigt.

            Problem 2: Ich bekomm es einfach nicht hin (nachdem ich nun "mittig" gelandet bin
            meine eigentliche seite auch mittig zusehen. die box mit bla bla bla erscheint etwa links, rechts... oder wie auch immer.

            Der Sprung zu einem Anker springt immer zur oberen linken Ecke. Du musst also den Container zu dem du springen willst und die enthaltenen Elemente einfach entsprechend formatieren.

            Gruß
            Ole