Anzeige

Homepage: Button als Hintergrund wird abgeschnitten

Homepage: Button als Hintergrund wird abgeschnitten | PSD-Tutorials.de

Erstellt von VirusX, 02.10.2008.

  1. VirusX

    VirusX Aktives Mitglied

    Dabei seit:
    23.08.2008
    Beiträge:
    418
    Geschlecht:
    männlich
    Software:
    Gimp, Blender, Inkscape
    Homepage: Button als Hintergrund wird abgeschnitten
    HiHo,

    Also ich habe mir die Grundkenntnisse in HTML und CSS angeeignet aber ich hänge gerade an einem Problem, auf dessen Lösung ich nicht komme:

    Also oben ist der Header und links und rechts wollte ich Menüs haben.
    Ich habe jetzt versucht im HTML Code die linke Navigationsleiste zu erstellen und in CSS den Hintergrund dafür zu erstellen, aber das sieht im Moment so aus:

    http://www.abload.de/img/aufzeichnengus.jpg

    Lesen: Bilder ins Forum posten


    Der Button in der linken Leiste sieht normaler Weise so aus:

    [​IMG]

    Und das ist der Code dazu:

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Test</title>
    6. <link  rel="stylesheet" href="style.css" type="text/css">
    7. </head>
    8.  
    9. <body>
    10.   <div align="center"><img src="http://www.psd-tutorials.de/modules/Forum/Header.jpg" />
    11.   </div>
    12. <ul>
    13.     <li id="Navi"><a href="http://www.abc.de">News</a></li>
    14.   <li id="Navi"><a href="http://www.abc.de">Gästebuch</a></li>
    15.   </ul>
    16.  
    17. </body>
    18. </html>
    und

    Code (Text):
    1. body {
    2.     background-color: #FFFF99;
    3. }
    4.  
    5. a {
    6.     background-image: url(../Button.jpg);
    7.     display: block;
    8. }
    9.  
    10. a:hover {
    11.     background-image: url(../Button-over.jpg);
    12.     display: block;
    13. }
    14.  
    15. ul {
    16.     list-style: none;
    17. }
    Also ich hätte es gerne so, dass der Button pro Link nur einmal angezeigt wird und in voller Größe, nicht so abgeschnitten.

    (Ich hoffe die Frage ist nicht so simpel , dass ihr mich am liebsten prügeln wollt :lol:)

    Edit: Ich habe noch eine Frage:

    - Soll ich ein reines Bild ohne Text wie den Header direkt in den HTML Code einfügen oder über CSS? (Wie mache ich das am beste? mit <div id="Header"></div> und dann in der CSS Datei halt das Bild einfügen?
     
    Zuletzt von einem Moderator bearbeitet: 03.10.2008
    #1      
  2. rapzitis

    rapzitis Guest

    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    ganz einfach ... du musst dem link eine feste breite und höhe (entsprechend der grafik) geben.

    sinnvoller wäre es in deinem fall wahrscheinlich dem lstenpunkt die hintergrundgrafik und feste werte zugeben + text-align:center; (wenn gewünscht).

    die angabe von display block ist bei hover nicht nötig ... er übernimmt die einstellung von der link definition.
     
    Zuletzt von einem Moderator bearbeitet: 02.10.2008
    #2      
  3. Der_Ritter

    Der_Ritter Nicht mehr ganz neu hier

    Dabei seit:
    04.03.2008
    Beiträge:
    101
    Geschlecht:
    männlich
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    repeat: no-repeat;

    dann erscheint der nur einmal.
    Am Besten, wenn möglich, immer über CSS einbinden. Allerdings stellt sich die Frage, ob dieses Bild für das Layout dienen soll oder als unterstützendes Symbol für den Inhalt der Seite? ich gehe mal davon aus dass es sich nur um den Header dreht.

    Im CSS die Größe des Divs entsprechend der Größe des Bildes angeben. mit background-image das Bild dem Div zuweisen. Dann evt. noch eine repeat-Anweisung (also wie und in welcher Richtung sich das Bild wiederholen soll) - wenn einmalig dann repeat: no-repeat;

    Gruß
    Der_Ritter
     
    Zuletzt bearbeitet: 03.10.2008
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    soo simpel ist das auch nicht, wenn man grad dabei ist sich die Grundkenntnisse anzueigenen.
    vielleicht kannst du etwas aus dieser Lösung für dein Problemenwenden.
    http://twoiback.de/PSD/button/ .
    ich habe der Liste eine ID gegeben, damit es nicht kollidiert, falls man in der Seite weitere Listen definiert.



    ich würde es mit der DIV-Methode und css machen, einmal, weil es für die logische Struktur günstiger ist, auf der anderen Seite hast du so sehr viel mehr Möglichkeiten, diesen Bereich nachträglich zu erweitern (zB einen Text oder andere Elemente über die Grafik zu legen)
     
    Zuletzt bearbeitet: 03.10.2008
    #4      
  5. VirusX

    VirusX Aktives Mitglied

    Dabei seit:
    23.08.2008
    Beiträge:
    418
    Geschlecht:
    männlich
    Software:
    Gimp, Blender, Inkscape
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    Jo erstmal danke für eure Hilfen! :rolleyes:

    @ Sokie, sehr gut, dass du mal ein Beispiel erstellt hast, wie es aussehen könnte! ;)

    Ich habe jetzt versucht, den Header einzufügen und bin wie folgt vorgegangen:

    Ich habe in HTML ein Div erstellt

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <link rel="stylesheet" type="text/css" href="style.css" />
    7. </head>
    8.  
    9. <body>
    10.     <div id="Header"></div>
    11.  
    12.  
    13.  
    14.  
    15. </body>
    16. </html>
    und in CSS dann das Bild eingefügt:

    Code (Text):
    1. body {
    2.     background-color: #FFFF99;
    3. }
    4.  
    5. div#Header {
    6.     background-image: url(../Header.jpg);
    7. }
    Aber das Bild wird nicht angezeigt. Leigt es vielleicht daran, dass das Div-Attribut noch irgendeinen Inhalt haben muss? Denn in der HTML Datei ist es ja eigentlich leer!?
     
    Zuletzt bearbeitet: 03.10.2008
    #5      
  6. p3t6

    p3t6 Noch nicht viel geschrieben

    Dabei seit:
    26.01.2008
    Beiträge:
    34
    Geschlecht:
    männlich
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    tja das bild sollte auch in den div-container und nicht ins css.
     
    #6      
  7. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    wenn du die vorangegangenen Beiträge einmal liest, wird klar, dass das Bild als background im div liegt, und das wird natürlich per css gemacht.

    Du musst im css noch die height und width des Containers definieren, sonst wird der nicht angezeigt. height und width muss die grösse des Hintergrundbildes haben. für einen inhalt reicht auch ein &nbsp;
     
    #7      
  8. Der_Ritter

    Der_Ritter Nicht mehr ganz neu hier

    Dabei seit:
    04.03.2008
    Beiträge:
    101
    Geschlecht:
    männlich
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    body {
    background-color: #FFFF99;
    }

    div#Header {
    background-image: url(../Header.jpg);
    repeat: no-repeat;
    width: BREITE_DEINES_BILDES px;
    height: HÖHE_DEINES_BILDES px;
    }
     
    #8      
  9. VirusX

    VirusX Aktives Mitglied

    Dabei seit:
    23.08.2008
    Beiträge:
    418
    Geschlecht:
    männlich
    Software:
    Gimp, Blender, Inkscape
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    So ich habe jetzt versucht alle Schnippsel zusammenzufügen und es klappt auch schon recht gut nur bei der Positionierung von ein paar Bereichen habe ich noch Schwierigkeiten (Es wird sich bestimmt nur um wenige Codes handeln, die das richten können):

    So siehts aus:

    [​IMG]

    Der Header und die linke Leiste sind schon richtig positioniert, aber die anderen Elemente sind nach unten verschoben bzw. der "Content" schiebt sich nicht zwischen die beiden Leisten.

    Hier die Codes:

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <link rel="stylesheet" type="text/css" href="style.css" />
    7. </head>
    8.  
    9. <body>
    10. <div id="Header"></div>
    11.      <ul id="Navigation">
    12.         <li><a href="">News</a></li>
    13.         <li><a href="">Gästebuch</a></li>
    14.         <li><a href="">Über mich</a></li>
    15.     </ul>
    16.     <ul id="Navigation2">
    17.         <li><a href="">Kontakt</a></li>
    18.         <li><a href="">Forum</a></li>
    19.         <li><a href="">Registration</a></li>
    20.     </ul>
    21. <div id="Content">
    22.     <p>News News News News News News News News News News News News News News News News News</p>
    23.   <p>News News News News News News News News News News News News News News News News News</p>
    24.   <p>News News News News News News News News News News News News News News News News News</p>
    25.   <p>News News News News News News News News News News News News News News News News News</p>
    26. </div>
    27. <div id="Footer"></div>
    28. </body>
    29. </html>
    30.  
    und

    Code (Text):
    1. body {
    2.     background-color: #FFFF99;
    3.     color: #FFFFFF;
    4.     width: 1024px;
    5.     height: auto;
    6. }
    7.  
    8. div#Header {
    9.     width: 1024px;
    10.     height: 200px;
    11.     background-image: url(../Header.jpg);
    12.     margin: 0;
    13.     padding: 0;
    14.    
    15. }
    16.  
    17. #Navigation li {
    18.     float: left;
    19.     width: 215px;
    20.     height: 50px;
    21.     text-align: center;
    22.     list-style: none;
    23.     margin: 0;
    24.     padding: 0;
    25. }
    26.  
    27. #Navigation a {
    28.     display: block;
    29.     text-align: center;
    30.     background-image: url(../Button.jpg);
    31.     height: 50px;
    32. }
    33.  
    34. #Navigation a:hover {
    35.     background-image: url(../Button-over.jpg);
    36. }
    37.  
    38. ul#Navigation {
    39.     background-image: url(../Hintergrund_links.jpg);
    40.     display: block;
    41.     width: 220px;
    42.     height: 800px;
    43.     margin: 0;
    44.     padding: 0;
    45. }
    46.  
    47. #Navigation2 li {
    48.     float: right;
    49.     width: 215px;
    50.     height: 50px;
    51.     text-align: center;
    52.     list-style: none;
    53.     margin: 0;
    54.     padding: 0;
    55. }
    56.  
    57. #Navigation2 a {
    58.     display: block;
    59.     background-image: url(../Button.jpg);
    60.     text-align: center;
    61.     height: 50px;
    62. }
    63.  
    64. #Navigation2 a:hover {
    65.     background-image: url(../Button-over.jpg);
    66. }
    67.  
    68. ul#Navigation2 {
    69.     float: right;
    70.     background-image: url(../Hintergrund_links.jpg);
    71.     width: 220px;
    72.     height: 800px;
    73.     margin: 0;
    74.     padding: 0;
    75. }
    76.  
    77. div#Content {
    78.     background-image: url(../Content.jpg);
    79.     width: 584px;
    80.     height: 800px;
    81.     margin: 0;
    82.     padding: 0;
    83.     color: black;
    84. }
    85.  
    86. div#Footer {
    87.     background-image: url(../Footer.jpg);
    88.     width: 1024px;
    89.     height: 50px;
    90. }
    91.  
     
    #9      
  10. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    der Content-bereich muss noch floaten. (float:left)

    wenn die Navigationslistenpunkte untereinander stehen, ist für die ein float unangebracht, das macht man nur bei horizontalen listenmenüs.

    die breite aller container (ul+div+ul) ist 1024px. bei kleineren zur Verfügung stehenden Fensterbreiten verspringen diese container. Sinnvoll ist es, dem layout eine äussere box (div) zu geben, die die entsprechende Breite hat. Dann enstehen bei kleineren Fenstern zwar scrollbalken, aber das Layout bleibt erhalten.
    Bei der Berücksichtigung der Auflösung 1024:x empfiehlt es sich aber die Breite des Layouts etwas kleiner zu wählen.
     
    Zuletzt bearbeitet: 03.10.2008
    #10      
  11. VirusX

    VirusX Aktives Mitglied

    Dabei seit:
    23.08.2008
    Beiträge:
    418
    Geschlecht:
    männlich
    Software:
    Gimp, Blender, Inkscape
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    Die Bilder wollen sich einfach nicht nebeneinander positionieren!

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <link rel="stylesheet" type="text/css" href="style.css" />
    7. </head>
    8.  
    9. <body>
    10. <div id="Seite">
    11.     <div id="Header"></div>
    12.     <ul id="Navigation_links">
    13.         <li><a href="">News</a></li>
    14.       <li><a href="">Kontakt</a></li>
    15.       <li><a href="">Forum</a></li>
    16.     </ul>
    17.     <ul id="Navigation_rechts">
    18.         <li><a href="">Forum</a></li>
    19.       <li><a href="">Latest News</a></li>
    20.       <li><a href="">Gästebuch</a></li>
    21.     </ul>
    22.  <div id="Content"></div>
    23. </div>
    24. </body>
    25. </html>
    Code (Text):
    1. body {
    2.     background-color: #FFFF99;
    3.     color: #FFFFFF;
    4. }
    5.  
    6. div#Seite {
    7.     width: 1024px;
    8.     height: 1200px;
    9.     background-color: #FFFF99;
    10. }
    11.  
    12. div#Header {
    13.     background-image: url(../Header.jpg);
    14.     height: 200px;
    15.     border: 0 0 0 0;
    16. }
    17.  
    18. ul#Navigation_links {
    19.     background-image: url(../Hintergrund_links.jpg);
    20.     width: 220px;
    21.     height: 800px;
    22.     border: 0 0 0 0;
    23.     padding: 0 0 0 0;
    24. }
    25.  
    26. #Navigation_links a {
    27.     background-image: url(../Button.jpg);
    28.     width: 215px;
    29.     height: 40px;
    30.     display: block;
    31.     text-align: center;
    32.     padding: 8px 0 0 0;
    33. }
    34.  
    35. #Navigation_links a:hover {
    36.     background-image: url(../Button-over.jpg);
    37.     width: 215px;
    38.     height: 40px;
    39.     display: block;
    40.     text-align: center;
    41.     padding: 8px 0 0 0;
    42. }
    43.  
    44. #Navigation_links li {
    45.     list-style: none;
    46. }
    47.  
    48. div#Content {
    49.     background-image: url(../Content.jpg);
    50.     float: left;
    51.     width: 584px;
    52.     height: 800px;
    53.     border: 0;
    54.     padding: 0;
    55. }
    56.  
    57. ul#Navigation_rechts {
    58.     background-image: url(../Hintergrund_rechts.jpg);
    59.     width: 220px;
    60.     height: 800px;
    61.     border: 0 0 0 0;
    62.     padding: 0 0 0 0;
    63. }
    64.  
    65. #Navigation_rechts a {
    66.     background-image: url(../Button.jpg);
    67.     width: 215px;
    68.     height: 40px;
    69.     display: block;
    70.     text-align: center;
    71.     padding: 8px 0 0 0;
    72. }
    73.  
    74. #Navigation_rechts a:hover {
    75.     background-image: url(../Button-over.jpg);
    76.     display: block;
    77. }
    78.  
    79. #Navigation_rechts li {
    80.     list-style: none;
    81. }
     
    #11      
  12. VirusX

    VirusX Aktives Mitglied

    Dabei seit:
    23.08.2008
    Beiträge:
    418
    Geschlecht:
    männlich
    Software:
    Gimp, Blender, Inkscape
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    So ich habe ein bisschen weiter rumgebastelt und auch schon einige Bilder eingebaut, die ich auch später im fertigen Design haben möchte.

    So siehts aus:

    [​IMG]

    Die Pfeile zeigen halt noch Sachen, mit denen ich nicht zufrieden bin :hmpf: und die noch verändert werden sollen.

    In der linken Navigationsleiste soll es einen Abschluss geben wie in der rechten Leiste, aber irgendwie ist das nur so verkrüppelt neben dem Bild "Forum".

    Also hier ist der Code

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>pWnD Page</title>
    6. <link rel="stylesheet" type="text/css" href="style.css" />
    7. </head>
    8. <body>
    9. <div id="Seite">
    10. <div id="Header"></div>
    11.     <ul id="Navigation_links">
    12.     <li id="Navigation_top"></li>
    13.     <li id="Calendar"><a href=""></a></li>
    14.     <li id="News"><a href=""></a></li>
    15.     <li id="Forum"><a href=""></a></li><br />
    16.     <li id="Navigation_bottom_links"></li>
    17.   </ul>
    18.     <ul id="Navigation_rechts">
    19.     <li id="Navigation_top"></li>
    20.     <li id="Squads"><a href=""></a></li>
    21.     <li id ="Polls"><a href=""></a></li>
    22.     <li id="Contact"><a href=""></a></li><br />
    23.     <li id="Navigation_bottom_rechts"></li>
    24.   </ul>
    25.   <div id="Content">
    26.     <p id="Content_top"></p>
    27.     <p>Text Text Text</p>
    28.     <p id="Content_bottom"></p>
    29.   </div>
    30.    
    31.  
    32.  
    33. </div>
    34. </body>
    35. </html>
    Code (Text):
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. body {
    5.  
    6. }
    7.  
    8. div#Seite {
    9.     width: 1024px;
    10.     height: 800px;
    11. }
    12.  
    13. div#Header {
    14.     background-image: url(../../eigenes%20Template/Header.jpg);
    15.     width: 1024px;
    16.     height: 200px;
    17.     display: block;
    18.     margin: 0;
    19. }
    20.  
    21. li {
    22.     list-style: none;
    23. }
    24.  
    25. li#Navigation_top {
    26.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Navigation_top.jpg);
    27.     width: 220px;
    28.     height: 50px;
    29.     display: block;
    30.     margin: 0 0 5px 0;
    31. }
    32.  
    33. li#Navigation_bottom_links {
    34. background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Navigation_bottom.jpg);
    35.     width: 220px;
    36.     height: 50px;
    37.     display: block;
    38.     margin: 50px 0 0 0;
    39. }
    40.  
    41. li#Navigation_bottom_rechts {
    42. background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Navigation_bottom.jpg);
    43.     width: 220px;
    44.     height: 50px;
    45.     display: block;
    46.     clear: left;
    47.     margin: 550px 0 0 0;
    48. }
    49.  
    50. /*Navigation_links Start*/
    51.  
    52. ul#Navigation_links {
    53.     width: 220px;
    54.     height: 600px;
    55.     background-color: #464646;
    56.     margin: 0 10px 0 0;
    57.     padding: 0 0 5px 0;
    58.  
    59. li {
    60.     list-style: none;
    61. }
    62.  
    63. li#Calendar a {
    64.     background-image:url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Calender.jpg);
    65.     width: 60px;
    66.     height: 60px;
    67.     display: block;
    68.     float: left;
    69.     margin: 10px 10px 0 10px;
    70. }
    71.  
    72. li#News a {
    73.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_News.jpg);
    74.     width: 60px;
    75.     height: 60px;
    76.     display: block;
    77.     float: left;
    78.     margin: 10px 10px 0 0;
    79. }
    80.  
    81. li#Forum a {
    82.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Forum.jpg);
    83.     width: 60px;
    84.     height: 60px;
    85.     display: block;
    86.     float: left;
    87.     margin: 10px 0 0 0;
    88. }
    89. /*Navigation_links Ende*/
    90.  
    91.  
    92. /*Navigation_rechts Start*/
    93.  
    94. ul#Navigation_rechts {
    95.     width: 220px;
    96.     height: 600px;
    97.     background-color: #464646;
    98.     margin: 0 0 0 0;
    99.     padding: 0 0 0 0;
    100.     float: right;
    101. }
    102.  
    103. li#Squads a {  
    104.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Squads.jpg);
    105.     width: 60px;
    106.     height: 60px;
    107.     display: block;
    108.     float: left;
    109.     margin: 10px 10px 0 10px;
    110. }
    111.  
    112. li#Polls a {
    113.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Polls.jpg);
    114.     width: 60px;
    115.     height: 60px;
    116.     display: block;
    117.     float: left;
    118.     margin: 10px 10px 0 0;
    119. }
    120.  
    121. li#Contact a {
    122.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Contact.jpg);
    123.     width: 60px;
    124.     height: 60px;
    125.     display: block;
    126.     float: left;
    127.     margin: 10px 0 0 0;
    128. }
    129.  
    130. /*Navigation_rechts Ende*/
    131.  
    132. div#Content {
    133.     float: left;
    134.     width: 564px;
    135.     height: 600px;
    136.     margin: 0 0 0 20px;
    137. }
    138.  
    139. p#Content_top {
    140.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Content_top.jpg);
    141.     width: 564px;
    142.     height: 50px;
    143.     display: block;
    144.     margin: 0;
    145. }
    146.  
    147. p#Content_bottom {
    148.     background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Content_bottom.jpg);
    149.     width: 564px;
    150.     height: 50px;
    151.     margin: 500px 0 0 0;
    152. }
    153.  
    Im Dreamweaver Browser sieht das so wie im Bild aus, aber bei Opera ist das wieder total verschoben - warum ist das so? :schmoll:
     
    #12      
  13. VirusX

    VirusX Aktives Mitglied

    Dabei seit:
    23.08.2008
    Beiträge:
    418
    Geschlecht:
    männlich
    Software:
    Gimp, Blender, Inkscape
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    So ich hab mit viel probieren das Problem selber gelöst.

    Für alle, die es interessiert: Ich habe der rechten Tabelle mit CSS float: right; und dem Content float: left; gegeben und dann die Positionen angepasst.

    [​IMG]

    Und jetzt gibts noch die Feinabstimmung
     
    #13      
  14. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Homepage: Button als Hintergrund wird abgeschnitten
    AW: Homepage: Button als Hintergrund wird abgeschnitten

    Dreifachposts und Bilder vermitteln nur wenig Eindruck von der Sache. Uploaden und einen Link posten (möglichst noch mit der 'EDIT' Funktion - dafür ist die da!) sagt mehr als seitenweise Quellcode
     
    #14      
x
×
×
teststefan