Anzeige

CSS: float - IE will, FF und Opera nicht

CSS: float - IE will, FF und Opera nicht | PSD-Tutorials.de

Erstellt von Top_Gun, 25.09.2008.

  1. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    CSS: float - IE will, FF und Opera nicht
    So, hier mal nen Hilfegesuch von mir. Irgendwie sehe ich den Wald nicht...

    Meine Seite soll ein simples Layout bekommen:
    HTML:
    1. <div>                             Header                             </div>
    2. <div>Menu 150px breit</div><div>Content variabel breit</div>
    3. <div>                              Footer                              </div>
    Ok, bissl komplizierter ist es schon... über dem Header (z-index) liegt noch ein Title-div mit dem Logo als BG, darin ein durchsichtiges .gif als Link, aber ich glaube das können wir vernachlässigen.

    Das Problem liegt jetzt darin, dass FF 2.x und Opera 9 den Content auf 100% Breite ziehen und unter meinem Menu anzeigen. Der IE 6 zeigt es richtig an...

    Weiß jemand Rat?


    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    3. <link rel="stylesheet" href="css/style.css" type="text/css">
    4. <!--[if IE 6]>
    5. <link rel="stylesheet" href="css/style-ie.css" type="text/css">
    6. <![endif]-->
    7.  
    8. <link rel="alternate" type="application/rss+xml" title="RSS-Feed: News" href="rss_news.php" />
    9.  
    10. <title>Titel</title>
    11. </head>
    12.  <div id="title">
    13.  <a href="index.php"><img src="http://www.psd-tutorials.de/modules/Forum/images/spacer.gif" id="logo" /></a>
    14.  </div>
    15.  <div id="header">
    16.  </div>
    17.  <div id="menu">
    18.  
    19.   <div class="menucontainer">
    20.    <p class="menutitle">MENU</p>
    21.    <a class="menu" href="index.php?id=news">Aktuelles</a>
    22.    <a class="menu" href="index.php?id=impressum">Impressum</a>
    23.    <a class="menu" href="index.php?id=kontakt">Kontakt</a>
    24.   </div>
    25.   <div class="menucontainer">
    26.    <p class="menutitle">Administration</p>
    27.    <a class="menu" href="admin/acp.php">Login</a>
    28.   </div>
    29.  
    30.  
    31.  </div>
    32.  <div id="content">
    33.  
    34. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    35.  --
    36.  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.
    37.  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.
    38.  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.
    39.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    40.  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.
    41.  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.
    42.  
    43.  
    44.  </div>
    45. <div id="copyright">&copy;2008 by Top Gun</div>
    46. </body>
    47. </html>
    48.  
    style-ie.css
    HTML:
    1. body {
    2.  font-family:Verdana;
    3.  font-size:12px;
    4.  color:#000000;
    5.  background-color:#ddeeff;
    6.  margin:0px;
    7.  width:100%;
    8. }
    9.  
    10. #logo {
    11.  width:100%;
    12.  height:100%;
    13.  border:0;
    14.  overflow:hidden;
    15. }
    16.  
    17. #header {
    18.  height:300px;
    19.  padding:0;
    20.  margin:0;
    21.  background-color:#ddeeff;
    22.  border-bottom:1px solid #ddeeff;
    23.  text-align:center;
    24.  background-image: url(../images/Header_Background.gif);
    25. }
    26.  
    27. #title {
    28.  z-index:100;
    29.  position:absolute;
    30.  height:300px;
    31.  padding:0;
    32.  margin:0;
    33.  top:0px;
    34.  right:0px;
    35.  width:100%;
    36.  background-image: url(../images/Logo.gif);
    37.  background-repeat:no-repeat;
    38.  background-position:right;
    39. }
    40.  
    41. #menu {
    42.  width:150px;
    43.  float:left;
    44.  text-align:center;
    45. }
    46.  
    47. .menutitle{
    48.  font-weight:bold;
    49.  text-align:center;
    50.  margin:2px;
    51. }
    52.  
    53. .menucontainer {
    54.  border:1px solid #000;
    55.  background-color:#1d3c72;
    56.  color:#ffffff;
    57.  width:120px;
    58.  margin:10px;
    59. }
    60.  
    61. a:link, a:visited, a:focus, a:hover, a:active {
    62.  text-decoration:underline;
    63.  font-weight:normal;
    64.  color:#005743;
    65.  font-size:12px;
    66. }
    67.  
    68. a:focus, a:hover, a:active {
    69.  color:#ff0000;
    70. }
    71.  
    72. a.menu {
    73.  display:block;
    74.  padding:3px;
    75.  border-top:1px solid #000;
    76.  background-color:#ccddee;
    77.  text-align:center;
    78.  color:#000000;
    79.  text-decoration:none;
    80. }
    81.  
    82. a.menu:link, a.menu:visited {
    83.  color:#000000;
    84.  background-color:#ccddee;
    85.  text-decoration:none;
    86. }
    87.  
    88. a.menu:focus, a.menu:hover, a.menu:active {
    89.  color:#000000;
    90.  font-weight:bold;
    91. }
    92.  
    93. #content {
    94.  border-left:1px solid #ddeeff;
    95.  background-color:#ddeeff;
    96.  padding:0px 10px;
    97.  min-height:350px;
    98.  text-align:center;
    99.  float:left;
    100. }
    101.  
    102. #copyright {
    103.  clear:both;
    104.  height:100%;
    105.  margin:0px auto;
    106.  padding:auto;
    107.  border:0px solid #000;
    108.  text-align:center;
    109.  width:200px;
    110.  background-color:#ddeeff;
    111. }
    style.css
    HTML:
    1. body {
    2.  font-family:Verdana;
    3.  font-size:12px;
    4.  color:#000000;
    5.  background-color:#ddeeff;
    6.  margin:0px;
    7.  width:100%;
    8. }
    9.  
    10. #logo {
    11.  width:100%;
    12.  height:100%;
    13.  border:0;
    14.  overflow:hidden;
    15. }
    16.  
    17. #header {
    18.  height:300px;
    19.  padding:0;
    20.  margin:0;
    21.  background-color:#ddeeff;
    22.  border-bottom:1px solid #ddeeff;
    23.  text-align:center;
    24.  background-image: url(../images/Header_Background.png);
    25. }
    26.  
    27. #title {
    28.  z-index:100;
    29.  position:absolute;
    30.  height:300px;
    31.  padding:0;
    32.  margin:0;
    33.  top:0px;
    34.  right:0px;
    35.  width:100%;
    36.  background-image: url(../images/Logo.png);
    37.  background-repeat:no-repeat;
    38.  background-position:right;
    39. }
    40.  
    41. #menu {
    42.  width:150px;
    43.  float:left;
    44.  text-align:center;
    45. }
    46.  
    47. .menutitle{
    48.  font-weight:bold;
    49.  text-align:center;
    50.  margin:2px;
    51. }
    52.  
    53. .menucontainer {
    54.  border:1px solid #000;
    55.  background-color:#1d3c72;
    56.  color:#ffffff;
    57.  width:120px;
    58.  margin:10px;
    59. }
    60.  
    61. a:link, a:visited, a:focus, a:hover, a:active {
    62.  text-decoration:underline;
    63.  font-weight:normal;
    64.  color:#005743;
    65.  font-size:12px;
    66. }
    67.  
    68. a:focus, a:hover, a:active {
    69.  color:#ff0000;
    70. }
    71.  
    72. a.menu {
    73.  display:block;
    74.  padding:3px;
    75.  border-top:1px solid #000;
    76.  background-color:#ccddee;
    77.  text-align:center;
    78.  color:#000000;
    79.  text-decoration:none;
    80. }
    81.  
    82. a.menu:link, a.menu:visited {
    83.  color:#000000;
    84.  background-color:#ccddee;
    85.  text-decoration:none;
    86. }
    87.  
    88. a.menu:focus, a.menu:hover, a.menu:active {
    89.  color:#000000;
    90.  font-weight:bold;
    91. }
    92.  
    93. #content {
    94.  border-left:1px solid #ddeeff;
    95.  background-color:#ddeeff;
    96.  padding:0px 10px;
    97.  min-height:350px;
    98.  text-align:center;
    99.  float:left;
    100. }
    101.  
    102. #copyright {
    103.  clear:both;
    104.  height:100%;
    105.  margin:0px auto;
    106.  padding:auto;
    107.  border:0px solid #000;
    108.  text-align:center;
    109.  width:200px;
    110.  background-color:#ddeeff;
    111. }
    Edit: Ich weiß das es noch kein valides (X)HTML ist aber daran sollte es ja wohl nicht liegen...
     
    #1      
  2. Puschkin

    Puschkin Noch nicht viel geschrieben

    Dabei seit:
    11.09.2008
    Beiträge:
    24
    Geschlecht:
    männlich
    CSS: float - IE will, FF und Opera nicht
    AW: CSS: float - IE will, FF und Opera nicht

    Edit: sorry hab falsch gelesen...
     
    Zuletzt bearbeitet: 25.09.2008
    #2      
  3. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    CSS: float - IE will, FF und Opera nicht
    AW: CSS: float - IE will, FF und Opera nicht

    Code (Text):
    1.  
    2. #content {
    3.  border-left:1px solid #ddeeff;
    4.  background-color:#ddeeff;
    5.  padding:0px 10px;
    6.  min-height:350px;
    7.  text-align:center;
    8. [B]margin-left:150px[/B]
    9. }
    10.  


    Float:left raus, macht da ohnehin keinen Sinn... zur Not die restlichen margin auf 0 setzen
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    CSS: float - IE will, FF und Opera nicht
    AW: CSS: float - IE will, FF und Opera nicht

    :kopfpatsch: Oh man, danke, das wars...
     
    #4      
x
×
×
teststefan