Eine Iframe, ein Abstand der nicht sein sollte und Co.
feuerwurm
- javascript
Ich lerne gerade mit PHP zu programmieren und habe jetzt so viel gelernt, dass ich glaube, ein Chat erstellen zu können. Da ich immer nicht nur die Theorie kennen will, möchte ich auch gerne die Praxis probieren. Ich weiß, die Startseite ist noch nicht fertig: background-image:url() und background-color:#farbe fehlen, Texte der Vorlage sind noch vorhanden bzw. wurden nicht durch meine ersetzt, usw. Ich wollte eigentlich mit dem Design und Co noch heute fertig werden, aber dies war nicht möglich, da folgende Problem aufgetaucht sind. Aber zu erst möchte ich mal hier den PHP-Code einfügen:
PHP-Code:
<html>
<head>
<title>FUNROOM - Der deutschsprachige Onlinechat</title>
<meta name="author" content="FUNROOM Administrator"></meta>
<head>
<body text="#000000" bgcolor="#ffffff" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<a href="?set=fotos&go=fotos">h</a><!-- <div OnMouseOver="location='?go=fotos'">h</div> -->
<script type="text/javascript">
<!--
document.write("<style>#e1 {display : none;}</style>")
document.write("<style>#e2 {display : none;}</style>")
-->
</script>
<noscript>
<style>
#e1 {display : block;}
#e2 {display : block;}
</style>
</noscript>
<style>
body {
background : #fff;
color : #000;
}
body, div, span, a, p, h1, h2, h3 {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}
#text {
width : 100%;
float : left;
background : #ccc;
}
#nav {
width : 100%;
float : left;
background-image : url(bg2.png);
background-position : top right;
height: 350px;
}
/* Für Navi */
.klick {
padding : 3px 15px 3px 15px;
margin-bottom: -1px;
font-family : arial;
cursor : pointer;
cursor : hand;
}
</style>
<script type="text/javascript">
<!--
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
//-->
</script>
</head>
<div id="nav">
<table><tr><td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none')" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil
</div></td>
<td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none')">CSS</div></td>
</tr></table>
</form></form><form action="#" name="raum" method="post"><div id="e1">
<noscript>Chat</noscript><select name="raum" size="">
<optgroup label="Öffentliche Räume">
<option value="funroom" >Funroom</option>
<option value="date" >Date</option>
<option value="tisch" >Stammtisch</option>
<optgroup label="Themenbezogene Räume">
<option value="php" >Programmiertreffpunkt</option>
<option value="rap" >Hip-Hopzone</option>
<option value="witze" >Witze und Rätselfun</option>
<option value="bauer" >Bauernhof</option>
<option value="mathe" >Mathematikfreakzone</option>
<option value="musik" >Musikroom</option>
<option value="tier" >Tierhandlung</option>
<optgroup label="Altersbegrenzte Räume">
<option value="gym" >Gymnasium</option>
<option value="12" >Unter 12</option>
<option value="studi" >Studentenchat</option>
<option value="lehre" >Lehrlingszone</option>
<option value="25" >25 up room</option>
<option value="50" >50 and more</option>
<option value="best" >in the best years</option>
<option value="alt" >Großmutter- und Großvaterpower</option>
<optgroup label="Private Räume">
<!-- Neue Raeume -->
</select></fieldset><input type="Submit" name="submit" value="Los!"></from></div>
<div id="e2">
<form action="#" name="raum" method="post">
<select name="raum" size="">
<optgroup label="Öffentliche Räume">
<option value="funroom" >Funroom</option>
<option value="date" >Date</option>
<option value="tisch" >Stammtisch</option>
<optgroup label="Themenbezogene Räume">
<option value="php" >Programmiertreffpunkt</option>
<option value="rap" >Hip-Hopzone</option>
<option value="witze" >Witze und Rätselfun</option>
<option value="bauer" >Bauernhof</option>
<option value="mathe" >Mathematikfreakzone</option>
<option value="musik" >Musikroom</option>
<option value="tier" >Tierhandlung</option>
<optgroup label="Altersbegrenzte Räume">
<option value="gym" >Gymnasium</option>
<option value="12" >Unter 12</option>
<option value="studi" >Studentenchat</option>
<option value="lehre" >Lehrlingszone</option>
<option value="25" >25 up room</option>
<option value="50" >50 and more</option>
<option value="best" >in the best years</option>
<option value="alt" >Großmutter- und Großvaterpower</option>
<optgroup label="Private Räume">
<!-- Neue Raeume -->
</select></fieldset><input type="Submit" name="submit" value="Los!"></from></div>
</div>
<div id="text"><?php
$navi=htmlentities(trim($_POST["raum"]));
if (isset($_GET['go']))
{
switch($_GET['go'])
{
default: include("".$navi."ub.php");
}
}
else
{
include("".$navi."ub.php");
}
if (isset($_GET['set']))
{
switch($_GET['set'])
{
default: include("".$navi."sm.php");
}
}
else
{
include("".$navi."sm.php");
}
print("<iframe src="".$navi."view.php" width="100%" height="35%" name=""></iframe><br>text")
?></div>
</body>
</html>
Die Probleme ???: 1. Iframe: Ich habe hier bewußt nicht include("") angewendet, da sich später die Iframe, aber nicht der Rest der Seite mit META neu laden soll. Im Internet Explorer wird die Iframe jedoch in der Mitte einfach abgeschnitten. Keine Ahnung, woran das liegt. 2. Zwischen der JavaScriptNavi und den include("")'s ist so viel Abstand. Da habe ich auch keine Vermutung, warum! 3. Ich habe hier ein JavaScript eingebaut, (
Code:
<script type="text/javascript">
<!--
var name = navigator.userAgent.toLowerCase()
// INTERNET EXPLORER
var ie = (name.indexOf("msie") >= -1)//Netscape
var netscape = (name.indexOf("mozilla")!=-1 && name.indexOf("compatible")==-1 && name.indexOf("opera")==-1)
var version = navigator.appVersion
var nummer = version.substr(0, version.indexOf("."))
if (netscape)
{
document.write("");
var versionnummer = nummer
}
else if (ie)
{
if (nummer < 4 )
{ var versionnummer = 3
document.write ("") }
if (nummer >= 4 && version.indexOf("msie 5")==-1 && version.indexOf("msie 6")==-1)
{ var versionnummer = 4;
document.write ("") }
if (nummer >= 4 && version.indexOf("msie 5")!=-1 && version.indexOf("msie 6")==-1)
{ var versionnummer = 5;
document.write ("<fieldset>") }
if (nummer >= 4 && version.indexOf("msie 6")!=-1 && version.indexOf("msie 5")==-1)
{ var versionnummer = 6;
document.write ("<fieldset>") }
}
-->
</script>
) dass nur im IE einbaut, weil es nur dort schön aussieht. Da ich überhaupt keine Ahnung von JS habe, möchte ich euch fragen, wie ich es schaffen könnte, dass fieldset auch im IE7 angezeigt wird. Könnt ihr mir helfen? lg feuerwurm ;-)
Hallo,
Wenn es sich um Darstellungsprobleme handelt, ist PHP-Code irrelevant, sondern der generierte HTML-Code und die Stylesheets. Deshalb kann man dir schwer helfen, wenn man nicht weiß, welche Inhalte du da includest. Verlinke mal bitte eine statische HTML-Seite, auf der man das Problem sieht.
<html>
Am Dokumentanfang solltest du eine Dokumenttyp-Deklaration notieren, das wirkt sich auf die Darstellung aus:
http://carsten-protsch.de/zwischennetz/doctype/
<script type="text/javascript">
<!--
document.write("<style>#e1 {display : none;}</style>")
document.write("<style>#e2 {display : none;}</style>")
-->
</script>
<noscript>
<style>
#e1 {display : block;}
#e2 {display : block;}
</style>
</noscript>
Wenn du das umdrehst und die JavaScript-generierten Styles nach dem normalen style-Element einfügst, kannst du auf noscript verzichten, was im Übrigen im head-Element ohnehin nicht erlaubt ist.
<script type="text/javascript">
<!--
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
//-->
</script>
Die Auskommentierung mit <!-- und //--> ist unnötig und du kannst es herausnehmen.
<table><tr><td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none')" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil</div></td>
<td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none')">CSS</div></td>
</tr></table>
Das ist wirklich Kraut und Rüben. Du solltest dich mit CSS und sauberem HTML ohne Tabellen und sinnlose divs beschäftigen.
</form></form>
Du schließt hier zwei nicht existente Formulare.
<form action="#" name="raum" method="post">
Derzeit ist das Formular sinnlos.
<div id="e1">
<noscript>Chat</noscript><select name="raum" size="">
...
</select></fieldset><input type="Submit" name="submit" value="Los!"></from></div>
Ein fieldset sehe ich hier auch nicht (aber das willst du wahrscheinlich mit JavaScript einfügen).
Und das form-Element wird mit </from> nicht geschlossen.
Im Internet Explorer wird die Iframe jedoch in der Mitte einfach abgeschnitten. Keine Ahnung, woran das liegt.
An der Angabe height="35%". Offenbar bezieht er diese nicht auf die Höhe des Dokuments. Wie wäre eine feste Höhe?
Zwischen der JavaScriptNavi und den include("")'s ist so viel Abstand. Da habe ich auch keine Vermutung, warum!
Du hast #nav eine Höhe von 350px gegeben. Was erwartest du? ;)
- Ich habe hier ein JavaScript eingebaut
Das leider völliger Murks ist. Mit navigator.userAgent kann man keine zuverlässige Browsererkennung umsetzen (jedenfalls nicht auf diesem Wege). Und wenn, eine Versionsabfrage halte ich für unnötig, oder wilst du wirklich IE 4 berücksichtigen?
) dass nur im IE einbaut, weil es nur dort schön aussieht.
Fieldsets kannst du mit JavaScript auch in anderen Browsern beliebig formatieren, z.B. ihnen border und padding geben. Es besteht höchstwahrscheinlich keine Notwendigkeit, aus optischen Gründen den anderen Browsern kein fieldset zu geben.
Mathias
Hallo,
Wenn es sich um Darstellungsprobleme handelt, ist PHP-Code irrelevant, sondern der generierte HTML-Code und die Stylesheets. Deshalb kann man dir schwer helfen, wenn man nicht weiß, welche Inhalte du da includest. Verlinke mal bitte eine statische HTML-Seite, auf der man das Problem sieht.
<html>
Am Dokumentanfang solltest du eine Dokumenttyp-Deklaration notieren, das wirkt sich auf die Darstellung aus:
http://carsten-protsch.de/zwischennetz/doctype/<script type="text/javascript">
<!--
document.write("<style>#e1 {display : none;}</style>")
document.write("<style>#e2 {display : none;}</style>")
-->
</script>
<noscript>
<style>
#e1 {display : block;}
#e2 {display : block;}
</style>
</noscript>Wenn du das umdrehst und die JavaScript-generierten Styles nach dem normalen style-Element einfügst, kannst du auf noscript verzichten, was im Übrigen im head-Element ohnehin nicht erlaubt ist.
<script type="text/javascript">
<!--
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
//-->
</script>Die Auskommentierung mit <!-- und //--> ist unnötig und du kannst es herausnehmen.
<table><tr><td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none')" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil</div></td>
<td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none')">CSS</div></td>
</tr></table>Das ist wirklich Kraut und Rüben. Du solltest dich mit CSS und sauberem HTML ohne Tabellen und sinnlose divs beschäftigen.
</form></form>
Du schließt hier zwei nicht existente Formulare.
<form action="#" name="raum" method="post">
Derzeit ist das Formular sinnlos.
<div id="e1">
<noscript>Chat</noscript><select name="raum" size="">
...
</select></fieldset><input type="Submit" name="submit" value="Los!"></from></div>Ein fieldset sehe ich hier auch nicht (aber das willst du wahrscheinlich mit JavaScript einfügen).
Und das form-Element wird mit </from> nicht geschlossen.Im Internet Explorer wird die Iframe jedoch in der Mitte einfach abgeschnitten. Keine Ahnung, woran das liegt.
An der Angabe height="35%". Offenbar bezieht er diese nicht auf die Höhe des Dokuments. Wie wäre eine feste Höhe?
Zwischen der JavaScriptNavi und den include("")'s ist so viel Abstand. Da habe ich auch keine Vermutung, warum!
Du hast #nav eine Höhe von 350px gegeben. Was erwartest du? ;)
- Ich habe hier ein JavaScript eingebaut
Das leider völliger Murks ist. Mit navigator.userAgent kann man keine zuverlässige Browsererkennung umsetzen (jedenfalls nicht auf diesem Wege). Und wenn, eine Versionsabfrage halte ich für unnötig, oder wilst du wirklich IE 4 berücksichtigen?
) dass nur im IE einbaut, weil es nur dort schön aussieht.
Fieldsets kannst du mit JavaScript auch in anderen Browsern beliebig formatieren, z.B. ihnen border und padding geben. Es besteht höchstwahrscheinlich keine Notwendigkeit, aus optischen Gründen den anderen Browsern kein fieldset zu geben.
Nein, es geht darum, dass im MFF und im OPERA fieldsets nicht mit runden Ecken angezeigt werden. Die Rundung werde ich in den anderen Browsern mit CSS3 erreichen. Da IE, die CSS3-Funktionen nicht kennt, verwende ich im IE eben fieldsets. Kennst du ein besseres Script, mit dem ich erkennen kann, ob diese Seite mit IE besucht wird? Wenn, wäre es sehr hilfreich, wenn du es mir geben könntest!
feuerwurm
Hallo,
Wenn es sich um Darstellungsprobleme handelt, ist PHP-Code irrelevant, sondern der generierte HTML-Code und die Stylesheets. Deshalb kann man dir schwer helfen, wenn man nicht weiß, welche Inhalte du da includest. Verlinke mal bitte eine statische HTML-Seite, auf der man das Problem sieht.
<html>
Am Dokumentanfang solltest du eine Dokumenttyp-Deklaration notieren, das wirkt sich auf die Darstellung aus:
http://carsten-protsch.de/zwischennetz/doctype/<script type="text/javascript">
<!--
document.write("<style>#e1 {display : none;}</style>")
document.write("<style>#e2 {display : none;}</style>")
-->
</script>
<noscript>
<style>
#e1 {display : block;}
#e2 {display : block;}
</style>
</noscript>Wenn du das umdrehst und die JavaScript-generierten Styles nach dem normalen style-Element einfügst, kannst du auf noscript verzichten, was im Übrigen im head-Element ohnehin nicht erlaubt ist.
<script type="text/javascript">
<!--
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
//-->
</script>Die Auskommentierung mit <!-- und //--> ist unnötig und du kannst es herausnehmen.
<table><tr><td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none')" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil</div></td>
<td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none')">CSS</div></td>
</tr></table>Das ist wirklich Kraut und Rüben. Du solltest dich mit CSS und sauberem HTML ohne Tabellen und sinnlose divs beschäftigen.
</form></form>
Du schließt hier zwei nicht existente Formulare.
<form action="#" name="raum" method="post">
Derzeit ist das Formular sinnlos.
<div id="e1">
<noscript>Chat</noscript><select name="raum" size="">
...
</select></fieldset><input type="Submit" name="submit" value="Los!"></from></div>Ein fieldset sehe ich hier auch nicht (aber das willst du wahrscheinlich mit JavaScript einfügen).
Und das form-Element wird mit </from> nicht geschlossen.Im Internet Explorer wird die Iframe jedoch in der Mitte einfach abgeschnitten. Keine Ahnung, woran das liegt.
An der Angabe height="35%". Offenbar bezieht er diese nicht auf die Höhe des Dokuments. Wie wäre eine feste Höhe?
Zwischen der JavaScriptNavi und den include("")'s ist so viel Abstand. Da habe ich auch keine Vermutung, warum!
Du hast #nav eine Höhe von 350px gegeben. Was erwartest du? ;)
- Ich habe hier ein JavaScript eingebaut
Das leider völliger Murks ist. Mit navigator.userAgent kann man keine zuverlässige Browsererkennung umsetzen (jedenfalls nicht auf diesem Wege). Und wenn, eine Versionsabfrage halte ich für unnötig, oder wilst du wirklich IE 4 berücksichtigen?
) dass nur im IE einbaut, weil es nur dort schön aussieht.
Fieldsets kannst du mit JavaScript auch in anderen Browsern beliebig formatieren, z.B. ihnen border und padding geben. Es besteht höchstwahrscheinlich keine Notwendigkeit, aus optischen Gründen den anderen Browsern kein fieldset zu geben.
Nein, es geht darum, dass im MFF und im OPERA fieldsets nicht mit runden Ecken angezeigt werden. Die Rundung werde ich in den anderen Browsern mit CSS3 erreichen. Da IE, die CSS3-Funktionen nicht kennt, verwende ich im IE eben fieldsets. Kennst du ein besseres Script, mit dem ich erkennen kann, ob diese Seite mit IE besucht wird? Wenn, wäre es sehr hilfreich, wenn du es mir geben könntest!
feuerwurm
Ich habe jetzt noch Mal ne Stunde Google durchforstet und habe schon ein gutes JS gefunden
lg
Das JS:
var name = navigator.appName
if (name == "Microsoft Internet Explorer")
document.write("<fieldset>");
Hallo,
Wenn es sich um Darstellungsprobleme handelt, ist PHP-Code irrelevant, sondern der generierte HTML-Code und die Stylesheets. Deshalb kann man dir schwer helfen, wenn man nicht weiß, welche Inhalte du da includest. Verlinke mal bitte eine statische HTML-Seite, auf der man das Problem sieht.
<html>
Am Dokumentanfang solltest du eine Dokumenttyp-Deklaration notieren, das wirkt sich auf die Darstellung aus:
http://carsten-protsch.de/zwischennetz/doctype/<script type="text/javascript">
<!--
document.write("<style>#e1 {display : none;}</style>")
document.write("<style>#e2 {display : none;}</style>")
-->
</script>
<noscript>
<style>
#e1 {display : block;}
#e2 {display : block;}
</style>
</noscript>Wenn du das umdrehst und die JavaScript-generierten Styles nach dem normalen style-Element einfügst, kannst du auf noscript verzichten, was im Übrigen im head-Element ohnehin nicht erlaubt ist.
<script type="text/javascript">
<!--
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
//-->
</script>Die Auskommentierung mit <!-- und //--> ist unnötig und du kannst es herausnehmen.
<table><tr><td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none')" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil</div></td>
<td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none')">CSS</div></td>
</tr></table>Das ist wirklich Kraut und Rüben. Du solltest dich mit CSS und sauberem HTML ohne Tabellen und sinnlose divs beschäftigen.
</form></form>
Du schließt hier zwei nicht existente Formulare.
<form action="#" name="raum" method="post">
Derzeit ist das Formular sinnlos.
<div id="e1">
<noscript>Chat</noscript><select name="raum" size="">
...
</select></fieldset><input type="Submit" name="submit" value="Los!"></from></div>Ein fieldset sehe ich hier auch nicht (aber das willst du wahrscheinlich mit JavaScript einfügen).
Und das form-Element wird mit </from> nicht geschlossen.Im Internet Explorer wird die Iframe jedoch in der Mitte einfach abgeschnitten. Keine Ahnung, woran das liegt.
An der Angabe height="35%". Offenbar bezieht er diese nicht auf die Höhe des Dokuments. Wie wäre eine feste Höhe?
Zwischen der JavaScriptNavi und den include("")'s ist so viel Abstand. Da habe ich auch keine Vermutung, warum!
Du hast #nav eine Höhe von 350px gegeben. Was erwartest du? ;)
- Ich habe hier ein JavaScript eingebaut
Das leider völliger Murks ist. Mit navigator.userAgent kann man keine zuverlässige Browsererkennung umsetzen (jedenfalls nicht auf diesem Wege). Und wenn, eine Versionsabfrage halte ich für unnötig, oder wilst du wirklich IE 4 berücksichtigen?
) dass nur im IE einbaut, weil es nur dort schön aussieht.
Fieldsets kannst du mit JavaScript auch in anderen Browsern beliebig formatieren, z.B. ihnen border und padding geben. Es besteht höchstwahrscheinlich keine Notwendigkeit, aus optischen Gründen den anderen Browsern kein fieldset zu geben.
Danke für deine Hilfe!
FEUERwurm