Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst Optimierung HTML Syntax (div anordnung)

Mitglied: s7mahess

s7mahess (Level 1) - Jetzt verbinden

17.02.2010, aktualisiert 19:58 Uhr, 4645 Aufrufe, 5 Kommentare

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

01.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
02.
<html> 
03.
<head> 
04.
  <!--<link href="stylesheet.css" rel="stylesheet" type="text/css" />--> 
05.
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
06.
  <style> 
07.
    body  { margin:0; padding:0; font-size:100.1%;}     
08.
    #back { border:  1px solid #fff; position:static;      z-index:0; margin-top:  0px;        left:   0px; margin-bottom:   0px;        right:   0px;  } 
09.
    #navi { border:  1px solid #000; position:fixed;       z-index:1;        top: 11px;        left:  10px;        bottom:  11px;        width: 150px;  background-color:#ffffff;} 
10.
    #head { border:  1px solid #000; position:relative;    z-index:1; margin-top: 10px; margin-left: 180px;        height: 100px;        right:  10px;  background-color:#ffffff;} 
11.
    #cont { border:  1px solid #000; position:relative;    z-index:1; margin-top: 10px; margin-left: 180px;        height:1550px;        right:  10px;  background-color:#ffffff;} 
12.
    #co1  { border:  0px solid #000; position:static;      z-index:2; width:   33.3%; float:left;  background-color:#00ffff;} 
13.
    #co2  { border:  0px solid #000; position:static;      z-index:2; width:   33.3%; float:left;  background-color:#ffff00;} 
14.
    #co3  { border:  0px solid #000; position:static;      z-index:2; width:   33.3%; float:right; background-color:#ff00ff;} 
15.
    #co4  { border:  0px solid #000; position:static;      z-index:2; width:   50%;   float:left; background-color:#ff0000;} 
16.
    #co5  { border:  0px solid #000; position:static;      z-index:2; width:   50%;   float:right; background-color:#0000ff;} 
17.
    #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;} 
18.
    table{ 
19.
      empty-cells:show; 
20.
21.
     
22.
    h1{ 
23.
      text-align:center; 
24.
      font-style:italic; 
25.
      color:#ff0000; 
26.
27.
  </style> 
28.
  <title>Index</title> 
29.
</head> 
30.
<body> 
31.
  <div id="back"> 
32.
    <div id="navi">   
33.
      navi 
34.
    </div> <!--navi--> 
35.
    <div id="head"> 
36.
      <h1>Überschrift</h1> 
37.
    </div> <!--head--> 
38.
    <div id="cont"> 
39.
      <div id="co1"> 
40.
        co1 
41.
      </div> <!--co1--> 
42.
      <div id="co2"> 
43.
        co2 
44.
      </div> <!--co2--> 
45.
      <div id="co3"> 
46.
        co3 
47.
      </div> <!--co3--> 
48.
      <div id="co4"> 
49.
        co4 
50.
      </div> <!--co4--> 
51.
      <div id="co5"> 
52.
        co5 
53.
      </div> <!--co5--> 
54.
    </div> <!--cont-->   
55.
    <div id="bot"> 
56.
      bot    
57.
    </div> <!--bot--> 
58.
  </div> <!--back--> 
59.
</body> 
60.
</html>
Mitglied: s7mahess
17.02.2010 um 09:50 Uhr
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
Bitte warten ..
Mitglied: dog
17.02.2010 um 10:31 Uhr
CSS hat ein ganz eigenes Verhältnis zu Höhenangaben, oder anders gesagt: Wenn der Firefox 100% ignoriert macht er es richtig

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

Mfg

Mitchell
Bitte warten ..
Mitglied: s7mahess
17.02.2010 um 11:50 Uhr
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
Bitte warten ..
Mitglied: dog
17.02.2010 um 11:54 Uhr
Wieso denn JS?
Die ganzen IE Hacks macht man seit Jahren über Conditional Comments: http://de.wikipedia.org/wiki/Conditional_Comments
Bitte warten ..
Ähnliche Inhalte
HTML

Seitenwechsel innerhalb einer div-Box in HTML+CSS

gelöst Frage von honeybeeHTML7 Kommentare

Hallo, ich habe mit dem HTML-Tag <div> und CSS folgendes Webseitenschema erstellt: siehe Screenshot unten. Meine Frage: Wenn ich ...

Cloud-Dienste

Usability Optimierung

gelöst Frage von BastiG13Cloud-Dienste5 Kommentare

Hallo zusammen, ich suche für meine Website eine Agentur, die diese komplett auf den Kopf stellt und die Usability ...

Windows XP

Syntax für - Ausführen als...-

Frage von FordPerfectWindows XP3 Kommentare

Syntax für "ausführen als"Hallo liebe Freunde! ich versuche auf einem XP rechner eine Software automatisch zu starten. Bei mir ...

Outlook & Mail

Outlook Kontaktnamen Anordnung

gelöst Frage von xbast1xOutlook & Mail2 Kommentare

Hallo, im Outlook (2007) sind meine eigenen Kontakte mit Nachname und Vorname ausgewählt. Wenn ich eine E-mail schreibe und ...

Neue Wissensbeiträge
Windows 10

USB Maus und Tastatur versagen Dienst unter Windows 10

Erfahrungsbericht von hardykopff vor 1 TagWindows 105 Kommentare

Da steht man ziemlich dumm da, wenn der PC sich wegen fehlender USB Tastatur und Maus nicht bedienen lässt. ...

Administrator.de Feedback
Update der Seite: Alles zentriert
Information von Frank vor 1 TagAdministrator.de Feedback18 Kommentare

Hallo User, die größte Änderung von Release 5.8 ist das Zentrieren der Webseite (auf großen Bildschirmen) und ein "Welcome"-Teaser ...

Humor (lol)

WhatsApp-Nachrichten endlich auch per Bluetooth versendbar

Information von BassFishFox vor 2 TagenHumor (lol)4 Kommentare

Genau darauf habe ich gewartet! ;-) Der beliebte Messaging-Dienst WhatsApp erhält eine praktische neue Funktion: Ab dem nächsten Update ...

Google Android

Googles "Android Enterprise Recommended" für Unternehmen

Information von kgborn vor 2 TagenGoogle Android3 Kommentare

Hier eine Information, die für Administratoren und Verantwortliche in Unternehmen, die für die Beschaffung und das Rollout von Android-Geräten ...

Heiß diskutierte Inhalte
Windows Netzwerk
WSUS4 und Windows 10 Updates automatisch installieren
Frage von sammy65Windows Netzwerk15 Kommentare

Hallo miteinander, ich habe mit einen neuen WSUS Server aufgesetzt Server 2016 darauf einen aktuellen WSUS. Grund, wir stellen ...

Speicherkarten
Vergessliche USB-Sticks?
Frage von hanheikSpeicherkarten14 Kommentare

Ich habe in den letzten Tagen 500 USB-Sticks mit Bilddateien bespielt. Obwohl ich die Dateien mit größter Sorgfalt kopiert ...

Hyper-V
Hyper-V mit altem XEON-Server. Was ist falsch?
Frage von LollipopHyper-V11 Kommentare

Hallo Bin etwas frustriert. Kleinbetrieb, ca. 15 PC's, 2 Stk. Server mit einigen virtuellen PC's für Fernwartung, VaultServer für ...

Windows Server
NTFS Berechtigungen Ordnerstruktur
Frage von hukahu23489Windows Server11 Kommentare

Hallo, ich bin seit kurzem in einer neuen IT-Abteilung und bin über das Berechtigungskonzept des Unternehmens sehr schockiert. Ich ...