Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Problem mit "min-height:100%;" im FF

Antwort erstellen

Problem mit "min-height:100%;" im FF

Beitragvon benm » 13.12.2010, 15:11

Hallo zusammen,

gestern habe ich begonnen CSS zu lernen. Ich habe bereits meine Seite auf sauberes CSS prüfen lassen und bestanden ;). Ich habe das Problem das der Content-Bereich der Seite nicht mit mindestens 100% Höhe dargestellt wird, obwohl ich bereits die in Google vorgeschlagenen Korrekturen durchgeführt habe.

Könnte evtl. mal jemand in den Quelltext der Seite schauen?
Ist noch recht übersichtlich:

http://www.bm-des1gn.de/test

Vllt. könnte mir auch jemand sagen weshalb der #container nach unten rutscht wenn ich lediglich für die divbox #outof "margin-top:100px;" einstelle.

Vielen Dank,

Ben
benm
neu hier
 
Beiträge: 6
Registriert: 13.12.2010, 14:54
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon sejuma » 13.12.2010, 17:58

"Bestanden" ist anders :wink:

Der Seite fehlt zunächst ein standardkonormer Doctype, damit auch der IE das CSS-Boxmodell korrekt darstellen kann.

Dann gibst du gleich mehreren Elementen einen min-height-Wert von 100%.
Das addiert sich dann natürlich und zur min-height kommen dann auch noch die margin- und padding-Werte dazu.

Mein Vorschlag:
Lass zunächst mal überall außer html und body die height-Werte und min-height-Werte weg.
Die divs nehmen sich automatisch die Höhe, welche sie benötigen.

Dann verwendest du zu viele Divs, die nicht benötigt werden, was alles unnötig unübersichtlich macht. So kannst du z.B. #noncontent und #content zu einem zusammenfassen.
Weniger ist also mehr. Deshalb: Semantisch korrekt auszeichnen und abspecken.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon benm » 14.12.2010, 11:30

Hey Sejuma,

vielen Dank für die Tipps!

Vielleicht könntest du ja noch einmal drüber schauen. Würd mich freuen!
Da ich eine single-page bastel die über Anker navigiert wird, stört mich das Problem nicht wirklich, es ist dennoch schade, dass bei wenig Inhalt die Div Boxen nicht mindestens 100% groß sind.

Wenn dir noch etwas auf oder einfällt würd ich mich freuen.

Mit dem Doctype kenne ich mich nicht aus, hab mir jetzt mal einen ausgesucht der des öfteren vorgeschlagen wird.

Liebe Grüße,
Ben
benm
neu hier
 
Beiträge: 6
Registriert: 13.12.2010, 14:54
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon Azra » 15.12.2010, 09:02

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bm-des1gn.de%2Ftest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon djheke » 15.12.2010, 19:18

hab langeweile und schau mal drüber, wenn du mir auch deine grafiken schicken würdest ?!

mfg
djheke
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon sejuma » 15.12.2010, 20:14

http://www.ohne-css.gehts-gar.net/0025.php
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon djheke » 15.12.2010, 23:36

So, habe mal ein paar Änderungen vorgenommen und hier das Ergebnis.
Ein paar Kommentare zum Schluss.

Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>neue version</title>

<style type="text/css">


   * {
      margin:0;
      padding:0;
   }

   html {   
                height:100%;
                overflow:hidden;

   }

   body {   
   
      height:100%;
                width:100%;
      background:url(http://bm-des1gn.de/test/bga.gif) #aaa;
   }


   #container {

           margin-left:150px;
      margin-top:0px;
                width:auto;
                height:100%;
                overflow:auto;
      background:url(http://bm-des1gn.de/test/bga.gif) #aaa;
   }





   #logo , #navi {   

      position:absolute;
      top:50px;
                left:70px;
      width:168px;
      height:186px;
      background: url(http://www.bm-des1gn.de/test/logo.png);
   }

   #navi
   {   

           top:230px;
      background: url(http://www.bm-des1gn.de/test/menu.png) transparent;
   }


   #content {
                 padding-left:100px;
                 border-right:10px solid #000;
                 width:600px;
      background:url(http://bm-des1gn.de/test/test/727bg.png) #fff;


       padding-top:264px;
       padding-left:130px;
       padding-right:50px;

       font-family:arial;
       font-size:11pt;
       color:#3d3d3d;
       line-height:20pt;

        }


   h1 {   
      font-weight:bold;
      font-size:20pt;
   }

   hr {
      margin:15px 0px 10px 0px;
   }

</style>

</head>
<body>



<h1 id="logo"></h1>
<ul id="navi">
<li></li>
</ul>


<div id="container">
<div id="content">
<h1>1. CSS & HTML</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
  </p>

<h1>2. Struktur & Design</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
  </p>

<h1>1. CSS & HTML</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
  </p>

<h1>2. Struktur & Design</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
  </p>

<h1>1. CSS & HTML</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
</p>

<h1>2. Struktur & Design</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
  </p>

<h1>1. CSS & HTML</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet,...
  </p>

<h1>2. Struktur & Design</h1>  <hr>
  <p>
   Lorem ipsum dolor sit amet, ...
  </p>
</div>
</div>


</body>
</html>


Damit der IE 6 auch was von einer fixen Navigation hat, habe ich fixed durch position:absolute ersetzt. Das ganze noch etwas nach links gerückt damit es noch in einer Auflösung von 1024 x 768 passt. Nutzen noch viele.

doctype habe ich geändert. War einfacher.

Wenn du auf die Gif Animation verzichten könntest ?
Dein linken Schatten solltest du im content einbinden, so ca 10px breit. Und vielleicht noch die png's duch gif's ersetzen. Für den IE < 8.

Der Rest ist so geblieben.

Vielleicht können ja unsere fleißigen Schreiber mal drüber schauen.
p.s. Mein Lieblingslayout (CSS) wird es wohl nicht.

mfg
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon djheke » 16.12.2010, 11:04

ick muss wirklich langeweile haben.

hier die finale fassung und mit anker-navi. min-height habe ich völlig weggelassen, weil bei einer singlepage nicht nötig. Sollte dein inhalt mal weniger werden, dan kannste auch gleich deine navigation weg lassen. bissel weniger ist es auch geworden. sollte ja nicht schlimm sein.

kannste kopiern und viel spaß damit . alles valide (bis vor kurzem)

Code: Alles auswählen
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>neue version</title>

    <style type="text/css">

       * {
          margin:0;
          padding:0;
          text-decoration:none;
          list-style:none;
       }

       html {   
          height:100%;
          overflow:hidden;
       }

       body {   
          height:100%;
          width:100%;
          background:url(http://bm-des1gn.de/test/bgaXXX.gif) #aaa; /* 'Is mir uffen Sender jejangen' */
       }

       #container {
          margin-left:150px;
          width:auto;
          height:100%;
          overflow:auto;
          background:url(http://bm-des1gn.de/test/bgaXXX.gif) #aaa;
       }

       #logo , #navi {   
          position:absolute;
          top:50px;
          left:70px;
          width:168px;
          height:186px;
          background: url(http://www.bm-des1gn.de/test/logo.png);
       }

        #navi
       {   
          top:230px;
          background: url(http://www.bm-des1gn.de/test/menu.png) transparent;
       }

       #navi LI A.portfolio ,#navi LI A.technik ,#navi LI A.about  {
          position:absolute;
          width:160px;
          height:30px;
          background:url(transparent.gif) repeat transparent; /* Für unseren Lieblingsbrowser */
       }

       #navi LI A.portfolio  {
         top:30px;
       }

       #navi LI A.technik  {
         top:61px;
       }

       #navi LI A.about  {
         top:92px;
       } 
       
       #navi LI A:hover {
        border:1px solid #a33;
       }

       #navi span , #logo span  {
         display:none;
       }   
   
       #content {
          padding:264px 40px 0 100px;
          border-right:10px solid #000;
          border-left:2px solid #000;
          width:600px;
          background: #fff;
          font-family:arial;
          font-size:11pt;
          color:#3d3d3d;
          line-height:20pt;
       }

       h1 {   
          font-weight:bold;
          font-size:20pt;
       }

       hr {
          margin-top:15px;
       }

    </style>

    </head>
    <body>



    <h1 id="logo"><span>LOGO</span></h1>
    <ul id="navi">
     <li><a class="portfolio" href="#portfolio"><span>Portfolio</span></a></li>
     <li><a class="technik" href="#technik"><span>Technik</span></a></li>
     <li><a class="about" href="#about"><span>&Uuml;ber mich</span></a></li>
    </ul>


    <div id="container">
    <div id="content">
    <h1>Willkommen</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
      </p>

    <h1 id="portfolio">Portfolio</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
      </p>

    <h1>1. CSS & HTML</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
      </p>

    <h1>2. Struktur & Design</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
      </p>

    <h1 id="technik">Technik</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
    </p>

    <h1>2. Struktur & Design</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
      </p>

    <h1>1. CSS & HTML</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet,...
      </p>

    <h1 id="about">&Uuml;ber mich</h1>  <hr>
      <p>
       Lorem ipsum dolor sit amet, ...
      </p>
</div>
</div>


    </body>
    </html>

Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon benm » 17.12.2010, 09:29

Hi Djtheke,

sorry habe erst heute Zeit gefunden vorbei zuschauen.

Erstmal danke für deine Langeweile ;-). Ich werd jetzt mal Stück für Stück darauf eingehen was du mir geschrieben hast …

Damit der IE 6 auch was von einer fixen Navigation hat, habe ich fixed durch position:absolute ersetzt. Das ganze noch etwas nach links gerückt damit es noch in einer Auflösung von 1024 x 768 passt. Nutzen noch viele.

Hört sich gut an, ich muss scheinbar einen Fehler gemacht haben denn ich wollte nicht breiter als 960px mit der gesamten page werden.

doctype habe ich geändert. War einfacher.

Damit kenne ich mich wie gesagt nicht aus, werd ich mir später aneignen, danke!

Wenn du auf die Gif Animation verzichten könntest ?
Dein linken Schatten solltest du im content einbinden, so ca 10px breit. Und vielleicht noch die png's duch gif's ersetzen. Für den IE < 8.

Wenn du damit den Hintergrund meinst, wieso weglassen? Ich finde schlichte Farbübergänge eigentlich ganz nett. Meinst du den Schatten der um den Content geht? Das ist momentan alles eine Grafik. Linker Schatten schatten, gefolgt von weißfläche, gefolgt von rechtem Schatten (Alles ein Bild)

p.s. Mein Lieblingslayout (CSS) wird es wohl nicht.

Das Layout ist noch nicht fertig, ich hab das nur mal so aufgerissen und möchte daran CSS lernen. Natürlich möchte ich die Website auch verwenden, nur sie soll sich noch verändern.


Ich schaue mir jetzt mal an was du gebastelt hast, vielen Dank :D
benm
neu hier
 
Beiträge: 6
Registriert: 13.12.2010, 14:54
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon djheke » 17.12.2010, 11:35

dank für deine antwort,

zur gif-animation nur soviel.die modernen browser sind schnell genug aber trotzdem kann die performence drunter leiden. besonders der IE < 8 .

zum layout. ich meinte nur durch die fixen bereich ist man in seiner Flexibilität oftmals eingeschränkt.

aber du übst ja noch und das ist gut. CSS lernt man nur durch probieren, probieren ...,....,probieren.

viel spaß
djheke
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon benm » 17.12.2010, 17:13

die gif-animation besteht nur aus 1nem Pixel und ist 13kb oder so groß wegen der animation. Dachte die KB zahl hängt davon ab ob der browser leisten kann oder nicht :)
benm
neu hier
 
Beiträge: 6
Registriert: 13.12.2010, 14:54
Nach oben

Re: Problem mit "min-height:100%;" im FF

Beitragvon djheke » 17.12.2010, 19:41

13k sind ok, aber z.b. 1px mal (1024 x 768px) sind 786432 pixel . pro animationsstufe werden diese pixel neu dargestellt. kommt schon was zusammen. und in dieser zeit von ein paar sekunden hat der IE6 alle hände voll zu tun.fällt aber nur auf wenn gerade gescrollt wird. aber der ie6 ist schon lange gestorben. nun muss er nur noch beerdigt werden.
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Problem mit "min-height:100%;" im FF"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de