Delphi-PRAXiS - CSS: Problem mit anzeigen von div im Internet Explorer

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - CSS: Problem mit anzeigen von div im Internet Explorer (https://www.delphipraxis.net/72319-css-problem-mit-anzeigen-von-div-im-internet-explorer.html)

CSS: Problem mit anzeigen von div im Internet Explorer

Ich hab ne seite mit css gemacht. Das Problem ist, das ich ein grosses <div> habe, wo alle anderen <div> drin sind.
Diese "große" <div> wird zentriert angezeigt und die anderen <div> sollen sich an diesem orientieren, spirch innerhalb angezeigt werden. Das geht auch soweit(mit inet explorer und mozilla) nur es gibt ein problem beim internet explorer , wenn ich 2 <div> nebeinander anzeigen lassen will, werden beide am linken browser fensterrand angezeigt.
hier ist der code:

Delphi-Quellcode:

			<html>

<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body   {

      background-color:#6B86A6;

      font-size:12px;

          color:#dddddd;

}

a:link { text-decoration:none;

         font-family:"Verdana","Arial","Helvetica","sans-serif";

         color:#000000; }

a:visited { text-decoration:none;

            font-family:"Verdana","Arial","Helvetica","sans-serif";

            color:#000000; }

a:active { text-decoration:none;

           font-family:"Verdana","Arial","Helvetica","sans-serif";

           color:#000000; }

a:hover { text-decoration:underline;

          font-family:"Verdana","Arial","Helvetica","sans-serif";

          color:#af0000; }

#seite {

      text-align:center;

}

#kopf {

      border:solid;

      border-width:1px;

      width:900px;

      height:150px;

      min-height:150px;

      max-height:150px;

}

#hauptmenue {

      border:solid;

      border-width:1px;

      border-colort:#000000;

      width:900px;

      height:20px;

      min-height:20px;

      max-height:20px;

      vertical-align:middle;

      text-align:center;

      background-color:#DAE2A9;

}

#datei {

      border:solid;

      border-width:1px;

      border-top-style:none;

      float:left;   

      height:500px;

      min-height:500px;

      max-height:500px;

      width:200px;

      margin:0 auto; 

      text-align:left;

}

#verlauf {

      border:solid;

      border-top-style:none;

      border-width:1px;

      border-left-style:none;

      float:left;

      height:20px;

      min-height:20px;

      max-height:20px;

      vertical-align:middle;

      text-align:center;

      font:10px;

      width:700px;

}

</style>

</head>

<body algin="center">

<div id="seite">

   <div id="kopf">

   </div>

   <div id="hauptmenue">

        <center>

        [url="index.php?site=home"]Home[/url] | 

        [url="index.php?site=dateien"]Dateien[/url] | 

        [url="index.php?site=login"]Login[/url] |  

        [url="index.php?site=impressum"]Impressum[/url] | 

        </center>

   </div>

   <div id="datei" align="center">

<!!-- Ein Menü mit <div> -->

   </div>

   <div id="verlauf" align="center">Test

   </div>

</div>

</body>

</html>

zusätzlich hab ich noch ne browserabfrage drin, beim internet explorer wird es so gemacht wie oben (Änderung bei:#seite)
bei Mozilla so:

Delphi-Quellcode:

			#seite{

margin:0 auto;

width:902px;

}

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Auch im IE musst du divs mit Hilfe von margin ausrichten, und bei mir funktioniert das auch. Wenn es nicht funktioniert liegt es hoechstens daran, dass du ihn in den Quirks-Mode jagst. Fuege mal einen korrekten Doctype ein, vielleicht klappts ja wenn die Seite mal validiert ;)

Greetz
alcaeus

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Soweit ich weiss, werden <div>'s immer untereinander angezeigt, da sie i.d.R. über die gesammte Breite gehen. Um das zu umgehen musst du mit absoluten Positionen/Breiten oder negativem Margin arbeiten. Ist alles sehr verwirrend *g*

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Zitat:

Zitat von H4ndy

Wozu gibt's die CSS-Eigenschaft float? Da kommst du im Normalfall ohne negativen Werte aus.

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Zitat:

Zitat von H4ndy

Soweit ich weiss, werden <div>'s immer untereinander angezeigt, da sie i.d.R. über die gesammte Breite gehen.

divs werden untereinander angezeigt, weil sie Blockelemente (und nicht inline) sind, und nicht weil sie ueber die gesamte Breite gehn. Auch 2 divs, die nur 30% der Breite des Elterncontainers haben, sind nicht nebeneinander ;)

Greetz
alcaeus

Re: CSS: Problem mit anzeigen von div im Internet Explorer

müssen klassen nicht mit "." beginnen?

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Zitat:

Zitat von fwsp

müssen klassen nicht mit "." beginnen?

Ja. Er spricht aber IDs an, und diese beginnen mit "#" ;)

Greetz
alcaeus

Re: CSS: Problem mit anzeigen von div im Internet Explorer

hab jetzt den doctype eingefügt und es geht, und ich brauche auch die browser unterscheidung nicht mehr.

Delphi-Quellcode:

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

vielen dank für eure Hilfe.

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Zitat:

Zitat von 1ceman

hab jetzt den doctype eingefügt und es geht, und ich brauche auch die browser unterscheidung nicht mehr.

Sehr schoen :)

Hier noch mein Tipp: wenn du Firefox verwendest, bist du mit 2 Extensions gut bedient:
HTML Validator:

https://addons.mozilla.org/firefox/249/
Web Developer:

https://addons.mozilla.org/firefox/60/

Die erste Extension ist sehr sinnvoll, es wird dir naemlich in der Statusleiste angezeigt, ob die Seite valide ist oder Fehler enthaelt. Damit kannst du erstmal Code schreiben, den perfektionieren, und dann erst anpassen. Wenn Seiten nicht valide sind, dann kommt es immer wieder zu heftigen Fehlern, ist also sehr sinnvoll.

Die zweite Extension ist auch sehr sinnvoll, damit kannst du fremde Umgebungen simulieren: Styles deaktivieren, Javascript deaktivieren, Cookies deaktivieren, usw. Je nachdem was fuer Seiten du entwickelst kann ich das Ding nur empfehlen ;)

So, genug Werbung gemacht, viel Spass bei der Arbeit ;)

Greetz
alcaeus

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Zitat:

Zitat von fwsp

gut zu wissen.

Dabei muss (sollte) man aber beachten, das man IDs wirklich nur EINEM Element zuweist.
Klassen kann man hingegen gefahrlos mehreren Element zuweisen.
Das kommt auch aus den beiden Bezeichnungen, ID und Klasse, hervor ;)

Re: CSS: Problem mit anzeigen von div im Internet Explorer

Danke für eure weiteren Tipps...Ich werd die Update für Mozilla mal testen.

Edit: Die Updates sind richtig geil ;)
besonders gut gefällt mir der validator...nochmal vielen dank!