HTML Darstellungsprobleme

ChristianKl1 · 29 Januar 2008

Hallo zusammen,

habe mal wieder ein Problem. Da ich zu früheren Zeit vorwiegend mit Tabellen-Layouts gearbeitet habe, macht mir meine jetzige Homepage an der ich gerade arbeite so einige Probleme. Genau genommen zeigt der IE 7 die Homepage so an wie ich sie eigentlich gerne haben möchte, der Firefox macht da irgendwie Probleme.

CSS:

PHP:

* { margin: 0; padding: 0; }

body { background-color: #000; color: #fff; }

div#wrapper {
               margin: 0 auto;
               width: 80%;
               min-height: auto;
               background-color: #333333;
               border-right: 1px solid #fff;
               border-left: 1px solid #fff;
               border-bottom: 1px solid #fff;
            }

div#header  {
               height: 120px;
               background-color: blue;
               border-bottom: 1px solid #fff;
            }



div#leftcol {
               float: left;
               width: 200px;
               background: none;
               border-right: 1px solid #fff;
            }

div.boxleft {
               background-color: green;
            }

div.boxleft ul  {
                  margin: 0;
                  padding: 0;
                }

div.boxleft ul span {
                     display: block;
                     background-color: #8b0000;
                     font-weight: bold;
                     color: #fff;
                     border-bottom: 1px solid #fff;
                    }

div.boxleft ul li  {
                     margin: 0;
                     list-style-type: none;
                   }



div.boxleft ul li a {
                      display: block;
                      color: #F2E5FF;
                      font-weight: bold;
                      padding: 5px 0px 5px 20px;
                      text-decoration: none;
                      border-bottom: 1px solid #fff;
                    }

div.boxleft ul li a:hover {
                            background-color: #fff;
                            color: #000;
                            font-weight: bold;
                          }

* html div.boxleft ul li { padding: 1px; } /* IE-Hack */


div#contentline {
                  width: 100%;
                  height: 20px;
                  background-color: #8b0000;
                  border-bottom: 1px solid #fff;
                }

div#content {
               margin: 30px 10% 20px 220px;
            }

div#content h1 {
                 font-size: 28px;
                 padding: 0 0 20px 0px;
               }

div#content p  {
                 font-size: 18px;
               }


ul.boxlist  {
               margin: 0;
               padding: 0;
            }



ul.boxlist span {
                  display: block;
                  background-color: #8b0000;
                  font-weight: bold;
                  padding-left: 20px;
                  color: #fff;
                  border-bottom: 1px solid #fff;
                }

ul.boxlist li {
                 margin: 0;
                 list-style-type: none;
              }


ul.boxlist li a {
                  display: block;
                  color: #F2E5FF;
                  font-weight: bold;
                  padding: 5px 0px 5px 20px;
                  text-decoration: none;
                  border-bottom: 1px solid #fff;
                }


ul.boxlist li a:hover {
                         background-color: #fff;
                         color: #000;
                         font-weight: bold;
                      }


* html ul.boxlist li { padding: 1px; } /* IE-Hack */

HTML:

PHP:

<body>

<div id="wrapper">

  <div id="header"></div>

  <div id="leftcol">
     <div class="boxleft">
      <ul>
        <span>Navigation</span>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        </ul>
     </div>
  </div>

<!--  <div id="contentline"></div> -->

  <div id="content">
  <h1>Willkommen bei "Meine Homepage" </h1>
  </div>

</div>

</body>

Wundert euch nicht das sich die Menüpunkte der Navigation so oft wiederholen, habe ich nur als Test so eingebaut das ich sehe, wie sich das Menü verhält wenn es etwas länger ist. Bin nur irgendwie verzweifelt und weiß nicht woran es liegen könnte. Leider konnte ich auch nicht mit dem IE 6 und so testen, da ich seit einiger Zeit nun schon MS Vista habe und Multiple IE scheint da irgendwie nicht so zu funktionieren wie es soll.

PS: Ihr findet unter den CSS-Code "contentline", das ist wie es wohl schon sagt die ca 20 px Linie über den Content-Text-Bereich, das wird wohl mein nächstes Problem sein :(

Vielen Dank schonmal für eure Hilfe

MfG
Christian

koslowski · 29 Januar 2008

Hi,

der FF macht nicht die Probleme, sondern der IE weil er den float fälschlicherweise einschließt, was aber den Webstandards widerspricht.

Wenn du floatest mußt du auch clearen.

Schau mal hier.
Dort ist es Punkt 2.

ChristianKl1 · 30 Januar 2008

hallo,

habe es jetzt so ungefähr angepasst hoffe das "clear" ist jetzt an der richtigen Stelle, Problem habe ich momentan nur, dass der Content-Text-Bereich so ziemlich nach unten gerutscht ist.

CSS:

PHP:

* { margin: 0; padding: 0; }

body { background-color: #000; color: #fff; }

div#wrapper {
               margin: 0 auto;
               width: 80%;
               min-height: auto;
               background-color: #333333;
               border-right: 1px solid #fff;
               border-left: 1px solid #fff;
               border-bottom: 1px solid #fff;
            }

div#header  {
               height: 120px;
               background-color: blue;
               border-bottom: 1px solid #fff;
            }



div#leftcol {
               float: left;
               width: 200px;
               background: none;
               border-right: 1px solid #fff;
            }

div.boxleft {
               background-color: green;
            }

div.boxleft ul  {
                  margin: 0;
                  padding: 0;
                }

div.boxleft ul span {
                     display: block;
                     background-color: #8b0000;
                     font-weight: bold;
                     color: #fff;
                     border-bottom: 1px solid #fff;
                    }

div.boxleft ul li  {
                     margin: 0;
                     clear: both;
                     list-style-type: none;
                   }



div.boxleft ul li a {
                      display: block;
                      color: #F2E5FF;
                      font-weight: bold;
                      padding: 5px 0px 5px 20px;
                      text-decoration: none;
                      border-bottom: 1px solid #fff;
                    }

div.boxleft ul li a:hover {
                            background-color: #fff;
                            color: #000;
                            font-weight: bold;
                          }

* html div.boxleft ul li { padding: 1px; } /* IE-Hack */


div#contentline {
                  width: 100%;
                  height: 20px;
                  background-color: #8b0000;
                  border-bottom: 1px solid #fff;
                }

div#content {
               margin: 30px 10% 20px 220px;
               height: -1px;
            }

div#content h1 {
                 font-size: 28px;
                 padding: 0 0 20px 0px;
               }

div#content p  {
                 font-size: 18px;
               }


div#footer {
            width: 100%;
            height: 20px;
            background-color: #8b0000;
            border-top: 1px solid #fff;
           }

angepasster HTML-Code:

PHP:

<body>

<div id="wrapper">

  <div id="header"></div>

  <div id="leftcol">
     <div class="boxleft">
      <ul>
        <span>Navigation</span>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Registrierung</a></li>
        <li><a href="#">Mitgliederbereich</a></li>
        <li><a href="#">Impressum</a></li>
        </ul>
     </div>
  </div>
  <div style="clear: both;"></div>

<!--  <div id="contentline"></div> -->

  <div id="content">
  <h1>Willkommen bei "Meine Homepage" </h1>
  </div>
  <div id="footer">1234</div>

</div>

</body>

Hat jemand eine Idee wie der Textbereich wieder entsprechend nach oben rutscht, ungefähr in Höhe der ersten "Startseite"-Schaltfläche sollte er beginnen, hab mir erst gedacht ich arbeite mit margin-angaben im minus-bereich, aber das bringt mich auch nicht wirklich weiter, weil wenn dieser wert zu weit im minus-bereich ist "zerpflückt" dieser wieder mein Layout.

PS: Links wo alles gut erklärt steht, sind natürlich auch willkommen ;-)

Gruß
Christian

koslowski · 30 Januar 2008

Hi,

#content sollte ebenfalls floaten (float:right z.B.)

#wrapper hat eine %-Breite, #leftcol eine px-Breite und #content gar keine Breite. Ist problematisch so.

Imho clearst du auch nicht richtig.

Ich gebe dir mal ein Beispiel einer eines einfachen Kopf-Zweispalten-Fuss Layouts:

Code:

<body id="startseite">

  <div id="wrapper">

  <div id="kopf">
    <h1></h1>
  </div><!--Ende #kopf-->
  
  <div id="linksaussen">
  <div id="linksinnen">
  </div><!--Ende #linksinnen-->
  </div><!--Ende #linksaussen-->
  
  <div id="rechtsaussen">
  <div id="rechtsinnen">
  </div><!--Ende #rechtsinnen-->
  </div><!--Ende #rechtsaussen-->
  
  <hr class="clear" />
  
  <div id="fuss">
  </div><!--Ende #fuss-->

  </div><!--Ende #zelt-->
  
</body>

Erklärung:

#wrapper bekommt feste Breite und wird mit

Code:

#wrapper  {
               width:56em;
               margin:0 auto;
                 }

horizontal zentriert.

Die äußeren Spaltencontainer bekommen eine feste Breite und floaten:

Code:

#linksaussen  {
             float:left;
             width:15em;
              }
           #rechtsaussen  {
             float:right;
             width:41em;
                }

Die inneren Container bekommen padding/margin usw zugewiesen.

Durch diese Technik gehe ich ein paar Problemen automatisch aus dem Weg.

Vor #fuss füge ich noch eine <hr class="clear" /> die ich so formatiere:

Code:

.clear  {
              clear:both;
              height:0;
              width:0;
              visibility:hidden;
              border:0;
                 }

Das wars eigentlich schon.

Es gibt noch andere Möglichkeiten für Float/Clear , imho auch wichtig das alles zu verstehen, deshalb sollte man Heikos Artikel mit den Links dazu sich an die Eingangstür nageln.:mrgreen:

koslowski

HTML Darstellungsprobleme

ChristianKl1

Neues Mitglied

koslowski

Neues Mitglied

ChristianKl1

Neues Mitglied

koslowski

Neues Mitglied

Neueste Beiträge