Anzeige

Hintergrund

Hintergrund | PSD-Tutorials.de

Erstellt von eXe, 26.10.2008.

  1. eXe

    eXe Fortune

    Dabei seit:
    10.07.2008
    Beiträge:
    124
    Geschlecht:
    männlich
    Ort:
    Geldern
    Software:
    Adobe Photoshop CS4
    Hintergrund
    Hallo..

    Hatte keine Ahnung welchen Titel ich da nehmen soll, deswegen einfach "Hintergrund" :D

    Aaalso:
    Habe ein Design und einen Hintergrund (seperat) mit Photoshop erstellt, gescliced als .html exportieren lassen und dann mit Dreamweaver weiter bearbeitet (Hintergrund halt hinzugefügt ;))
    Der Hauptteil ist etwa 600 Pixel hoch und 1000 breit...
    Jetzt soll dieser Hauptteil genau in der Mitte des Bildschirms sein (egal bei welcher Auflösung man sich das anschaut)...
    mit <style> table { margin: 0 auto; } </style> krieg ich den ja schonmal zumindest auf der x-Achse in die Mitte, jetzt fehlt aber 1. noch die Mitte auf der y-Achse und 2. (und jetzt kommt das größere Problem):
    Der Hintergrund erscheint nicht -.-

    Etwas verwirrend, ich weiß, wenns nicht ganz verständlich ist poste ich mal den HTML-Code...

    Danke schonmal für alle Antworten :)

    MfG eXe
     
    Zuletzt bearbeitet: 26.10.2008
    #1      
  2. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Hintergrund
    AW: Hintergrund

    dann poste doch bitte mal die Internetversuche
     
    #2      
  3. eXe

    eXe Fortune

    Dabei seit:
    10.07.2008
    Beiträge:
    124
    Geschlecht:
    männlich
    Ort:
    Geldern
    Software:
    Adobe Photoshop CS4
    Hintergrund
    AW: Hintergrund

    Gut..
    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>page</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    6. </head>
    7. <style>
    8. table {
    9.     margin: 0 auto;
    10.     background-attachment: fixed;
    11.     background-image: url(Bilder/bg.png);
    12.     background-repeat: repeat;
    13. }
    14. </style>
    15. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    16. <!-- ImageReady Slices (page.psd) -->
    17. <table id="Tabelle_01" width="1001" height="599" border="0" cellpadding="0" cellspacing="0">
    18.     <tr>
    19.         <td>
    20.             <img src="Bilder/index_01.png" width="145" height="22" alt=""></td>
    21.         <td>
    22.             <a href="index.html">
    23.                 <img src="Bilder/page-v1.2_04.png" width="52" height="22" border="0" alt=""></a></td>
    24.         <td>
    25.             <a href="index.html">
    26.                 <img src="Bilder/page-v1.2_05.png" width="57" height="22" border="0" alt=""></a></td>
    27.         <td>
    28.             <a href="index.html">
    29.                 <img src="Bilder/page-v1.2_06.png" width="54" height="22" border="0" alt=""></a></td>
    30.         <td>
    31.             <a href="index.html">
    32.                 <img src="Bilder/page-v1.2_07.png" width="55" height="22" border="0" alt=""></a></td>
    33.         <td>
    34.             <a href="index.html">
    35.                 <img src="Bilder/page-v1.2_08.png" width="57" height="22" border="0" alt=""></a></td>
    36.         <td>
    37.             <a href="index.html">
    38.                 <img src="Bilder/page-v1.2_09.png" width="51" height="22" border="0" alt=""></a></td>
    39.         <td colspan="4">
    40.             <img src="Bilder/index_08.png" width="336" height="22" alt=""></td>
    41.         <td colspan="2">
    42.             <img src="Bilder/index_09.png" width="193" height="22" alt=""></td>
    43.         <td>
    44.             <img src="Bilder/Abstandhalter.gif" width="1" height="22" alt=""></td>
    45.     </tr>
    46.     <tr>
    47.         <td colspan="8">
    48.             <img src="Bilder/index_10.png" width="500" height="63" alt=""></td>
    49.         <td colspan="3">
    50.             <a href="index.html">
    51.                 <img src="Bilder/page-v1.2_13.png" width="307" height="63" border="0" alt=""></a></td>
    52.         <td colspan="2">
    53.             <img src="Bilder/index_12.png" width="193" height="63" alt=""></td>
    54.         <td>
    55.             <img src="Bilder/Abstandhalter.gif" width="1" height="63" alt=""></td>
    56.     </tr>
    57.     <tr>
    58.         <td colspan="9">
    59.             <img src="Bilder/index_13.png" width="764" height="22" alt=""></td>
    60.         <td colspan="4">
    61.             <img src="Bilder/index_14.png" width="236" height="22" alt=""></td>
    62.         <td>
    63.             <img src="Bilder/Abstandhalter.gif" width="1" height="22" alt=""></td>
    64.     </tr>
    65.     <tr>
    66.         <td colspan="9">
    67.             <img src="Bilder/index_15.png" width="764" height="35" alt=""></td>
    68.         <td rowspan="2">
    69.             <img src="Bilder/index_16.png" width="34" height="298" alt=""></td>
    70.         <td colspan="2" rowspan="2">
    71.             <img src="Bilder/index_17.png" width="178" height="298" alt=""></td>
    72.         <td rowspan="2">
    73.             <img src="Bilder/index_18.png" width="24" height="298" alt=""></td>
    74.         <td>
    75.             <img src="Bilder/Abstandhalter.gif" width="1" height="35" alt=""></td>
    76.     </tr>
    77.     <tr>
    78.         <td colspan="9" rowspan="2">
    79.             <img src="Bilder/index_19.png" width="764" height="424" alt=""></td>
    80.         <td>
    81.             <img src="Bilder/Abstandhalter.gif" width="1" height="263" alt=""></td>
    82.     </tr>
    83.     <tr>
    84.         <td colspan="4">
    85.             <img src="Bilder/index_20.png" width="236" height="161" alt=""></td>
    86.         <td>
    87.             <img src="Bilder/Abstandhalter.gif" width="1" height="161" alt=""></td>
    88.     </tr>
    89.     <tr>
    90.         <td colspan="13">
    91.             <img src="Bilder/index_21.png" width="1000" height="32" alt=""></td>
    92.         <td>
    93.             <img src="Bilder/Abstandhalter.gif" width="1" height="32" alt=""></td>
    94.     </tr>
    95.     <tr>
    96.         <td>
    97.             <img src="Bilder/Abstandhalter.gif" width="145" height="1" alt=""></td>
    98.         <td>
    99.             <img src="Bilder/Abstandhalter.gif" width="52" height="1" alt=""></td>
    100.         <td>
    101.             <img src="Bilder/Abstandhalter.gif" width="57" height="1" alt=""></td>
    102.         <td>
    103.             <img src="Bilder/Abstandhalter.gif" width="54" height="1" alt=""></td>
    104.         <td>
    105.             <img src="Bilder/Abstandhalter.gif" width="55" height="1" alt=""></td>
    106.         <td>
    107.             <img src="Bilder/Abstandhalter.gif" width="57" height="1" alt=""></td>
    108.         <td>
    109.             <img src="Bilder/Abstandhalter.gif" width="51" height="1" alt=""></td>
    110.         <td>
    111.             <img src="Bilder/Abstandhalter.gif" width="29" height="1" alt=""></td>
    112.         <td>
    113.             <img src="Bilder/Abstandhalter.gif" width="264" height="1" alt=""></td>
    114.         <td>
    115.             <img src="Bilder/Abstandhalter.gif" width="34" height="1" alt=""></td>
    116.         <td>
    117.             <img src="Bilder/Abstandhalter.gif" width="9" height="1" alt=""></td>
    118.         <td>
    119.             <img src="Bilder/Abstandhalter.gif" width="169" height="1" alt=""></td>
    120.         <td>
    121.             <img src="Bilder/Abstandhalter.gif" width="24" height="1" alt=""></td>
    122.         <td></td>
    123.     </tr>
    124. </table>
    125. <!-- End ImageReady Slices -->
    126. </body>
    127. </html>
    128.  
     
    #3      
  4. eXe

    eXe Fortune

    Dabei seit:
    10.07.2008
    Beiträge:
    124
    Geschlecht:
    männlich
    Ort:
    Geldern
    Software:
    Adobe Photoshop CS4
    Hintergrund
    AW: Hintergrund

    Habe es noch nicht hochgeladen, ist aufm Rechner so...

    Edit:
    Ok, Hintergrund hingekriegt, habe gerade entdeckt, dass der Hintergrund im <style> Bereich unter table steht, also hat die Tabelle den Hintergrund ;)
    Habs den Hintergrund unter body geschrieben und so gehts..

    Aber leider schaff ichs nicht den Teil auf der y-Achse in die Mitte zu stellen..
    mit
    Code (Text):
    1.  
    2. <style>
    3. table {    
    4.     margin: auto;    
    5. }
    6. </style>
    7.  
    funktionierts leider auch nicht, ist dann immernoch nur auf der x-Achse mittig...
     
    Zuletzt bearbeitet: 26.10.2008
    #4      
  5. TheDon0Ne

    TheDon0Ne WHAT?

    Dabei seit:
    18.10.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Falkensee
    Software:
    CS4, den guten alten Editor
    Hintergrund
    AW: Hintergrund

    ok das was du vorhast ist nicht ganz einfach zu realisieren und nicht jeder browser interpretiert es ordentlich aber gebe ihm zu verstehen das die seite eine breite und höhe von 100% hat. das machst du im css so

    html {
    width: 100%;
    height: 100%;
    }

    und den rest solltest du hinbekommen

    zur not probiere das auch mit dem body ich weiß nciht mehr ganz genau ob es html oder body war
     
    #5      
x
×
×
teststefan