Anzeige

CSS und seine Schwierigkeiten

CSS und seine Schwierigkeiten | PSD-Tutorials.de

Erstellt von GeneralFabi, 14.10.2007.

  1. GeneralFabi

    GeneralFabi Nicht mehr ganz neu hier

    Dabei seit:
    06.03.2007
    Beiträge:
    93
    Geschlecht:
    männlich
    Ort:
    Neunkirchen (Saar)
    Software:
    Adobe Creative Suite 5 Design Premium
    Kameratyp:
    Panasonic Lumix DMC-FZ5
    CSS und seine Schwierigkeiten
    Hallo,
    ich habe mir mit HTML eine Seite erstellt, auf der ein 900x675 Pixel großes Hintergrundbild mittig angezeigt wird. In der Mitte dieses Bildes ist nun ein spezieller Hintergrund zur Hinterlegung eines Formulares.

    Auf 1280x800 Pixel ist da alles soweit so gut. Nur wenn ich nun eine kleinere Auflösung wähle, habe ich das Probleme, dass sich der Hintergrund der Fentergröße anpasst, nur der Kasten sich nicht verschiebt.

    Ich habe schon so einiges versucht und nichts hat mich auf die Lösung gebracht.

    Hier der HTML- und CSS-Quelltext:
    HTML:
    1. <table align="center" border="0" cellpadding="0" cellspacing="0" id="main_table">
    2.   <tr>
    3.     <td colspan="2" id="main_login" valign="middle"><div id="login">
    4.         <form action="" class="login" method="post">
    5.           <div class="username"><b>Benutzername</b></div>
    6.           <div>
    7.             <input class="field" name="login" size="25" type="text" />
    8.           </div>
    9.           <div class="password"><b>Passwort</b></div>
    10.           <div>
    11.             <input class="field" name="password" size="25" type="password" />
    12.           </div>
    13.           <div class="element_fieldset">
    14.             <input class="button" name="submit" type="submit" value="Anmelden" />
    15.           </div>
    16.         </form>
    17.         <br/>
    18.         Geben Sie Ihren Benutzernamen und<br/>
    19.         Ihr Passwort ein, um sich anzumelden. </div></td>
    20.   </tr>
    HTML:
    1. <style type="text/css">
    2. -->
    3. .login {
    4.     padding-top: 2px;
    5. }
    6. .password {
    7.     padding-top: 1px;
    8.     padding-bottom: 1px;
    9. }
    10. .username {
    11.     padding-bottom: 1px;
    12. }
    13. #login {
    14.     height: 150px;
    15.     left: 560px;
    16.     position: absolute;
    17.     top: 290px;
    18.     width: 255px;
    19. }
    20. #main_login {
    21.     background-image: url(../images/main_bg_cp.png);
    22.     background-repeat: no-repeat;
    23.     height: 675px;
    24.     wudth: 900px;
    25. }
    26. -->
    Ich hoffe, jemand kann mir bei diesem Problem helfen.
    Eine genaues Bild des ganzen, kann man sich unter Expression Arts Element Web - Systemsteuerung machen.
     
    Zuletzt bearbeitet: 14.10.2007
    #1      
  2. SparkAmandil

    SparkAmandil Nicht mehr ganz neu hier

    Dabei seit:
    04.03.2006
    Beiträge:
    202
    Geschlecht:
    männlich
    Ort:
    Garching
    CSS und seine Schwierigkeiten
    AW: CSS und seine Schwierigkeiten

    HTML:
    1.  
    2. <div style="position: relative; width: XXXpx; margin: 0 auto;  height:XXXpx; margin:0 auto;">HALLO WELT!</div>
    3.  
    So auf die Divs anwenden, dann sollts klappen.
     
    Zuletzt bearbeitet: 14.10.2007
    #2      
  3. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    CSS und seine Schwierigkeiten
    AW: CSS und seine Schwierigkeiten

    Hallo Fabi,
    ich würde nicht nur position:absolute rausschmeissen (bei position:absolute wird das Element aus dem Textfluß rausgenommen, d.h. die anderen Elemente verhalten sich so als wäre das absolute Element nicht da!!),
    ich würde vor allen Dingen die Tabelle rauschmeissen und das über float und clear mit entsprechendem padding und margin für die Abstände regeln.

    Ein Formular ist keine Tabelle!

    Das Grundaussehen eines Formulars über CSS stark zu verändern ist oft problematisch weil die Auswirkungen der Formatierung auf die versch. Browser oft nicht nachvollziehbar sind.

    Gruß
    Klaus
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    CSS und seine Schwierigkeiten
    AW: CSS und seine Schwierigkeiten

    Na ja... schöner Mischmasch aus altem html und "neuem"

    Vielleicht noch mal von ganz vorn anfangen...


    das hier funzt trotzdem soweit:

    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6. <title>Expression Arts Element Web - Systemsteuerung</title>
    7.  
    8. <style type="text/css">
    9. <!--
    10. body {
    11.         background-color: #000000;
    12.  
    13. }
    14. body, td, th {
    15.         color: #000000;
    16.         font-family: "Segoe UI", Tahoma, Verdana, Arial;
    17.         font-size: 11px;
    18. }
    19.  
    20. .login {
    21.     padding-top: 2px;
    22. }
    23. .password {
    24.     padding-top: 1px;
    25.     padding-bottom: 1px;
    26. }
    27. .username {
    28.     padding-bottom: 1px;
    29. }
    30. #login {
    31.     height: 150px;
    32.     margin-left:100px;
    33.     margin-top:280px;
    34.     margin-bottom: 0;
    35.     width: 255px;
    36. }
    37. #main_login {
    38.     background-image: url(http://expression-arts.ap2k.de/elementweb/system/web/images/main_bg_cp.png);
    39.     background-repeat: no-repeat;
    40.     margin:0 auto;
    41.     height: 675px;
    42.     width: 900px;
    43. }
    44.  
    45. form {display:inline; }
    46. -->
    47. </style>
    48.  
    49. </head>
    50. <body>
    51. <div id="main_login">
    52. <table align="center" border="0" cellpadding="0" cellspacing="0" id="main_table">
    53.   <tr>
    54.     <td colspan="2" valign="middle"><div id="login">
    55. <form action="" class="login" method="post">
    56.           <div class="username"><b>Benutzername</b></div>
    57.           <div>
    58.             <input class="field" name="login" size="25" type="text" />
    59.           </div>
    60.           <div class="password"><b>Passwort</b></div>
    61.           <div>
    62.  
    63.             <input class="field" name="password" size="25" type="password" />
    64.           </div>
    65.           <div class="element_fieldset">
    66.             <input class="button" name="submit" type="submit" value="Anmelden" />
    67.           </div>
    68.         </form>
    69. <br />
    70. Geben Sie Ihren Benutzernamen und<br/>
    71. Ihr Passwort ein, um sich anzumelden.
    72. </div>
    73. </td>
    74. </tr>
    75. </table>
    76. </div>
    77. </body>
    78. </html>
    79.  
     
    #4      
  5. GeneralFabi

    GeneralFabi Nicht mehr ganz neu hier

    Dabei seit:
    06.03.2007
    Beiträge:
    93
    Geschlecht:
    männlich
    Ort:
    Neunkirchen (Saar)
    Software:
    Adobe Creative Suite 5 Design Premium
    Kameratyp:
    Panasonic Lumix DMC-FZ5
    CSS und seine Schwierigkeiten
    AW: CSS und seine Schwierigkeiten

    OK. Danke, danke, danke.
    Das hilft mir sehr, ich werde das ganze mal gleich in Dreamweaver ausprobieren.
    Edit: Danke an Herr_D, es funktioniert und ich bin glücklich.
     
    Zuletzt bearbeitet: 14.10.2007
    #5      
x
×
×