• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Tabellen-Layout automatisch erweitern - oder komplett neuer Code?

Status
Für weitere Antworten geschlossen.
S

Stift

Neues Mitglied
Hi,
bin in Sachen HTML-Programmierung noch relativer Neuling, hab bisher nur fertige Templates bearbeitet und zu Homepages gestaltet, will nun aber selbst mal ein eigenes Template erstellen; hab auch schon Grafik und alles fertig, den Code allerdings mit ImageReady erstellt. Es handelt sich also um eine Tabellenbasierte Seite, die ja angeblich nicht so der Hit sein soll..?
Mir persönlich wärs erstmal egal, wie die Seite aufgebaut ist, solange sie funktioniert, wie ich will. Das Problem der ganzen Sache ist bisher, dass das gesamte Layout an irgendwelchen Stellen zwischen den Spalten und Zeilen gestreckt wird, sobald der Text zu lang wird. Ich will aber nur, dass das Layout nach unten erweitert wird, und nicht zwischendrin.

Erstmal der Link zur Seite: Dirtindex_kl_html

Und nun der (wohl umständliche) Quellcode:

Code: 
<html>
<head>
<title>Dirtindex_kl_html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">


function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        home_button_over = newImage("Bilder/home_button-over.jpg");
        home_button_down = newImage("Bilder/home_button-down.jpg");
        media_button_over = newImage("Bilder/media_button-over.jpg");
        media_button_down = newImage("Bilder/media_button-down.jpg");
        events_button_over = newImage("Bilder/events_button-over.jpg");
        events_button_down = newImage("Bilder/events_button-down.jpg");
        stuff_button_over = newImage("Bilder/stuff_button-over.jpg");
        stuff_button_down = newImage("Bilder/stuff_button-down.jpg");
        forum_button_over = newImage("Bilder/forum_button-over.jpg");
        forum_button_down = newImage("Bilder/forum_button-down.jpg");
        intern_button_over = newImage("Bilder/intern_button-over.jpg");
        intern_button_down = newImage("Bilder/intern_button-down.jpg");
        preloadFlag = true;
    }
}

</script>

</head>
<body bgcolor="000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">

<table id="Tabelle_01" width="1025" height="820" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2">
            <img src="Bilder/nav_li.jpg" width="164" height="133" alt=""></td>
        <td colspan="4">
            <img src="Bilder/nav_ob.jpg" width="860" height="17" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="Bilder/nav_ob-04.jpg" width="33" height="133" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/news.jpg" width="169" height="118" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="Bilder/nav_ob-06.jpg" width="658" height="133" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="116" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <a href="index.html"
                onmouseover="changeImages('home_button', 'Bilder/home_button-over.jpg'); return true;"
                onmouseout="changeImages('home_button', 'Bilder/home_button.jpg'); return true;"
                onmousedown="changeImages('home_button', 'Bilder/home_button-down.jpg'); return true;"
                onmouseup="changeImages('home_button', 'Bilder/home_button-over.jpg'); return true;">
                <img name="home_button" src="Bilder/home_button.jpg" width="164" height="65" border="0" alt=""></a></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_ob-10.jpg" width="169" height="15" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="12">
            <table id="Tabelle_02" width="845" height="669" border="0" cellpadding="5" cellspacing="0">
                <tr>
                    <td width="845" height="669" valign="top" bgcolor="#FFFFFF">Inhalt</td>
              </tr>
            </table></td>
        <td rowspan="12">
            <img src="Bilder/leiste_re.jpg" width="15" height="669" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="48" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_li-12.jpg" width="164" height="8" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="index.html"
                onmouseover="changeImages('media_button', 'Bilder/media_button-over.jpg'); return true;"
                onmouseout="changeImages('media_button', 'Bilder/media_button.jpg'); return true;"
                onmousedown="changeImages('media_button', 'Bilder/media_button-down.jpg'); return true;"
                onmouseup="changeImages('media_button', 'Bilder/media_button-over.jpg'); return true;">
                <img name="media_button" src="Bilder/media_button.jpg" width="164" height="65" border="0" alt=""></a></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_li-16.jpg" width="164" height="8" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="index.html"
                onmouseover="changeImages('events_button', 'Bilder/events_button-over.jpg'); return true;"
                onmouseout="changeImages('events_button', 'Bilder/events_button.jpg'); return true;"
                onmousedown="changeImages('events_button', 'Bilder/events_button-down.jpg'); return true;"
                onmouseup="changeImages('events_button', 'Bilder/events_button-over.jpg'); return true;">
                <img name="events_button" src="Bilder/events_button.jpg" width="164" height="65" border="0" alt=""></a></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_li-20.jpg" width="164" height="8" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="index.html"
                onmouseover="changeImages('stuff_button', 'Bilder/stuff_button-over.jpg'); return true;"
                onmouseout="changeImages('stuff_button', 'Bilder/stuff_button.jpg'); return true;"
                onmousedown="changeImages('stuff_button', 'Bilder/stuff_button-down.jpg'); return true;"
                onmouseup="changeImages('stuff_button', 'Bilder/stuff_button-over.jpg'); return true;">
                <img name="stuff_button" src="Bilder/stuff_button.jpg" width="164" height="65" border="0" alt=""></a></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_li-24.jpg" width="164" height="8" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="index.html"
                onmouseover="changeImages('forum_button', 'Bilder/forum_button-over.jpg'); return true;"
                onmouseout="changeImages('forum_button', 'Bilder/forum_button.jpg'); return true;"
                onmousedown="changeImages('forum_button', 'Bilder/forum_button-down.jpg'); return true;"
                onmouseup="changeImages('forum_button', 'Bilder/forum_button-over.jpg'); return true;">
                <img name="forum_button" src="Bilder/forum_button.jpg" width="164" height="65" border="0" alt=""></a></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_li-28.jpg" width="164" height="8" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="index.html"
                onmouseover="changeImages('intern_button', 'Bilder/intern_button-over.jpg'); return true;"
                onmouseout="changeImages('intern_button', 'Bilder/intern_button.jpg'); return true;"
                onmousedown="changeImages('intern_button', 'Bilder/intern_button-down.jpg'); return true;"
                onmouseup="changeImages('intern_button', 'Bilder/intern_button-over.jpg'); return true;">
                <img name="intern_button" src="Bilder/intern_button.jpg" width="164" height="65" border="0" alt=""></a></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/nav_li-32.jpg" width="164" height="256" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="256" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/spacer.gif" width="164" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="169" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="643" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="15" height="1" alt=""></td>
        <td></td>
    </tr>
</table>

</body>
</html>

Danke, Gruß Stephan
 
Fang erst gar nicht mit Tabellen-Source an, das verwirrt einen nur. Solange du noch am Lernen bist, mit DIV-Layern richtig umzugehen, empfehele ich dir weiterhin fertige Layouts zu benutzen und diese mal zu cversuchen zu editieren.

Zu deiner Frage "Layout erweitern". Mit DIVs geht das automatisch :razz:. Brauchst einfach ein paar relative Angaben mit %-Werten oder fixe Angaben per px und dann wird das schon.
 
Tjoa ich kann keine Fehler erkennen.

Weder im IE noch im FF oder in Opera.
Allerdings finde ich es immer bescheiden fremde Layouts zu editieren. Ich finds eher schwerer als leichter. :D naja... eigene Meinung! ;)
 
Hi,
@ Körnerbrötchen: Jo, so wie das jetzt dargestellt ist, sind auch keine Fehler zu erkennen, da im Feld für den Inhalt nix drin steht. Sobald der Text darin zu lang wird, streckt sich alles und wird unansehnlich.

@ Tuturios: Danke, werd mir mal paar Tutorials und Übungen für Div-Layer anschaun..


Gruß Steff
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben