Anzeige

Problemlayout - Content soll feste Höhe haben und mehr

Problemlayout - Content soll feste Höhe haben und mehr | PSD-Tutorials.de

Erstellt von Tattoomaus78, 10.09.2008.

  1. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    Hallo Ihr Lieben,

    ich brauch mal eure Hilfe.

    Ein Kunde treibt mich mal wieder in den Wahnsinn :motz:

    folgendes Layout:

    [​IMG]

    Ursprungsauftrag lautete: Layout mit fester Breite, flex. Höhe, zentriert...kein Problem...hab ich gemacht...lief alles wunderbar...

    nun hätte Kunde jedoch gern genau dieses Layout in flexibler Breite .... *planlosguck

    Weiterer wunderbarer Wunsch ist, dass die Höhe nun auch fest sein soll....soll heißen, Header und Footer immer sichtbar und Contentbereich mit Scrollbalken...aber nur der rechte, also Content 2 ....die Sidebar rechts soll ebenfalls eine 100 %ige Höhe haben.

    Versteht mich jemand? :uhm:

    Lösungsvorschläge sind sehr gern gesehen, weil ich weiss nicht, wie ich an die Sache ran gehen soll.


    der derzeitige Code wird nicht wirklich weiter helfen, aber dennoch...

    Code (Text):
    1. html, body, h1, h2, h3, h4, ul, li {
    2. margin:0;
    3. padding:0;
    4. }
    5.  
    6. img {
    7. border:0 none;
    8. }
    9.  
    10. a {
    11. color:#464544;
    12. }
    13.  
    14. a:hover {
    15. color:#FFA405;
    16. }
    17.  
    18. .clear {
    19. clear:both;
    20. }
    21.  
    22. body {
    23. background:#FFFFFF none repeat scroll 0 0;
    24. color:#464544;
    25. font-family:arial,sans-serif;
    26. font-size:12px;
    27. text-align:center;
    28. }
    29.  
    30. #wrapper {
    31. margin:auto;
    32. position:relative;
    33. text-align:left;
    34. width:900px;
    35. }
    36.  
    37. #header {
    38. background:transparent url(images/header.jpg) no-repeat scroll 0 0;
    39. height:301px;
    40. left:0;
    41. position:absolute;
    42. top:0;
    43. width:711px;
    44. }
    45.  
    46. #sidebar {
    47. background:#5F6A75 none repeat scroll 0 0;
    48. left:711px;
    49. position:absolute;
    50. top:4px;
    51. width:180px;
    52. padding-right:10px;
    53. padding-left:10px;
    54. padding-top:25px;
    55. padding-bottom:25px;
    56. }
    57.  
    58. #news {
    59. background:#5F6A75 none repeat scroll 0 0;
    60. color:#FFFFFF;
    61. }
    62.  
    63. #standort {
    64. background:#5F6A75 none repeat scroll 0 0;
    65. color:#FFFFFF;
    66. }
    67.  
    68. #content {
    69. margin:0 0 0 0;
    70. width:733px;
    71. position:top left;
    72.  
    73. }
    74. #spacer {
    75. height:301px;
    76. }
    77.  
    78. #left {
    79. background-color:#FFFFFF;
    80. border-right:2px solid #B3B3B3;
    81. float:left;
    82. margin-left:0;
    83. margin-top:13px;
    84. padding-right:10px;
    85. width:160px;
    86. }
    87. #right {
    88. background-image:url(images/bg.jpg);
    89. background-position:right top;
    90. background-repeat:no-repeat;
    91. float:left;
    92. margin-top:0;
    93. min-height:250px;
    94. *height:250px;
    95. padding-left:10px;
    96. padding-right:10px;
    97. padding-top:15px;
    98. width:514px;
    99. }
    100. .panorama {
    101. margin-bottom:10px;
    102. margin-left:0px;
    103. margin-top:10px;
    104. }
    105.  
    106. #rechts {
    107. float:left;
    108. padding-right:30px;
    109. padding-top:10px;
    110. }
    111. #mehr {
    112. margin-right:10px;
    113. text-align:right;
    114. }
    115. #mehrsidebar {
    116. margin-right:-5px;
    117. text-align:right;
    118. }
    119. span {
    120. color:#FAC424;
    121. font-weight:bold;
    122. }
    123. #line {
    124. background-image:url(images/line.jpg);
    125. background-repeat:repeat-x;
    126. height:2px;
    127. margin-bottom:20px;
    128. margin-top:20px;
    129. text-align:center;
    130. width:158px;
    131. }
    132.  
    133. #bild {
    134. margin-left:8px;
    135. }
    136.  
    137. #inhalt {
    138. margin:25px 10px 0;
    139. width:685px;
    140. }
    141.  
    142. #navlist {
    143. border:medium none;
    144. font-size:12px;
    145. font-weight:normal;
    146. letter-spacing:0;
    147. margin-left:144px;
    148. margin-top:102px;
    149. padding-left:0;
    150. text-transform:uppercase;
    151. width:148px;
    152. }
    153.  
    154. #navlist li {
    155. border-bottom:1px solid #FFFFFF;
    156. list-style-image:none;
    157. list-style-position:outside;
    158. list-style-type:none;
    159. margin:0;
    160. padding:0.25em;
    161. }
    162.  
    163. #navlist li a {
    164. color:white;
    165. text-decoration:none;
    166. }
    167.  
    168. #navlist a:hover {
    169. color:grey;
    170. text-decoration:none;
    171. }
    172.  
    173. #footer {
    174. background:#FFFFFF none repeat scroll 0 0;
    175. border-top:2px solid;
    176. color:#B3B3B3;
    177. font-size:11px;
    178. margin-bottom:20px;
    179. margin-left:0;
    180. margin-top:20px;
    181. padding:10px 0;
    182. text-align:center;
    183. width:100%;
    184. }
    185.  
    186. #footer p {
    187. margin:0;
    188. padding:0;
    189. }
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    3. <!-- TemplateBeginEditable name="doctitle" -->
    4. <title>xxx</title>
    5. <!-- TemplateEndEditable -->
    6. <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1"/>
    7. <link rel="stylesheet" href="style.css" type="text/css" />
    8. <link rel="stylesheet" href="modul.css" type="text/css" />
    9. <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    10. </head>
    11. <div id="wrapper"><!-- TemplateBeginEditable name="sidebar" -->
    12.     <div id="sidebar">
    13.         <div id="news">
    14.             <img src="images/news.jpg" />
    15.             <?PHP include('http://xxxxxxxxxxxxxx/content.php?key=31d16f9aa6d064a579758789227c62a1&cs_mid=1');?>
    16.         </div>
    17.         <div id="line"></div>
    18.         <div id="standort">
    19.           <img src="images/standort.jpg" />
    20.             <p><img src="images/lkws.jpg"/></p>
    21.             ~Lorem<br />
    22.             ~ Ipsum<br />
    23.             ~ Dolor<br />
    24.             ~ Sit<br />
    25.             ~ Amet
    26.             <div id="mehrsidebar"> <img src="images/mehr.jpg" /></div>
    27.         </div>
    28.         <div id="line"></div>
    29.         <div id="standort">
    30.             <p><img src="images/lkws.jpg"/></p>
    31.             <p><span>Consetetur sadi pscing elitr,</span>
    32.             sed dolores et ea consetetur eirmod Erat, sed diam voluptua dolores et ea consetetur pscing elitr.</p>
    33.             <p>Erat, sed diam voluptua dolores et ea consetetur </p>
    34.             <div id="mehrsidebar"> <img src="images/mehr.jpg" /></div>
    35.         </div>
    36.     </div>
    37. <!-- TemplateEndEditable -->
    38.     <div id="header">
    39.         <div id="navlist">
    40.             <ul>
    41.                 <li><a href="index.php">Startseite</a></li>
    42.                 <li><a href="produkte.php">Produkte</a></li>
    43.                 <li><a href="service.php">Service</a></li>
    44.                 <li><a href="technik.php">Technik</a></li>
    45.                 <li><a href="mittel.php">F&ouml;rdermittel</a></li>
    46.                 <li><a href="kosten.php">Energiekosten</a></li>
    47.                 <li><a href="lexikon.php">Energielexikon</a></li>
    48.                 <li><a href="fragen.php">Fragen &amp; Antworten</a></li>
    49.             </ul>
    50.         <div class="clear"> </div>
    51.         </div><!--end nav-->
    52.     </div><!--end header-->
    53.     <div id="spacer"> </div>
    54. <!-- TemplateBeginEditable name="content" -->
    55.     <div id="content">
    56.         <div id="inhalt">
    57.         </div>   <!-- TemplateEndEditable -->
    58.        
    59.     </div><!--end content-->
    60.     <div id="footer">
    61.             Startseite | &uuml;ber uns | Leistungen | Service | Kontakt | Impressum <br />
    62.             xxxxxxxxx
    63.         </div>
    64. </div> <!--end wrapper-->
    65. </body>
    66. </html>
    67.  
     
    #1      
  2. enyougyoku

    enyougyoku *nyaa*

    Dabei seit:
    20.10.2007
    Beiträge:
    72
    Geschlecht:
    männlich
    Ort:
    Germany / Stendal
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    öhm, einfach richtig die div boxen setzen und gut ist :)

    so paintmalen:

    [​IMG]
     
    #2      
  3. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    hö?...hab ich doch so ...okay bis auf das main div..das hab ich noch eingefügt..ändert aber nix an meinem Problem

    edit:
    also...ich will den footer immer unten haben den Header immer sichtbar oben....der Contentbereich soll sich der Browsergröße anpassen ....und Sidebar soll immer bis ganz an den Bildschirmrand unten gehen

    für content 2 geht nicht:

    height: sounsoviel px;
    overflow: auto;

    da der ja keine bestimmte Höhe haben soll, sondern sich ja an die Fenstergröße anpassen soll
     
    Zuletzt bearbeitet: 10.09.2008
    #3      
  4. enyougyoku

    enyougyoku *nyaa*

    Dabei seit:
    20.10.2007
    Beiträge:
    72
    Geschlecht:
    männlich
    Ort:
    Germany / Stendal
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    ähm?

    das hauptdiv soll 100% nehmen
    header(fest)
    links(100%?)
    content(100%)
    footer(fest)
    rechts(100%)

    das hauptdiv nimmt 100% der höhe weg, danach hat der header und der footer eine feste höhe und der rest nimmt den restlichen bereich weg

    edit: position:absolute; ? °_°
    als ich mir die seite eben mal nach deinem code aufgebaut und ein paare hintergrund farben eingebaut habe komme ich zu dem schluss: mit welchen fertig-code-programm hast du das erstellt?
    du solltest die seite nochmal von grund auf überarbeiten, einige sachen kann man wesentlich besser lösen ;)

    edit2:

    hauptdiv und andere div auf 100%, den content bereich den man scrollen muss in einem frame packen, die frame höhe dann per php ausrechnen lassen

    edit3 sagt: framehöhe müsste auch mit 100% auf die max höhe vom umschließenden div gehen
     
    Zuletzt bearbeitet: 10.09.2008
    #4      
  5. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    das wird wohl das beste sein...ich mach nomma neu :)
     
    #5      
  6. serverhombre

    serverhombre Guest

    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Hallo,
    so hab mal schnell was zusammen geklatscht (edit was nicht funktioniert sorry) :
    hier klicken

    Ist alles bisschen grob vor allem der Code. :hmpf:
    Gibt leider noch paar Probleme mit der anzeige z.B. im IE. Bei verschiedenen Auflösungen wirds sicher auch noch nicht stimmen:'(

    Ich hoffe trotzdem das es Hilft.:rolleyes:
     
    Zuletzt von einem Moderator bearbeitet: 10.09.2008
    #6      
  7. enyougyoku

    enyougyoku *nyaa*

    Dabei seit:
    20.10.2007
    Beiträge:
    72
    Geschlecht:
    männlich
    Ort:
    Germany / Stendal
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr


    wenn man den content runterscrollt bzw hochscrollt, überlagert der sich mit dem footer ;)
     
    #7      
  8. serverhombre

    serverhombre Guest

    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    sorry also dann funktiniert das so auch nicht :rolleyes:
    Und das hab ich leider auch übersehen.
    Vieleicht kanns jemand ja besser als ich. :rolleyes:
     
    Zuletzt von einem Moderator bearbeitet: 10.09.2008
    #8      
  9. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Nun soweit ich weiß wird das mit divs nicht gehen...

    Mit Frames gäbe es eine Lösung...
     
    #9      
  10. Jooohny

    Jooohny Gesperrt

    Dabei seit:
    17.06.2008
    Beiträge:
    122
    Geschlecht:
    männlich
    Ort:
    Wenden (Sauerland)
    Software:
    Photoshop CS3 ................ Dreamwaver CS3 ................ Cinema 4D V11 ................
    Kameratyp:
    Samsung NV24 HD
    Problemlayout - Content soll feste Höhe haben und mehr
    #10      
  11. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Ich kann dir gar nicht sagen wie dankbar ich über diesen Link bin. Es ist mir wie Schuppen von den Augen gefallen und ich muss so dämlich sein, dass ich nicht selbst drauf gekommen bin... Absolute Positionierung über den Z-Index... AHHHH ich könnt mir in den ***** beißen...

    Mal schauen ob ich das Problem damit löse...

    Edit: Ich hab jetzt nen HTML 4.01 und CSS 3 validen Quelltext der im IE 6 eine astreine Seite abgibt, macht aber leider im FF 2 und Opera 9 noch Probleme... Kann bitte jemand mal in FF 3 und IE 7 testen?

    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2.  
    3. <title>Beispiel</title>
    4. <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    5. <style type="text/css">
    6. HTML {
    7.     OVERFLOW: hidden
    8. }
    9. BODY {
    10.     BORDER-TOP-WIDTH: 0px;
    11.     PADDING-RIGHT: 10px;
    12.     PADDING-LEFT: 10px;
    13.     BORDER-LEFT-WIDTH: 0px;
    14.     BACKGROUND-COLOR: #f8f8f8;
    15.     BORDER-BOTTOM-WIDTH: 0px;
    16.     PADDING-BOTTOM: 0px;
    17.     MARGIN: 0px;
    18.     PADDING-TOP: 0px;
    19.     HEIGHT: 100%;
    20.     BORDER-RIGHT-WIDTH: 0px;
    21. }
    22.  HTML BODY {
    23.     OVERFLOW-Y: scroll;
    24. }
    25. #header {
    26.     DISPLAY: block;
    27.     Z-INDEX: 12;
    28.     RIGHT: 0px;
    29.     BACKGROUND-COLOR: yellow;
    30.     OVERFLOW: hidden;
    31.     WIDTH: 100%;
    32.     POSITION: fixed;
    33.     TOP: 0px;
    34.     HEIGHT: 150px;
    35. }
    36.  HTML #header {
    37.     RIGHT: 17px;
    38.     POSITION: absolute;
    39. }
    40. #content {
    41.     DISPLAY: block;
    42.     Z-INDEX: 2;
    43.     BACKGROUND-COLOR: blue;
    44.     OVERFLOW: hidden;
    45.     WIDTH: 150px;
    46.     POSITION: fixed;
    47.     TOP: 0px;
    48.     MARGIN-TOP: 150px;
    49.     HEIGHT: 100%;
    50. }
    51.  HTML #content {
    52.     LEFT: 3px;
    53.     POSITION: absolute;
    54. }
    55. #scroll_content {
    56.     DISPLAY: block;
    57.     Z-INDEX: 10;
    58.     BACKGROUND-COLOR: red;
    59.     MARGIN: 150px 150px 150px 150px;
    60.     OVERFLOW: hidden;
    61.     POSITION: relative;
    62. }
    63. .text {
    64.     PADDING-RIGHT: 1px;
    65.     DISPLAY: block;
    66.     PADDING-LEFT: 1px;
    67.     FLOAT: left;
    68.     PADDING-BOTTOM: 151px;
    69.     WIDTH: 90%;
    70.     COLOR: #000;
    71.     PADDING-TOP: 1px;
    72.     TEXT-ALIGN: justify;
    73. }
    74. #footer {
    75.     DISPLAY: block;
    76.     Z-INDEX: 12;
    77.     RIGHT: 0px;
    78.     BACKGROUND-COLOR: green;
    79.     OVERFLOW: hidden;
    80.     WIDTH: 100%;
    81.     POSITION: fixed;
    82.     BOTTOM: -1px;
    83.     HEIGHT: 150px;
    84. }
    85.  HTML #footer {
    86.     RIGHT: 17px;
    87.     POSITION: absolute;
    88. }
    89. #sidebar {
    90.     DISPLAY: block;
    91.     Z-INDEX: 22;
    92.     RIGHT: 0px;
    93.     BACKGROUND-COLOR: orange;
    94.     OVERFLOW: hidden;
    95.     WIDTH: 150px;
    96.     POSITION: fixed;
    97.     BOTTOM: -1px;
    98.     HEIGHT: 100%;
    99. }
    100.  HTML #sidebar {
    101.     RIGHT: 17px;
    102.     POSITION: absolute;
    103. }
    104. </head>
    105. <div id=header>header</div>
    106. <div id=content>Content</div>
    107. <div id=scroll_content>
    108. <div class=text>
    109. First Row<br>
    110. Scroll_Content<br>
    111. Scroll_Content<br>
    112. Scroll_Content<br>
    113. Scroll_Content<br>
    114. Scroll_Content<br>
    115. Scroll_Content<br>
    116. Scroll_Content<br>
    117. Scroll_Content<br>
    118. Scroll_Content<br>
    119. Scroll_Content<br>
    120. Scroll_Content<br>
    121. Scroll_Content<br>
    122. Scroll_Content<br>
    123. Scroll_Content<br>
    124. Scroll_Content<br>
    125. Scroll_Content<br>
    126. Scroll_Content<br>
    127. Scroll_Content<br>
    128. Scroll_Content<br>
    129. Scroll_Content<br>
    130. Scroll_Content<br>
    131. Scroll_Content<br>
    132. Scroll_Content<br>
    133. Scroll_Content<br>
    134. Scroll_Content<br>
    135. Scroll_Content<br>
    136. Scroll_Content<br>
    137. Scroll_Content<br>
    138. Scroll_Content<br>
    139. Scroll_Content<br>
    140. Scroll_Content<br>
    141. Scroll_Content<br>
    142. Scroll_Content<br>
    143. Scroll_Content<br>
    144. Scroll_Content<br>
    145. Scroll_Content<br>
    146. Scroll_Content<br>
    147. Scroll_Content<br>
    148. Scroll_Content<br>
    149. Scroll_Content<br>
    150. Scroll_Content<br>
    151. Scroll_Content<br>
    152. Scroll_Content<br>
    153. Scroll_Content<br>
    154. Scroll_Content<br>
    155. Ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz ganz laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanger Satz....<br>
    156. Scroll_Content<br>
    157. Scroll_Content<br>
    158. Scroll_Content<br>
    159. Scroll_Content<br>
    160. Scroll_Content<br>
    161. Scroll_Content<br>
    162. Scroll_Content<br>
    163. Scroll_Content<br>
    164. Scroll_Content<br>
    165. Scroll_Content<br>
    166. Last Row
    167. </div>
    168. </div>
    169. <div id=footer>Footer</div>
    170. <div id=sidebar>Sidebar</div>
    171. </body>
    172. </html>
     
    Zuletzt bearbeitet: 12.09.2008
    #11      
  12. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Jooohny & Top_Gun .... Daaaaaannnnkkkkeeeeee...das hilft mir wirklich weiter.... *verneig
     
    #12      
  13. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Wenn du ne Lösung hast die Browserübergreifen funktioniert wäre ich dir sehr verbunden wenn du die mit uns teilen könntest... Würde gerne meinen Horizont erweitern, bin im Selbstversuch aber heute mehrfach gescheitert...
     
    #13      
  14. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    ich bin jetzt genauso weit wie du... IE läuft...FF, Opera wollen noch nicht so richtig :(
     
    #14      
  15. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    :D grandios, dafür habe ich sogar mehrere Möglichkeiten gefunden. Leider keine die in nem anderen Browser funzt...
     
    #15      
  16. Jooohny

    Jooohny Gesperrt

    Dabei seit:
    17.06.2008
    Beiträge:
    122
    Geschlecht:
    männlich
    Ort:
    Wenden (Sauerland)
    Software:
    Photoshop CS3 ................ Dreamwaver CS3 ................ Cinema 4D V11 ................
    Kameratyp:
    Samsung NV24 HD
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Wie wen FF und IE gehen geht auch meistens ales andere Opera und KO sind in so sachen doch sehr pflegeleicht :D

    Mal ein Pic von verzerungen oder anlichen in anderen Brower und der Quelltext und schon gehts los

    let´s rocken roll

    gruß:Jooohny
     
    #16      
  17. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    ney....IE geht nach dem Code von Top_Gun aber FF und Co. wollen das nich
     
    #17      
  18. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Doppelpost :D

    ....sodele...ich habs...sicher nicht die eleganteste Lösung aber läuft im IE 6 +7, FF 2 + 3, Opera

    Klick

    Code (Text):
    1.  
    2. html {
    3. height:100%;
    4. max-height:100%;
    5. padding:0;
    6. margin:0;
    7. border:0;
    8. background:#fff;
    9. font-size:76%;
    10. font-family:"arial", Helvetica, sans-serif;
    11. overflow: hidden;
    12. }
    13.  
    14. body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
    15.  
    16. #header {
    17. position:absolute;
    18. margin:0;
    19. top:0;
    20. left:0;
    21. display:block;
    22. width:100%;
    23. background-repeat:no-repeat;
    24. z-index:5;
    25. background:red;
    26. height:301px;
    27. overflow:hidden;
    28.  
    29. }
    30.  
    31. #foot {
    32. position:absolute;
    33. margin:0;
    34. bottom:0;
    35. left:0;
    36. display:block;
    37. width:100%;
    38. height:20px;
    39. *height:40px;
    40. z-index:5;
    41. background:blue;
    42. overflow:hidden;
    43. padding:10px 0;
    44. }
    45.  
    46. * html #content, * html #scrollcontent,  {height:100%; top:0; bottom:0; border-top:300px solid #fff; border-bottom:40px solid #fff;}
    47.  
    48. #content {
    49. background-color:orange;
    50. bottom:40px;
    51. font-size:1em;
    52. left:0;
    53. margin-left:0px;
    54. overflow:hidden;
    55. padding:10px;
    56. position:absolute;
    57. top:301px;
    58. width:14%;
    59. z-index:4;
    60. }
    61. #scrollcontent {
    62. background:#fff none repeat scroll 0 0;
    63. bottom:40px;
    64. font-size:1em;
    65. left:15%;
    66. overflow-x:hidden;
    67. overflow-y:auto;
    68. position:absolute;
    69. top:301px;
    70. padding:10px;
    71. width:67%;
    72. *width:70%;
    73. z-index:4;
    74. }
    75.  
    76. #sidebar {
    77. background:green none repeat scroll 0 0;
    78. height:100%;
    79. overflow:hidden;
    80. padding:25px 10px;
    81. position:absolute;
    82. right:0;
    83. top:0;
    84. width:15%;
    85. z-index:10;
    86. }
    87.  
    HTML:
    1.  
    2. <!-- IE into quirks mode -->
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    7. <title>Test</title>
    8. </head>
    9.  
    10. <div id="sidebar"></div>
    11.  
    12. <div id="content">
    13. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    14. </div>
    15.  
    16. <div id="scrollcontent">
    17. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
    18.  
    19. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
    20.  
    21. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
    22.  
    23. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  
    24.  
    25. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.  
    26.  
    27. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.  
    28.  
    29. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.  
    30.  
    31. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
    32.  
    33. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
    34.  
    35. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
    36.  
    37. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  
    38.  
    39. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.  
    40.  
    41. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.  
    42.  
    43. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    44. </div>
    45.  
    46. <div id="header"></div>
    47. <div id="foot"></div>
    48. </body>
    49. </html>
    50.  
    51.  
    52.  
     
    Zuletzt bearbeitet: 13.09.2008
    #18      
  19. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Ich sag schon mal: DANKE :D

    Werd mir das morgen in Ruhe mal anschauen...

    Edit: Ähm, kann es sein, dass du bei deinem Livebeispiel anderen Code verwendest? Der von dir gepostete Quelltext bringt keine funktionelle Lösung im IE 6...
    Und in Opera 9 funktioniert dein Livebeispiel auch nicht...
     
    Zuletzt bearbeitet: 15.09.2008
    #19      
  20. chillyorker

    chillyorker Weiß_Nix

    Dabei seit:
    04.09.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Problemlayout - Content soll feste Höhe haben und mehr
    AW: Problemlayout - Content soll feste Höhe haben und mehr

    Mein Vorschlag wäre es hier mit CSS-Hack zu arbeiten:
    Im Header
    <!--[if lt IE 7]>
    <link href="CSS/css.css" rel="stylesheet" type="text/css" media="Schauen_wir_mal" />
    <![endif]-->

    Das ist bisher die beste Lösung übergreifende perfekte Seite für alle Browser zu proggen!

    Nur ein Vorschlag und eine Möglichkeit!

    Habe ich es richtig verstanden: Der Scrollbalken, wie dem Code zu entnehmen, ist ganz rechts positioniert.
    Den kann man auch in die Mitte setzen. Mit Javascript:
    innerHeight

    1x für Explorer und 1x für Mozilla.
    Mit PHP berechnest du die Differenz und gibst diese an alle anderen Seiten weiter. Somit kann man auch overflow:auto verwenden!

    Hier ein Ausschnitt:
    ..../div>
    <div id=scroll_content>
    <div style="height:<?php echo (abc-250); ?>px; // abc wurde vorher mit inner.height über document.write ausgegeben nur mozilla - bei Explorer schau einfach hier - W3C DOM Compatibility - CSS Object Model View! - Also, ich habe eine Startseite, die einfach und dezent bleibt- da hole ich mir alle Informationen raus und gebe diese via POST[] weiter! Ist für den Beuscher angenehmer!
    overflow: auto;
    PADDING-RIGHT: 1px;
    PADDING-LEFT: 1px;
    FLOAT: left;
    PADDING-BOTTOM: 151px;
    WIDTH: 90%;
    COLOR: #000;
    PADDING-TOP: 1px;
    TEXT-ALIGN: justify;">
    First Row<br>
    Scroll_Content<br>
    Scroll_Content<br>
    Scroll_Content<br>
    Scroll_Content<br>
    .....
     
    Zuletzt bearbeitet: 15.09.2008
    #20      
x
×
×
teststefan