s7mahess
Goto Top

Optimierung HTML Syntax (div anordnung)

Ich muss nächste Woche eine Arbeit (HTML Seite) abgeben über Audioformate, nach ewigen basteln habe ich nun ein einigermaßen anständiges Layout gezaubert. Meine Frage ist nun kann ich es noch optimieren?

Es soll wie so wie ich es habe sich an die Fenstergröße anpassen.
Sich in FF IE GC und Opera möglichst gleich verhalten (mein Dozent kontrolliert wahrscheinlich nur FF und IE).
Darf kein Ajax, Javascript, PhP ... enthalten (pures HTML)
Und ob der Code sauber ist.

MfG Martin

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<head>
  <!--<link href="stylesheet.css" rel="stylesheet" type="text/css" />--> 
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  <style>
    body  { margin:0; padding:0; font-size:100.1%;}    
    #back { border:  1px solid #fff; position:static;      z-index:0; margin-top:  0px;        left:   0px; margin-bottom:   0px;        right:   0px;  }
    #navi { border:  1px solid #000; position:fixed;       z-index:1;        top: 11px;        left:  10px;        bottom:  11px;        width: 150px;  background-color:#ffffff;}
    #head { border:  1px solid #000; position:relative;    z-index:1; margin-top: 10px; margin-left: 180px;        height: 100px;        right:  10px;  background-color:#ffffff;}
    #cont { border:  1px solid #000; position:relative;    z-index:1; margin-top: 10px; margin-left: 180px;        height:1550px;        right:  10px;  background-color:#ffffff;}
    #co1  { border:  0px solid #000; position:static;      z-index:2; width:   33.3%; float:left;  background-color:#00ffff;}
    #co2  { border:  0px solid #000; position:static;      z-index:2; width:   33.3%; float:left;  background-color:#ffff00;}
    #co3  { border:  0px solid #000; position:static;      z-index:2; width:   33.3%; float:right; background-color:#ff00ff;}
    #co4  { border:  0px solid #000; position:static;      z-index:2; width:   50%;   float:left; background-color:#ff0000;}
    #co5  { border:  0px solid #000; position:static;      z-index:2; width:   50%;   float:right; background-color:#0000ff;}
    #bot  { border:  1px solid #000; position:relative;    z-index:1; margin-top: 10px; margin-left: 180px; margin-bottom:  10px;       heigth:  30px; right:  10px;  background-color:#ffffff;}
    table{
      empty-cells:show;
    }
    
    h1{
      text-align:center;
      font-style:italic;
      color:#ff0000;
    }
  </style>
  <title>Index</title>
</head>
<body>
  <div id="back">  
    <div id="navi">    
      navi
    </div> <!--navi-->
    <div id="head">  
      <h1>Überschrift</h1>
    </div> <!--head-->
    <div id="cont">  
      <div id="co1">  
        co1
      </div> <!--co1-->
      <div id="co2">  
        co2
      </div> <!--co2-->
      <div id="co3">  
        co3
      </div> <!--co3-->
      <div id="co4">  
        co4
      </div> <!--co4-->
      <div id="co5">  
        co5
      </div> <!--co5-->
    </div> <!--cont-->  
    <div id="bot">  
      bot   
    </div> <!--bot-->
  </div> <!--back-->
</body>
</html>

Content-Key: 136137

Url: https://administrator.de/contentid/136137

Ausgedruckt am: 29.03.2024 um 07:03 Uhr

Mitglied: s7mahess
s7mahess 17.02.2010 um 09:50:00 Uhr
Goto Top
Hmm schade schon ersten Fehler selbst gefunden,

cont orientiert sich in seiner höhe nicht an seinem Inhalt, was er eigentlich tuen soll.

wenn ich bei #cont { height : 100% } setz funktioniert es noch wie gewünscht in IE aber FF macht nicht mit.

Hilfe face-sad
Mitglied: dog
dog 17.02.2010 um 10:31:53 Uhr
Goto Top
CSS hat ein ganz eigenes Verhältnis zu Höhenangaben, oder anders gesagt: Wenn der Firefox 100% ignoriert macht er es richtig face-smile

Du musst dir einen anderen Weg ausdenken um den Effekt zu erreichen.
Mitglied: Mitchell
Mitchell 17.02.2010 um 10:50:22 Uhr
Goto Top
Suche mal bei einer Suchmaschine deiner Wahl nach Browserhacks, CSS von IE und FF sind sehr, sehr unterschiedlich, wie "dog" schon anmerkte face-smile. Vorallem bei den Angaben in Prozent gibts da öfter mal Probleme, IE braucht z.B. öfter mal 1% mehr und so Scherze.

Mfg

Mitchell
Mitglied: s7mahess
s7mahess 17.02.2010 um 11:50:58 Uhr
Goto Top
also darf ich alles per browserhacks machen d.h. auf FF bauen und die entsprechenden hacks für IE einbauen oder ich pfeif auf meinen dozenten und weise über js jeweils verschiedene css dateien zu

nagut dann eben basteln
Mitglied: dog
dog 17.02.2010 um 11:54:31 Uhr
Goto Top
Wieso denn JS?
Die ganzen IE Hacks macht man seit Jahren über Conditional Comments: http://de.wikipedia.org/wiki/Conditional_Comments