Design dynamisch verlängern / design gesprengt

M

mcemsi

Member
27 April 2006
18
0
Hallo!!
Hab grad mal ein kleines Webdesign gebastelt.
Jetzt habe ich aber das Problem, dass wenn ich nach unten hin zu viel schreibe, links und rechts kleine weiße "balken" entstehen (wenn ich viel schreib werden sie auch zu großen weißen Balken :))
Jetzt wollte ich fragen was ich tun kann um das zu vermeiden.
Danke schonmal im Vorraus.

PS: ich mag keine inline-Frames
 
mcemsi schrieb:
Hallo!!
Hab grad mal ein kleines Webdesign gebastelt.
Jetzt habe ich aber das Problem, dass wenn ich nach unten hin zu viel schreibe, links und rechts kleine weiße "balken" entstehen (wenn ich viel schreib werden sie auch zu großen weißen Balken :))
Jetzt wollte ich fragen was ich tun kann um das zu vermeiden.
Danke schonmal im Vorraus.

PS: ich mag keine inline-Frames
Zum Vergrößern anklicken....

-> Tabellen
 
HTML: 
<table width="Breite der Tabelle*">
  <tr>
     <td>Hier steht dein Text</td>
  </tr>
</table>

Breite der Tabelle(Beispiel):
HTML: 
<table width="400">

Die Tabelle erweitert sich dann dynamisch nach unten.
 
Nun, vielleicht solltest du uns ein wenig von deinem Layout zeigen?

Bei konkretem Beispiel können wir evtl. besser helfen. Nur wir müssten schon sehen, wo was nicht passt...

:D

-Flori-
 
hier

Also: https://img471.imageshack.us/my.php?image=ttr9zo.jpg

hier ein bild des templates ich habe alle buttons einzeln gesliced
dann den Balken links und rechts neben dem Testfeld, und das testfeld selbst



hier mal der code:
HTML: 
<html>
<head>
<title>doener</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (doener.psd) -->
<table id="Tabelle_01" width="901" height="901" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="24">
            <img src="Bilder/doener_01.gif" width="900" height="111" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="111" alt=""></td>
    </tr>
    <tr>
        <td rowspan="16">
            <img src="Bilder/doener_02.gif" width="65" height="789" alt=""></td>
        <td rowspan="12">
            <img src="Bilder/doener_03.gif" width="18" height="704" alt=""></td>
        <td colspan="5" rowspan="2">
            <img src="Bilder/doener_04.gif" width="230" height="43" alt=""></td>
        <td colspan="9">
            <img src="Bilder/doener_05.gif" width="288" height="23" alt=""></td>
        <td colspan="6" rowspan="2">
            <img src="Bilder/doener_06.gif" width="219" height="43" alt=""></td>
        <td rowspan="12">
            <img src="Bilder/doener_07.gif" width="11" height="704" alt=""></td>
        <td rowspan="16">
            <img src="Bilder/doener_08.gif" width="69" height="789" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="Bilder/doener_09.gif" width="54" height="21" alt=""></td>
        <td colspan="5" rowspan="4">
            <img src="Bilder/doener_10.gif" width="178" height="121" alt=""></td>
        <td colspan="2">
            <img src="Bilder/doener_11.gif" width="56" height="20" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="Bilder/doener_12.gif" width="126" height="49" alt=""></td>
        <td colspan="2">
            <img src="Bilder/doener_13.gif" width="104" height="1" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/doener_14.gif" width="15" height="49" alt=""></td>
        <td colspan="3" rowspan="2">
            <img src="Bilder/doener_15.gif" width="145" height="49" alt=""></td>
        <td colspan="4" rowspan="2">
            <img src="Bilder/doener_16.gif" width="115" height="49" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/doener_17.gif" width="127" height="48" alt=""></td>
        <td>
            <img src="Bilder/doener_18.gif" width="31" height="48" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="48" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="2">
            <img src="Bilder/doener_19.gif" width="153" height="54" alt=""></td>
        <td colspan="3" rowspan="2">
            <img src="Bilder/doener_20.gif" width="131" height="54" alt=""></td>
        <td colspan="3" rowspan="2">
            <img src="Bilder/doener_21.gif" width="134" height="54" alt=""></td>
        <td colspan="5" rowspan="3">
            <img src="Bilder/doener_22.gif" width="141" height="55" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="52" alt=""></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="3">
            <img src="Bilder/doener_23.gif" width="178" height="11" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td colspan="7" rowspan="2">
            <img src="Bilder/doener_24.gif" width="284" height="9" alt=""></td>
        <td colspan="3" rowspan="2">
            <img src="Bilder/doener_25.gif" width="134" height="9" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="Bilder/doener_26.gif" width="141" height="8" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <img src="Bilder/doener_27.gif" width="8" height="549" alt=""></td>
        <td colspan="6" rowspan="2">
            <img src="Bilder/doener_28.gif" width="284" height="59" alt=""></td>
        <td colspan="3">
            <img src="Bilder/doener_29.gif" width="162" height="15" alt=""></td>
        <td colspan="7" rowspan="2">
            <img src="Bilder/doener_30.gif" width="274" height="59" alt=""></td>
        <td colspan="2" rowspan="4">
            <img src="Bilder/doener_31.gif" width="9" height="549" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/doener_32.gif" width="40" height="54" alt=""></td>
        <td>
            <img src="Bilder/doener_33.gif" width="79" height="44" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/doener_34.gif" width="43" height="54" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="44" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="Bilder/doener_35.gif" width="284" height="10" alt=""></td>
        <td>
            <img src="Bilder/doener_36.gif" width="79" height="10" alt=""></td>
        <td colspan="7">
            <img src="Bilder/doener_37.gif" width="274" height="10" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td colspan="15">
            <img src="Bilder/doener_38.gif" width="708" height="480" alt=""></td>
        <td>
            <img src="Bilder/doener_39.gif" width="12" height="480" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="480" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/doener_40.gif" width="26" height="22" alt=""></td>
        <td colspan="15">
            <img src="Bilder/doener_41.gif" width="708" height="22" alt=""></td>
        <td colspan="4">
            <img src="Bilder/doener_42.gif" width="32" height="22" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/doener_43.gif" width="18" height="52" alt=""></td>
        <td colspan="20">
            <img src="Bilder/doener_44.gif" width="737" height="19" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/doener_45.gif" width="11" height="52" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="19" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/doener_46.gif" width="1" height="44" alt=""></td>
        <td colspan="18">
            <img src="Bilder/doener_47.gif" width="735" height="33" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/doener_48.gif" width="1" height="44" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="33" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/doener_49.gif" width="18" height="11" alt=""></td>
        <td colspan="18">
            <img src="Bilder/doener_50.gif" width="735" height="11" alt=""></td>
        <td>
            <img src="Bilder/doener_51.gif" width="11" height="11" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="65" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="118" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="23" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="31" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="40" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="79" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="43" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="41" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="78" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="26" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="94" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="12" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="69" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


Ich habe es so gemacht, dass ich bei dem Textfeld(bild nr. 38) einfach das bild hinter den <td> Tag einfach als background genommen habe ( <td colspan="XX" background="gdfgf.gif"> ) und dann habe ich einfach drüber geschrieben aber dann bilden sich wie gesagt weiße flecken.
Wenn ich das richtig verstanden habe müsste ich jetzt die drei Balken
(links, textfeld, rechts) als 3-spaltige tabelle irgendwie einfügen oder?.
Bin ein bisschen schwer von begriff.
 
Ja also am einfachsten wäre sicherlich einfach eine 3-spaltige Tabelle... dabei sollten die Felder mit valign=top ausgestattet sein... Damit werden die immer oben begonnen...

achja: kleiner Hinweis - Benutze nicht background=""! Das ist nicht mehr aktuell soweit ich weiß. Kannst das im style="" Attribut besser lösen. Befass dich mal ein wenig mit CSS. Es bringt dir einige Vorteile beim Gestalten deiner Seiten!

-Flori-
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

T
Display Design
Antworten
0
Aufrufe
2K
tbraun1997
T
Zurück
Oben