Webseite auf Auflösungen abstimmen!

[Sunny C.]

Hallo zusammen,

ich habe da ein großes Problem.
Meine Webseite wird extrem verzehrt in einer Auflösung von 800x600 dargestellt.
Da ich in einer Auflösung von 1280x1024 arbeite ist mir das nicht aufgefallen!
Als ich mich an meinen Testrechner setzte und die Seite aufrief mit einer Auflösung 800x600, bekam ich erst einen Schlag... was ist denn da falsch gelaufen?

800x600


1280x1024


Mit sowas kenne ich mich garnicht aus! Ist das denn zu beheben? Oder wird das immer so bleiben müssen?

[mawenzi]

... entweder man lässt in der Gestaltung so viel Platz, dass eine flexibele Tabelle bis auf 800px zusammengeschoben werden kann ...
... oder hält sich bei "Platzausreizung" an den ungeschriebenen Standard von 1024px fixer Tabellenbreite ...
... dann wird die Tabelle bei Auflösung von 800px Breite zwar nicht mehr gestaucht ... muss aber in der Breite gescrollt werden ...
... doch das müssen User mit dieser Bildschirmauflösung halt in Kauf nehmen ...
... nach meine Erfahrung sind das ohnehin "nur" User aus Osteuropa oder es sind Bots ...

[Sunny C.]

Das Problem ist, das die Seite nur auf einer Auflösung von: 1280x1024 korreckt dargestellt wird.
Selbst bei 1024x800 ist diese verschoben!

Ich habe fast alle Tabellen mit einer Breite von 100% gesetzt!

Hier mal die home.html:

Code: [Select]

{header}
<div id="mainarea">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="185" style="padding: 4px; padding-top: 4px;padding-right: 1ex;" valign="top"><div id="leftbarHeader" style="padding-top: 5px; width: 185px;">
          <div class="tborder" style="margin-bottom: 2px;">
            <div class="titlebg" style="padding: 4px; font-weight: bold;"> User Panel </div>
            <div class="windowbg" style="padding:4px;"> {user_box}</div>
          </div>
        </div>
        <div id="leftbarHeader" style="padding-top: 5px; width: 185px;">
        {if pm_show} {ifnot user_pm_banned}
          <div class="tborder" style="margin-bottom: 2px;">
            <div class="titlebg" style="padding: 4px; font-weight: bold;">Private Nachrichten</div>
            <div class="windowbg" style="padding:4px;">&raquo; {pm_inbox} ({pm_inbox_total})<br />
              &raquo; {pm_sentbox} ({pm_sentbox_total})<br />
              &raquo; {pm_outbox} ({pm_outbox_total})<br />
              &raquo; {pm_newpm}<br />
              <br />
              {pm}
              </div>
          </div>
        </div>
        {endifnot user_pm_banned}     
              {endif pm_show}
        <div id="leftbarHeader" style="padding-top: 5px; width: 185px;">
          <div class="tborder" style="margin-bottom: 2px;">
            <div class="titlebg" style="padding: 4px; font-weight: bold;">Statistik</div>
            <div class="windowbg" style="padding:4px;">
              <table width="100%" border="0">
                <tr>
                  <td>Besucher</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>Online insgesamt:</td>
                  <td><strong>{num_total_online}</strong></td>
                </tr>
                <tr>
                  <td>davon registrierte</td>
                  <td><strong>{num_registered_online}</strong></td>
                </tr>
                <tr>
                  <td>und G&auml;ste</td>
                  <td><strong>{num_guests_online}</strong></td>
                </tr>
                <tr>
                  <td colspan="2">{user_last_action_box}<br />
                    Wir haben genau<strong> {total_images}</strong> Bilder in <strong>{total_categories}</strong> Kategorien
                    </p></td>
                </tr>
              </table>
            </div>
          </div>
        </div></td>
      <td width="100%" align="left" valign="top" style="padding-top: 10px; padding-bottom: 10px;"><table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-layout: fixed;">
          <tr>
            <td valign="top"><div class="tborder" style="margin-bottom: 2px;">
                <div style="padding: 3px 6px 3px 6px;" class="titlebg"> Herzlich willkommen... </div>
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="50%" height="154" background="{template_url}/images/uber/startseite_01.png" ><div align="right"> [ <a href="#" onmouseover="Tip('Du kannst 3 Fotos deiner Wahl und ein Video von dir hochladen!');" onmouseout="UnTip()" target="_blank" border="0">Fotos hochladen</a> ]<br />
                        [ <a href="#" onmouseover="Tip('Du hast ein eigenes Profil was du den anderen Usern zeigen kannst! Du hast etliche M&ouml;glichkeiten in deinem Profil Kontaktm&ouml;glichkeiten anzugeben und kannst dort alles wichtige verwalten!');" onmouseout="UnTip()" target="_blank" border="0">Eigenes Profil</a> ]<br />
                        [ <a href="#" onmouseover="Tip('Es gibt einen Music Player der dich auf der gesamten Seite begleitet. Du hast eine Auswahl von 10 Liedern die du dir anh&ouml;ren kannst. Nehme am Voting teil und bestimme mit, welche Lider in der Playlist sollen und welche wieder raus sollen.');" onmouseout="UnTip()" target="_blank" border="0">Music Player</a> ]<br />
                        [ <a href="#" onmouseover="Tip('Vote andere User und andere User Voten f&uuml;r dich. Die Vorteile sind ganz klar. Desto mehr Votes du selber hast desto mehr steht auf der Seite &uuml;ber dich und jeder sieht dein Profil auf anhieb. Dazu kannst du was gewinnen, wenn es Gewinn-Votes gibt, sobald die Werbeeinnahmen und Spenden es zulassen!');" onmouseout="UnTip()" target="_blank" border="0">Votings</a> ]<br />
                        [ <a href="#" onmouseover="Tip('Melde dich in unserem Forum an und schreibe mit anderen User &uuml;ber Gott und die Welt, &uuml;ber die Seite und nehme an Verbesserungsvorschl&auml;gen teil!');" onmouseout="UnTip()" target="_blank" border="0">Forum</a> ]<br />
                        [ <a href="#" onmouseover="Tip('Flirte mit anderen Usern. Du kannst anderen Usern mit einer Privat-Nachrichten Funktion schreiben so das andere User dies nicht mitbekommen.');" onmouseout="UnTip()" target="_blank" border="0">Flirten</a> ]<br />
                        [ <a href="#" onmouseover="Tip('Das war aber nicht alles. Dich werden noch viele Tolle Dinge auf der Seite erwarten.');" onmouseout="UnTip()" target="_blank" border="0">u.v.m</a> ]</div></td>
                    <td width="50%" height="154" background="{template_url}/images/uber/startseite_02.png">... auf <strong>{site_name}</strong>, der Community in der du sich auf Fotos mit anderen User messen kannst. Mit anderen User Flirten ist durch Privates Nachrichten schreiben und ein kompfortables Profil auch schnell und einfach m&ouml;glich. Viel Spa&szlig;!!</td>
                  </tr>
                </table>
              </div>
              <div class="tborder" style="margin-bottom: 2px;">
                <div style="padding: 3px 6px 3px 6px;" class="catbg"> <strong>News:</strong> {news_comment_headline} </div>
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top" class="windowbg2" style="padding: 4px;"><div style="_height: 1%;">
                        <div> {news_comments} </div>
                        <p style="text-align: right; margin-top: 1ex;"> <span class="smalltext"><strong>Geposted am:</strong> {news_comment_date}</span> </p>
                      </div></td>
                  </tr>
                </table>
              </div>
              <div class="tborder" style="margin-bottom: 2px;">
                <div style="padding: 3px 6px 3px 6px;" class="catbg">
                  <div align="center"><span class="pinktext">{lang_new_images}<br />
                    </span></div>
                </div>
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top" class="windowbg2" style="padding: 4px;"><div style="_height: 1%;">
                        <div>
                          <div align="center">{new_images}</div>
                        </div>
                      </div></td>
                  </tr>
                </table>
              </div>
              {if categories}
              <div class="tborder" style="margin-bottom: 2px;">
                <div style="padding: 3px 6px 3px 6px;" class="catbg"> {lang_categories} </div>
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top" class="windowbg2" style="padding: 4px;"><div style="_height: 1%;">
                        <div> {categories} </div>
                      </div></td>
                  </tr>
                </table>
              </div>
              {endif categories}<br />
              <div align="center">
                {if msg}{msg}{endif msg} </div>
              <div class="tborder" style="margin-bottom: 2px;">
                <table width="100%" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top" class="windowbg2" style="padding: 4px;"><div style="_height: 1%; overflow: auto;">
                        <div>
                          <table width="525" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td><div align="center">{category_dropdown_form}</div></td>
                              <td align="right">{setperpage_dropdown_form}</td>
                            </tr>
                          </table>
                        </div>
                      </div></td>
                  </tr>
                </table>
              </div></td>
          </tr>
        </table></td>
      <td style="padding: 4px; padding-top: 4px; padding-left: 1ex;" valign="top" align="right"><div style="width: 195px; text-align: left; padding-top: 5px;">
          <div class="tborder" style="margin-bottom: 2px;">
            <div class="titlebg" style="padding: 4px; font-weight: bold;">Speed- Letter</div>
            <div class="windowbg" style="padding:4px;">
              <div style="width: 100%;">
                <?php
include './random.php';
?>
              </div>
            </div>
          </div>
        </div>
        {if random_image}
        <div style="width: 195px; text-align: left; padding-top: 5px;">
          <div class="tborder" style="margin-bottom: 2px;">
            <div class="titlebg" style="padding: 4px; font-weight: bold;">{lang_random_image}</div>
            <div class="windowbg" style="padding:4px;">
              <div style="width: 100%;"> {random_image} </div>
            </div>
          </div>
        </div>
        {endif random_image} </td>
    </tr>
  </table>
</div>
{footer}

[mawenzi]

... und das nette an den div-Cotainern ist halt, dass sie bei Platzmangel übereinandergeschoben werden ...
... bei der Verwendung einer reinen Tabellenkostruktion wird zwar gestaucht ... aber nicht übereinandergeschoben ...
... die "Stauchgrenzen" lassen sich dann auch noch mit "spacer.gif" definieren ...
... doch das ist halt html-Coding aus den frühen Tagen des Webs ... aber funktioniert heute noch ...

[KurtW]

da musste dann halt ein gif mit einer Höhe von 1px und der min. Breite reinbauen....
Dann kann nichts mehr geschoben werden


Kurt

[Sunny C.]

Ich hab die rechte Navigation rausgenommen, jetzt läuft das auch! Die Rechte Seite ist auch nicht notwendig gewesen da diese generell nicht gefüllt sein wird!

[honda2000]

@mawenzi hat es dir erklärt
div-Container haben in der css-Angabe (z.b. leftbarHeader) absolute, feste Angaben

<div class="leftbarHeader" style="position: absolute; padding: 20px; float: left; width: 350px;">
   //Inhalt
</div>

da isses den Inhalten her vollkommen egal was "drin" ist, wenn nicht mehr Platz ist, wirds einfach "überlagert".

mit anderen Worten, wenn es nicht "verschoben" sein soll, müssen alle div´s, die eine Waagerechte bilden, zusammen 785 Pixel breit sein

oder
rechter und linker Container z.b. je 150Pixel, mitte 99%
dabei darf natürlich das Hederlogo, wieder nicht breiter als die angegebenen 785Pixel sein

selbes gilt für Auflösungen bei 1024Pixel, dort eben entsprechend maximale Breite: 955Pixel

[Sunny C.]

Aber ich habe ja auch geschrieben, dass ich die rechte rausgenommen habe und es allegmein etwas angepasst habe da die rechte seite nicht von nöten war!

Aber dennoch danke euch allen!

[honda2000]

ich hab das schon gelesen und verstanden
was ich dir erklären wollte, hatte zwar direkt mit deiner Frage, aber im Eigentlichen, mehr etwas mit den Div´s allgemein zu tun!
Sprich: das gilt nicht nur für ein (fast) Tabellenloses 4Images, sondern für alle DIV