Je nach Auflösung verschiebt sich Div! (Anfänger)

[DjRay]

Hey liebe Community,

irgendwie schiebt sich immer und immer wieder mein Div in der Mitte.
Gehe ich mit meiner Auflösung auf die Homepage ist alles okay, bei anderen sitzt das Div immer in der Mitte.

Hier mal mein Code:

<div id="webseite">
........

        <td colspan="11" rowspan="8">
        <div class="Container">
            <div id="Scroller-1">
              <div class="Scroller-Container">
                <div>
                  <p>Willkommen bei der Firma San(d)ierung</p>
                  <br>
                  <p>In kuerze werden Sie hier mehr Informationen finden </p>
                  <br>
                  <p>zu unserer Firma</p>
                </div>
              </div>
            </div>
          </div>
          <div id="Scrollbar-Container">
            <div class="Scrollbar-Track">
              <div class="Scrollbar-Handle"></div>
            </div>
          </div></td>

.........
</div>

Code CSS:

webseite {    
width: 1281px;
margin: 0 auto;
}
.Container {
    width: 336px;
    height: 280px;
}
#Scroller-1 {
    overflow: hidden;
    width: 772px;
    height: 527px;
    left: 1px;
    top: -26px;
    background-image:url(../Bilder/side_15.gif);
}
#Scroller-1 p {
    margin: 0;
    padding: 10px 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 20px;
    color: #777;
    text-align: left;
}
.Scroller-Container {
    left: 1px;
    top: 0px;
    width: 772px;
    height: 527px;
}

.Scrollbar-Track {
    width: 11px;
    height: 209px;
    top: 165px;
    left: 1333px;
    background-color: #EEE;
    background-image: url(../index_21.gif);
}
.Scrollbar-Handle {
    top: 0px;
    left: 2px;
    width: 11px;
    height: 12px;
    background-image:url(../slider.gif);
}

Würd mich freuen wenn mir einer sagen kann an was das liegt.
Poste gerne auch mein gesammten Quellcode

 

[Wustersoss]

Werde aus der Frage nicht schlau. Was ich aber schon sehe, ist ein unnötiges Verschachteln von DIV-Kästen. Zudem stellt sich die Frage warum du das DIV "Scroller-1" grösser machst als das übergeordnete DIV? Zudem ist es dann wohl auch grösser als das eigentliche Tabellenfeld. Apropos Tabelle, die ist ja für tabellarische Daten da und nicht für das Gerüst einer Webseite, aber das machst du sicher nicht, oder?

 

[threadi]

Und das alles in der Mitte ist, wird durch "margin" in #webseite verursacht. Sie ist auch bei dir zentriert, nur dass dein Viewport (nicht die Auflösung!) eben so klein ist, dass deine Seite gerade so rein passt. Wenn Du keine Zentrierung wünschst, entfernt das "margin".

Worüber Du dir eher Gedanken machen solltest während Viewports die kleiner sind als deiner.

 

[DjRay]

Sry da ich krank bin liege ich nur noch im Bett und kaum Zeit antworten zu geben.
Hier vorweg mal die Homepage:
Service4Life

So jetzt geht der Scroller nur das Problem liegt immernoch dabei das er bei
1920x1084 richtig ist wie ich ihn sehe, bei einer anderen Auflösung verschiebt sich irgendwie alles.

Hat jemand einen Tipp?

.Container {
    position: absolute;
    top: 193px;
    left: 575px;
    width: 336px;
    height: 280px;
    background-image:url(../Bilder/index_20.gif)
}
#Scroller-1 {
    position: absolute;
    overflow: hidden;
    width: 340px;
    height: 281px;
    left: 0px;
    top: 28px;
}
#Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #777;
}
.Scroller-Container {
    position: absolute;
    top: 7px;
    left: 1px;
    width: 339px;
}
.Scrollbar-Track {
    width: 12px;
    height: 210px;
    position: absolute;
    top: 193px;
    left: 910px;
    background-image:url(../slider2.gif);
    background-repeat:no-repeat;
}
.Scrollbar-Handle {
  position: absolute;
  top: 0px; left: 0px;
  width: 10px; height: 30px;
  background-image:url(../slider.gif);
  background-repeat:no-repeat;
}

Danke im vorraus
Ray

 

[Space Vampire]

Ja.
Den Tipp hat threadi dir schon gegeben:

Worüber Du dir eher Gedanken machen solltest während Viewports die kleiner sind als deiner.

Du orientierst dich an Bildschirmauflösungen, anstatt an Viewports. das kann nur schief gehen.
Aber wenn du dich schon an Auflösungen orientierst, dann denke um.
1920 ist eine monströse Auflösung (Full-HD) und du sattelst das Pferd verkehrt herum auf!
Derzeit erstreckt sich das Kernspektrum der am häufigsten genutzen Bildschirmauflösungen immer noch von 1024x768 bishin zu deiner 1920x1084.
Das zwingt dir zwei mögliche Varianten der Gestaltung auf.

1. Such dir eine "Mindestauflösung" (z.B. width:950px; für 1024x768 ) aus und gestalte deine Inhalte in einem statischen Außengerüst, das niemals kleiner wird, als diese von dir gesetzte Mindestanforderung.
Dadurch wird alles, was sich innerhalb dieser starren Grenze befindet, an seinem Platz gehalten.
Bei größeren Viewports musst du dich dann halt damit abfinden, dass du rechts und links 'ne Menge leeren raum hast.

2. Gestalte deine Website flexibel mit relativen Angaben, und gruppiere die Elemente des Layouts so, dass sie von den Gruppenelementen (z.B. Kopfgruppe, Menü-/Inhaltsgruppe, Fußgruppe, zusammengehalten von einem flexiblen und umfassenden Wrapper) während der Größenanpassung an ihrem relativen Platz gehalten werden.

Letzteres ist die wünschenswertere Variante.

Im Kern meiner Aussage wäre es allerdings schon ein großer Fortschritt, wenn du die Mindestanforderung deines Viewportes bei der Entwicklung weit nach unten korrigierst!

 

[Nikita]

ok also zu deinem quelltext sage ich jetzt mal nichts aber das Problem was du da beschreibst, kommt auch bei der richtigen auflösung vor dazu musst du einfach mal nur FF oder IE nicht im Vollbildmodus öffnen und dir die seite anschauen, denn dass dort nichts sitzt wie es soll liegt definitiv mit an deinen vielen positionierungen du solltest am besten nochmal schritt für schritt alles durchgehen und wegstreichen was unnötig ist denn wenn du jetzt am anfang vom aufbau der seite schon solche Probleme hast kann das nich viel besser werden wenn da noch mehr Quellcode von dir hin zu kommt.

 

[Wustersoss]

Kann Nikita da nur Recht geben.
Schau dir mal die nachfolgende Seite an und überlege dir wie dein Grundgerüst aussehen soll. Du findest dort ja einige Beispiele inklusive Code wie man das umsetzen kann. Wenn du dann noch Probleme hast kannst ja hier wieder nachfragen.
intensivstation :: CSS Templates