Torsten: Probleme mit absoluter Positionierung

Hallo,

ich versuche ein Image absolute zu Positionieren, dies gelingt mir im Firefox ohne Probleme, nur der IE macht mal wieder einen auf extra Woscht.

hier mein gewünschtes Ergebnis im Firefox:

und hier wie es im IE dargestellt wird:

hier mein Code:

  
<!-- index.php -->  
<body>  
<div class="center">  
  <div class="header"></div>  
  <div id="nav">  
    <div class="ct_pic"></div> <!-- Image welches absolut Positioniert ist -->  
    <div class="headmenu"><?=$headmenu?></div> <!-- Text: Select A Section -->  
    <div class="menu"><?php menu(); ?></div>  
    <div class="logo"></div>  
  </div>  
  <div id="content"><?php include($_GET["page"]); ?></div>  
  <div class="footer"></div>  
</div>  
</body>  

  
/* styles.css */  
div.headmenu { margin-top:15px; margin-left:30px; font-size:7pt; z-index:2; position:absolute; }  
div.menu { margin-top:35px; }  
  
div.ct_pic {  
    top:5px;  
    position:absolute;  
    width:140px;  
    height:242px;  
    background-image:url('../pics/test.gif');  
  }  

Wie bekomme ich jetzt die Darstellung vom Firefox auch für die IE hin? Würde mich freuen wenn mir jemand helfen könnte.
Hier die URL zu dieser Seite: http://www.noclan-home.de

Gruß
Torsten

  1. Hi!

    dein Bild ist nach rechts verschoben (übrigens danke, dass ich erstmal suchen durfte, um welches Bild es geht *grmpf*), also wie wäre es, wenn du eine Angabe zur horizontalen Position angibst (.z.B. left)?

    Gruß

    Martin

    1. auch hi,

      dein Bild ist nach rechts verschoben (übrigens danke, dass ich erstmal suchen durfte, um welches Bild es geht *grmpf*), also wie wäre

      ich dachte es fällt auf, wenn man den unterschied der beiten bilder sieht(firefox.jpg und ie.jpg)!?

      wenn du eine Angabe zur horizontalen Position angibst (.z.B. left)?

      daran hab ich auch schon gedacht, problem ist aber, wenn du dir die index.php genauer angeschaut hast, dass das layout horizontal zentriert ist. sprich wenn ich jetzt mit left arbeite, werde ich probleme mit anderen auflösungen bekommen, ich hab das schon probiert! andere frage, wieso stellt der IE es falsch dar? gibt es keine möglichkeit ohne left das bild so zu positionieren wie im firefox?

      gruß
      torsten

      1. Hallo noch mal,

        keiner ne Idee?
        Vielleicht sollte ich noch erwähnen, dass das Layout eine fest Breite von 900px hat und ich deswegen die Angabe von left für die absolute Positionieren der Grafik nicht verwenden kann. Ich bin mir eigentlich ziemlich sicher das es eine Lösung geben könnte, nur komm ich nicht drauf und bitte deshalb um eure Hilfe.

        Wenn es nur den IE nicht gebe...
        wäre das Leben nicht viel schöner und einfacher!?

        Gruß
        Torsten

        1. Hi,

          Vielleicht sollte ich noch erwähnen, dass das Layout eine fest Breite von 900px hat und ich deswegen die Angabe von left für die absolute Positionieren der Grafik nicht verwenden kann.

          Wo siehst Du hier eine Abhängigkeit?
          Du solltest eher die tatsächliche URL http://www.t-hp.de/noClan/ted.php erwähnen und unter der im zitierten CSS angegebenen Bild-URL http://www.t-hp.de/pics/test.gif auch das zu den Screenshots passende Bild hinterlegen.

          freundliche Grüße
          Ingo

          1. Hi,

            Vielleicht sollte ich noch erwähnen, dass das Layout eine fest Breite von 900px hat und ich deswegen die Angabe von left für die absolute Positionieren der Grafik nicht verwenden kann.
            Wo siehst Du hier eine Abhängigkeit?

            In der Bildschirmauflösung?
            Wenn ich für dieses Layout die grafik mit left horizontal ausrichte, ist die grafik nur in der derzeit eingestellten auflösung so wie sie sein soll, dummerweiße hat nicht jeder user meine bildschirmauflösung eingestellt.

            Du solltest eher die tatsächliche URL http://www.t-hp.de/noClan/ted.php erwähnen und unter der im zitierten CSS angegebenen Bild-URL

            was spielt en das für ne rolle?
            www.noclan-home.de ist ne zusatz-domain die ich beantragt hab, die auf www.t-hp.de/noClan/ umgelietet wird!!!

            »»http://www.t-hp.de/pics/test.gif auch das zu den Screenshots passende Bild hinterlegen.

            von dieser grafik hab ich doch überhaupt nichts erwähnt!!!!!!!
            wie kommst du auf den scheiss jetzt???????
            von dieser grafik ist überhaupt nicht die rede!!!!!

            die rede ist von dieser hier:
            http://www.t-hp.de/ie.jpg und dieser hier
            http://www.t-hp.de/firefox.jpg

            www.t-hp.de und www.noclan-home.de sind beide mir!
            ich weiß nicht was dein problem ist!?

            1. Hi,

              Wo siehst Du hier eine Abhängigkeit?
              In der Bildschirmauflösung?
              Wenn ich für dieses Layout die grafik mit left horizontal ausrichte,

              wer hat gesagt, daß Du die Grafik am body ausrichten sollst?

              Du solltest eher die tatsächliche URL http://www.t-hp.de/noClan/ted.php erwähnen und unter der im zitierten CSS angegebenen Bild-URL
              was spielt en das für ne rolle?
              www.noclan-home.de ist ne zusatz-domain die ich beantragt hab, die auf www.t-hp.de/noClan/ umgelietet wird!!!

              nein. Nur wenn Du Hilfe zu

                
              <HTML><HEAD>  
              <META NAME="description" content="Erster CounterStrike noClan dieser Szene">  
              <META NAME="keywords" content="noclan,clan page,counterstrike,play community,member,server">  
              <TITLE>[noClan]-Play-Community</TITLE>  
                
              </HEAD>  
              <FRAMESET ROWS="100%,*" BORDER="0" FRAMEBORDER="0">  
              <FRAME SRC="http://www.t-hp.de/noClan/" SCROLLING="AUTO" NAME="bannerframe" NORESIZE>  
              </FRAMESET>  
              <NOFRAMES>  
              [noClan]-Play-Community  
              <P>  
              <DIV ALIGN="CENTER"><A HREF="http://www.t-hp.de/noClan/">http://noclan-home.de/</A></DIV>  
              </NOFRAMES>  
              </HTML>  
              
              

              haben willst! Aber selbst wenn da eine _Umleitung_ wäre, ändert das nichts daran, daß Du uns die URl der Problemseite nennen solltest.

              »»http://www.t-hp.de/pics/test.gif auch das zu den Screenshots passende Bild hinterlegen.

              von dieser grafik hab ich doch überhaupt nichts erwähnt!!!!!!!
              wie kommst du auf den scheiss jetzt???????

              In Deinem Ausgangsposting hast Du hier

              /* styles.css */
              div.headmenu { margin-top:15px; margin-left:30px; font-size:7pt; z-index:2; position:absolute; }
              div.menu { margin-top:35px; }

              div.ct_pic {
                  top:5px;
                  position:absolute;
                  width:140px;
                  height:242px;
                  background-image:url('../pics/test.gif');
                }

              die einzige Grafik genannt. Wenn Dein Problem eine andere Grafik betrifft, warum postest Du dann irrelevanten Code?  
                
                
              
              > von dieser grafik ist überhaupt nicht die rede!!!!!  
              >   
              > die rede ist von dieser hier:  
              > <http://www.t-hp.de/ie.jpg> und dieser hier  
              > <http://www.t-hp.de/firefox.jpg>  
              
              wie bitte? Was haben die Screenshots mit Deinem Problem zu tun, außer daß sie es illustrieren?  
              Die hierin gezeigte Grafik sehe ich weder in Deinem geposteten Code noch auf Deiner Seite.  
                
              freundliche Grüße  
              Ingo
              
              -- 
              [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)
              
              1. Hi Ingo,

                ich glaub hier liegt ein Missverständnis beiderseits vor.
                Ich nehme auch gern die schuld komplett auf mich ;-)

                Wo siehst Du hier eine Abhängigkeit?
                In der Bildschirmauflösung?
                Wenn ich für dieses Layout die grafik mit left horizontal ausrichte,
                wer hat gesagt, daß Du die Grafik am body ausrichten sollst?

                genau das ist meine Frage, wie kann ich es denn sonst machen?

                haben willst! Aber selbst wenn da eine _Umleitung_ wäre, ändert das nichts daran, daß Du uns die URl der Problemseite nennen solltest.

                ok sorry, mein Fehler!

                div.ct_pic {
                    top:5px;
                    position:absolute;
                    width:140px;
                    height:242px;
                    background-image:url('../pics/test.gif'); /*http://t-hp.de/noClan/pics/test.gif*/
                  }
                [/code]
                die einzige Grafik genannt. Wenn Dein Problem eine andere Grafik betrifft, warum postest Du dann irrelevanten Code?

                nein nein, das ist schon der richtige Code.
                http://t-hp.de/noClan/pics/test.gif, diese Grafik habe ich absolute positioniert und diese Grafik ist im IE weiter nach rechts verschoben, im Firefox wird sie korrekt dargestellt.
                (diese grafik ist nicht online!)

                wie bitte? Was haben die Screenshots mit Deinem Problem zu tun, außer daß sie es illustrieren?

                stimmt, du hast ja recht!

                Die hierin gezeigte Grafik sehe ich weder in Deinem geposteten Code noch auf Deiner Seite.

                nein, du hattest versehentlich diese hier gepostet:
                http://t-hp.de/pics/test.gif
                ich meinte aber http://t-hp.de/noClan/pics/test.gif
                (diese ist allerdings nicht online)
                und genau diese grafik ist diese die im IE nicht richtig positioniert ist, siehe Screenshots.

                Ich bitte um Entschuldigung, dass war einfach nur ein Missverständnis.

                Um noch mal auf den Punkt zu kommen, wie du bei den Screenshots vom IE sehen kannst, ist die Grafik(der Typ mit dem Gewehr, hinter dem Menu) zu weit nach rechts verschoben, im Firefox ist das Ergbeniss richtig. Mit left kann ich nicht arbeiten, da mein Layout eine feste Weite von 900px hat, würde ich mit left arbeiten, würde die Darstellung in anderen Bildschirmauflösungen anders dargestellt werden. mit margin-left komm ich leider auch nicht weiter. Was kann ich tun?

                Gruß und sorry noch mal...
                Torsten

                1. Hi,

                  wer hat gesagt, daß Du die Grafik am body ausrichten sollst?

                  genau das ist meine Frage, wie kann ich es denn sonst machen?

                  indem Du das zentrierte Element, in dem sich die Grafik befindet, anders als static positionierst.

                  http://t-hp.de/noClan/pics/test.gif, diese Grafik habe ich absolute positioniert und diese Grafik ist im IE weiter nach rechts verschoben, im Firefox wird sie korrekt dargestellt.
                  (diese grafik ist nicht online!)

                  dafür eine andere, die nicht sichtbar ist. Wieso stellst Du eine Seite vor, in der man das Problem nicht sehen kann?

                  nein, du hattest versehentlich diese hier gepostet:
                  http://t-hp.de/pics/test.gif
                  ich meinte aber http://t-hp.de/noClan/pics/test.gif

                  ausgehend von der angegebenen Seite http://www.t-hp.de/noClan/ted.php und dem angegebenen CSS-Code url('../pics/test.gif') nicht.

                  (diese ist allerdings nicht online)

                  s.o.

                  Um noch mal auf den Punkt zu kommen, wie du bei den Screenshots vom IE sehen kannst, ist die Grafik(der Typ mit dem Gewehr, hinter dem Menu) zu weit nach rechts verschoben, im Firefox ist das Ergbeniss richtig. Mit left kann ich nicht arbeiten

                  doch, kannst Du. s.o.

                  freundliche Grüße
                  Ingo

                  1. Hi,

                    genau das ist meine Frage, wie kann ich es denn sonst machen?
                    indem Du das zentrierte Element, in dem sich die Grafik befindet, anders als static positionierst.

                    könntest Du mir das etwas genauer erläutern?
                    Wenn ich es als was anderes positioniere, zerschießt es mir mein ganzes Layout. Wie soll ich es denn positionieren, absolute? Am besten ich poste Dir mal mein BOX-Layout, vielleicht wird dann mein Problem eher klar.

                    hier erst noch mal die index.php:

                      
                    <body onLoad="dyndiv();">  
                      <div class="center">  
                        <div class="header"></div>  
                        <div id="nav">  
                          <div class="ct_pic"></div>  
                          <div class="headmenu"><?=$headmenu?></div>  
                          <div class="menu"><?php menu(); ?></div>  
                          <div class="logo"></div>  
                        </div>  
                        <div id="content"><?php include($_GET["page"]); ?></div>  
                        <div class="footer"></div>  
                    </div>  
                    </body>  
                    
                    

                    BOX-LAYOUT:

                      
                      /*************  
                        Center-BOX  
                      *************/  
                      div.center {  
                        width:900px;  
                        margin:0px auto;  
                        text-align:center;  
                        margin-top:25px;  
                      }  
                      
                      /******************  
                        Header-BOX (top)  
                      *******************/  
                      div.header { width:900px; height:50px; }  
                      div> div.header { background-image:url('../pics/top.png') }  
                      * html div.header {  
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.t-hp.de/noClan/pics/top.png', sizingMethod='scale') }  
                      
                      /***********************  
                        Navication-BOX (left)  
                      ***********************/  
                      #nav {  
                        position:absolute;  
                        width:148px;  
                        float:left;  
                        border-left:1px solid #6E470A;  
                        border-right:1px solid #6E470A;  
                      }  
                      
                      /********************  
                       Content-BOX (right)  
                      *********************/  
                      #content {  
                        width:743px;  
                        float:right;  
                        margin-top:5px;  
                        border:1px solid #6E470A;  
                      }  
                      div> #content, #nav {  
                    background-image:url('../pics/transparenz/black_50.png') }  
                      * html #content, #nav {  
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.t-hp.de/noClan/pics/transparenz/black_50.png', sizingMethod='scale') }  
                      
                      /********************  
                        Footer-BOX (bottom)  
                      *********************/  
                      div.footer {  
                        width:895px;  
                        height:50px;  
                        clear:left;  
                        padding-left:5px;  
                        font-size:6pt;  
                        font-weight:normal;  
                      }  
                      div> div.footer { background-image:url('../pics/bottom.png'); }  
                      * html div.footer {  
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.t-hp.de/noClan/pics/bottom.png', sizingMethod='scale') }  
                    
                    

                    Typ-mit-gewehr-grafik:

                      
                    div.ct_pic {  
                        margin-left:5px;  
                        top:5px;  
                        position:absolute;  
                        width:140px;  
                        height:242px;  
                        background-image:url('../pics/test.gif');  
                      }  
                    
                    

                    am liebsten würde ich Dir mal meine komplette Page als ZIP-File senden, aber ich glaube die Arbeit will sich keiner machen, mal drüber zu schauen, kann ich auch verstehen, aber fragen kostet ja nichts.

                    Müsste ich vielleicht all meine BOX-Elemente absolut positionieren, außer die Center-Box? Ich glaube das würde aber fatale Auswirkungen auf den Rest der Seite geben, quasi eine Kettenreaktion mit Entstehung ganz anderer Probleme.

                    Also ich bin ganz ehrlich mit meinem Latein am Ende.

                    Gruß
                    Torsten

                    1. Hi,

                      indem Du das zentrierte Element, in dem sich die Grafik befindet, anders als static positionierst.

                      könntest Du mir das etwas genauer erläutern?

                      <div class="center">

                      position:relative

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

                      position:static (bzw. die unsinnige absolute Positionierung löschen)

                      <div class="ct_pic"></div>

                      position:absolute

                      am liebsten würde ich Dir mal meine komplette Page als ZIP-File senden, aber ich glaube die Arbeit will sich keiner machen, mal drüber zu schauen, kann ich auch verstehen, aber fragen kostet ja nichts.

                      stimmt ... aber nein danke. ;-)

                      Müsste ich vielleicht all meine BOX-Elemente absolut positionieren

                      nein. Nur die Grafik - der Du dann nicht auch noch ein margin zuweisen mußt.

                      freundliche Grüße
                      Ingo

                      1. Hi,

                        gesagt getan, immer noch selbiges Problem, genauso wie es in den Screenshots zu sehen ist.

                        Gruß

                        1. Hi,

                          gesagt getan, immer noch selbiges Problem, genauso wie es in den Screenshots zu sehen ist.

                          dann stelle das Ergebnis doch testweise mal online. Aber bitte ohne Javascript und ActiveX nutzbar und wenn möglich auf das Problem reduziert, d.h. den übrigen Inhalt kannst Du entfernen und den betroffenen Elementen zur Erkennung bestimmte Hintergrundfarben zuweisen.

                          freundliche Grüße
                          Ingo

                          1. Hi,

                            dann stelle das Ergebnis doch testweise mal online. Aber bitte ohne Javascript und ActiveX nutzbar und wenn möglich auf das Problem reduziert, d.h. den übrigen Inhalt kannst Du entfernen und den betroffenen Elementen zur Erkennung bestimmte Hintergrundfarben zuweisen.

                            http://t-hp.de/test/noClan/ted.php

                            Firefox Ergbeniss richitg!
                            IE Tpy-mit-Gewehr-Grafik zu weit nach rechts verschoben!

                            ActiveX habe ich nichts, vielleicht meinst du die Filter, die funktionieren aber auch ohne aktivierenden ActiveX.

                            Die Box-Elemente habe ich jetzt nach deinem Vorschlag positioniert.

                            Gruß
                            Torsten

                            1. Hi,

                              http://t-hp.de/test/noClan/ted.php

                              sehr schön. Aber ich habe jetzt ehrlich gesagt keine Lust, in den 10 verschiedenen CSS-Dateien nach dem relevanten Code zu suchen.

                              freundliche Grüße
                              Ingo

                              1. Hi,

                                http://t-hp.de/test/noClan/ted.php
                                sehr schön. Aber ich habe jetzt ehrlich gesagt keine Lust, in den 10 verschiedenen CSS-Dateien nach dem relevanten Code zu suchen.

                                sorry!!
                                div_cont_style.css ist das Grundlayout, also die BOX-Elemente.
                                In graphic_style.css ganz unten(CT-Pic) ist die Grafik(Typ-mit-Gewehr) die im IE nicht richtig positioniert ist.
                                Der Rest ist für dieses Problem irrelevant.

                                Gruß
                                Torsten

                                1. Hi,

                                  div_cont_style.css ist das Grundlayout, also die BOX-Elemente.
                                  In graphic_style.css ganz unten(CT-Pic) ist die Grafik(Typ-mit-Gewehr) die im IE nicht richtig positioniert ist.
                                  Der Rest ist für dieses Problem irrelevant.

                                  wenn Dir das sogar selber schon bewußt ist: warum entfernst Du das dann nicht aus der Beispieldatei und reduzierst diese auf das Nötigste?

                                  Aber auf diesen Wust an CSS Dateien habe ich dennoch keine Lust und einfach mal im HTML den Tip  ausprobiert, den ich Dir bereits gesagt hatte:

                                    
                                    <div class="center" style="position:relative">  
                                      <div class="header"></div>  
                                      <div id="nav" style="position:static">  
                                        <div class="ct_pic" style="position:absolute; top:0; left:0;"></div>  
                                  
                                  

                                  und - Überraschung - es funktioniert. Und wieso ging das bei Dir nicht oder hattest Du es garnicht oder verkehrt gemacht?

                                  freundliche Grüße
                                  Ingo

                                  1. Hi,

                                    wenn Dir das sogar selber schon bewußt ist: warum entfernst Du das dann nicht aus der Beispieldatei und reduzierst diese auf das Nötigste?

                                    Tut mir Leid das ich auch nur ein Mensch bin, und eben nicht immer an alles denke.

                                    Aber auf diesen Wust an CSS Dateien habe ich dennoch keine Lust und einfach mal im HTML den Tip  ausprobiert, den ich Dir bereits

                                    gesagt hatte:
                                    Was soll das denn jetzt heißen? Wust an CSS Dateien?
                                    Das ist schon gut so, so wie es ist!
                                    Ich finde mich in dieses 10 Dateien wunderbar zu recht, besser zu recht als würde ich den ganzen Code in eine Datei hauen.
                                    Tut mir Leid das mir die Professionalität nicht vom Himmel fällt.

                                    <div class="center" style="position:relative">
                                        <div class="header"></div>
                                        <div id="nav" style="position:static">
                                          <div class="ct_pic" style="position:absolute; top:0; left:0;"></div>

                                    
                                    > und - Überraschung - es funktioniert. Und wieso ging das bei Dir nicht oder hattest Du es garnicht oder verkehrt gemacht?  
                                      
                                    Ja es Funktioniert.  
                                    Ja und ich habe es probiert, allerdings ohne left:0, left:0 hattest du nicht erwähnt! Auch hier für entschuldige ich mich, dass ich zu dumm war nicht selbst drauf gekommen zu sein.  
                                      
                                    Dennoch danke für die Hilfe, auch wenn ich mir etwas mehr Freundlichkeit und vorallem Menschlichkeit gewünscht hätte.  
                                      
                                    Gruß  
                                    Torsten
                                    
                                    1. Hi,

                                      Was soll das denn jetzt heißen? Wust an CSS Dateien?
                                      Das ist schon gut so, so wie es ist!
                                      Ich finde mich in dieses 10 Dateien wunderbar zu recht, besser zu recht als würde ich den ganzen Code in eine Datei hauen.

                                      wie Du jetzt weißt, verzögert dies auch die Auslieferung der Seite. Außerdem fällt ein erhöhter Traffic an, da ja zig HTTP-Header verschickt werden müssen - manche Browser fordern sogar bei jedem Seitenaufruf die CSS-Dateien an, was dann bestenfalls 10 Anfragen und 10 304er Rückmeldungen ergibt.

                                      Ja es Funktioniert.
                                      Ja und ich habe es probiert, allerdings ohne left:0, left:0 hattest du nicht erwähnt! Auch hier für entschuldige ich mich, dass ich zu dumm war nicht selbst drauf gekommen zu sein.

                                      Du fragtest nach der Methode und nicht nach dem exakten Code. Da Du Dich selbst schon mit absoluter Positionierung befaßt und festgestellt hast, daß fehlende Positionsangaben problematisch sind, ging ich davon aus, daß Du zumindest mal etwas experimentierst.

                                      Dennoch danke für die Hilfe, auch wenn ich mir etwas mehr Freundlichkeit und vorallem Menschlichkeit gewünscht hätte.

                                      Tut mir leid, wenn das so rübergekommen ist. Du provozierst das aber auch. Denn wenn Du kostenlose Hilfe erwartest, solltest Du zumindest etwas Vorarbeit leisten. Versetz' Dich mal in die Lage eines durchaus hilfewilligen Users, der nun - trotz Bitte um eine reduzierte Problemseite - mit einem solchen Code konfrontiert wird. Wie fändest Du das? Würdest Du da überhaupt noch helfen wollen?

                                      freundliche Grüße
                                      Ingo

                                      1. Hi,

                                        wie Du jetzt weißt, verzögert dies auch die Auslieferung der Seite. Außerdem fällt ein erhöhter Traffic an, da ja zig HTTP-Header verschickt werden müssen - manche Browser fordern sogar bei jedem Seitenaufruf die CSS-Dateien an, was dann bestenfalls 10 Anfragen und 10 304er Rückmeldungen ergibt.

                                        Das wusste ich nicht, gut das ich das jetzt auch weiß.

                                        Du fragtest nach der Methode und nicht nach dem exakten Code. Da Du Dich selbst schon mit absoluter Positionierung befaßt und festgestellt hast, daß fehlende Positionsangaben problematisch sind, ging ich davon aus, daß Du zumindest mal etwas experimentierst.

                                        Ich habe experimentiert, allerdings dachte ich dass ich mit left rein gar nichts anfangen kann, ich ging davon aus das sich left nur am Bildschirmrand ausrichten lässt. Dem ist aber nicht so, auch wieder was dazu gelernt.

                                        Tut mir leid, wenn das so rübergekommen ist. Du provozierst das aber auch. Denn wenn Du kostenlose Hilfe erwartest, solltest Du zumindest etwas Vorarbeit leisten. Versetz' Dich mal in die Lage eines durchaus hilfewilligen Users, der nun - trotz Bitte um eine reduzierte Problemseite - mit einem solchen Code konfrontiert wird. Wie fändest Du das? Würdest Du da überhaupt noch helfen wollen?

                                        Vorarbeit habe ich geleistet, wahrscheinlich aber nicht genug!
                                        Ich hatte dir die zwei relevanten CSS-Dateien genannt, ich wusste ja nicht das es dir generell um die CSS-Dateien ging, den relevante Code hatte ich ja bereits gepostet, dieser ist nicht anders als der der online ist.

                                        Gruß
                                        Torsten

                                        1. Hallo Torsten

                                          Ich habe experimentiert, allerdings dachte ich dass ich mit left rein gar nichts anfangen kann, ich ging davon aus das sich left nur am Bildschirmrand ausrichten lässt. Dem ist aber nicht so, auch wieder was dazu gelernt.

                                          Du hättest auch mal die Erläuterungen bei position lesen können.

                                          Auf Wiederlesen
                                          Detlef

                                          --
                                          - Wissen ist gut
                                          - Können ist besser
                                          - aber das Beste und Interessanteste ist der Weg dahin!
                            2. Hallo Torsten

                              Die Box-Elemente habe ich jetzt nach deinem Vorschlag positioniert.

                              Dabei ging es immer noch um https://forum.selfhtml.org/?t=107506&m=667682.

                              ..., also wie wäre es, wenn du eine Angabe zur horizontalen Position angibst (.z.B. left)?

                              http://t-hp.de/test/noClan/css/graphic_style.css

                                
                                div.ct_pic {  
                                  margin-left:5px;  
                                  top:5px;  
                                  position:absolute;  
                                  width:140px;  
                                  height:242px;  
                                  background-image:url('../pics/test.gif');  
                                }
                              

                              Ich sehe hier _keine_ Angabe zur horizontalen Position.

                              Dazu stelle ich mir aber noch ein paar Fagen:
                              Warum so viele CSS-Dateien?
                              Wozu ein Extra Div nur für das Hintergrundbild?
                              (Eine Andere Aufteilung zwischen Header und Navi oder position:absolute und
                              padding-top für die Navi wären imho besser.)

                              Auf Wiederlesen
                              Detlef

                              --
                              - Wissen ist gut
                              - Können ist besser
                              - aber das Beste und Interessanteste ist der Weg dahin!
                              1. Hi Detlef,

                                div.ct_pic {
                                    margin-left:5px;
                                    top:5px;
                                    position:absolute;
                                    width:140px;
                                    height:242px;
                                    background-image:url('../pics/test.gif');
                                  }

                                
                                >   
                                > Ich sehe hier \_keine\_ Angabe zur horizontalen Position.  
                                
                                Richtig! Mit left kann ich nicht arbeiten, falls Du das meinst, siehe vorherige postings.  
                                  
                                  
                                
                                > Dazu stelle ich mir aber noch ein paar Fagen:  
                                > Warum so viele CSS-Dateien?  
                                
                                Ich habe dadurch eine bessere Übersicht.  
                                Das ist auch eigentlich nicht das Problem.  
                                  
                                
                                > Wozu ein Extra Div nur für das Hintergrundbild?  
                                > (Eine Andere Aufteilung zwischen Header und Navi oder position:absolute und  
                                > padding-top für die Navi wären imho besser.)  
                                
                                Kann ich grad nicht nachvollziehen. Müsstest Du mir näher erläutern.  
                                  
                                Gruß  
                                Torsten
                                
                                1. Hallo  Torsten

                                  Richtig! Mit left kann ich nicht arbeiten, falls Du das meinst, siehe vorherige postings.

                                  Sag mal, liest du überhaupt, was dir geschrieben wird?

                                  https://forum.selfhtml.org/?t=107506&m=667682

                                  also wie wäre es, wenn du eine Angabe zur horizontalen Position angibst (.z.B. left)?

                                  https://forum.selfhtml.org/?t=107506&m=668138

                                  wer hat gesagt, daß Du die Grafik am body ausrichten sollst?

                                  https://forum.selfhtml.org/?t=107506&m=668180

                                  indem Du das zentrierte Element, in dem sich die Grafik befindet, anders als static positionierst.

                                  https://forum.selfhtml.org/?t=107506&m=668191

                                  <div class="center">
                                  position:relative

                                  Also, wo ist jetzt das Beispiel, das die Positionierungen, die Ingo
                                  vorschlug verwendet und auch die horizontale Positionierung für .ct_pic?

                                  Das ist auch eigentlich nicht das Problem.

                                  Das ist ein Problem, für jeden, der dir helfen will. Er müsste sich durch
                                  alle CSS-Dateien kämpfen, um die relevanten Angaben zu finden, und kann sich
                                  kaum sicher sein, dass in einer anderen Datei nicht noch etwas steht, was
                                  Einfluss auf die aktuelle Anzeigeprobleme hat.
                                  Die Seite braucht wird bei mir relativ langsam geladen, nicht weil die
                                  Verbindung langsam ist, sondern weil mein Browser Unmengen an Serveranfragen
                                  senden muss.
                                  Bei einer CSS-Datei hätte ich mir die Seite schon lange heruntergeladen, um
                                  es gleich selbst zu testen, statt darauf zu warten, dass du die Tipps
                                  umsetzt.

                                  (Eine Andere Aufteilung zwischen Header und Navi oder position:absolute und
                                  padding-top für die Navi wären imho besser.)
                                  Kann ich grad nicht nachvollziehen. Müsstest Du mir näher erläutern.

                                  Du könntest #nav absolut so positionieren, teilweise über #header.
                                  Dann bekommt #nav das Hintergrundbild und padding-top, damit .menu an der
                                  richtigen Position beginnt.

                                  Auf Wiederlesen
                                  Detlef

                                  --
                                  - Wissen ist gut
                                  - Können ist besser
                                  - aber das Beste und Interessanteste ist der Weg dahin!
                                  1. Hi,

                                    Die Seite braucht wird bei mir relativ langsam geladen, nicht weil die
                                    Verbindung langsam ist, sondern weil mein Browser Unmengen an Serveranfragen
                                    senden muss.

                                    Mit anderen Worten, mit nur einer CSS-Datei muss der Browser weniger Serveranfragen senden? Das wäre für mich ein Grund wieder alles in eine Datei zu hauen, so hatte ich es auch vorher gehabt. Habe es aber in mehrere Dateien aufgesplittet, weil es so für mich übersichtlicher ist.
                                    Ich dachte mir, der Aufbau der Seite könne nicht langsamer werden, was spielt es für eine Rolle ob jetzt aufeinmal 10kb oder 10kb in häppchen geladen werden!?

                                    Gruß
                                    Torsten

                                    1. Hallo Torsten

                                      Mit anderen Worten, mit nur einer CSS-Datei muss der Browser weniger Serveranfragen senden?

                                      Ja

                                      Ich dachte mir, der Aufbau der Seite könne nicht langsamer werden, was spielt es für eine Rolle ob jetzt aufeinmal 10kb oder 10kb in häppchen geladen werden!?

                                      Der Server tut nichts ohne Anfrage!

                                      Das bedeutet, wenn deine Seite erstmalig im Browser aufgerufen wird, dann
                                      schickt dieser eine Anfrage an den Server. Der liefert die HTML-Ressource an
                                      den Browser aus. Beim parsen dieser stellt der fest, dass er die erste
                                      CSS-Ressource braucht, also schickt er eine Anfrage an den Server. Der
                                      liefert diese aus.
                                      Genau dasselbe dann mit der zweiten, der dritten usw., genauso mit jedem
                                      Bild, jeder Javascript-Ressource.
                                      Diese werden aber nicht einfach so blank geschickt (der Browser muss ja
                                      wissen, was da nun genau kommt), sondern der Server liefert einen
                                      HTTP-Header mit.

                                      Wenn dann die Seite, oder eine andere Seite deines Projekts aufgerufen wird,
                                      hängt es von der Intelligenz des Browsers und seine Cacheeinstellungen ab,
                                      ob sich dieser Vorgang komplett wiederholt, er das Benötigte einfach aus dem
                                      Cache nimmt oder eine Anfrage schickt, ob der Server eine neue Version hat.

                                      Das bedeutet, selbst wenn die CSS-Dateien nicht geändert sind, kann es
                                      passieren, dass der Browser für jede einzelne eine Anfrage an den Server
                                      schickt, die dieser dann mindestens mit dem HTTP-Header und Statuscode 304
                                      (nicht geändert) zurückliefert, wie Ingo dir bereits schrieb.

                                      Auf Wiederlesen
                                      Detlef

                                      --
                                      - Wissen ist gut
                                      - Können ist besser
                                      - aber das Beste und Interessanteste ist der Weg dahin!