CSS Bildpositionierung bei Firefox/Opear

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Bildpositionierung bei Firefox/Opear

    Hallo,

    habe da ein Problem bei meiner ersten kompletten CSS-Site. Ich muß sicherlich noch vieles lernen, bräuchte nun aber mal Eure Hilfe, da ich unbeding endlich den Einstieg in tabellenloses Design schaffen möchte.

    Hier mal der Link zur fertigen Layoutansicht als Screenshot:


    Endergebnis

    Und so weit bin ich momentan (leider):
    Status


    Probleme habe weniger bei der Positionierung der oberen Grafiken. Eher bei den unteren Grafiken unten links und unten rechts, die sich genau am Rand des Kastens befinden sollen. Später dann möchte ich die Grafiken unten rechts und links dann durch Flashelemente ersetzen.

    Bei IE 7 klappt es soweit auch, nur bei Firefox 2.0 und Opera 9.0 ist die rechte untere Grafik einfach nicht an der Linie dran.

    Ich hoffe ich habe alles richtig erklärt und nichts vergessen.

    Vielen lieben Dank für etwas Hilfe.

    Gruß
    Torsten
    Zuletzt geändert von tams; 15.12.2006, 16:05.

  • #2
    da helfen keine screenshots, sondern code. oder eine online-version

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hhmm, versteh ich nicht, ich hab doch einen Link zur meiner noch unfertigen programmierten Version genannt. Aber hier noch mal mein bisheriger Code:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>
      <head>
      <title>Unbenannt</title>
      </head>

      <body>
      <!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>

      <title>Layout</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css"><!--
      html{
      margin: 0px;
      padding: 0px;
      }

      body {
      background-color: #ffffff;
      font-size: 12px;
      font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
      color:#564b47;
      padding:10px;
      margin:0px;
      text-align: center;
      }

      #inhalt {
      text-align: left;
      vertical-align: middle;
      margin: 0px auto;
      margin-top: 40px;
      padding: 0px;
      width: 988px;
      height: 600px;
      border: 1px #AEAEAE solid;
      background-color: #ffffff;
      }


      #land {
      margin-top: 40px;
      padding: 0px;
      left: 410px;
      top: 303px;
      }

      #logo {
      margin-top: 0px;
      padding-top: 10px;
      padding-left: 37px;
      width: 217px;
      height: 45px;
      }

      #kontaktkompass {
      margin-top: 0px;
      padding-top: 60px;
      padding-left: 800px;
      }

      #achtungkompass {
      margin-top: 0px;
      padding-top: 30px;
      padding-left: 800px;
      }

      #barountenrechts {
      margin-top: 0px;
      padding-top: 10px;
      padding-left: 623px;
      }

      p, h1, pre {
      margin: 0px;
      padding: 5px 10px;
      }
      h1 {
      font-size: 11px;
      text-transform:uppercase;
      text-align: right;
      color: #564b47;
      background-color: #90897a;
      }

      a {
      color: #ff66cc;
      font-size: 11px;
      background-color:transparent;
      text-decoration: none;
      }

      #logo a img{
      border-width: 0;
      }

      pre {
      color: #564b47;
      font-size: 11px;
      background-color:transparent;
      font-family: Courier, Monaco, Monospace;
      }
      /* ]]> */
      --></style>
      </head>
      <body>

      <div id="inhalt">
      <div id="land"><img src="images/land_in_sicht.gif" alt="" /></div>

      <div id="logo"><a href="#"><img src="images/logo_steuermann.gif" alt="" /></a></div>

      <div id="kontaktkompass"><img src="images/kontakt_kompass.gif" alt="" /></div>

      <div id="achtungkompass"><img src="images/kontakt_achtung.gif" alt="" /></div>

      <div id="barountenrechts"><img src="images/uhr_unten_rechts.gif" alt="" /></div>

      </div>



      </body>

      </html>


      </body>
      </html>



      Gruß
      Torsten
      Zuletzt geändert von tams; 15.12.2006, 16:47.

      Kommentar


      • #4
        ups, sorry, dachte das war ein bild.
        PHP-Code:
        #barountenrechts 
        {
           
        padding-top: ...

        pass das mal an. und darin noch ein font-size: 0px; für den ie

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Heissen Dank Kropff,

          habe ich schon versucht, leider ohne Auswirkungen. Muß noch anders gehen. Der IE interpretiert das irgendwie anders. Entweder ist die Grafik bei Firefox nicht richtig dran oder beim IE.

          Gruß
          Torsten
          Zuletzt geändert von tams; 15.12.2006, 16:54.

          Kommentar


          • #6
            also so sieht es bei mir in allen browsern gleich aus (ff 1.5 und 2, ie 6 und 7)
            PHP-Code:
            #barountenrechts {
            margin-top0px;
            padding-top20px;
            padding-left623px;
            }
            /* IE 6*/
            html #barountenrechts {
            font-size0px;
            }
            /* IE 7*/
            >body #barountenrechts {
            padding-top10px;

            peter
            Zuletzt geändert von Kropff; 15.12.2006, 17:15.
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Hallo Kropff,

              hmm irgendwie klappt das zwar nun mit IE 7 aber dummerweise sieht es bei Firefox 2.0 und Opera nun so aus:

              Firefox 2.0

              Sorry, weiß auch nicht was ich verkehrt mache. Habe Deinen Code doch genauso eingebaut:



              Aber heissen Dank nochmals.

              TorstenGecodete Site

              Kommentar


              • #8
                bei mir nicht. hast du das padding-top auf 20px gesetzt?

                peter
                EDIT:
                stimmt, 20px. da musst aber noch etwas geändert haben. jetzt klappt es auch bei mir nicht mehr
                Zuletzt geändert von Kropff; 15.12.2006, 17:17.
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  habe das eingebaut:

                  #barountenrechts {
                  margin-top: 0px;
                  padding-top: 20px;
                  padding-left: 623px;
                  font-size: 0px;
                  }
                  * html #barountenrechts {
                  font-size: 0px;
                  }
                  body #barountenrechts {
                  font-size: 0px;
                  padding-top: 10px;
                  }

                  Kommentar


                  • #10
                    komisch. schmeiss das padding-top raus und arbeite mit margin-top. dann klappt es auch. spiel ein wenig herum. du hast ja drei varianten für die browser

                    gruß
                    peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Kommentar


                    • #11
                      mach ich mal...

                      Kommentar


                      • #12
                        Hmmm echt komisch, die Varianten zeigen bei mir irgendwie alle keine Wirkung. Habe das padding-top überall mal rausgeworfen und mit margin-top gespielt. hatte aber entweder nur Auswirkungen auf den IE oder Firefox/Opera. Langsam gebe ich auf. Muß wohl doch wieder mit tabellen arbeiten (seufz)...

                        Kommentar


                        • #13
                          das forum hat was verschluckt. vor das body #barountenrechts muss direkt ohne leerzeichen ein größer als also >body #barountenrechts

                          peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            hmmm, gibt's doch nicht. So langsam glaub, daß was mit meinem Browsern nicht stimmt. Genau so hab ich es jetzt eingebaut:

                            #barountenrechts {
                            margin-top: 0px;
                            padding-top: 20px;
                            padding-left: 623px;
                            }
                            /* IE 6*/
                            * html #barountenrechts {
                            font-size: 0px;
                            }
                            /* IE 7*/
                            >body #barountenrechts {
                            padding-top: 10px;
                            }

                            Merkwürdigerweise wirken sich Änderungen an:
                            /* IE 6*/
                            * html #barountenrechts {
                            font-size: 0px;
                            }
                            /* IE 7*/
                            >body #barountenrechts {
                            padding-top: 10px;
                            }

                            in keinster Weise bei mir aus.

                            Einzig Änderungen an:

                            #barountenrechts {
                            margin-top: 0px;
                            padding-top: 20px;
                            padding-left: 623px;
                            }

                            scheinen sich auzuwirken. So wie es jetzt unter folgendem Link
                            gebaut ist:

                            Link zum Coding

                            klappt es auf dem PC nur unter Firefox 2.0 und Opera. Der blöde IE 7.0.5700 will einfach nicht. Solche Probleme sind der Grund warum ich immer noch viel mit Tabellen mache.

                            Muß nun mal eben kurz in die Autowerkstatt. Wenn ich zurück bin, mach ich weiter. Vielen Dank Dir erstmal!!!!
                            Zuletzt geändert von tams; 15.12.2006, 18:01.

                            Kommentar


                            • #15
                              PHP-Code:
                              >body #barountenrechts {
                              margin-top10px// MARGIN

                              peter
                              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                              Meine Seite

                              Kommentar

                              Lädt...
                              X