AP Div Container reagiert nicht auf Fenster!

K

Kumaro

Mitglied
Hi Leute, ich habe ein kleines Problem. Also ich würde gerne (arbeite mit Dreamweaver) mit hilfe von Ap Div Containern einige sachen auf meiner page plaziere da man diesen sauber hin- und herschieben kann. Mein Problem ist jetzt nun das ich meine Seite zentriert habe..sie also immer in der Mitte des Fensters erscheint. Leider aber gilt dieses center anscheinend nicht für den div container da dieser immer an seinem platz bleibt...d.h. wenn ich das z.b. i-explorer fensgter jetzt größer oder kleiner ziehe rutscht der container von seinem platz und bleibt somit nicht da wo er sein soll wie zum beispiel tabellen.... Ich bin langsam schon am verzweifeln . irgendwie reagiert der nicht auf das fenster sondern steht immer fest an seiner position...ich wär euch echt Dankbar wenn ihr mir sagen könntet wie ich das beheben kann...
a lot of thx im vorraus.
 
Hi,

ohne Einblick in den HTML- und CSS-Code lässt sich hierzu nichts sagen; ein Link zur Seite würde auch schon genügen.

Klingt aber erstmal so, wie wenn das DIV vom linken oder rechten Fensterrand aus absolut positioniert wäre.

mfg Maik
 
Hi hier ist die Seite: link entfernt
Das Karteikartenmenü soll eigentlich an seiner Position bleiben...
 
Zuletzt bearbeitet:
Binde mal diesen Block:

Code: 
<div id="apDiv1">
  <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Home</li>
      <li class="TabbedPanelsTab" tabindex="0">Registerkarte 2</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent"><a href="a"><font color="#000000">aaa</font></a></div>
      <div class="TabbedPanelsContent">Inhalt 2</div>
    </div>
  </div>
</div>


in der entsprechenden Tabellenzelle ein, und entferne im Stylesheet die absoluten Positionsangaben für #apDiv1:

Code: 
#apDiv1 {
        /*position:absolute;*/
        /*left:386px;*/
        /*top:278px;*/
        width:590px;
        height:56px;
        z-index:1;
}


da diese von kaum einem Browser innerhalb eines Tabellengerüsts unterstützt werden.

left:386px und top:278px lassen sich dann durch eine margin-Dklaration ersetzen:

Code: 
margin-left:386px;
margin-top:278px;


wobei innerhalb der Tabellenzelle der obere Außenabstand definitiv zu hoch gewählt sein dürfte, und entsprechend zu verringern, wohlmöglich sogar auf null zu setzen ist.

Achja, wenn schon der <center>-Tag zum Einsatz kommen soll, dann aber nur innerhalb eines Dokumentkörpers <body> ... </body>, und nicht außerhalb dessen.

Ebenso wird beim Includen kein vollständiges HTML-Dokument in das Hauptdokument geladen, sondern nur das, was den Inhalt seines bodys bildet. Ich zähle da 4 weitere HTML-Grundgerüste, die sich in der Hauptseite befinden, und das ist in dieser Form falsch.

mfg Maik
 
Hi ich habe
Code: 
#apDiv1 {
        /*position:absolute;*/
        margin-left:386px;
        margin-top:278px;
        width:590px;
        height:56px;
        z-index:1;
}

mal genau so hinzugefügt. Dann dem div container die id gegeben
Code: 
<div id="apDiv1">
Aber leider ist es immer noch das selbe Problem : http://www.2ndrb.de/ga-town/index.php :( hab ich da irgendwas falsch gemacht? das interessiert den irgend wie gar nicht.... !

Ich hab aber gerade festgestellt wenn ich die positionierung auf STATIC setze dann bleibt es stehen egal wie groß das fenster ist doch jetzt erschiebt sich die seite nach unten und die navi steht über ihr.... jetzt lässt sie sich also nicht mehr AUF die seite legen :(
 
Kumaro hat gesagt.:
Hi ich habe
Code: 
#apDiv1 {
        /*position:absolute;*/
        margin-left:386px;
        margin-top:278px;
        width:590px;
        height:56px;
        z-index:1;
}

mal genau so hinzugefügt. Dann dem div container die id gegeben
Code: 
<div id="apDiv1">
Zum Vergrößern anklicken....
Wieso und welchem DIV hast du diese ID gegeben? Ein Div mit diesem ID-Bezeichner existiert doch schon in der Seite:

Code: 
<body bgcolor="#FFFFFF">
<!-- ImageReady Slices (Geschnittenes_Layout.psd) -->
<div id="#apDiv1">
  <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Registerkarte 1</li>

      <li class="TabbedPanelsTab" tabindex="0">Registerkarte 2</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Inhalt 1</div>
      <div class="TabbedPanelsContent">Inhalt 2</div>
    </div>
  </div>

</div>
...


Du sollst es blos in die entsprechende Tabellenzelle <td> verschieben / einsetzen, und den margin-top-Wert herabsetzen, denn innerhalb der Tabellenzelle dürfte der Wert ein wenig zu groß gesetzt sein.

mfg Maik
 
sorry nenn mich blöde aber ich raff irgendwie nicht wo ich was hinschieben soll?! Ich hav es in der css datei angepasst und das div hat eben , wie ja auch voher schon die id: apDiv1 .... das an sich geht irgendwie nicht... aber was meinst du mit der tabelle es ist doch in der tabelle eingefügt?.... sorry :(
 
Mein letzter Tipp vor'm Feierabend: Das "Tabellen-Layout" in den Papierkorb schieben, denn zum einen sind Tabellen als "Gestaltungswerkzeug" einer Website semantisch überhaupt nicht vorgesehen, sonderm um Daten tabellarisch auszuzeichnen / auszugeben, und zum anderen ist der Quellcode in dieser Form nicht valide, siehe [Invalid] Markup Validation of http://www.2ndrb.de/ga-town/index.php - W3C Markup Validator.

Stattdessen solltest du ein CSS-gestütztes (tabellenloses) Layout entwickeln, darin lässt sich dann das DIV auch wie gewünscht positionieren, was in einer Tabelle so nicht möglich ist, und reagiert dann auch auf die Skalierung der Fensterbreite.

Anleitungen und Beispiele für "CSS-Layouts" findest du beispielsweise auf diesen Seiten:

  1. The CSS and XHTML Lab | 456 Berea Street
  2. andreas kalt.de: Ein CSS-Layout erstellen
  3. barrierefrei.e-workers.de: Workshop - temp
  4. CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
  5. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
  6. intensivstation :: CSS Templates :: Templates
  7. ironmyers.com | CSS Layouts
  8. selfHTML: CSS-basierte Layouts
  9. Stichpunkt CSS: Layout ohne Tabellen
  10. stu nicholls | CSS PLaY | CSS layouts

Oder du frägst die Suchmaschine deines Vertrauens nach "CSS-Layouts".

mfg Maik
 
Hallo,

die Ursache für dieses Verhalten liegt an der fixierten Positionierung der Listenelemente.
Code: 
.TabbedPanelsTab {
    position: fixed;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
}
Fix positionierte Blöcke werden vollständig aus dem Elementfluss herausgelöst und richten sich am Viewport aus. Dein "Ap Div Container" hat da keine Wirkung.

Ansonsten schließe ich mich voll und ganz Maiks Meinung an.
 
Zuletzt bearbeitet:
Hi danke für eure antworten.
Nagut dann komm ich wohl nicht drum rum mich mal etwas intensiver mit css zu beschäftigen.
Einen schönen Tag euch noch ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück