Shadowcrow: warum wird in den header gescrollt?

hi $name,

ich dilettiere gerade an einem webseiten entwurf rum ;-) und da ich ja lernfähig bin, ohne tabellen.
nur: der content text (dummy lorem ipsun) läuft unter dem header durch beim scrollen.
http://public.reels4actors.de/michel/michel2.php

das schlimmste ist, ich habe das gefühl ich müsste die lösung kennen, ich komm nur nicht drauf :-)
und äh wenn ich schon dabei bin: das sind doch nicht zu viele divs? will ja nicht pest durch cholera ersetzen.

hier jetzt die relevanten indizien meines verbrechens:
*************HTML***************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="style_sheets/main.css" type="text/css" media="screen" />
 <title>| blablub |</title>
</head>
<body>
<div id="header">
<img src="pics/logo.png" alt="" width="279" height="70" class="fllft" /><ul id="Navigation">
<li><a href="#" target="_self">Projekte</a></li>
<li><a href="#" target="_self">Vita</a></li>
<li><a href="#" target="_self">Referenzen</a></li>
<li><a href="#" target="_self">Kontakt</a></li>
</ul>
</div>
<div id="cont_main">
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, cril delenit augue duis dolore te feugait nulla facilisi.
[SNIP]
</div>
<div id="footer"><img src="pics/logo2.png" alt="" width="279" height="70" /></div>
</body>
</html>
*************CSS***************
body {
padding:0;
color:#000;
font-family : Courier New, Courier, mono;
background-image: url(../pics/bg.gif);
background-color: #000;
}

#header {
 position:fixed;
 width:600px;
 height:70px;
 z-index:1;
 left: 120px;
 top: 20px;
 padding: 0;
}
#cont_main {
 border: 1px solid red;
 position:absolute;
 margin: 130px 5px 50px 10px;
 padding: 0 20px 20px 10px;
 width:475px;
 height:auto;
 z-index:2;
 left:377px;
 top: 0px;
}
#footer {
 position:fixed;
 width:280px;
 height:auto;
 z-index:3;
 left: 860px;
 bottom: 20px;
}
.fllft {float:left;}
/************************************************************** */

bleibt mir gewogen: eure übelkrähe ;-)

gruss
shadow

--
Programmers don´t die, they GOSUB without RETURN.
Quelle: unbekannt
  1. ich dilettiere gerade an einem webseiten entwurf rum ;-)

    Endlich mal einer, der seine Fähigkeiten richtig einschätzt!!1

    und da ich ja lernfähig bin

    Nana, nun wollen wir aber nicht übermütig werden mit dem Positiven, du hast dein Ansehen gerade so schön runtergedrückt … ;)

    nur: der content-text (dummy lorem ipsun) läuft unter dem header durch beim scrollen.

    So hast du es doch auch gewünscht:

    #header {
    position:fixed;

    position:fixed bedeutet, dass das Element in der Anzeige stehenbleibt. Nachfolgendem Inhalt bleibt da nichts anderes übrig, als sich drunter durch zu mogeln.

    Vielleicht möchtest du ja eher Schiebebalken nur an #cont_main? overflow am betreffenden Element ist dein Freund, nicht position:fixed drumherum.

    und äh wenn ich schon dabei bin: das sind doch nicht zu viele divs? will ja nicht pest durch cholera ersetzen.

    Du hast gerade mal drei Stück drin. Die Frage ist aber auch nicht, wie viele es sind - das hängt schließlich davon ab, wie viel Inhalt gekapselt werden muss - sondern, ob ein <div> (oder <span>) eine kluge Wahl ist oder es nicht bessere Elemente gibt.
    Das klassische Beispiel: Überschriften gehören in <h1> & Co. nicht in <div>. Wobei aber wiederum nichts dagegen spricht, <h1> zusammen mit anderen Elementen in ein <div> zu legen (oder Elemente in <h1> in <div> zu kapseln), um diese Gruppe zu bearbeiten - so, wie du es auch mit #navigation und #header gemacht hast.

    1. hi $name,

      Du hast gerade mal drei Stück drin. Die Frage ist aber auch nicht, wie viele es sind - das hängt schließlich davon ab, wie viel Inhalt gekapselt werden muss - sondern, ob ein <div> (oder <span>) eine kluge Wahl ist oder es nicht bessere Elemente gibt.
      Das klassische Beispiel: Überschriften gehören in <h1> & Co. nicht in <div>. Wobei aber wiederum nichts dagegen spricht, <h1> zusammen mit anderen Elementen in ein <div> zu legen (oder Elemente in <h1> in <div> zu kapseln), um diese Gruppe zu bearbeiten - so, wie du es auch mit #navigation und #header gemacht hast.

      das ist schon klar, selbst in einem "anfall von table" habe ich das immer beachtet.

      ich denke das ich mit den jetzt vorhandene DIVs für die site gut über die runden komme.

      p.s. war jmd. bei der "adobe masters tour"?

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
    2. hi $name,

      So hast du es doch auch gewünscht:

      #header {
      position:fixed;

      position:fixed bedeutet, dass das Element in der Anzeige stehenbleibt. Nachfolgendem Inhalt bleibt da nichts anderes übrig, als sich drunter durch zu mogeln.

      ok

      Vielleicht möchtest du ja eher Schiebebalken nur an #cont_main?

      nein, keine scrollbalken *grusel*

      also das content_div anders ausrichten?

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
      1. Vielleicht möchtest du ja eher Schiebebalken nur an #cont_main?

        nein, keine scrollbalken *grusel*

        also das content_div anders ausrichten?

        Was hast du denn überhaupt vor? Mich dünket beinahe, du hast mehr position:iert, als du eigentlich bräuchtest, aber nachdem ich mit der Schieberei schon falsch lag, warte ich lieber auf eine Skizze :-)

  2. Hallo,

    das schlimmste ist, ich habe das gefühl ich müsste die lösung kennen, ich komm nur nicht drauf :-)

    Die schaut vmtl. auch recht einfach aus, in dem (tatsächlich ausgeliefertem)
    CSS-Code findet sich:

      
    #header {  
     position:absolute;  
    
    ~~~...  
    ~~~css
      
    #footer {  
     position:absolute;  
    
    

    Grüsse aus Düsseldorf

    Cyx23

    1. hi $name,

      Hallo,

      das schlimmste ist, ich habe das gefühl ich müsste die lösung kennen, ich komm nur nicht drauf :-)

      Die schaut vmtl. auch recht einfach aus, in dem (tatsächlich ausgeliefertem)
      CSS-Code findet sich:

      #header {
      position:absolute;

      
      > ~~~css
        
      
      > #footer {  
      >  position:absolute;  
      > 
      
      

      ja, aber header und footer tun doch was ich will? und sind sogar da wo ich will? man reiche mir eine tabelle.

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
      1. hi $name,

        |

        #footer {
        position:absolute;
        [/code]

        das geht so garnicht.........

        ja, aber header und footer tun doch was ich will? und sind sogar da wo ich will? man reiche mir eine tabelle.

        gruss
        shadow

        gruss
        shadow

        --
        Programmers don´t die, they GOSUB without RETURN.
        Quelle: unbekannt
      2. Gehe ich Recht mit dem Rateversuch, dass der Text scrollbar sein soll? Aber abgegrenzt vom Header?
        Also Header | Content | Footer ?

        Falls das auch nicht stimmt dann klär uns doch bitte endlich auf.
        Adda

    2. hi $name,

      Hallo,

      das schlimmste ist, ich habe das gefühl ich müsste die lösung kennen, ich komm nur nicht drauf :-)

      Die schaut vmtl. auch recht einfach aus, in dem (tatsächlich ausgeliefertem)
      CSS-Code findet sich:

      #header {
      position:absolute;

      
      > ~~~css
        
      
      > #footer {  
      >  position:absolute;  
      > 
      
      

      das war mein erster versuch, glaub mir: das ist keine lösung.

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
      1. Hallo,

        das war mein erster versuch, glaub mir: das ist keine lösung.

        Mit Glauben hat das wenig zu tun, sondern es steht immer noch in deinem hier
        im Thread verlinkten Code, während du im Thread selbst position:fixed postest.

        Wenn es um die Hierarchie der entspr. Ebenen geht, bleibt noch z-index.

        Ansonsten könntest du vielleicht nochmal darlegen worum es dir überhaupt geht.

        Grüsse

        Cyx23

  3. Hallo,

    nach dem Studium der Post in diesem Thread frage ich mich, was Du eigentlich moechtest. Zu Beginn dachte ich du moechtest einfach ein 3 Reihen Layout mit kopf, Inhalt und Fuss. Dein Problem schien gewesen zu sein, dass der Inhalt hinter dem Kopf verschwindet. Kein Wunder, benutzt du doch position:fixed.

    Daruf hingewiesen, ist aber das genau was Du willst? Und Scrollbalken willst du auch keine. Jetzt kommen irgendwie die grossen Fragezeichen.

    Spaetestens nach deinen Antworten weiss hier niemand genau was du eigentlich moechtest. Die verlangte Skizze waere wirklich toll, oder mal eine detailierte Erklaerung.

    Ich stelle mit einfach sowas vor:
    -----------------------
    | HEADER              |
    -----------------------
    |                     |
    |INHALT               |
    |                     |
    -----------------------
    | FOOTER              |
    -----------------------

    Kopf und Fuss fest, der Inhalt scrollbar. Naja. Jedenfalls hab ich das, bis Du meintest keine Scrollbalken zu wollen.

    Bisher kommt es so rueber, als ob du irgendwas superspezielles willst. Aber das kann ich irgendwie nicht glauben, denn scheinbar faellt es dir leicht das mit einer Tabelle umzusetzen, wenn ich dich richtig verstanden habe. Und da ist der Punkt wo sich meine Gedanken beginnen zu verknoten. Vielleicht bringst du einfach nicht rueber, was du leichtes moechtest.

    Es kommt hier jedem so vor als haettest Du gern neinen Cocktail von dem hier keiner etwas gehoert hat, obwohl du vielleicht nur ein Glas Wasser bestellt hast.