Website - alles verschoben

katschipatschi · 27.09.2010

Hallo Leute,

ich bin blutiger html-anfänger ohne tiefergehende Kenntnisse. Ich habe eine Seite zusammengebaut mit Tabellen, ja ich weiß diese Art ist veraltet, aber habs immer so gemacht, hat auch gut funktioniert nur jetzt habe ich ein Problem.

Sobald der Bildschirm kleiner ist, als die Website die ich gestalte habe ist alles verschoben. Das heißt der Text ist irgendwo, aber nur nicht da wo er sein sollte

Es wäre super wenn ihr euch mal den code ankucken könntet. Vielleicht kommt jemand auf eine Lösung. Aber Achtung - ich glaube für Profis könnte der Code ziemlich schlimm aussehen

HTML:

</head>
<title>Gästehaus</title>

<body background="background/background.jpg" center center>

<table border="0" width="85%" height="100%">
    <tr>
        <td align="center" width="100%" height="100%">
        <table border="0" width="93%" height="751"style="background-repeat: no-repeat;">
            <tr>
                <td valign="top" background="background/indexhome.png" style="background-repeat: no-repeat;" width="899" height="748%">
                <table border="0" width="100%" height="70">
                    <tr>
                        <td valign="bottom">&nbsp;<table style="float:left;" width="396">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
                        <table style="float:left;" width="55">
  <tr>
    <td>
    <p align="left"><font face="Arial" color="#FFFFFF" style="font-size: 11pt">
    <a href="index.htm" style="background-repeat: no-repeat;" style="text-decoration: none"style="background-repeat: no-repeat;"><font color="#FFFFFF">Home</font></a></font></td>
  </tr>
</table>
                        <table style="float:left;" width="78">
  <tr>
    <td>
    <p align="left"><font face="Arial" color="#FFFFFF">
    <span style="font-size: 11pt">
    <a href="house.htm" style="text-decoration: none"style="background-repeat: no-repeat;"><font color="#FFFFFF">das Haus</font></a></span></font></td>
  </tr>
</table>
                        <table style="float:left;" width="85">
  <tr>
    <td>
    <p align="left"><font face="Arial" style="font-size: 11pt" color="#FFFFFF">
    <a href="aktiv.htm" style="text-decoration: none"style="background-repeat: no-repeat;"><font color="#FFFFFF">Aktivitäten</font></a></font></td>
  </tr>
</table>
                        <table style="float:left;" width="89">
  <tr>
    <td>
    <p align="left"><span style="font-size: 11pt">
    <font face="Arial" color="#FFFFFF">
    <a style="text-decoration: none"style="background-repeat: no-repeat;" href="guestbook.htm"><font color="#FFFFFF">Guestbook</font></a></font></span></td>
  </tr>
</table>
                        <table style="float:left;" width="71">
  <tr>
    <td>
    <p align="left"><span style="font-size: 11pt">
    <font face="Arial" color="#FFFFFF">
    <a href="anfrage.htm" style="text-decoration: none"style="background-repeat: no-repeat;"><font color="#FFFFFF">Anfrage</font></a></font></span></td>
  </tr>
</table>
                        <table style="float:left;" width="60">
  <tr>
    <td>
    <p align="left"><span style="font-size: 11pt">
    <font face="Arial" color="#FFFFFF">
    <a href="preise.htm" style="text-decoration: none"style="background-repeat: no-repeat;"><font color="#FFFFFF">Preise</font></a></font></span></td>
  </tr>
</table>
                        <table style="float:left;" width="39">
  <tr>
    <td>
    <p align="left"><font face="Arial" style="font-size: 11pt" color="#FFFFFF">
    <a href="lage.htm" style="background-repeat: no-repeat;"style="text-decoration: none"><font color="#FFFFFF">Lage</font></a></font></td>
  </tr>
</table>
                        </td>
                    </tr>
                </table>
                
        
                </td>
            
            </tr>
        </table>
        <table border="0" width="97%" height="19"style="background-repeat: no-repeat;">
            <tr>
                <td width="932">
                <table style="float:left;" width="819">
  <tr>
    <td align="right">
    <p align="left">&nbsp;</td>
  </tr>
</table>
                <table style="float:left;" width="57">
  <tr>
    <td align="right">
    <p align="left"><font face="Arial" style="font-size: 7pt" color="#FFFFFF">
    <a href="kontakt.htm" style="text-decoration: none"style="background-repeat: no-repeat;"><font color="#FFFFFF">Kontakt</font></a></font></td>
  </tr>
</table>
                <table style="float:left;" width="40">
  <tr>
    <td align="right">
    <p align="left"><font face="Arial" style="font-size: 7pt" color="#FFFFFF">
    <a href="anfrage.htm" style="text-decoration: none"><font color="#FFFFFF">Anfrage</font></a></font></td>
  </tr>
</table>
                </td>
            </tr>
        </table>
        </td>
    </tr>
</table>

<script type="text/javascript" src="http://view.binlayer.com/ad-12085.js"></script></body>

</html>

fexx · 27.09.2010

AW: Website - alles verschoben

du solltest erstmal html und css code trennen. dann hab ich gesehen, dass einige tags nicht geschlossen sind. generell hast du ein extremes tag chaos drin.

du solltest dir vielleicht mal die seiten anschauen

HTML lernen und die eigene Homepage erstellen - HTML Kurs / Seminar
Startseite - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
CSS 4 You - The Finest in Stylesheets

alexanderhey · 27.09.2010

AW: Website - alles verschoben

Hi.

Was mir komisch aufstößt ist das hier:
...background/background.jpg" center center - was soll das center center machen?

Was auch immer sehr schick ist der W3C-Validator:
The W3C Markup Validation Service

Gruß Alex

esupanetz · 27.09.2010

AW: Website - alles verschoben

hi katschipatschi,

ich hab mir den code nur mal kurz angeschaut - du öffnest innerhalb der ersten 13 Zeilen 4 Tabellen, die von den Größenangaben sicher nicht zusammenpassen (die este mit 85% der Breite, die 2. mit 9%, die dritte mit einem fixen Wert von 899 und die 4. mit einem float.
Wär ich ein Browser wär ich so verwirrt, dass ich nix anzeigen würde ........

BITTE schmeiß die Tables weg und lern mit CSS umzugehen, das ist am Anfang zwar etwas anstrengend aber im Endeffekt die zielführendere Methode.

lG
Eva

Pixeltherapeutin · 27.09.2010

AW: Website - alles verschoben

Guten Morgen,
da kann ich den anderen nur zustimmen! Da ist noch viel zu ändern!

Nach einem Blick auf die Screenshots Deines zweiten Beitrages, ist noch zu sagen, dass Du die Größenangaben in Prozent machst, die beziehen sich ja auf das Browserfenster.
Also bei kleinerem Browserfenster, wird die Tabelle ja auch kleiner...
also gibt es für den Text einen Zeilenumbruch....
und dann sieht das halt durcheinander aus ...

Schau Dir mal ein paar Tuts über CSS an, die Mühe wird sich lohnen!

MFG Pixeltherapeutin

katschipatschi · 27.09.2010

AW: Website - alles verschoben

@pixletherapeutin: kann man denn irgendetwas gegen den Zeilenumbruch unternehmen? Ich versteh nicht ganz warum es wenn ich das Browserfenster kleiner mache, dass es mir dann alles verschiebt.
Bei meinen anderen Websiten wird es auch nicht verschobene sondern mann muss dann einfach mit dem scrollbalken vom firefox/internetexpl. hinscrollen.

ich möchte mir auf jeden fall css lernen, aber leider habe ich nicht mehr so viel zeit

ich muss das also jetzt mit den tabellen irgendwie hinbekommen.

vielen dank für eure mithilfe.

lg

Pixeltherapeutin · 27.09.2010

AW: Website - alles verschoben

Du könntest entweder die Breite in Pixeln anstatt in Prozent angeben, dann hast Du eine starre Tabelle. Oder wenn du gar keine Breite angibst, dann passt der Browser die Breite automatisch an den Inhalt an.

Aber ganz wichtig wäre erst mal die Tags zu schließen und so...
Zeig doch noch mal Deinen überarbeiteten Quellcode, dann schaue ich gerne noch mal drüber, um Dir zu helfen. Nur jetzt fehlt mir da grade ein bisl die Zeit, da alles aufzuräumen

edit:
Wegen dem Verschieben bei flexiblen Tabellen:

Wenn Dein Browserfenster z. B. 800px breit ist und die Tabelle eine Breite von 100% hat,
dann ist die Tabelle auch 800px breit.

Wenn Dein Browserfenster z. B. 400px breit ist (weil Du es verkleinert hast) und die Tabelle eine Breite von 100% hat, dann ist die Tabelle auch 400px breit.

Wenn Dein Browserfenster z. B. 800px breit ist und die Tabelle eine Breite von 50% hat, dann ist die Tabelle 400px breit. (50% von 800px sind 400px)

Die Prozentangabe bezieht sich immer auf die Größe des Browserfensters.
Aber Dein Text verändert sich ja nicht, und wird dadurch, dass das Feld zu klein ist, dann mittels Zeilenumbruch angepasst.

Ich hoffe, dass ich mich verständlich ausgedrückt habe

fexx · 27.09.2010

AW: Website - alles verschoben

mal eine frage ... bekommst du dafür eine gegenleistung?

katschipatschi · 27.09.2010

AW: Website - alles verschoben

@pixelart: danke für deine Hilfe das ist nett, muss das heute am abend noch einmal überarbeiten, dann poste ich es erneut.

lg p