Anzeige

table durch br's weiterführen

table durch br's weiterführen | PSD-Tutorials.de

Erstellt von tommu, 25.11.2006.

  1. tommu

    tommu Praktikant

    Dabei seit:
    01.11.2005
    Beiträge:
    49
    Geschlecht:
    männlich
    Ort:
    hamburg
    Software:
    photoshop cs 2, indesign, quark
    table durch br's weiterführen
    Hey Leute
    Hab mal ein kleines Problem und ich hoffe jemand kann mir helfen es zu lösen!
    Also ich habe mit photoshop eine (wie ich finde) tolle hp gesliced, nur möchte ich gerne das die content zelle, einfach länger wird wenn mehr text drin steht...

    hier mal meine code:
    Code (Text):
    1. <html>
    2. <head>
    3. <title>Unbenannt-1</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. </head>
    6. <body bgcolor="#797979" leftmargin="0" topmargin="100" marginwidth="0" marginheight="100">
    7.  
    8. <table id="Tabelle_01" width="700" height="551" border="0" cellpadding="0" cellspacing="0" align="center">
    9.     <tr>
    10.         <td colspan="15">
    11.             [img]Bilder/index_01.gif[/img]</td>
    12.     </tr>
    13.     <tr>
    14.         <td>
    15.             [img]Bilder/index_02.gif[/img]</td>
    16.         <td colspan="2">
    17.             [img]Bilder/index_03.gif[/img]</td>
    18.         <td rowspan="2">
    19.             [img]Bilder/index_04.gif[/img]</td>
    20.         <td>
    21.             [img]Bilder/index_05.gif[/img]</td>
    22.         <td rowspan="2">
    23.             [img]Bilder/index_06.gif[/img]</td>
    24.         <td>
    25.             [img]Bilder/index_07.gif[/img]</td>
    26.         <td rowspan="2">
    27.             [img]Bilder/index_08.gif[/img]</td>
    28.         <td>
    29.             [img]Bilder/index_09.gif[/img]</td>
    30.         <td rowspan="2">
    31.             [img]Bilder/index_10.gif[/img]</td>
    32.         <td>
    33.             [img]Bilder/index_11.gif[/img]</td>
    34.         <td rowspan="2">
    35.             [img]Bilder/index_12.gif[/img]</td>
    36.         <td colspan="2">
    37.             [img]Bilder/index_13.gif[/img]</td>
    38.         <td rowspan="3">
    39.             [img]Bilder/index_14.gif[/img]</td>
    40.     </tr>
    41.     <tr>
    42.         <td colspan="3">
    43.             [img]Bilder/index_15.gif[/img]</td>
    44.         <td>
    45.             [img]Bilder/index_16.gif[/img]</td>
    46.         <td>
    47.             [img]Bilder/index_17.gif[/img]</td>
    48.         <td>
    49.             [img]Bilder/index_18.gif[/img]</td>
    50.         <td>
    51.             [img]Bilder/index_19.gif[/img]</td>
    52.         <td colspan="2">
    53.             [img]Bilder/index_20.gif[/img]</td>
    54.     </tr>
    55.     <tr>
    56.         <td colspan="2">
    57.             [img]Bilder/index_21.gif[/img]</td>
    58.  
    59.         <td colspan="11" bgcolor="#000000" width="527" height="298" alt="" valign="top">
    60.  
    61.         <font color="#E1E1E1">
    62.         <font face="arial,helvetica">
    63.         <font size="2">
    64.  
    65.                                 hier ist der content bereich wo der lange text
    66.                                  stehen sollte, und halt einfach die zelle verlängern soll
    67.  
    68.                                 hier ist der content bereich wo der lange text
    69.                                  stehen sollte, und halt einfach die zelle verlängern soll
    70.  
    71.                                 hier ist der content bereich wo der lange text
    72.                                  stehen sollte, und halt einfach die zelle verlängern soll
    73.  
    74.                                 hier ist der content bereich wo der lange text
    75.                                  stehen sollte, und halt einfach die zelle verlängern soll
    76.  
    77.                                 hier ist der content bereich wo der lange text
    78.                                  stehen sollte, und halt einfach die zelle verlängern soll
    79.  
    80.                                 hier ist der content bereich wo der lange text
    81.                                  stehen sollte, und halt einfach die zelle verlängern soll
    82.  
    83.                
    84.  
    85. </td>
    86.         <td>
    87.             [img]Bilder/index_23.gif[/img]</td>
    88.     </tr>
    89.     <tr>
    90.         <td colspan="15">
    91.             [img]Bilder/index_24.gif[/img]</td>
    92.     </tr>
    93.     <tr>
    94.         <td>
    95.             [img]Bilder/Abstandhalter.gif[/img]</td>
    96.         <td>
    97.             [img]Bilder/Abstandhalter.gif[/img]</td>
    98.         <td>
    99.             [img]Bilder/Abstandhalter.gif[/img]</td>
    100.         <td>
    101.             [img]Bilder/Abstandhalter.gif[/img]</td>
    102.         <td>
    103.             [img]Bilder/Abstandhalter.gif[/img]</td>
    104.         <td>
    105.             [img]Bilder/Abstandhalter.gif[/img]</td>
    106.         <td>
    107.             [img]Bilder/Abstandhalter.gif[/img]</td>
    108.         <td>
    109.             [img]Bilder/Abstandhalter.gif[/img]</td>
    110.         <td>
    111.             [img]Bilder/Abstandhalter.gif[/img]</td>
    112.         <td>
    113.             [img]Bilder/Abstandhalter.gif[/img]</td>
    114.         <td>
    115.             [img]Bilder/Abstandhalter.gif[/img]</td>
    116.         <td>
    117.             [img]Bilder/Abstandhalter.gif[/img]</td>
    118.         <td>
    119.             [img]Bilder/Abstandhalter.gif[/img]</td>
    120.         <td>
    121.             [img]Bilder/Abstandhalter.gif[/img]</td>
    122.         <td>
    123.             [img]Bilder/Abstandhalter.gif[/img]</td>
    124.     </tr>
    125. </table>
    126.  
    127. </body>
    128. </html>

    so sieht das also aus....bitte helft mir

    vielen dank im voraus :)
    mfg tommu
     
    #1      
  2. kleinerVampir

    kleinerVampir Aktives Mitglied

    1
    Dabei seit:
    28.01.2006
    Beiträge:
    1.465
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Photoshop CS5 | Notepad++
    Kameratyp:
    CANON EOS350D
    table durch br's weiterführen
    dein Code:

    Code (Text):
    1.  
    2.       <td colspan="11" bgcolor="#000000" width="527" height="298" alt="" valign="top">
    3.  
    4.       <font color="#E1E1E1">
    5.       <font face="arial,helvetica">
    6.       <font size="2">
    7.  
    8.                         hier ist der content bereich wo der lange text
    9.                          stehen sollte, und halt einfach die zelle verlängern soll  
    10.  
    11.                         hier ist der content bereich wo der lange text
    12.                          stehen sollte, und halt einfach die zelle verlängern soll  
    13.  
    14.                         hier ist der content bereich wo der lange text
    15.                          stehen sollte, und halt einfach die zelle verlängern soll  
    16.  
    17.                         hier ist der content bereich wo der lange text
    18.                          stehen sollte, und halt einfach die zelle verlängern soll  
    19.  
    20.                         hier ist der content bereich wo der lange text
    21.                          stehen sollte, und halt einfach die zelle verlängern soll  
    22.  
    23.                         hier ist der content bereich wo der lange text
    24.                          stehen sollte, und halt einfach die zelle verlängern soll  
    25.  
    26.            
    27.  
    28. </td>
    29.  
    ersetzen mit:

    Code (Text):
    1.  
    2.       <td colspan="11" bgcolor="#000000" width="527" height="100%" alt="" valign="top">
    3.  
    4.       <font color="#E1E1E1">
    5.       <font face="arial,helvetica">
    6.       <font size="2">
    7.  
    8.                         hier ist der content bereich wo der lange text
    9.                          stehen sollte, und halt einfach die zelle verlängern soll  
    10.  
    11.                         hier ist der content bereich wo der lange text
    12.                          stehen sollte, und halt einfach die zelle verlängern soll  
    13.  
    14.                         hier ist der content bereich wo der lange text
    15.                          stehen sollte, und halt einfach die zelle verlängern soll  
    16.  
    17.                         hier ist der content bereich wo der lange text
    18.                          stehen sollte, und halt einfach die zelle verlängern soll  
    19.  
    20.                         hier ist der content bereich wo der lange text
    21.                          stehen sollte, und halt einfach die zelle verlängern soll  
    22.  
    23.                         hier ist der content bereich wo der lange text
    24.                          stehen sollte, und halt einfach die zelle verlängern soll  
    25.  
    26.            
    27.  
    28. </td>
    29.  
    hier wird es dir allerdings passieren das du den rest auch anpassenmusst...

    alternative 2 (besser !) mit CSS bzw. iframes arbeiten
     
    #2      
  3. tommu

    tommu Praktikant

    Dabei seit:
    01.11.2005
    Beiträge:
    49
    Geschlecht:
    männlich
    Ort:
    hamburg
    Software:
    photoshop cs 2, indesign, quark
    table durch br's weiterführen
    hmm das funktioniert leider nicht mit "height="100%"

    also muss ich wohl eine iframe machen

    danke für deine hilfe
    mfg tommu
     
    #3      
  4. giacomo

    giacomo Guest

    table durch br's weiterführen
    Hatte auch mal dieses Problem und konnte es auch nur mit einen iframe. Für andere Lösungen wäre ich auch dankbar, aber denke mal das es nicht anderst geht, da es sich um Bilder mit einer festen Größe handelt..
     
    #4      
  5. tommu

    tommu Praktikant

    Dabei seit:
    01.11.2005
    Beiträge:
    49
    Geschlecht:
    männlich
    Ort:
    hamburg
    Software:
    photoshop cs 2, indesign, quark
    table durch br's weiterführen
    ok danke für deine antwort werde es probieren...
    mfg tommu :D
     
    #5      
  6. gosiggi

    gosiggi Noch nicht viel geschrieben

    Dabei seit:
    11.11.2006
    Beiträge:
    31
    Ort:
    Mönchengladbach
    table durch br's weiterführen
    Servus,

    so hier mal ein xhtml 1.1 Valides Template ohne Bilder, inklusive der dazugehörigen CSS Datei.

    Auf der linken Seite befindet sich eine Spalte für die einzelnen Boxen, und auf der Rechten Seite der Content Bereich welcher sich automatisch verlängert je mehr Text hinein geschrieben wird.

    Denn die Alternative mit IFrames finde ich immer irgendwie ein bisschen Unfein irgendwie.

    PS: Das Template soll euch nur einen Denkanstoss gegeben, jedoch könnt Ihr es auch so ohne weiteres verändern....... :)

    ######################################################

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2.  
    3. <html xmlns="http://www.w3.org/1999/xhtml" >
    4. <head>
    5. <link rel="stylesheet" href="master_page.css" type="text/css" />
    6.     <title>Test Webseite</title>
    7. </head>
    8. <body>
    9.  
    10. <table width="100%" border="0" cellpadding="0" cellspacing="0" id="container">
    11.   <tr>
    12.     <td id="container_left">&</td>
    13.     <td id="container_center"><table width="800" border="0" cellpadding="0" cellspacing="0" id="header">
    14.       <tr>
    15.         <td id="headline1"><div id="nav_left">
    16.             &| &&
    17.         </div></td>
    18.         <td id="headline2">&</td>
    19.         <td id="headline3">&</td>
    20.         <td id="headline4">&</td>
    21.         <td id="headline5"><div id="nav_right">
    22.             &&
    23.                
    24.             </div></td>
    25.       </tr>
    26.       <tr>
    27.         <td id="header1">&</td>
    28.         <td id="header2">&</td>
    29.         <td id="header3">&</td>
    30.         <td id="header4">&</td>
    31.         <td id="header5">&</td>
    32.       </tr>
    33.     </table>
    34.       <table width="800" border="0" cellpadding="0" cellspacing="0" id="header_down">
    35.         <tr>
    36.           <td>&</td>
    37.         </tr>
    38.       </table>
    39.       <table width="800" border="0" cellspacing="0" cellpadding="0">
    40.         <tr>
    41.           <td valign="top" id="content1"><table width="180" border="0" cellpadding="0" cellspacing="0">
    42.             <tr>
    43.               <td valign="top">&</td>
    44.               </tr>
    45.             <tr>
    46.               <td>&</td>
    47.               </tr>
    48.            
    49.           </table></td>
    50.           <td valign="top" id="content2"><table width="580" border="0" cellpadding="0" cellspacing="0">
    51.             <tr>
    52.               <td style="height: 225px" valign="top">&</td>
    53.             </tr>
    54.           </table></td>
    55.         </tr>
    56.       </table>
    57.       <table width="800" border="0" cellspacing="0" cellpadding="0">
    58.         <tr>
    59.           <td id="footer1">&</td>
    60.         </tr>
    61.         <tr>
    62.           <td id="footer2">&</td>
    63.         </tr>
    64.       </table></td>
    65.     <td id="container_right">&</td>
    66.   </tr>
    67. </table>
    68.    
    69. </body>
    70. </html>

    Hier die CSS Datei....

    Code (Text):
    1.  
    2. body{
    3.     margin-top:0px;
    4.     margin-bottom:0px;
    5.     margin-left:0px;
    6.     margin-right:0px;
    7.     font-family: Verdana, Arial, Helvetica, sans-serif;
    8.     font-size: 10px;
    9.     color: #000000;
    10.     background-color: #cecece;
    11. }
    12. a{
    13.     font-family: Verdana, Arial, Helvetica, sans-serif;
    14.     font-size: 10px;
    15.     color: #666666;
    16.     text-decoration: none;
    17. }
    18. a:hover{
    19.     font-family: Verdana, Arial, Helvetica, sans-serif;
    20.     font-size: 10px;
    21.     color: #FF0000;
    22.     text-decoration: none;
    23. }
    24. #container_left{
    25.     width:auto;
    26.     height:auto;
    27.     background-color: #FFFFFF;
    28.     }
    29. #container_center{
    30.     width:800px;
    31.     height:auto;
    32.     border-left:solid 1px #000000;
    33.     border-right:solid 1px #000000;
    34.     background-color: #FFFFFF;
    35.     }
    36. #container_right{
    37.     width:auto;
    38.     height:auto;
    39.     background-color: #FFFFFF;
    40.     }
    41. #headline1{
    42.     width:250px;
    43.     height:19px;
    44.    
    45.     background-repeat:repeat-x;
    46.     background-position: bottom;
    47.     }
    48. #headline2{
    49.     width:20px;
    50.     height:19px;
    51.    
    52.     background-repeat:no-repeat;
    53.     background-position: bottom;
    54.     }
    55. #headline3{
    56.     width:260px;
    57.     height:19px;
    58.    
    59.     background-repeat:no-repeat;
    60.     background-position: bottom;
    61.     }
    62. #headline4{
    63.     width:20px;
    64.     height:19px;
    65.    
    66.     background-repeat:no-repeat;
    67.     background-position: bottom;
    68.     }
    69. #headline5{
    70.     width:250px;
    71.     height:19px;
    72.    
    73.     background-repeat:repeat-x;
    74.     background-position: bottom;
    75.     }
    76. #nav_left{
    77.     width:230px;
    78.     height:15px;
    79.     padding-left:3px;
    80.     padding-top:3px;
    81.     padding-right:3px;
    82.     border:none;
    83. }
    84. #nav_right{
    85.     width:230px;
    86.     height:15px;
    87.     padding-left:3px;
    88.     padding-top:3px;
    89.     padding-right:3px;
    90.     border:none;
    91. }
    92. #header1{
    93.     width:250px;
    94.     height:153px;
    95.    
    96.     background-repeat:no-repeat;
    97.     background-position: bottom;
    98.     }
    99. #header2{
    100.     width:20px;
    101.     height:153px;
    102.    
    103.     background-repeat:no-repeat;
    104.     background-position: bottom;
    105.     }
    106. #header3{
    107.     width:260px;
    108.     height:153px;
    109.    
    110.     background-repeat:no-repeat;
    111.     background-position: bottom;
    112.     }
    113. #header4{
    114.     width:20px;
    115.     height:153px;
    116.    
    117.     background-repeat:no-repeat;
    118.     background-position: bottom;
    119.     }
    120. #header5{
    121.     width:250px;
    122.     height:153px;
    123.    
    124.     background-repeat:no-repeat;
    125.     background-position: bottom;
    126.     }
    127. #header_down{
    128.     width:800px;
    129.     height:18px;
    130.    
    131.     background-repeat:repeat-x;
    132.     background-position: top;
    133.     }
    134. #content1{
    135.     width:180px;
    136.     height:350px;
    137.     padding: 10px;
    138.     }
    139. #content2{
    140.     width:580px;
    141.     height:350px;
    142.     padding:10px;
    143.     }
    144. #box1{
    145.     border:solid 1px border-color:#000000;
    146.     }
    147. #box2{
    148.  
    149.     }
    150. #footer1{
    151.     width:800px;
    152.     height:20px;
    153.    
    154.     background-repeat: repeat-x;
    155.     background-position: bottom;
    156. }
    157. #footer2{
    158.     width:800px;
    159.     height:42px;
    160.    
    161.     background-repeat: repeat-x;
    162.     background-position: top;
    163. }
    164. #content_2
    165.  
    166.  
    #######################################################

    Habe lediglich die wo die leerstellen sind die Bild verknüpfungen gelöscht gehabt.

    Hoffe mal das ich hier nun wegen des Überlangen Posts nicht erschlagen werde :)
     
    #6      
x
×
×