Abstand von DIV zum unteren Fensterrand

[Ingo Siemon]

Hallo

Ich bin wieder ein ganzes Stück weitergekommen
bei meiner neuen CSS-Seite.
Aber nun raubt mir wieder mal eine kleine Sache den Verstand.
Und darum bitt ich Euch hier um Rat.

Es geht um folgende Seite:
http://www.spaceart.de/_Test/Test-10.shtml

Der äusseren Div-Box (#seite) habe ich folgendes zugewiesen:
margin: 20px auto 100px;

Dadurch sollte sich ja zum oberen Fensterrand ein Abstand von 20px,
und zum unteren von 100px ergeben (mal abgesehen von der auto-zentrierung).

Im Firefox und Opera Browser klappt das auch.
Nur im Internet-Explorer gibts unten gar keinen Abstand.
Gut, ich könnte da auch einfach ein Leerzeichen oder so hinsetzen,
aber mich würde schon eher interessieren, woran das denn liegt.

Über Denkanstösse würde ich mich sehr freuen.
Gruß
Ingo

[Gunther]

Hallo Ingo!

Es geht um folgende Seite:
http://www.spaceart.de/_Test/Test-10.shtml

Der äusseren Div-Box (#seite) habe ich folgendes zugewiesen:
margin: 20px auto 100px;

Also bei mir steht in deiner Datei http://www.spaceart.de/_Test/Test-10.css
...
div#seite {
  background: #235F70 url(bilder/hintergrund.gif) repeat-y;
  text-align: left;    /* Seiteninhalt wieder links ausrichten */
  margin: 20px auto;      /* standardkonforme horizontale Zentrierung */
  border: 1px solid #fff;
  width: 760px;
}
...

und auch in der über CC eingebundenen IE Version findet sich nichts zu div#seite!

Im Firefox und Opera Browser klappt das auch.
Nur im Internet-Explorer gibts unten gar keinen Abstand.
Gut, ich könnte da auch einfach ein Leerzeichen oder so hinsetzen,
aber mich würde schon eher interessieren, woran das denn liegt.

Über Denkanstösse würde ich mich sehr freuen.

Der Unterschied in der Darstellung liegt an der Zeile:
<div id="ende"></div>

Probier's mal mit:
<div id="ende">&nbsp;</div>

und du wirst den Unterschied sehen!

Gruß Gunther

[Ingo Siemon]

Lieber Günther

Also bei mir steht in deiner Datei http://www.spaceart.de/_Test/Test-10.css
...
div#seite {
  background: #235F70 url(bilder/hintergrund.gif) repeat-y;
  text-align: left;    /* Seiteninhalt wieder links ausrichten */
  margin: 20px auto;      /* standardkonforme horizontale Zentrierung */
  border: 1px solid #fff;
  width: 760px;
}
...

Ui, sorry, das war mein Fehjler.
Ich hatte das noch nicht hochgeladen.
Nun ists aber richtig.

Probier's mal mit:
<div id="ende">&nbsp;</div>

Die Box brauche ich noch für andere Zwecke.
Mir geht es um den margin-bootom ABstand der umschliessenden Box (#seite).
Also, warum der IE diesen Abstand nicht anzeigt.

Gruß
Ingo

[Gunther]

Hi Ingo,

Mir geht es um den margin-bootom ABstand der umschliessenden Box (#seite).
Also, warum der IE diesen Abstand nicht anzeigt.

ehrlich gesagt habe ich keine Ahnung warum, aber wer weiß das bei Browsern aus diesem Haus schon...!

Abhilfe könnte dir jedoch die Zeile

* html body {padding: 0 0 100px 0;}

verschaffen.

Gruß Gunther

[Gunnar Bittersmann]

Abhilfe könnte dir jedoch die Zeile
* html body {padding: 0 0 100px 0;}
verschaffen.

Gunther,
Und da Ingo für IE ein spezielles Stylesheet hat, ist der star html hack nicht notwendig.

Live long and prosper,
Gunnar

[Gunther]

Hi Gunnar,

Und da Ingo für IE ein spezielles Stylesheet hat, ist der star html hack nicht notwendig.

ich vergas (im ersten Posting war's mir noch present) ;-) !

Gruß Gunther

[MudGuard]

Hi,

ich vergas

Pfui.  ;-)

cu,
Andreas

[Ingo Siemon]

Lieber Gunther

* html body {padding: 0 0 100px 0;}

OK, das packe ich dann mal in meine spezielle IE-CSS-Datei.
Danke.

Gruß
Ingo

[Gunnar Bittersmann]

Ingo,
Dein Randproblem ist mir jetzt zu marginal. ;-)

Aber: <h2>Ich bin eine h2 &Uuml;berschrift</h2>

Nein, biste nicht. Du bist die Hauptüberschrift: h1.

„Manche werten das Überspringen von Überschriftsebenen als schlechten Stil.“ [HTML401 §7.5.5]

Und warum benutzt du für die Umlaute Zeichen-Entity-Referenzen, anstatt die Umlaute im Quelltext zu verwenden?

“It is almost always preferable to use an encoding that allows you to represent the characters in their normal form, rather than using character entities or NCRs.” [QA-ESCAPES]

Du benutzt ISO 8859-1, damit lassen sich die Umlaute codieren.

“Using escapes can make it difficult to read and maintain source code […]” [QA-ESCAPES]

Die Auszeichnung der Navigationsliste als Definitionsliste halte ich auch nicht für richtig[tm].

IMHO besser verschachtelte Listen:

  <ul id="navigation">  
    <li>Produkte / Modelle  
      <ul>  
        <li><a href="XXX.htm">Neuheiten</a></li>  
        <li><a href="XXX.htm">SciFi + Fantasy</a></li>  
        <li><a href="XXX.htm">Action + Horror</a></li>  
        <li><a href="XXX.htm">Manga + Anime</a></li>  
        <li><a href="XXX.htm">Erotik</a></li>  
      </ul>  
    </li>  
    <li>Produkte / Schwerter  
      <ul>  
        <li><a href="XXX.htm">Neuheiten</a></li>  
        <li><a href="XXX.htm">Fantasy + Film</a></li>  
        <li><a href="XXX.htm">Historische</a></li>  
        <li><a href="XXX.htm">Samurai</a></li>  
      </ul>  
    </li>  
    <li>Produkte / Sonstiges  
      <ul>  
        <li><a href="XXX.htm">Zubeh&ouml;r</a></li>  
        <li><a href="XXX.htm">Gutscheine</a></li>  
        <li><a href="XXX.htm">Historische</a></li>  
      </ul>  
    </li>  
    <li>Shop  
      <ul>  
        <li><a href="XXX.htm">Warenkorb</a></li>  
        <li><a href="XXX.htm">AGB + Info</a></li>  
        <li><a href="XXX.htm">Impressum</a></li>  
        <li><a href="XXX.htm">Kontakt</a></li>  
        <li><a href="XXX.htm">Newsletter</a></li>  
        <li><a href="XXX.htm">RSS-Feed</a></li>  
        <li><a href="XXX.htm">F.A.Q.</a></li>  
      </ul>  
    </li>  
    <li>Goodiies  
      <ul>  
        <li><a href="XXX.htm">Bildschirmschoner</a></li>  
        <li><a href="XXX.htm">ePostkarten</a></li>  
        <li><a href="XXX.htm">Galerie</a></li>  
        <li><a href="XXX.htm">Games</a></li>  
        <li><a href="XXX.htm">G&auml;steb&uuml;cher</a></li>  
        <li><a href="XXX.htm">SlideShow</a></li>  
        <li><a href="XXX.htm">Werbung</a></li>  
      </ul>  
    </li>  
  </ul>

Und ist bei „Goodiies“ nicht ein i zu viel?

Live long and prosper,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Dein Randproblem ist mir jetzt zu marginal. ;-)

OK ;-)

„Manche werten das Überspringen von Überschriftsebenen als schlechten Stil.“ [HTML401 §7.5.5]

OK, ich habe das geändert.

Und warum benutzt du für die Umlaute Zeichen-Entity-Referenzen, anstatt die Umlaute im Quelltext zu verwenden?

Das liegt noch an der Einstellung meines Texteditors.
Hat noch was mit meiner alten Seite zu tun.
Da brauche ich die maskierung der Umlaute noch.

Die Auszeichnung der Navigationsliste als Definitionsliste halte ich auch nicht für richtig[tm].

IMHO besser verschachtelte Listen: ...

Ganz streng gesehen, ist das doch eine Definitionsliste
(für die Navi-Rubriken-Überschriften)
in denen dann jeweils Listen (für die Links) sind.
Oder?

Und ist bei „Goodiies“ nicht ein i zu viel?

Habe ich auch korrigiert.

Gruß
Ingo

[Gunnar Bittersmann]

Ganz streng gesehen, ist das doch eine Definitionsliste
(für die Navi-Rubriken-Überschriften)
in denen dann jeweils Listen (für die Links) sind.
Oder?

Ingo,
Immer, wenn auf ein dt mehrere dd folgen, ist die Verwendung einer Definitionsliste IMHO sehr fraglich.

Aber bei der Verwendung von Definitionslisten scheiden sich hier immer wieder die Forumsgeister.

Live long and prosper,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Immer, wenn auf ein dt mehrere dd folgen, ist die Verwendung einer Definitionsliste IMHO sehr fraglich.

OK, das macht Sinn.
Deswegen meinte ich ja auch, dass es ganz streng genommen
doch eigentlich eine Definitionsliste sein müsste,
wo dann in den dd jeweils eine "normale"
Liste <ul> mit den Links sein müsste.

Aber bei der Verwendung von Definitionslisten scheiden sich hier immer wieder die Forumsgeister.

Ja, das stimmt allerdings.
Ich werde es jetzt auch erstmal so lassen.
Da ich die Navi später dann eh mit PHP auslagern werde,
kann ichs dann ja evtl.nochmal anpassen.

Gruß
Ingo

[MudGuard]

Hi,

Immer, wenn auf ein dt mehrere dd folgen, ist die Verwendung einer Definitionsliste IMHO sehr fraglich.

  
<h1>Mehrdeutige Begriffe</h1>  
<dl>  
  <dt>Steuer</dt>  
    <dd>Lenkrad</dd>  
    <dd>Finanzielle Abgaben an eine Gebietskörperschaft</dd>  
  <dt>Schimmel</dt>  
    <dd>weißes Pferd</dd>  
    <dd>Pilzart</dd>  
  <dt>Zoll</dt>  
    <dd>Maßeinheit für die Länge</dd>  
    <dd>Ein- und Ausfuhr-Abgaben auf Waren</dd>  
  <dt>Schöpfer</dt>  
    <dd>großer Löffel zum Ausgeben von Suppe</dd>  
    <dd>Gott</dd>  
  <!-- noch viele weitere -->  
</dl>  

cu,
Andreas

[Struppi]

Immer, wenn auf ein dt mehrere dd folgen, ist die Verwendung einer Definitionsliste IMHO sehr fraglich.

Das sehe ich ebenso anders ...

<h1>Mehrdeutige Begriffe</h1>
<dl>
  <dt>Steuer</dt>
    <dd>Lenkrad</dd>
    <dd>Finanzielle Abgaben an eine Gebietskörperschaft</dd>
  <dt>Schimmel</dt>
    <dd>weißes Pferd</dd>
    <dd>Pilzart</dd>
  <dt>Zoll</dt>
    <dd>Maßeinheit für die Länge</dd>
    <dd>Ein- und Ausfuhr-Abgaben auf Waren</dd>
  <dt>Schöpfer</dt>
    <dd>großer Löffel zum Ausgeben von Suppe</dd>
    <dd>Gott</dd>
  <!-- noch viele weitere -->
</dl>

  
.. wie schön an den Definitionen hier zu sehen ist.  
  
Aber im voliegenden Fall, sind es ja keine Definitionen, sondern einfach Listen mit Unterlisten.  
  
~~~html
  
    <dt>Produkte / Modelle</dt>  
      <dd><a href="XXX.htm">SciFi + Fantasy</a></dd>  
      <dd><a href="XXX.htm">Action + Horror</a></dd>  
  
      <dd><a href="XXX.htm">Manga + Anime</a></dd>  
      <dd><a href="XXX.htm">Erotik</a></dd>  

Oder wo ist hier die Definition?

Struppi.

[Ingo Siemon]

Lieber Struppi

Aber im voliegenden Fall, sind es ja keine Definitionen, sondern einfach Listen mit Unterlisten.

<dt>Produkte / Modelle</dt>
      <dd><a href="XXX.htm">SciFi + Fantasy</a></dd>
      <dd><a href="XXX.htm">Action + Horror</a></dd>

<dd><a href="XXX.htm">Manga + Anime</a></dd>
      <dd><a href="XXX.htm">Erotik</a></dd>

>   
> Oder wo ist hier die Definition?  
  
Ganz streng betrachtet müsste es doch eine Definitionsliste sein  
in deren <dd>s dann wiederum "nornale" Listen (<ul>s) mit den Links sind,  
oder?  
  
Gruß  
Ingo

[Struppi]

<dt>Produkte / Modelle</dt>
      <dd><a href="XXX.htm">SciFi + Fantasy</a></dd>
      <dd><a href="XXX.htm">Action + Horror</a></dd>

<dd><a href="XXX.htm">Manga + Anime</a></dd>
      <dd><a href="XXX.htm">Erotik</a></dd>

> >   
> > Oder wo ist hier die Definition?  
>   
> Ganz streng betrachtet müsste es doch eine Definitionsliste sein  
> in deren <dd>s dann wiederum "nornale" Listen (<ul>s) mit den Links sind,  
> oder?  
  
Ich bin eigentlich nicht streng ;-)  
  
Aber wo siehst du einen Defintionstitel und die dazu gehörige Beschreibung?  
Ich nirgends.  
  
Es ist einfach eine Liste deiner Kategorien und Unterkategorien.  
  
Struppi.

-- 
[Javascript ist toll](http://javascript.jstruebig.de/)

[Ingo Siemon]

Lieber Struppi

Aber wo siehst du einen Defintionstitel und die dazu gehörige Beschreibung?
Ich nirgends.

Es ist einfach eine Liste deiner Kategorien und Unterkategorien.

Hmm, ja, das stimmt dann auch wieder.
Ich werde es nun aber so lassen, wie es ist.
Das müsste dich vertretbar sein.

Gruß
Ingo

[Struppi]

Aber wo siehst du einen Defintionstitel und die dazu gehörige Beschreibung?
Ich nirgends.

Es ist einfach eine Liste deiner Kategorien und Unterkategorien.

Hmm, ja, das stimmt dann auch wieder.
Ich werde es nun aber so lassen, wie es ist.
Das müsste dich vertretbar sein.

Wenn's dich nicht stört, klar.

Aber von der Semantik ist es nicht besonders schön.
Um dem ganzen dich mehr anzunähern, es hilft auch immer mal die Seite ohne CSS anzuschauen (läßt sich im FF einstellen)

Struppi.

[Ingo Siemon]

Lieber Struppi

Wenn's dich nicht stört, klar.

:-))

Um dem ganzen dich mehr anzunähern, es hilft auch immer mal die Seite ohne CSS anzuschauen (läßt sich im FF einstellen)

Das mache ich auch immer schon.
Und ich finde es da eigentlich ganz gut, wie die Links
der Navigation eben gegenüber den Rubrik-Überschriften
eingerückt sind. Du nicht?

Gruß
Ingo

[molily]

Hallo,

Vielleicht verabschieden wir uns langsam aber sicher davon, nach der einzig wahren Auszeichnung zu fragen, ohne irgendeinen Sinn davon aufzuzeigen. Ich sehe weder in dl noch uls irgendeinen praktischen Vorteil. Ein praktischer Vorteil hätte etwa die Auszeichnung mit hX-Überschriften und einfachen Listen. Verschachtelung ist immer schwer nachzuvollziehen z.B. wenn die Seite mit der Tastatur navigiert und vorgelesen wird. Überschriften können einfacher an- und übersprungen werden.

Mathias

[Struppi]

Es geht um folgende Seite:
http://www.spaceart.de/_Test/Test-10.shtml

Der äusseren Div-Box (#seite) habe ich folgendes zugewiesen:
margin: 20px auto 100px;

Dadurch sollte sich ja zum oberen Fensterrand ein Abstand von 20px,
und zum unteren von 100px ergeben (mal abgesehen von der auto-zentrierung).

Warum machst du die Abstände nicht im body ?

body
{
padding-top: 20px;
padding-bottom: 100px;
}

Struppi.

[Ingo Siemon]

Lieber Struppi

Warum machst du die Abstände nicht im body ?

body
{
padding-top: 20px;
padding-bottom: 100px;
}

Das ist durchaus eine berechtigte Frage :))
Aber warum einfach, wenns auch kompliziert geht :)
Danke für die Idee!

Gruß
Ingo