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

Bis nach ganz unten...

A

alexander912

Neues Mitglied
Heyho, folgende Frage:
Ich habe in meiner Seite eine Tabelle die Zentriert ist und direkt am oberen Rand anfängt. Diese ist 800px breit und hat eine unbestimmte Länge.
Ich möchte jetzt das die unterste Reihe, die nur als Hintergrund ein Bild hat, sich immer bis zum unteren Bildschirm Rand erstreckt.
Heißt diese letzte Reihe müsste sich immer dynamisch an die Rest größe anpassen.
Bsp. Tabelle ist jetzt 900px hoch und es ist bis zum Unteren Rand noch 180px. Dann soll die letzte Zeile zu ihrer Größe noch die 180px hinzuaddieren. Hintergrund ist einfach nur der, das die letzte Zeile das Designe entsprechend bis zum Boden weiter führen soll.
Habs schon probiert und die höhe der letzten Zeile auf 100% gestellt. Ging nicht wirklich ;-)
Funktioniert das überhaupt mit HTML oder muss man da schon JS oder ähnliches für anwenden ?

Danke schonmal für eure Hilfe !
Gruß Alex
 
Werbung:
Mit HTML geht sowas garnicht, denn HTML ist nicht für das Layout zuständig. CSS ist für das Layout zuständig und so wie ich das interpretiere, benutzt du Tabellen für das Layout. Wenn du jetzt noch weißt, was ich im ersten Satz geschrieben habe, weißt du auch schon, wo der Fehler liegt. Für genauere Hilfe brauchen wir einen Link zur Seite.
 
Heyho Thor.. danke für deine Antwort...
logisch mein enkfehler wars HTML zu schreiben und es nicht mit CSS zu probieren ;-) Werds erstmal mit CSS probieren.
 
Werbung:
So hab jetzt ein wenig rumprobiert und hab auch mal folgende Möglichkeit ausprobiert.
HTML: 
<td colspan="8" align="left" valign="top" background="elements/bgbody.jpg" style="height:100%;">
Jedoch funktioniert die möglichkeit nicht. Leider finde ich immoment keinen Ansatz an dem ich mich Orientieren könnte. Kannste mir nen kleinen Hinweis geben in welche richtung ich bei CSS weiterarbeiten muss damits funktioniert ?!

Schonmal danke !
Gruß Alex
 
Als erstes müsste ich wissen, ob deine Tabelle wirklich tabellarische Daten enthält.

Wenn das nicht der Fall ist, entferne die Tabelle.
 
Hier ist mal der Body Quellcode: (ist nicht so ganz aufgeräumt)
HTML: 
<body link="#990000" vlink="#993300" class="MenuBarHorizontal">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="50" colspan="8" align="center" background="elements/bgbody.jpg"><table width="700" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="350" align="left"><h4><a href="http://www.myspace.com/dynachord"><font color="#CCCCCC">MySpace.com</font></a></h4></td>
        <td width="350" align="right"><h4>Impressum</h4></td>
      </tr>
    </table></td>
  </tr>
  <tr height="50">
  <td height="150" colspan="8" align="right" valign="bottom" background="elements/dynachordheader.jpg"><h1>www.dynachord.com</h1></td>
  </tr>
  <tr>
    <td height="20" align="center"background="elements/bgbody.jpg">
        <table width="799" border="0" cellspacing="0" cellpadding="0" height="30">
              <tr>
            <td width="199" align="center" valign="middle"><ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a href="#">Update</a>
                <ul>
                  <li><a href="update10.html" target="body" class="MenuBarItemSubmenu">2010</a></li>
                  <li><a href="update09.html" target="body" class="MenuBarItemSubmenu">2009</a></li>
                </ul>
              </li>
            </ul>
            </td>
            <td width="200" align="center" valign="middle" background="elements/menubg.png"><ul id="MenuBar2" class="MenuBarHorizontal">
              <li><a class="MenuBarItemSubmenu" href="#">Media</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">Images</a>
                    <ul>
                        <li><a href="#">Pogo 11.12.2009</a></li>
                        <li><a href="#">Abschlussfeier 09</a></li>
                        <li><a href="#">Projektwoche 09</a></li>
                    </ul>
                  </li>
                  <li><a href="#" class="MenuBarItemSubmenu">Videos</a>
                    <ul>
                      <li><a href="#">Pogo 11.12.2009</a></li>
                    </ul>
                  </li>
                  <li><a href="music.html" target="body">Music</a></li>
                </ul>
              </li>
            </ul>
          </td>
            <td width="200" align="center" valign="middle" background="elements/menubg.png">
            <ul id="MenuBar3" class="MenuBarHorizontal">
              <li><a class="MenuBarItemSubmenu" href="#">Concerts</a>
                <ul>
                  <li><a href="#">2010</a></li>
                  <li><a href="#">2009</a></li>
                </ul>
              </li>
            </ul>
          </td>
            <td width="200" align="center" valign="middle" background="elements/menubg.png">
                <ul id="MenuBar4" class="MenuBarHorizontal">
                    <li><a class="MenuBarItemSubmenu" href="#">About</a>
                        <ul>
                            <li><a href="about-marc.html" target="body">Marc</a></li>
                            <li><a href="about-leon.html" target="body">Leon</a></li>
                            <li><a href="about-simon.html" target="body">Simon</a></li>
                            <li><a href="about-alex.html" target="body">Alex</a></li>
                        </ul>
                      </li>
                  </ul>
            </td>
                </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td height="550" colspan="8" align="center" valign="top" background="elements/bgbody.jpg">
        <iframe height="550px" width="795px" frameborder="0" name="body" src="top.html" style="border-bottom:#CCC solid thin"> 
        </iframe>    
    </td>
  </tr>
  <tr>
    <td colspan="8" align="left" valign="top" background="elements/bgbody.jpg" style="height:100%;">
    <font size="-2">Diese     Seite ist für den Mozilla Firefox ausgelegt. Auflösung 1280x1024</font>
    </td>
  </tr>
</table>
Und einmal zum Entwurf:
Dynachord - Progressiv Metal Band - Cologne
Beim Entwurf sieht man auch sehr eindeutig das am unteren Rand, das BG Bild nicht bis unten hin reicht.

Danke nochmals für die hilfe!

Gruß Alex
 
Werbung:
Wie vermutet ist die Tabelle dort völlig fehl am Platz denn du hast keine tabellarischen Daten.

Fang damit an, die Tabelle zu entfernen erst dann macht es Sinn, sich weiter mit CSS zu beschäftigen.
 
OKay danke dir für den Hinweis. Werd mich die Nacht mal damit auseinander setzen.

Nachtrag:
Hab jetzt 2Versionen. Einmal mit und einmal ohne Tabelle.
Mir kam dabei die Idee ob man nicht einfach das BG Bild als BG Bild im Body festlegen könnte und das dann einfach mittig zentriert.
Ist mit CSS auch kein Problem:
HTML: 
style="background-image:url(elements/bgbody.jpg); background-position:center; background-attachment:fixed; background-repeat:repeat-y;"
In DW selbst wird es einwandfrei angezeigt. Im Mozilla und IE7 und 8 jedoch nicht. Da sieht es aus wie vorher.
Wo liegt der fehler ?

Nachtrag:
Funktioniert nun. Der Code funktioniert so, hatte nur ne kleinigkeit übersehen.
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben