Tabellenbasierte Homepage nach auflösung skalieren

z1000

Hallo,

hier mal kurz die Vorgeschichte :

Ein Kollege möchte gerne eine eigene Internetpräsenz für seinen nebenberuf. Um ein bisschen Werbung zu machen hat er sich mit einem Grafikdesigner zusammengesetzt und dementsprechend Flyer, Visitenkarten etc. erstellen lassen. Dieser Grafikdesigner hat ebenfalls auch das Design für die Homepage erstellt. Alles in Photoshop gemacht, und mir die .PSD files zukommen lassen.

Ich habe die .PSD mit Photoshop geöffet und die entsprechend benötigten bereiche "gesliced". In Dreamweaver importiert. Alles funktioniert wunderbar. Die Seite wird Korrekt dargestellt, die "gesliceden" bereiche lassen sich Problemlos mit einem Hyperlink versehen etc.

Nun zu meinem Problem :

Durch dieses "slicen" wird die Homepage Tabellenartig aufgebaut. Und überall in den Feldern sitzen eigentlich nur Bilder, welche dann im gesamtbild eine komplette Seite ergeben.

Mein Ziel ist es nun, dass die Seite, mit jeglicher auflösung auf jedem Monitor auf Volle Größe angezeigt wird.

Hier mal der Code :

HTML

<html>
<head>
<title>links</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (links.psd) -->
<table id="Tabelle_01" width="1225" height="769" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="24"><a href="index.html"><img src="Bilder/links_01.jpg" width="1224" height="215" alt=""></a></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="215" alt=""></td>
    </tr>
    <tr>
        <td colspan="24">
            <img src="Bilder/links_02.jpg" width="1224" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/links_03.jpg" width="166" height="55" alt=""></td>
        <td><a href="neuigkeiten.html"><img src="Bilder/links_04.jpg" width="136" height="55" alt=""></a></td>
        <td>
            <img src="Bilder/links_05.jpg" width="19" height="55" alt=""></td>
        <td colspan="2"><a href="bio.html"><img src="Bilder/links_06.jpg" width="157" height="55" alt=""></a></td>
        <td>
            <img src="Bilder/links_07.jpg" width="18" height="55" alt=""></td>
        <td colspan="3"><a href="leistungen.html"><img src="Bilder/links_08.jpg" width="120" height="55" alt=""></a></td>
        <td>
            <img src="Bilder/links_09.jpg" width="17" height="55" alt=""></td>
        <td colspan="2"><a href="di-noc.html"><img src="Bilder/links_10.jpg" width="124" height="55" alt=""></a></td>
        <td>
            <img src="Bilder/links_11.jpg" width="19" height="55" alt=""></td>
        <td><a href="galerie.html"><img src="Bilder/links_12.jpg" width="83" height="55" alt=""></a></td>
        <td>
            <img src="Bilder/links_13.jpg" width="19" height="55" alt=""></td>
        <td colspan="2" rowspan="2"><a href="referenzen.html"><img src="Bilder/links_14.jpg" width="123" height="57" alt=""></a></td>
        <td>
            <img src="Bilder/links_15.jpg" width="18" height="55" alt=""></td>
        <td><a href="kontakt.html"><img src="Bilder/links_16.jpg" width="86" height="55" alt=""></a></td>
        <td>
            <img src="Bilder/links_17.jpg" width="18" height="55" alt=""></td>
        <td colspan="2" rowspan="2"><a href="links.html"><img src="Bilder/links_18.jpg" width="67" height="57" alt=""></a></td>
        <td>
            <img src="Bilder/links_19.jpg" width="34" height="55" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="55" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="Bilder/links_20.jpg" width="878" height="2" alt=""></td>
        <td colspan="3">
            <img src="Bilder/links_21.jpg" width="122" height="2" alt=""></td>
        <td>
            <img src="Bilder/links_22.jpg" width="34" height="2" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td colspan="24">
            <img src="Bilder/links_23.jpg" width="1224" height="158" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="158" alt=""></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="2">
            <img src="Bilder/links_24.jpg" width="332" height="226" alt=""></td>
        <td colspan="3"><a href="http://www.xyz.de" target="_blank"><img src="Bilder/links_25.jpg" width="253" height="92" alt=""></a></td>
        <td colspan="16" rowspan="2">
            <img src="Bilder/links_26.jpg" width="639" height="226" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="92" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/links_27.jpg" width="253" height="134" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="134" alt=""></td>
    </tr>
    <tr>
        <td colspan="24">
            <img src="Bilder/links_28.jpg" width="1224" height="39" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="39" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="Bilder/links_29.jpg" width="41" height="72" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/links_30.jpg" width="125" height="58" alt=""></td>
        <td colspan="22">
            <img src="Bilder/links_31.jpg" width="1058" height="18" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="18" alt=""></td>
    </tr>
    <tr>
        <td colspan="7" rowspan="3">
            <img src="Bilder/links_32.jpg" width="444" height="54" alt=""></td>
        <td colspan="3"><a href="impressum.html"><img src="Bilder/links_33.jpg" width="85" height="31" alt=""></a></td>
        <td colspan="5" rowspan="3">
            <img src="Bilder/links_34.jpg" width="230" height="54" alt=""></td>
        <td colspan="5"><a href="http://www.xyz.de" target="_blank"><img src="Bilder/links_35.jpg" width="238" height="31" alt=""></a></td>
        <td colspan="2" rowspan="3">
            <img src="Bilder/links_36.jpg" width="61" height="54" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="Bilder/links_37.jpg" width="85" height="23" alt=""></td>
        <td colspan="5" rowspan="2">
            <img src="Bilder/links_38.jpg" width="238" height="23" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="9" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/links_39.jpg" width="125" height="14" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="41" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="125" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="136" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="146" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="89" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="17" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="62" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="62" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="83" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="47" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="76" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="40" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="34" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Alles anzeigen

Ich habe versucht in dieser Zeile : <table id="Tabelle_01" width="1225" height="769" border="0" cellpadding="0" cellspacing="0">
width und height auf 100% zu stellen, aber dann verschiebt sich das ganze, und sieht dementsprechend aus.

Gibt es eine Möglichkeit alles proportional zu skalieren, ohne dass sich die Seite "zersetzt" ?

MrMurphy

Hallo,

Zitat

Gibt es eine Möglichkeit alles proportional zu skalieren, ohne dass sich die Seite "zersetzt" ?

Ja. Allerdings ist deinem Beispielcode nicht viel zu entnehmen, um dir konkret helfen zu können. So fehlen unter anderem die Bilder. Am sinnvollsten wäre es, wenn du ein Online-Beispiel bereitstellen könntest.

Insgesamt solltest du auch überlegen, auf das Tabellenlayout zu verzichten. Wie soll die Darstellung zum Beispiel auf Smartphones im Hochformat sein? Bei einer proportionalen Verkleinerung dürfte da kaum noch etwas zu erkennen sein.

Gruss

MrMurphy

explanator

Kann mich MrMurphy nur anschliessen. Ohne Bilder ist da nichts zu machen. Wenn du noxh keinen Webspace hast, dann kannst du dich zum Beispiel bei bplaced.net anmelden und dort kostenlos deine Seite hochladen, oder bei einem anderen Free Webspace Hoster. Stelle uns anschliessend deinen Link zur Verfügung.

z1000

Wie gewünscht habe ich es mal auf nen webspace geladen...

EDIT : link entfernt

Habe nur mal die eine Seite (links.html) + die dazugehörigen Bilder hochgeladen...

Nimmt es mir nicht übel, aber firmenname etc. habe ich mal verwischt

explanator

So eine Seite macht man nicht mit Tabellenlayout.

Du brauchst dafür vom Grafiker lediglich das Bild vom Auto und den gekachelten Hintergrund sowie die geöffnete umgeklappte rote Ecke als Bild. Den Rest der Hintergründe kannst du heute bereits mit CSS3 erledigen. Also alle Farbverläufe und Schatten macht man mit CSS3 und nicht mehr mit Bildern.

Deine Seite teilst du in 4 Abschnite ein. Von Oben nach unten sind das Header, Navigation, Main und Footer.

Danach machst du die Einteilung innerhalb dieser Abschnitte.
Verwende Html für dein Gerüst und CSS zum Stylen.

Benutze nicht Dreamweaver sondern einen geeigneten Editor. Liste findest du hier: http://de.wikipedia.org/wiki/Liste_von_Texteditoren

Lerne die HTML.Elemente richtig zu verwenden. Liste der HTML-Elemente findest du hier: http://html5doctor.com/
Lerne mit CSS3 umzugehen. Übersicht siehe http://meiert.com/de/publications/indices/css-properties/ und Tutorial dazu unter http://webkompetenz.wikidot.com/html-handbuch:css

z1000

ok, dann werde ich das mal probieren...

die aufteilung in 4 abschnitte sollten über frames erfolgen ? oder über "<div>" ?

Bandit

Auf keinen Fall Frames!

z1000

alles klar danke

explanator

Keine Frames und keine Divs. Die Elemente heissen schon so. Warum mache ich mir denn die Mühe und verlinke schon zu den entsprechenden Beiträgen?
Überleg jetzt mal.

z1000

sorry, habe mich falsch ausgedrückt...

nutze die "sections" elemente... header, nav, main und footer.

bin gerade daran damit zu werkeln, bisher sieht es ganz ok aus.

habe noch kleine probleme beim gestalten, aber diese möchte ich hier erstmal noch nicht erfragen, sondern selbst ein wenig ausprobieren.

z1000

Komme leider nicht weiter. Die Grundstruktur sollte so in etwa aussehen...

Mein Problem ist es, dass ich Main_left und Main_right nicht auf eine Höhe bekomme sondern nur untereinander...

Dass sind die Grafiken die in die jeweiligen bereiche sollen :

Header :
Main left :
Main right :
Footer :

und in die Navigationsleiste wird nur aus schwarzem hintergrund und weißem Text.

Im gesamtbild könnte dass in etwas so aussehen...

Hat jemand Ideen wie ich das am besten umsetzen könnte ?

z1000

Hmm... Ok Komme gerade ein wenig weiter...

Nun klemmt es an einer stelle...

Kurz mal paar Screenshots...

So siehts im Editor aus... Da kann man gut die aufteilung sehen von Header, Nav, Main, Footer etc.

Und so ist die ansicht bei mir im Browser
Wie könnte ich Main_left und Main_right auf volle Größe bis hin zum Sticky-footer (hoffe so bezeichnet man festgenagelte Footer) ziehen.

Die Lösung für Background bei Main_right hätte ich schon falls inhalt mehr wird und man scrollen müsste. Dann mache ich beim background einfach : background-repeat:repeat-y; ist richtig oder ?

- - - Aktualisiert - - -

hm...

ich hatte es bisher mit min-height:x%; probiert. also mit verschiedenen prozentuellen zahlen, hat sich nie was verändert.

nun habe ich mal min-height:500px; probiert, siehe da, es bekommt eine mindestgröße. Wie bekomme ich nun die mindestgröße bis zum Footer ohne Pixel angaben machen zu müssen. Immerhin soll die Seite ja auf verschiedene Auflösung möglichst gleich angezeigt werden

auch angaben wie height:100%; oder height:auto !Important; haben leider nicht weitergeholfen.

@Mod/Admin : Kann der Threadtitel vielleicht angepasst werden ? Nun soll es ja nichts mehr mit "Tabellen" sein. Bsp. "Homepagelayout ; Seitenaufteilung"

Tags