Div position? Wie macht Ihr dass??

Beitrag von **Wirths Media** » 12.07.2005, 22:53

Hallo,

ich positioniere meine Div´s immer mit position:absolute....

Dies hat leider den nachteil, dass es in den Browsern verschieden aussieht.

Nach was zur anmerkung...

Ich habe meinen Content immer an erster stelle.

<div id="contect"></div>
<div id="top"></div>

Wie löst Ihr das Problem?

Gibt es da überhaupt eine Lösung?

Danke

Daniel

von **Anzeige von ABAKUS** »

Beitrag von **derHund** » 13.07.2005, 06:04

ohne absolute positionierung (die, nebenbei bemerkt, die schlechteste aller möglichkeiten ist) wirst du den content nicht (situationsbedingt) nach vorn kriegen. ich würde aber trotzdem drauf verzichten.

Beitrag von **Michael** » 13.07.2005, 09:40

Wenn Du es richti machst, sieht es in allen Browsern gleich aus. (Ausser Opera und die alten Browser bis Version 4)

Schreibe mal ein Beispiel, dann kann ich Dir vermutlich helfen.

position:absolute ist nicht schlechter als die anderen Methoden den Content zu postionieren. Es kommt halt immer darauf an, was man machen möchte. Ich mache selber viel mit position:absolute.

Gruß
Michael

von **Anzeige von ABAKUS** »

Beitrag von **Wirths Media** » 13.07.2005, 09:56

Ja, meist bekomme ich es auch (fast) gleich hin in allen browsern....

Momentan bastell ich an einem Kontaktformular...

In dieser EMail (html) soll sich die größe automatisch anpassen, was leider nicht funktioniert..., da pos:absolute angegeben ist.

Noch nen beispiel...

In dem Kontaktformular wollte ich die Felder mittels pos:absolute ausrichten, doch dies sah in allen Browsern anders aus... ( Hab nun ne kleine Tabelle genommen ).

Woher kommt so etwas?

Warum können die Ihre Browser nicht einheitlich Progammieren?

MfG

Hier noch mal der Quellcode vom Kontaktformular ( EMail ):

<?php

$Anrede = $_POST["Anrede"];
$Firma = $_POST["Firma"];
$Name = $_POST["Name"];
$Mail = $_POST["Mail"];
$Strasse = $_POST["Strasse"];
$Ort = $_POST["Ort"];
$Telefon = $_POST["Telefon"];
$Mobiltelefon = $_POST["Mobiltelefon"];
$Fax = $_POST["Fax"];
$Kontakt_per_Mail = $_POST["Kontakt_per_Mail"];
$Kontakt_per_Telefon = $_POST["Kontakt_per_Telefon"];
$Mitteilung = $_POST["Mitteilung"];
$Kontakt_per = "";
$IP = $_POST["IP"];
$UserAgent = $_POST["UserAgent"];
$datum = date("d.m.Y");
$zeit = date("H:i");
$Empfaenger = "info@.de";

$subjekt = "$Name $Firma";

$headers = "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= "From: $Mail\r\n";

if($Kontakt_per_Mail != "" AND $Kontakt_per_Telefon != "")
{ $Kontakt_per = "Telefon und <a href=\"mailto:".$Mail."?subject=Ihre Anfrage vom ".$datum." ".$zeit." an ...\" style=\"text-decoration:none; color:#c0c0c0;\">EMail</a>"; }
elseif ($Kontakt_per_Mail == "eMail")
{ $Kontakt_per = "<a href=\"mailto:".$Mail."?subject=Ihre Anfrage vom ".$datum." ".$zeit." an ...\" style=\"text-decoration:none; color:#c0c0c0;\">EMail</a>"; }
elseif ($Kontakt_per_Telefon == "Telefon")
{ $Kontakt_per = "Telefon"; }
else
{ $Kontakt_per = "Kein Kontakt angegeben."; }

$message = "

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"https://www.w3.org/TR/xhtml1/DTD/xhtml1 ... tional.dtd\">

<html>
<head>
</head>

<body style=\"padding:3px 0 3px 0; margin:0; background:#f0f8ff; color:#000000; font:12px arial; text-align:center;\">
<center>

<div style=\"background:#244992; color:#ffffff; border:1px #244992 outset; padding:0; margin:0; width:770px; height:1000px; position:relative; text-align:left;\">

<span style=\"left:40px; top:120px; position:absolute; font:bold 18px arial;\">KONTAKT:</span>

<span style=\"left:40px; top:160px; position:absolute;\">Firma:</span>
<span style=\"left:40px; top:175px; position:absolute; font:bold 18px arial;\">$Firma</span>

<span style=\"left:40px; top:210px; position:absolute;\">$Anrede</span>
<span style=\"left:40px; top:225px; position:absolute; font:bold 18px arial;\">$Name</span>

<span style=\"left:40px; top:260px; position:absolute;\">Strasse:</span>
<span style=\"left:40px; top:275px; position:absolute; font:bold 18px arial;\">$Strasse</span>

<span style=\"left:40px; top:310px; position:absolute;\">Ort:</span>
<span style=\"left:40px; top:325px; position:absolute; font:bold 18px arial;\">$Ort</span>

<span style=\"left:440px; top:160px; position:absolute;\">E-Mail:</span>
<span style=\"left:440px; top:175px; position:absolute; font:bold 18px arial;\"><a href=\"mailto:$Mail?subject=Ihre Anfrage vom $datum $zeit an ...\" style=\"text-decoration:none; color:#c0c0c0;\">$Mail</a></span>

<span style=\"left:440px; top:210px; position:absolute;\">Telefon:</span>
<span style=\"left:440px; top:225px; position:absolute; font:bold 18px arial;\">$Telefon</span>

<span style=\"left:440px; top:260px; position:absolute;\">Telefax:</span>
<span style=\"left:440px; top:275px; position:absolute; font:bold 18px arial;\">$Fax</span>

<span style=\"left:440px; top:310px; position:absolute;\">Mobiltelefon:</span>
<span style=\"left:440px; top:325px; position:absolute; font:bold 18px arial;\">$Mobiltelefon</span>

<span style=\"left:40px; top:360px; position:absolute;\">Kontakt per:</span>
<span style=\"left:40px; top:375px; position:absolute; font:bold 18px arial;\">$Kontakt_per</span>

<span style=\"left:40px; top:410px; position:absolute;\">Mitteilung:</span>
<span style=\"left:40px; top:425px; position:absolute; font:bold 18px arial; padding-right:90px;\">$Mitteilung</span>

<div style=\"width:769px; margin:0; padding:0; bottom:24px; left:0; position:absolute;\">
<div style=\"color:#fff; font:11px Verdana, Geneva, Arial, Helvetica, sans-serif; border-top:1px #00ced1 solid; border-bottom:1px #00ced1 solid; margin:0 7px 0 6px; padding:6px 1px 6px 0; text-align:center;\">
$IP     $UserAgent     $datum     $zeit
</div>
</div>

<div style=\"border:1px #244992 outset; background:url(/images/logo-htg.gif) repeat-y center; width:769px; height:73px; top:0; left:0; position:absolute;\">
<div style=\"top:40px; left:8px; position:absolute;\">
<h2 style=\"font:bold 19px Georgia, Times, serif; margin:0; color:#fff;\">...</h2>
</div>
<div style=\"top:0; right:0; position:absolute;\">
<a href=\"...\"><img style=\"width:212px; height:70px; border:0;\" src=\"/images/....gif\" alt=\"...\" /></a>
</div>
</div>

</div>
</center>
</body>
</html>

";

mail($Empfaenger, $subjekt, $message, $headers);

?>

Beitrag von **Nullpointer** » 13.07.2005, 11:04

nur mal kurz mein senf:

die browser werden langsam immer valider, vor ein paar jahren konnte man sich noch ins knie bohren.

der ie berechnet leider padding anders, so dass es da zu unterschieden kommen kann. vielleicht ist das eine fehlerquelle.
"ie interpretiert width, als die breite des objekts (inkl. padding), wobei andere die breite des inhalts als width festsetzen. IE5 immer, IE6 im Quirks-Modus.
Um Quirks-Modus auszuschalten musst du ein <!doctype> angeben, und keine <?xml?>-Deklaration verwenden. Und siehe da -- IE6 macht es plötzlich richtig."

validiere mal dein xhtml

statt center solltest du ein div mit margin:auto nehmen.

Beitrag von **Wirths Media** » 13.07.2005, 11:06

danke werde ich mal machen...

Beitrag von **makemyday** » 13.07.2005, 12:36

Ich kann in solchen Fällen nur XHTML empfehlen, da mit diesem Standard Pixelgenaue Positionierungen von den neueren Browser einheitlicher interpretiert werden. Hab keinen Beweis dafür, spreche hier nur aus Erfahrung.

Dann gibt es da noch die CSS-Browserweiche:
Wird von allen interpretiert:

Code: Alles auswählen

.klasse &#123;
  margin-top&#58; 10px;
&#125;

Diese Anweisung versteht nur der IE und überschreibt die .klasse:

Code: Alles auswählen

* html .klasse &#123;
  margin-top&#58; 20px;
&#125;

Schon spart man sich komplizierte Browserweichen mit PHP und Javascript.[/code]

Beitrag von **Nullpointer** » 13.07.2005, 12:55

und zum dynamischen anpassen an die fenstergröße kann ich nur sagen, dass das auch nicht das gelbe vom ei ist. gat auch alles seine grenzen.

analog dazu kann man sich bei java mit layoutmanagern rumschlagen oder einfach absolut positionieren wie bei .net.

Beitrag von **luigip** » 14.07.2005, 00:13

derHund schrieb:

ohne absolute positionierung (die, nebenbei bemerkt, die schlechteste aller möglichkeiten ist) wirst du den content nicht (situationsbedingt) nach vorn kriegen.

Es gibt sehr wohl andere Möglichkeiten. Z.B. eine Kombination aus float u. width für den content ist dein Freund!

Beitrag von **derHund** » 14.07.2005, 07:06

darum schrieb ich

(situationsbedingt)

. es ist nicht in jedem fall machbar.