NS vs. IE - Problem mit DIV/Layer Objekten

Status
Nicht offen für weitere Antworten.
Billie

Billie

Erfahrenes Mitglied
Hellas!

Ich habe das Problem dass ich ein paar kleine Darstellungsfehler in einer Seite ausbesser soll, welche ich selbst nicht erstellt habe. Eigentlich kein großes Problem, bis ich gemerkt habe die Seite wurde völlig anderst aufgebaut als ich das machen würde. Die Seite besteht eigentlich nur aus vielen DIV-Blöcken mit einer entsprechenden CSS-Datei.

Im Grunde will ich nur wissen, wie folgende Seite auch im Netscape richtig angezeigt wird:

http://members.aon.at/jbo_checka/puke/index.htm

Also für alle Nicht-IE-Nutzer, die dunkelgrüne Tabelle soll den Text umschließen.

Mfg
Andreas Fagschlunger
http://www.pukemusic.at/
 
Ich würde um Fehler auszumerzen die ganzen unnützen DIV's erstmal als <p> machen.

Dann die Anordnung der <p> neu machen ... und irgendwann ergibt sich da dann auch der Fehler. Hätte ich zuviel Zeit würde ich das für dich machen ... hab ich aber nicht :)
 
Ich glaube das ist nicht des Rätsels Lösung, die Seite ist nunmal mit Layerobjekten aufgebaut... diese durch Absätze auszutauschen, hat wenig ist, meiner Meinung nach. Ich habe diese Seite aber auch schon minimiert, auf den Fehler, eigentlich.

Trotzdem ersteinmal danke... Die Frage ist trotzdem, wie schafft man es, dass die Seite im NS auch richtig angezeigt wird.
 
Habs mir mal genauer angeschaut , es liegt auf jeden Fall an der Anordnung der <div> und </div> ... die überlagern sich alle an zig stellen ... dadurch kannst du eigentlich gar nicht mehr sehen wo der Fehler ist. Vor allem weil alle ihre eigenen größen haben ...
 
Also steckt der Fehler eher in dem CSS-Design? Dadurch dass dort für jedes DIV Tag Layoutvorschriften sind und diese sich überlagern? Naja, hast du eine Ahnung wie man es anstellt, dass man praktisch drei Blöcke nebeneinander hat, so wie auf der eigentlich Seite:

http://www.pukemusic.at/
 
Habe jetzt nicht den kompletten Quelltext der Seite gecheckt, aber beim Blick in die CSS-Datei ist mir aufgefallen, daß bei manchen width-Angaben die Einheit px fehlt, was bekannterweise in den non-IE Browsers zu Darstellungsfehlern führt.


pukestyle.css hat gesagt.:
Code: 
#main       {
                 color:#AAAAAA;
                 font-family:Verdana;
                 font-size:12px;
                 text-align:left;
                 line-height:16px;
                 width:724px;
                }
Zum Vergrößern anklicken....
 
Nein, daran liegt es auch nicht. Habe aber jetzt einmal diese kleinen Schönheitsfehler ausgebessert, auch zB "100%px" in "100%" umbenannt. Aber das Problem besteht weiterhin, es kommt ja auch mehr auf die Höhe von dem Hintergrund an. Wobei es sollte keine fixe Höhe haben, sondern sich dem Inhalt anpassen bzw. den Inhalt umschließen.
 
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>- - - the offical puke homepage - -</title>
<meta name="author" content="Turion">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link href="gfx/pukeystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div align="center">
    <div id="board">
      <div id="head">
        <a href="index.php">

          <img src="gfx/px.gif" width="160" height="150" border="0" class="head" alt=" Startseite ">
        </a>
        <img src="gfx/px.gif" width="235" height="150" border="0" class="head">
        <a href="riesner.php">
          <img src="gfx/px.gif" width="48" height="150" border="0" class="head" alt=" Thomas Riesner ">
        </a>
        <img src="gfx/px.gif" width="5" height="150" border="0" class="head">
        <a href="schick.php">
          <img src="gfx/px.gif" width="50" height="150" border="0" class="head" alt=" Michael Schick ">

        </a>
        <a href="cabas.php">
          <img src="gfx/px.gif" width="38" height="150" border="0" class="head" alt=" Michael Cabas ">
        </a>
        <a href="heel.php">
          <img src="gfx/px.gif" width="40" height="150" border="0" class="head" alt=" Gottfried Heel ">
        </a>
        <img src="gfx/px.gif" width="10" height="150" border="0" class="head">
        <a href="lutz.php">

          <img src="gfx/px.gif" width="40" height="150" border="0" class="head" alt=" Marie-Therese Lutz ">
        </a>
        <a href="rameder.php">
          <img src="gfx/px.gif" width="50" height="150" border="0" class="head" alt=" Peter Rameder">
        </a>
        <img src="gfx/px.gif" width="23" height="150" border="0" class="head">
      </div>

      <div id="navi">

        <a href="news.php" class="navi">news</a> I
        <a href="band.php" class="navi">pukes</a> I
        <a href="termin.php" class="navi">pukey time</a> I
        <a href="gallery/index.php" class="navi">gallery</a> I
        <a href="media.php" class="navi">media</a> I
        <a href="shop.php" class="navi">shop</a> I
        <a href="links.php" class="navi">friends</a> I
        <a href="community.php" class="navi">community</a>

      </div>

      
        <div id="main">
            <h1>Willkommen auf der offiziellen Homepage von <span id="gelb">PUKE</span></h1>
            <br>
                <p id="trix2">
                  <span id="gelb"><b>03.September 2005</b></span>
                  <br>Die Fanpage geht online.....<br><br>
                  <span id="gelb"><b>8. Mai 2005</b></span>
                  <br>Der Chat-tag ist amtlich...<br><br>

                  <span id="gelb"><b>20.April 2005</b></span>
                  <br>Mit dem Bus zum ABC-Finale...<br><br>
                  <span id="gelb"><b>25.Februar.2005</b></span>
                  <br>Der Zwischenbericht<br>
                </p>
                          
        </div>
      

      <!--
      <div id="foot">
        <a href="news.php" class="navi">news</a> I
        <a href="band.php" class="navi">pukes</a> I
        <a href="termin.php" class="navi">pukey time</a> I
        <a href="gallery/index.php" class="navi">gallery</a> I
        <a href="media.php" class="navi">media</a> I
        <a href="shop.php" class="navi">shop</a> I
        <a href="links.php" class="navi">friends</a> I
        <a href="community.php" class="navi">community</a>
      </div>
      <div id="foot2">
        Copyright &copy; by puke / <a href="impressum.php">contact &amp; impressum</a>
      </div>
      -->
    </div>
  </div>
</body>
</html>

Probier mal diesen HTML Code ... ist zwar immernoch ziemlich schlecht aber schau mal was draus wird
 
Hi,

du veränderst in #start mit float:left den Textfluss. Um eine korrekte Anzeige zu
gewährleisten, musst du am Ende des DIVs mit der ID main mit clear den "normalen"
Zustand wieder herstellen.

Dazu definierst du zum Beispiel eine Klasse, die aufgrund ihrer Grösse nicht ins Layout eingreift,
den Textfluss jedoch wieder zurücksetzt.
Code: 
.clearDiv{ font-size: 1px;
           line-height: 0;
           height: 0;
           clear: both;}
Mit dieser Klasse zeichnest du einem DIV auf, welches am Ende des main-Elementes eingefügt
wird.
HTML: 
<div id="main" style="border: 1px solid yellow;">
  <div align="center">
    <h1>Willkommen auf der offiziellen Homepage von <span id="gelb">PUKE</span></h1>
    <br>
    <div id="tstart">
      <div id="start">
        <div id="trix2">
          <!-- Inhalt -->
        </div>
      </div>
    </div>
  </div>
  <div class="clearDiv">&nbsp;</div>
</div>
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück