Seite beim verkleinern nicht zusammen drücken

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Seite beim verkleinern nicht zusammen drücken

    Hallo,

    ich habe ein komischesProblem.

    Sobald man die Seite im Browser als Fenster auf hat und dann in der Breite verkleinert drücken sich alle Divs und Inhalte zusammen und es sieht katastrophal aus :( (Bild)
    Ich würde es gerne so haben das wenn man das Fenster in der Breite verkleinert einfach so bleibt allerdings ein Scrollbalken erscheint wo man dann hin und her scrollen kann aber der Inhalt bleibt komplett stehen so wie er eigentlich aussieht. So wie hier im Forum. Wenn ihr das mal hier ausprobiert zu verkleinern dann erscheint ein Scrollbalken wo man dann hin und her scrollen kann.

    Hier ist mein Code:

    Quellcode

    1. <?xml version="1.0" encoding="iso-8859-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" lang="de" xml:lang="de">
    4. <head>
    5. <meta http-equiv="content-type" content="text/html" />
    6. <title>AquinasX Warenverwaltung</title>
    7. <link href="templates/style_admin.css" rel="stylesheet" type="text/css" />
    8. <link id="luna-tab-style-sheet" type="text/css" rel="stylesheet" href="templates/tabpane/tab.css" />
    9. <script type="text/javascript" src="templates/tabpane/tabpane.js"></script>
    10. </head>
    12. <body>
    13. <div class="complete_site">
    14. <div class="header"><img src="images/logo_admin.png" width="266" height="94" alt="AquinasX" /></div>
    15. <div class="navi">
    16. <a href="admin.php?section=overview"><span class="navi_font">&raquo; &Uuml;bersicht</span></a>&nbsp; &nbsp; &nbsp; &nbsp;
    17. <a href="admin.php?section=purchased_products"><span class="navi_font">&raquo; Wareneing&auml;nge</span></a>&nbsp; &nbsp; &nbsp; &nbsp;
    18. <a href="admin.php?section=sold_products"><span class="navi_font">&raquo; Warenausg&auml;nge</span></a>&nbsp; &nbsp; &nbsp; &nbsp;
    19. <a href="admin.php?section=purchased_products"><span class="navi_font">&raquo; Produkt Gruppen</span></a>&nbsp; &nbsp; &nbsp; &nbsp;
    20. <a href="admin.php?section=purchased_products"><span class="navi_font">&raquo; Lieferanten</span></a>&nbsp; &nbsp; &nbsp; &nbsp;
    21. <a href="admin.php?section=purchased_products"><span class="navi_font">&raquo; Kunden</span></a>&nbsp; &nbsp; &nbsp; &nbsp;
    22. </div>
    23. <div class="content_all">
    24. <div class="first_content_box">
    25. <table cellpadding="2" cellspacing="0" border="0" width="100%">
    26. <tr>
    27. <td align="center" valign="middle" width="5%">
    28. <img src="images/icons/large/desktop.png" width="48" height="48" border="0" alt="" />
    29. </td>
    30. <td align="left" valign="middle" width="80%">
    31. <span class="titlefont">{LANG_MAIN_TITLE}</span><br />
    32. <span class="normalfont">{LANG_MAIN_TITLE_DESCRIPTION}</span>
    33. </td>
    34. <td align="center" valign="middle" width="5%">
    35. <img src="images/icons/large/desktop.png" width="48" height="48" border="0" alt="" /><br />
    36. <a href="admin.php?section=overview">&Uuml;bersicht</a>
    37. </td>
    38. <td align="center" valign="middle" width="5%">
    39. <img src="images/icons/large/settings.png" width="48" height="48" border="0" alt="" /><br />
    40. <a href="admin.php?section=settings">Einstellungen</a>
    41. </td>
    42. <td align="center" valign="middle" width="5%">
    43. <img src="images/icons/large/protocol.png" width="48" height="48" border="0" alt="" /><br />
    44. <a href="admin.php?section=protocol">Protokoll</a>
    45. </td>
    46. </tr>
    47. </table>
    48. <br />
    49. <div class="second_content_box">
    50. <div style="float: left; width: 50%;">
    51. <span class="boldfont">{LANG_MAIN_FAST_ACCESS}</span><br />
    52. <span class="normalfont">{LANG_MAIN_FAST_ACCESS_TEXT}</span><br />
    53. <br />
    54. <br />
    55. <table cellpadding="2" cellspacing="0" border="0" width="100%">
    56. <tr>
    57. <td align="center" valign="middle" width="7%">
    58. <a href="admin.php?section=purchased_products&option=add"><img src="images/icons/large/purchased_products_add_small.png" width="32" height="32" border="0" alt="" /></a>
    59. </td>
    60. <td align="left" valign="middle" width="93%">
    61. <a href="admin.php?section=purchased_products&option=add"><span class="boldfont">{LANG_MAIN_ADD_PURCHASED_PRODUCTS}</span></a><br />
    62. <span class="normalfont">{LANG_MAIN_ADD_PURCHASED_PRODUCTS_TEXT}</span>
    63. </td>
    64. </tr>
    65. <tr>
    66. <td align="center" valign="middle" width="7%">
    67. <a href="admin.php?section=sold_products&option=add"><img src="images/icons/large/sold_products_add_small.png" width="32" height="32" border="0" alt="" /></a>
    68. </td>
    69. <td align="left" valign="middle" width="93%">
    70. <a href="admin.php?section=sold_products&option=add"><span class="boldfont">{LANG_MAIN_ADD_SOLD_PRODUCTS}</span></a><br />
    71. <span class="normalfont">{LANG_MAIN_ADD_SOLD_PRODUCTS_TEXT}</span>
    72. </td>
    73. </tr>
    74. <tr>
    75. <td align="center" valign="middle" width="7%">
    76. <a href="admin.php?section=user&option=add"><img src="images/icons/large/customer_add_small.png" width="32" height="32" border="0" alt="" /></a>
    77. </td>
    78. <td align="left" valign="middle" width="93%">
    79. <a href="admin.php?section=user&option=add"><span class="boldfont">{LANG_MAIN_ADD_USER}</span></a><br />
    80. <span class="normalfont">{LANG_MAIN_ADD_USER_TEXT}</span>
    81. </td>
    82. </tr>
    83. <tr>
    84. <td align="center" valign="middle" width="7%">
    85. <a href="admin.php?section=settings"><img src="images/icons/large/settings_small.png" width="32" height="32" border="0" alt="" /></a>
    86. </td>
    87. <td align="left" valign="middle" width="93%">
    88. <a href="admin.php?section=settings"><span class="boldfont">{LANG_MAIN_SETTINGS}</span></a><br />
    89. <span class="normalfont">{LANG_MAIN_SETTINGS_TEXT}</span>
    90. </td>
    91. </tr>
    92. </table>
    93. </div>
    94. <div style="float: right; width: 50%;">
    95. <!-- start of TAB PANE 1 -->
    96. <div class="tab-pane" id="tabPane1">
    97. <script type="text/javascript">
    98. tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
    99. </script>
    100. <div class="tab-page" id="tabPage1">
    101. <h2 class="tab">{LANG_MAIN_OVERVIEW_TAB}</h2>
    102. <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
    103. <span class="boldfont">{LANG_MAIN_INFORMATION}</span><br />
    104. <span class="normalfont">{LANG_MAIN_INFORMATION_TEXT}</span><br />
    105. <br />
    106. <br />
    107. <table border="0" width="100%" cellpadding="2" cellspacing="0">
    108. <tr>
    109. <td><span class="boldfont">{LANG_MAIN_LOGIN_NAME}</span></td>
    110. <td><span class="normalfont">{USER_LOGGED_IN}</span></td>
    111. </tr>
    112. <tr>
    113. <td><span class="boldfont">{LANG_MAIN_LAST_LOGIN}</span></td>
    114. <td><span class="normalfont">12. September 2008 20:41 Uhr</span></td>
    115. </tr>
    116. <tr>
    117. <td><hr color="#000" size="1" /></td>
    118. <td><hr color="#000" size="1" /></td>
    119. </tr>
    120. <tr>
    121. <td><span class="boldfont">{LANG_MAIN_LAST_PURCHASED_PRODUCT}</span></td>
    122. <td><span class="normalfont">Devil - 450,50 &euro;, 12. September 2008 </span></td>
    123. </tr>
    124. <tr>
    125. <td><span class="boldfont">{LANG_MAIN_LAST_SOLD_PRODUCT}</span></td>
    126. <td><span class="normalfont">Herr Mustermann - 120 &euro;, 11. September 2008</span></td>
    127. </tr>
    128. </table>
    129. </div>
    130. <div class="tab-page" id="tabPage2">
    131. <h2 class="tab">{LANG_MAIN_USER_INFORMATION_TAB}</h2>
    132. <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
    133. <!-- BEGIN user -->
    134. <table border="0" width="100%" cellpadding="2" cellspacing="0">
    135. <tr>
    136. <td><span class="boldfont">{LANG_MAIN_USER_NAME}</span></td>
    137. <td><span class="normalfont">{user.USER_LOGGED_IN}</span></td>
    138. </tr>
    139. <tr>
    140. <td><span class="boldfont">{LANG_MAIN_USER_IP_ADRESS}</span></td>
    141. <td><span class="normalfont">{user.IP_ADRESS}</span></td>
    142. </tr>
    143. <tr>
    144. <td><span class="boldfont">{LANG_MAIN_USER_BROWSER}</span></td>
    145. <td><span class="normalfont">{user.BROWSER}</span></td>
    146. </tr>
    147. </table>
    148. <!-- END user -->
    149. </div>
    150. </div>
    151. <!-- exit of TAB PANE 1 -->
    152. </div>
    153. <br clear="all" />
    154. </div>
    155. </div>
    156. </div>
    157. </div>
    159. </body>
    160. </html>
    Alles anzeigen


    Kann sein das vllt zwischendurch ein <div> nicht zugemacht wurde, weil ich bisschen rumprobiere und das vllt übersehen habe.

    Im nächsten Beitrag geht es weiter da die Nachricht sonst zu lang ist.

  • Hier die CSS Datei:

    Quellcode

    1. @charset "utf-8";
    2. /* CSS Document */
    4. body,td,th {
    5. font-size: 12px;
    6. color: #000000;
    7. font-family: Arial, sans-serif;
    8. }
    9. html {
    10. height: 100%;
    11. }
    12. body {
    13. background-color: #FFFFFF;
    14. height: 100%;
    15. margin: 0%;
    16. padding: 0%;
    17. }
    19. a:link {font-family: Arial, sans-serif; font-size: 12px; color: #000000; text-decoration: underline; font-weight: bold;}
    20. a:visited {font-family: Arial, sans-serif; font-size: 12px; color: #000000; text-decoration: underline; font-weight: bold;}
    21. a:hover {font-family: Arial, sans-serif; font-size: 12px; color: #000000; text-decoration: underline; font-weight: bold;}
    22. a:active {font-family: Arial, sans-serif; font-size: 12px; color: #000000; text-decoration: underline; font-weight: bold;}
    24. .normalfont {
    25. font-size: 11px;
    26. color: #000000;
    27. font-family: Verdana, Arial, Helvetica, sans-serif;
    28. }
    29. .boldfont {
    30. font-size: 11px;
    31. font-weight: bold;
    32. color: #000000;
    33. font-family: Verdana, Arial, Helvetica, sans-serif;
    34. }
    35. .titlefont {
    36. font-size: 22px;
    37. font-weight: bold;
    38. color: #000000;
    39. font-family: Verdana, Arial, Helvetica, sans-serif;
    40. }
    41. .navi_font {
    42. font-size: 11px;
    43. font-weight: bold;
    44. color: #FFFFFF;
    45. font-family: Verdana, Arial, Helvetica, sans-serif;
    46. }
    47. input[type=text], input[type=password] {
    48. border: 1px solid #000000;
    49. padding: 2px;
    50. }
    51. input[type=text]:focus, input[type=password]:focus {
    52. background-color: #fff7cc;
    53. padding: 2px;
    54. }
    55. .complete_site {
    56. height: 100%;
    57. }
    58. .header {
    59. background: url(../images/header_background.png) 266px 0px;
    60. border-bottom: 1px solid #000;
    61. }
    62. .navi {
    63. background: url(../images/navi_background.png);
    64. border-bottom: 1px solid #000;
    65. height: 23px;
    66. color: #FFFFFF;
    67. padding-left: 10px;
    68. padding-top: 4px;
    69. }
    70. .content_box_title {
    71. background-color: #FFF;
    72. height: 25px;
    73. padding: 1px;
    74. text-align: center;
    75. border: 1px solid #000;
    76. }
    77. .content_box_title_in {
    78. background-image: url(../images/content_box_title.png);
    79. margin: auto;
    80. padding-top: 5px;
    81. border: 1px solid #000;
    82. height: 18px;
    83. }
    84. .content_box {
    85. background-color: #fcfcfe;
    86. border: 1px solid #000;
    87. padding-top: 2px;
    88. padding-left: 3px;
    89. text-align: left;
    90. margin-top: 1px;
    91. }
    92. .content_all {
    93. padding: 10px;
    94. overflow: scroll;
    95. }
    96. .first_content_box {
    97. border: 1px solid #A5A5A5;
    98. background-color: #FFFFFF;
    99. padding: 10px;
    100. }
    101. .second_content_box {
    102. border: 1px solid #E7E7E7;
    103. background-color: #F8F8F8;
    104. padding: 10px;
    105. }
    Alles anzeigen


    Ich hoffe mir kan da einer helfen, wäre nämlich schön wenn es so wäre wie ich es beschrieben habe :(!

    Vielen Dank!

    Mit freundlichen Grüßen,

    Burak

  • Hab jetzt mal ein DynDNS Account eingerichtet:

    vicodyn.dyndns.org/ax_pm/admin.php

    Nachdem Snowflake gemeint hat in IE geht min-width und min-height nicht ist mir ein weiteres Problem aufgefallen. Das DIV wirdunterschiedlich groß und klein und die anderen Div's sind über der oberen Div Box.
    Am besten mal die Seite mit dem IE aufrufen und anschauen - das regt mich jetzt langsam wirklich auf weil mir das vollkommen die Motivation raubt für sowas :(!


    CSS:

    vicodyn.dyndns.org/ax_pm/templates/style_admin.css

    HTML Datei:

    vicodyn.dyndns.org/ax_pm/templates/admin.html

    Hoffe mir kann da einer helfen

    Dankeschön.

  • So!

    Kurze Sache von vorher:

    Ich hatte ja das Problem das der Inhalt zusammen gedrückt wird wenn man das Fenster verkleinert. In FF geht min-height und min-width sowieso. In IE7 geht min-width und min-height nun endlich auch.
    Leider geht es bei IE6 demnach nicht, das heißt sobald man das Fenster verkleinert wird der Inhalt zusammen gedrückt. Ich glaub da kann man nichts machen oder?

    Zum jetzigen Problem:

    Ich habe nun herausgefunden woran das liegt. nach SELFHTML muss man für äußere Div eine width-Angabe benutzen.

    Wenn Sie für ein Element eine Angabe zu float notieren, mussten Sie gemäß CSS2 auch eine Angabe zu nach oben width definieren. Gemäß CSS 2.1 (und der tatsächlichen Umsetzung durch die Browser) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.


    Ich habe jetzt in .second_content_box eine width Angabe von 98.5% hinzugefügt. Wenn das Fenster maximiert ist sieht es ganz normal aus (oberes Fenster auf dem Bild).
    Wenn das Fenster verkleinert wird oder bei einer Auflösung von 800x600 aufgerufen wird, dann wird wegen den 98.5% der Inhalt bis zum Rand vom äußeren Content Box ausgebreitet. (unteres Fenster auf dem Bild).

    Das ist zwar nicht wirklich ein großes Problem, ich freu mich schon dasich endlich heraus gefunden habe woran das alles lag, trotzdem würde es mich gerne Interessieren was man dagegene machen kann. Ich dachte vielleicht an irgendetwas wie z.B. width: 100% MINUS 10px^^. Leider geht sowas nicht.

    Eine Frage noch: Ist CSS 2.1 Standard bei Firefox und IE7? Weil bei SELFHTML steht das bei CSS 2.1 man keine width-Angabe bei float machen muss oo.

    Danke!

    MFG

    Burak

    P.S.: Ich glabu IE braucht kein overflow: auto oder so für einen Scrollbalken oder?

    Anhang:

    BILD

    EDIT:

    Kollege hat Screenshot gemacht wie es beim IE6 aussieht. Habe leider nur IE7.

    npshare.de/files/38/4527/ie.png

    Furchtbar oder x)?

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Illidan ()

  • dynambee schrieb:

    Man könnte den Internet Explorer doch überlisten? ;)

    Quellcode

    1. div#container {
    2. min-width: 800px;
    3. width: auto !important;
    4. width: 800px;
    5. }


    Probiers einfach mal aus.. :thumbsup:


    Perfekt! Es klappt wirklich - habe die 800px auf 600px umgeändert und nun komplett normal aus ^_^!

    Vielen Dank!

    Ich habe mir jetzt zwar doch noch überlegt wieder eine Navigation zuerstellen aber jetzt weis ich wenigstens falls ich wieder so ein Design mache oder wenn ich das fortführe, wie ich das machen muss.

    Danke an alle!

  • Also, irgendwie stolpere ich jeden Tag über solche dummen Probleme...

    Ich habe jetzt die ganze Seite (nicht die jetzt oben) in ein DIV getan mit height: 100% und width: 100%;. In diesem DIV sind dann zwei weitere DIV's. Die Navigation ist ca. 200px breit und beinhaltet float: left;.
    Daneben soll der Content Bereich sein. Dieser soll eigentlich immer so breit sein wie die Fenstergröße erlaubt. Das sollte doch ein DIV eigentlich machen da es ein Blockelement ist oder etwa nicht? (Es hat auch float: left;)
    Wenn ich width: 100%; mache wird das Div nach unten gesetzt weil nicht genügend platzt da ist :(!

    Im IE funtkioniert es wie es aussieht allerdings im FF nicht :(!

    EDIT: Habe jetzt in nem Forum gelesen das ich anstatt float: left und width einfach marign-left: navigation_breite; eingeben soll.
    Das funtkioniert eigentlich auch allerdings wir dann das Tabpane (so ein Skript für so Tab Oberfläche) nach unten gezogen. So weit nach unten wie auch die Navigation Inhalt hat.
    Somit ist ein großer Abstan zwischen den Tab Control und dem Tab Inhalt Box. =/

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Illidan ()