Anzeige

photoshop layout und html

photoshop layout und html | PSD-Tutorials.de

Erstellt von shareware, 21.08.2008.

  1. shareware

    shareware Noch nicht viel geschrieben

    Dabei seit:
    13.06.2007
    Beiträge:
    7
    Geschlecht:
    männlich
    photoshop layout und html
    hallo, meine frage ist bestimmt recht einfach für euch:) also ich hab mal in ps bissel rumgespielt und wollt danach ne html datei ausgeben lassen. soweit sogut nun habe ich die html datei in meinem editor geöffnet und wollte in die tabellen nen text einfügen. nun kommt schon das problem: sobald ich zuviel text eingebe verschiebt sich alles. ich möchte aber nur das der bereich content sich dem text anpasst.so schaut es aus:
    Directupload.net - Dfw6oy4un.jpg
    und hier mal der quelltext:
    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="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    7. <!-- ImageReady Slices (Unbenannt-1.psd) -->
    8. <table id="Tabelle_01" width="800" height="750" border="0" cellpadding="0" cellspacing="0">
    9.         <tr>
    10.                 <td colspan="2">
    11.                         <img src="Bilder/Unbenannt-1_01.gif" width="800" height="86" alt=""></td>
    12.         </tr>
    13.         <tr>
    14.                 <td background="Bilder/Unbenannt-1_02.gif" width="260" height="664" alt="">
    15.                         </td>
    16.               [COLOR=Red] <td background="Bilder/Unbenannt-1_03.gif" width="566" height="664" alt="">[/COLOR]
    17.  
    18.  
    19.                wenn ich hier viel text reinschreibe verschiebt sich das design!
    20.                        </td>
    21.         </tr>
    22. </table>
    23. <!-- End ImageReady Slices -->
    24. </body>
    25. </html>
    26.  
    hoffe ihr könnt was mit anfangen. vorab schonmal thx :)
     
    Zuletzt bearbeitet: 24.08.2008
    #1      
  2. photoshop layout und html
    #2      
  3. shareware

    shareware Noch nicht viel geschrieben

    Dabei seit:
    13.06.2007
    Beiträge:
    7
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    ok, aber des löst mein problem nicht wirklich :mad:
     
    #3      
  4. tiroler

    tiroler Hat es drauf

    14
    Dabei seit:
    04.11.2006
    Beiträge:
    2.202
    Geschlecht:
    männlich
    Ort:
    Pfalz und Tirol
    Software:
    CS4, C4D R10
    Kameratyp:
    Canon EOS 400D+L-Obj.
    photoshop layout und html
    #4      
  5. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    photoshop layout und html
    AW: photoshop layout und html

    Benutz mal die Foren-Suche!

    Genau das selbe Problem wurde hier in den letzten Wochen/Monaten sehr oft angesprochen.

    Dort findest du dann auch diverse Lösungen für
     
    #5      
  6. shareware

    shareware Noch nicht viel geschrieben

    Dabei seit:
    13.06.2007
    Beiträge:
    7
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    danke :) was glaubst du was ich schon seit tagen suche? wenn ich wüsste wie das heißt bzw. nach was ich suchen muss tabellengrößen? oder designverschiebung? oder oder oder ich hab keine ahnung:'(
     
    #6      
  7. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    photoshop layout und html
    AW: photoshop layout und html

    Such mal nach:
    Text auf Grafik
    Text über Grafik
     
    #7      
  8. shareware

    shareware Noch nicht viel geschrieben

    Dabei seit:
    13.06.2007
    Beiträge:
    7
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    super, viele postings drüber aber ne wirkliche lösung scheint es nicht zu geben :( in jedem zweiten beitrag steht lerne html und css - ja toll des hilft mir so net weiter. ich dachte ja in meinem jugendliche leichtsinn da gibbet einen befehl der dies verhindert das des design nach unten verschiebt. scheint aber net so einfach zu sein diese geschichte. gruß shareware
     
    #8      
  9. saint44

    saint44 Schlingel

    Dabei seit:
    28.04.2008
    Beiträge:
    660
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Suite Web CS3
    Kameratyp:
    Nikon D5000
    photoshop layout und html
    AW: photoshop layout und html

    <td background="pfad" height="" width="">
    text über grafik
    </td>
     
    #9      
  10. shareware

    shareware Noch nicht viel geschrieben

    Dabei seit:
    13.06.2007
    Beiträge:
    7
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    nee, wenns in den quelltext schaust siehste das des schon so drinne steht. wenn ich die größe des hintergrundbildes veränder passiert nix. trotzdem danke :)
     
    #10      
  11. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4.  
    5. <html>
    6. <head>
    7. <title>Unbenannt-1</title>
    8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    9. <style type="text/css">
    10. <!--
    11. * { margin: 0; padding:0; }
    12.  
    13. body {background-color:#ffffff; }
    14.  
    15. [B]td {vertical-align:top; }[/B]
    16. -->
    17. </style>
    18.  
    19. </head>
    20. <body>
    21.  
    22. <table width="800" border="0" cellpadding="0" cellspacing="0">
    23. <tr>
    24. <td colspan="2"><img src="Bilder/Unbenannt-1_01.gif" width="800" height="86" alt=""></td>
    25. </tr>
    26. <tr>
    27. <td background="Bilder/Unbenannt-1_02.gif" width="260" height="664"></td>
    28. <td background="Bilder/Unbenannt-1_03.gif" width="566">
    29. wenn ich hier viel text reinschreibe verschiebt sich das design nicht mehr, eber der Code ist trotzdem Müll</td>
    30. </tr>
    31. </table>
    32.  
    33. </body>
    34. </html>
    35.  


    wahlweise ordentlich:


    style.css im Ordner css

    Code (Text):
    1.  
    2. * { margin: 0; padding:0; }
    3.  
    4. html, body {
    5. width:100%;
    6. height:100%;
    7. margin:0;
    8. padding:0;
    9. }
    10.  
    11. body {
    12. background-color:#ffffff;
    13. margin:0;
    14. padding:0;
    15. text-align:center; /* zentrierung ie<7 */
    16. font-family: sans-serif;
    17. font-size: 100.01%;
    18. color: #000000;
    19. }
    20.  
    21. #wrapper {
    22. width:800px;
    23. background-color:#dedede;
    24. text-align:left; /* hebt textausrichtung body auf */
    25. margin:auto; /* zentrierung moderne browser */
    26. }
    27.  
    28. #head {
    29. width:800px;
    30. height:86px;
    31. background-color:#000000;
    32. }
    33.  
    34. #head img {
    35. border:0;
    36. width:800px;
    37. height:86px;
    38. }
    39.  
    40.  
    41. #linke_seite {
    42. width:260px;
    43. height:664px;
    44. float:left;
    45. background-color:#ff0000;
    46. background-image:url(Bilder/Unbenannt-1_02.gif);
    47. }
    48. #linke_seite ul {
    49. margin:1em;
    50. padding: 1em;
    51. }
    52.  
    53. #rechte_seite {
    54. *height:664px;
    55. min-height:664px;
    56. background-image:url(Bilder/Unbenannt-1_03.gif);
    57. background-color:#ff00ff;
    58. }
    59.  
    60. #klare_suppe {
    61. clear:both;
    62. }
    63.  

    Dokument

    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4.  
    5. <title>Unbenannt-1</title>
    6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    7. <link rel="stylesheet" href="css/style.css" type="text/css">
    8. </head>
    9.  
    10. <div id="wrapper">
    11.         <div id="head"><img src="Bilder/Unbenannt-1_01.gif" alt=""></div>
    12.         <div id="linke_seite"><ul>Navigantion
    13.         <li>Punkt 1</li>
    14.         <li>Punkt 2</li></ul></div>
    15.         <div id="rechte_seite">Hier kann man jetzt so viel schreiben, wie man will</div>
    16.         <div id="klare_suppe"></div>
    17.         <p>Fußnote</p>
    18. </div>
    19.  
    20. </body>
    21. </html>
    22.  
     
    #11      
  12. shareware

    shareware Noch nicht viel geschrieben

    Dabei seit:
    13.06.2007
    Beiträge:
    7
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    oh yeah des iss es. nur werden die bilder nichtmehr angezeigt trotz richtiger verlinkung in der css datei mit
     
    #12      
  13. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    photoshop layout und html
    AW: photoshop layout und html

    oh sorry ;)


    hatte die css vorher ins Dokument eingebunden


    ../Bilder/name


    muß das natürlich heißen im css
     
    #13      
x
×
×
teststefan