Anzeige

Problem mit der Größe =(

Problem mit der Größe =( | PSD-Tutorials.de

Erstellt von KriZ-MC, 30.10.2008.

  1. KriZ-MC

    KriZ-MC Nicht mehr ganz neu hier

    Dabei seit:
    16.01.2006
    Beiträge:
    65
    Ort:
    Bremen
    Problem mit der Größe =(
    Hallo,

    ich habe für meine Seite ein neues Design gemacht und wollte das gerade fertig machen... nun hab ich aber ein problem... ich hab eine neue Art von Layout (Ich hatte vorher noch nicht so eins) gebastelt... 3 Spalten neben einander "Menü/Inhalt/ShoutBox" und das problem jetzt ist folgendes:

    Wenn der Inhalt des Menüs größer ist als die eigentlich Grafik vergrößert sich die Grafik nach unten... soweit is ja alles ok... nur irgendwie werden die beiden Spalten daneben auch größer "Inhalt/ShoutBox"...

    TierZimmer.de <--- So sieht das nu aus...

    Hier der folgende Code dazu:

    HTML:
    1.  
    2. <TITLE>TierZimmer.de</TITLE>
    3. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    4. <META HTTP-EQUIV="EXPIRES" CONTENT="0">
    5. <META NAME="RESOURCE-TYPE" CONTENT="DOCUMENT">
    6. <META NAME="robots" CONTENT="index,follow">
    7. <META NAME="language" CONTENT="de">
    8. <META NAME="DISTRIBUTION" CONTENT="GLOBAL">
    9. <META NAME="AUTHOR" CONTENT="TierZimmer.de - Das Heim für Mensch und Tier !">
    10. <META NAME="COPYRIGHT" CONTENT="Copyright (c) 2007 by TierZimmer.de">
    11. <META NAME="KEYWORDS" CONTENT="News, Internet, Download, Video, fotografie, forum, Rasen, Futter, Mensch, Kind, Baby, Leib, Huhn, Wölfe, Legu, Leguan, 50, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 15, Hase, Ostern, foto, treffpunkt, community, allgemein, zubehör, test, vergleich, tipps, tricks, hilfe, erklärung, fragen, antworten, suche, biete, kleinanzeigen, Bremen, Hamburg, Berlin. München, Weser, Bayern, Niedersachen, Weltweit, Globus, Tierwelt, Tier, Tiere, Zimmer, Kinder, Freude, Käfig, Zähne, Zahn, Krallen, Ohren, Knochen, Katzen, Hunde, Hund, Bären, Tieger, Löwen, Löwe. Mähne, Maus, Ratte, Katzenklo, Macht, Deutschland, Köln, Augen, Farben, Heu, Stroh, Häuschen, Häuser, Heim, Tierheim, Wasser, Fisch, Fische, Aquarium, Welpen, Krankheiten, etc, Liebe, Musik, galerie, fotowettbewerb,">
    12. <META NAME="DESCRIPTION" CONTENT="TierZimmer.de - Das Heim für Mensch und Tier !">
    13. <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
    14. <META NAME="REVISIT-AFTER" CONTENT="1 DAYS">
    15. <META NAME="RATING" CONTENT="GENERAL">
    16. </HEAD>
    17. <BODY BGCOLOR=#FCFFE4 link=#8B4513 vlink=#8B4513 alink=#8B4513 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    18. <CENTER>
    19.   <table marginwidth="0" marginheight="0" border="0" height="100%" style="height:100%">
    20.     <tr>
    21.       <td style="vertical-align:top"><TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    22.     <TR>
    23.         <TD COLSPAN=7>
    24.             <IMG SRC="Bilder/header.gif" WIDTH=906 HEIGHT=170 ALT=""></TD>
    25.     </TR>
    26.     <TR>
    27.         <TD COLSPAN=7>
    28.             <IMG SRC="Bilder/TierZimmerDesign-2_02.gif" WIDTH=906 HEIGHT=28 ALT=""></TD>
    29.     </TR>
    30.     <TR>
    31.         <TD COLSPAN=3>
    32.             <IMG SRC="Bilder/TierZimmerDesign-2_03.gif" WIDTH=130 HEIGHT=17 ALT=""></TD>
    33.         <TD style="background-image:url(Bilder/lauf.gif);width:590;height:17;"><FONT COLOR=#000000 FACE=Tahoma SIZE=1>
    34. <div style="overflow:auto;width:590;height:17"><CENTER>
    35. <marquee behavior="alternate" scrollamount="2">Herzlich Willkommen auf TierZimmer.de ! Meldet Euch doch Bitte im Forum an.</marquee>
    36. </CENTER></div></TD>
    37.         <TD COLSPAN=3>
    38.             <IMG SRC="Bilder/TierZimmerDesign-2_05.gif" WIDTH=186 HEIGHT=17 ALT=""></TD>
    39.     </TR>
    40.     <TR>
    41.         <TD>
    42.             <IMG SRC="Bilder/TierZimmerDesign-2_06.gif" WIDTH=11 HEIGHT=125 ALT=""></TD>
    43.         <TD style="background-image:url(Bilder/menu.gif);width:102;"><FONT COLOR=#000000 FACE=Tahoma SIZE=1>
    44. <div style="overflow:auto;width:102;">
    45. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    46. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    47. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    48. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    49. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    50. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    51. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    52. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    53. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    54. ghgfjgh<br>irjskalfdj<br>kfsdja<br>
    55.  
    56. </div></TD>
    57.         <TD>
    58.             <IMG SRC="Bilder/TierZimmerDesign-2_08.gif" WIDTH=17 HEIGHT=125 ALT=""></TD>
    59.         <TD style="background-image:url(Bilder/inhalt.gif);width:590;"><FONT COLOR=#000000 FACE=Tahoma SIZE=2>
    60. <div style="overflow:auto;width:590;"><CENTER>
    61. bfvgnmjdghmjgf
    62. </div></TD>
    63.         <TD>
    64.             <IMG SRC="Bilder/TierZimmerDesign-2_10.gif" WIDTH=17 HEIGHT=125 ALT=""></TD>
    65.         <TD style="background-image:url(Bilder/shout.gif);width:159;"><FONT COLOR=#000000 FACE=Tahoma SIZE=2>
    66. <div style="overflow:auto;width:159;">
    67.  
    68. </div></TD>
    69.         <TD>
    70.             <IMG SRC="Bilder/TierZimmerDesign-2_12.gif" WIDTH=10 HEIGHT=125 ALT=""></TD>
    71.     </TR>
    72.     <TR>
    73.         <TD COLSPAN=7>
    74.             <IMG SRC="Bilder/TierZimmerDesign-2_13.gif" WIDTH=906 HEIGHT=29 ALT=""></TD>
    75.     </TR>
    76.     <TR>
    77.         <TD COLSPAN=7>
    78.             <IMG SRC="Bilder/TierZimmerDesign-2_14.gif" WIDTH=906 HEIGHT=17 ALT=""></TD>
    79.     </TR>
    80.     <TR>
    81.         <TD COLSPAN=3 ROWSPAN=2>
    82.             <IMG SRC="Bilder/TierZimmerDesign-2_15.gif" WIDTH=130 HEIGHT=153 ALT=""></TD>
    83.         <TD style="background-image:url(Bilder/werbung.gif);width:590;"><FONT COLOR=#000000 FACE=Tahoma SIZE=2>
    84. <div style="overflow:auto;width:590;">
    85. vcbhgfh
    86. </div></TD>
    87.         <TD COLSPAN=3 ROWSPAN=2>
    88.             <IMG SRC="Bilder/TierZimmerDesign-2_17.gif" WIDTH=186 HEIGHT=153 ALT=""></TD>
    89.     </TR>
    90.     <TR>
    91.         <TD>
    92.             <IMG SRC="Bilder/TierZimmerDesign-2_18.gif" WIDTH=590 HEIGHT=29 ALT=""></TD>
    93.     </TR>
    94.     <TR>
    95.         <TD ROWSPAN=2>
    96.             <IMG SRC="Bilder/TierZimmerDesign-2_19.gif" WIDTH=11 HEIGHT=29 ALT=""></TD>
    97.         <TD COLSPAN=5>
    98.             <IMG SRC="Bilder/unten.gif" WIDTH=885 HEIGHT=17 ALT=""></TD>
    99.         <TD ROWSPAN=2>
    100.             <IMG SRC="Bilder/TierZimmerDesign-2_21.gif" WIDTH=10 HEIGHT=29 ALT=""></TD>
    101.     </TR>
    102.     <TR>
    103.         <TD COLSPAN=5>
    104.             <IMG SRC="Bilder/TierZimmerDesign-2_22.gif" WIDTH=885 HEIGHT=12 ALT=""></TD>
    105.     </TR>
    106. <!-- End ImageReady Slices -->
    107. </BODY>
    108. </HTML>
    109.  
    Sorry für diesen Code... aber ich kanns nicht besser *g* und CSS kann ich garnicht ^^

    Könnte mir Bitte irgendwer helfen ? :)

    LG
     
    #1      
  2. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    ist klar... du hast ja eine feste tabelle, d.h. wenn sich in einer zelle der inhalt nach unten vergrössert wandert der ganze "körper" der anderen zellen mit....
     
    #2      
  3. feelx75

    feelx75 Hotpixel

    Dabei seit:
    03.09.2008
    Beiträge:
    135
    Geschlecht:
    männlich
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    Hallo

    Du hast es als einzelne Tabelle gemacht (3spaltig) - Das kannst du dir so vorstellen, wie in einer Textverarbeitung - da werden die Spalten in der Mitte und rechts ja auch höher, wenn du die erste vergrösserst.

    Wenn du das nicht willst, dann kannst du das ja mit zwei Tabellen lösen (eine eigene für das Menu - und eine zweispaltige für Inhalt und Shoutbox). Dann reagieren sie unabhängig von einander..

    Allerdings sollte man ja heutzutage keine reinen Tabellen-Layouts verwenden, sondern eben via CSS formatieren. Das möchtest du aber vielleicht erst in einem nächsten Schritt angehen...

    Good Luck
     
    #3      
  4. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    jep absolut!

    2 spalten sind nicht gut! was sit wenn der inhalt grösser wird?

    wenn du bei tabellen beliben willst setz doch einfach in jede der 3 spalten eine neue einfache tabelle...

    ist zwar keine schöne lösung aber geht...
     
    #4      
  5. KriZ-MC

    KriZ-MC Nicht mehr ganz neu hier

    Dabei seit:
    16.01.2006
    Beiträge:
    65
    Ort:
    Bremen
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    Hallo,

    wie mach ich dies denn ?

    LG
     
    #5      
  6. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    du hast 3 spalten nebeneinander...

    <td>
    ... füger in der zelle ne neue tabelle ein

    <table background="deinhintegrundbild.jpg">
    <tr>
    <td>
    Dein Inhalt...
    </td>
    </tr>
    </table>

    </td>

    das machst du in jeder der 3 spalten...
     
    #6      
  7. KriZ-MC

    KriZ-MC Nicht mehr ganz neu hier

    Dabei seit:
    16.01.2006
    Beiträge:
    65
    Ort:
    Bremen
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    http://kriz-muzik.com/pong/ jetzt sieht das so aus :(
     
    #7      
  8. KriZ-MC

    KriZ-MC Nicht mehr ganz neu hier

    Dabei seit:
    16.01.2006
    Beiträge:
    65
    Ort:
    Bremen
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    Ich bekomm das irgendwie nicht hin...

    könnte mir jemand anhand meines Quellcodes für das Menü den Code machen ? Die anderen Spalten werde ich dann selbst damit probieren...

    LG
     
    #8      
  9. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    Muss es dnn mit Tables sein?
    Wie immer sind divs da die bessere und elegantere Lösung.
     
    #9      
  10. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    überforder doch einen anfänger der nicht mal mit tables klar kommt nicht gleich mit divs...
     
    #10      
  11. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    findes komplizierter mit tables klar zu kommen zumindest mit den Problemen diesie mit sich bringen als mit divs.

    Mit divs wäre das ganze im groben aufbau in weniger als einer halben stunde erledigt.

    html (grob) (10 minuten arbeit mit bild adressen raus suchen)
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4.  
    5.  <title>TierZimmer.de</title>
    6.  <style>
    7.   #site {
    8.     width: 910px;
    9.    }
    10.    #header {
    11.     margin-bottom: 20px;
    12.    }
    13.    #left h1, #right h1 {
    14.     width: 120px;
    15.     background: #A5B23C;
    16.     margin: 0;
    17.     padding: 3px;
    18.     font-size: 16px;
    19.    }
    20.   #left {
    21.     margin-left: 15px;
    22.     float:left;
    23.     width: 130px;
    24.   }
    25.    #shoutbox {
    26.     float: right;
    27.     width: 186px;
    28.    }
    29.    #middle {
    30.    float:left;
    31.     width: 570px;
    32.     background-color: #CDD497;
    33.    }
    34.  </style>
    35. </head>
    36.  <div id="site">
    37.   <div id="header">
    38.    <img src="http://kriz-muzik.com/pong/Bilder/header.gif" alt="kopfbild" />
    39.   </div>
    40.   <div id="center">
    41.    <div id="left">
    42.     <h1>Menü</h1>
    43.     <ul id="menu">
    44.      <li><a>Punkt 1</a></li>
    45.     </ul>
    46.    </div>
    47.    <div id="middle">
    48. ghgfjgh  irjskalfdj  kfsdja  
    49. ghgfjgh  irjskalfdj  kfsdja  
    50. ghgfjgh  irjskalfdj  kfsdja  
    51. ghgfjgh  irjskalfdj  kfsdja  
    52. ghgfjgh  irjskalfdj  kfsdja  
    53. ghgfjgh  irjskalfdj  kfsdja  
    54. ghgfjgh  irjskalfdj  kfsdja  
    55. ghgfjgh  irjskalfdj  kfsdja  
    56. ghgfjgh  irjskalfdj  kfsdja  
    57. ghgfjgh  irjskalfdj  kfsdja  
    58.    </div>
    59.    <div id="shoutbox">
    60.     Inhalt der Shoutbox
    61.    </div>
    62.   </div>
    63.   </div>
    64.   </body>
    65.  
     
    #11      
  12. KriZ-MC

    KriZ-MC Nicht mehr ganz neu hier

    Dabei seit:
    16.01.2006
    Beiträge:
    65
    Ort:
    Bremen
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    Den Code versteh ich nicht :(
    Wie komm ich damit denn nun weiter ?
    Geht das nicht mit den Tables ? Mir ist es eig. relativ egal ob der Code hässlich ist oder so... hauptsache er funktioniert :D

    LG
     
    #12      
  13. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Problem mit der Größe =(
    AW: Problem mit der Größe =(

    Bei dem Code wird statt Zellen einfache Boxen verwendet.
    Die größe bzw. das aussehen und verhalten der boxen
    wird oben im Kopf zwischen den beiden style tags definiert.

    Wenn du den Code oben mal abspreichern würdest, z.B.
    über Dreamweaver siehst du das 90% der seite schon stehen
    du müsstest also nur noch die Inhalte ändern.

    Kurz gesagt ... Meiner Meinung nach werden dir Tables immer
    wieder Probleme bereiten. Was ist leichter eine box oder eine zelle
    bei der ich aufpassen muss das sie den richtigen colspan oder
    rowspan hat?

    Ich empfehle dir dich bei selfHTML über CSS zu informieren.
    Mit etwas Ambitionen hast du nach kurzer Zeit zumindest ganz grobe
    Kentnisse und kannst dann entsprechende Fragen hier stellen.
    Bzw. verstehst eventuell den Code schon besser.

    Was die hilfe bei Tabellendesigns angeht darf man von mir keine Hilfe erwarten,
    das ist nicht bös gemeint, sondern hat ganz einfach Gründe.


    • Zeit!
      • Es ist aufwendig den Aufbau im Code zu erkennen da man auf jeden Colspan/rowspan achten muss etc.
    • jede Zelle beinflusst potentiell andere was das schnelle ändern fast unmöglich macht
    • nicht Barrierefrei
    • veraltete Technik
    • ZEIT!
     
    #13      
Seobility SEO Tool
x
×
×