HILFE: Flash Player Integration / CSS-Könner gesucht

Hi! Bei mir sieht die Website im Avant-Browser und auch im IE schlecht aus. Am oberen Rand sind vier Link-Grafiken, die alle von einem Bogen oben abgeschlossen werden. Bei MouseOver ändert sich deren Farbe und sie glühen in einem warmen Gelb.

Um genau diese vier Link-Grafiken geht es: beu mir scheinen sie irgendeinen Rand zu haben, daher stimmt die Formatierung nicht: sie sind 4px tiefer als gewollt, und eine der drei rechten ist gar in eine neue Zeile (innerhalb der Tabellenzelle) gerutscht.

Auch das Suchfeld ist 4px zu tief.

Ich vermute, das entweder all diese Elemente einen unsichtbaren Rahmen haben, oder daß die Tabellenzellen einen unsichtbaren Innenrahmen haben - in beiden Fällen muß er weg!

Hier ein Bild, welches die selbe Seite im Avant (oben) und im Safari (unten) zeigt:
CSS.jpg


Code: 
<html>

<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<base target="Page">
</head>

<body style="background: url(v/Pages/Title.jpg) fixed no-repeat; background-position: top; background-color: #<?PHP echo($SeitenFarbeControl); ?>; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px"">

<table style="width: 950px; height: 120px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: left; vertical-align: top;">
  <tr>
    <td style="width: 950px; height: 5px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: right; vertical-align: top;" colspan="5">
    </td>
  </tr>
  <tr>
    <td style="width: 111px; height: 114px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: left; vertical-align: top;">
<img src="v/FXs/LinkContactPassive.jpg" width="111" height="27" border="0" alt="Contact Form" title="Contact Form" style="cursor: hand;" onClick="" onMouseOver="Bildwechsel(0,Highlight1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);" onMouseOut="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);">    
    </td>
    <td style="width: 126px; height: 114px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: top;">
<img src="v/Deco/Glass.gif"          style="width:  3px; height: 12px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px;">
<img src="v/FXs/LinkHomePassive.gif" style="width: 85px; height: 12px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px;" alt="Home (Start Page)" title="Home (Start Page)" onMouseOver="Bildwechsel(0,Normal1);Bildwechsel(2,Highlight2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);" style="cursor: hand;" onClick="Loader('p/Welcome.php5','Page');" onMouseOut="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);">
<img src="v/Deco/Glass.gif"          style="width: 26px; height: 12px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px;">
    </td>
    <td style="width:  96px; height: 114px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: left; vertical-align: top;">
    </td>
    <td style="width: 467px; height: 114px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: left; vertical-align: top;">
<img src="v/FXs/LinkArticlesPassive.jpg" width="147" height="27" border="0" alt="Articles" title="Articles" style="cursor: hand;" onClick="" onMouseOver="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Highlight3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);" onMouseOut="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);">    
<img src="v/Deco/Glass.gif"              width=" 13" height="27" border="0">    
<img src="v/FXs/LinkImagesPassive.jpg"   width="147" height="27" border="0" alt="Image Server" title="Image Server" style="cursor: hand;" onClick="" onMouseOver="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Highlight4);Bildwechsel(8,Normal5);" onMouseOut="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);">    
<img src="v/Deco/Glass.gif"              width=" 13" height="27" border="0">    
<img src="v/FXs/LinkStreamerPassive.jpg" width="147" height="27" border="0" alt="Streamer" title="Streamer" style="cursor: hand;" onClick="" onMouseOver="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Highlight5);" onMouseOut="Bildwechsel(0,Normal1);Bildwechsel(2,Normal2);Bildwechsel(4,Normal3);Bildwechsel(6,Normal4);Bildwechsel(8,Normal5);">    
    </td>
    <td style="width:  88px; height: 114px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: right; vertical-align: top;">
<?PHP
 $datafile="Counter.dat";                  //filename for counter datafile
 if(file_exists($datafile)) 
 {
  $file=fopen($datafile,"r+"); 
  $hitcount=fread($file,filesize($datafile));
  fclose($file);
  echo("<font style=\"font-family: Verdana, Helvetica, Arial; font-style: normal; font-weight: normal; font-size: 9px; color: #555555\">".$hitcount."<br></font>");
 }
?>
    </td>
  </tr>
  <tr>
    <td style="width: 950px; height: 1px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: left; vertical-align: top;" colspan="5">
<img src="v/FXs/TitleWide.gif" border="0" width="950" height="1">
    </td>
  </tr>
</table>


<div style="left: 81px; top: 15px; width: 186px; height: 85px; position: absolute; z-index: 1;">
<table style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
  <tr>
    <td style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
<img src="v/FXs/Circle1-01.png" border="0" width="85" height="85" id="Circle1" style="cursor: hand;" onClick="Loader('p/Welcome.php5','Page');" alt="Home (Start Page)" title="Home (Start Page)">
    </td>
  </tr>
</table>
</div>

<div style="left: 81px; top: 15px; width: 186px; height: 85px; position: absolute; z-index: 2;">
<table style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
  <tr>
    <td style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
<img src="v/FXs/Circle2-01.png" border="0" width="85" height="85" id="Circle2" style="cursor: hand;" onClick="Loader('p/Welcome.php5','Page');" alt="Home (Start Page)" title="Home (Start Page)">
    </td>
  </tr>
</table>
</div>

<div style="left: 81px; top: 15px; width: 186px; height: 85px; position: absolute; z-index: 3;">
<table style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
  <tr>
    <td style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
<img src="v/FXs/Circle3-01.png" border="0" width="85" height="85" id="Circle3" style="cursor: hand;" onClick="Loader('p/Welcome.php5','Page');" alt="Home (Start Page)" title="Home (Start Page)">
    </td>
  </tr>
</table>
</div>

<div style="left: 81px; top: 15px; width: 186px; height: 85px; position: absolute; z-index: 4;">
<table style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
  <tr>
    <td style="width: 186px; height: 85px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
<img src="v/Deco/SvenLittkowski.png" border="0" width="186" height="51" style="cursor: hand;" onClick="Loader('p/Welcome.php5','Page');" alt="Home (Start Page)" title="Home (Start Page)">
    </td>
  </tr>
</table>
</div>

<div style="left: 81px; top: 104px; width: 186px; height: 15px; position: absolute; z-index: 5;">
<table style="width: 186px; height: 15px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: middle;">
  <tr>
    <td style="width: 186px; height: 15px; border-style: none; border-with: 0px; padding: 0px; border-spacing: 0px; text-align: center; vertical-align: bottom;">
<input type="text" style="width: 164px; height: 8px; border: 0px; text-align: center; font-family: Verdana, Helvetica, Arial; font-size: 8px; color: #FFA200; background-color: #141414; padding: 0px; border-spacing: 0px;">
    </td>
  </tr>
</table>
</div>

</body>

</html>
 
Zuletzt bearbeitet von einem Moderator:
Mir fallen da mehrere Sachen auf:

Erstmal hast du eine JS Funktion die im Quellcode nicht verlinkt ist, zumindest nicht in der hier gepostet Version.
Dann sind merwürdige, ich denke mal Copy&Paste, Fehler in den JS Events.
:
z.B. Bildwechsel(4,Highlight3);Bildwech?sel(6,Normal4);
z.B. Bildwechsel?(6,Highlight4);

Du hast ja nur 2 Grafiken pro Button, hier empfiehlt sich für den Button jeweils einen css Stil zu schreiben:

Bsp:

.button_image_server{
width: ...;
height: ...;
background: url( bild url...);
}

.button_image_server_highlight{
background: url( highlight img url..);
}

und dann per js nur den style auszutauschen:
onmouseover: document.getElementById("button_image_server").style=".button_image_server_highlight";
onmouseout:
document.getElementById("button_image_server").style=".button_image_server";

Das ganze kannst natürlich auch in zwei funktionen packen denen du die Elementid übergibst : onmouseover:"highlight(this)"

function hightlight(id)
{
document.getElementById(id).style=document.getElementById(id).style"_highlight";
}

funktioniert auch sehr gut, allerdings müssen dann die css style und die html id's die richtigen namen haben.
 überarbeitet, siehe nächster post.

Achso.. kleinere Tippfehler können sich hier drin versteckt haben !

EDIT:

Warning: implode() [function.implode]: Invalid arguments passed in /home/vhosts/5000156631/bigtingsagwaan.com/jamaica-focus.com/htdocs/SvenLittkowski/p/Movies.php5 on line 222

Und bitte bitte bitte bitte nimm normale <a> </a> Tags für die Navigation und nicht alles über Javascript :)

Kann es sein das der Server ziemliche performance Probleme hat ? Teilweise dauert es auch mal 30 sec bis ich die Navi sehe, die Videoframes haben teils keinen Inhalt.

Teilweise funktionieren beim neuladen die onmouseover events, teilweise werden auch komplett die falschen grafiken geupdatet.

Die Stilangaben sind direkt im Code, lager die besser aus in eine externe css Datei. Spart schreibarbeit und macht die eigentliche Seite übersichtlicher.

In der Title.php5 solltest du überlegen die Layout Tabelle wegzulassen. Kompatibler ist hier ein div das du einfach an der seite oben links ausrichtest.

Und wenn ich gerade dabei bin.. Frames sind nicht mehr so wirklich zeitgemäß :) Einfacher wäre hier eine normale Webseite, den Header kannst du importieren über php. Ist auch suchmaschinen sowie Benutzerfreundlicher !
 
Damit es übersichtlich wird im neuen Post .

Ich hab gerade mal den Header überarbeitet.
Html ist gekürzt, aber das prinzip ist glaubich klar:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<link href="styles.css" rel="stylesheet" type="text/css" />
		<script>

		function highlight(id,value)
		{
			document.getElementById(id).setAttribute('id',value);
		}
	 
		</script>
	</head>

	<body>

		<div class="heading_button">
		<a href=""><div id="button_contact" onMouseOver="highlight('button_contact','button_contact_highlight');" onMouseOut="highlight('button_contact_highlight','button_contact');"></div><a>
		</div>
		<div class="heading_button">
			<a href=""><div id="button_home" onMouseOver="highlight('button_home','button_home_highlight');" onMouseOut="highlight('button_home_highlight','button_home');"></div><a>
		</div>
		<div class="heading_button">
		<a href=""><div id="button_articles"onMouseOver="highlight('button_articles','button_articles_highlight');" onMouseOut="highlight('button_articles_highlight','button_articles');"></div><a>
		</div>
		<div class="heading_button">
		<a href=""><div id="button_images" onMouseOver="highlight('button_images','button_images_highlight');" onMouseOut="highlight('button_images_highlight','button_images');"></div><a>
		</div>
		<div class="heading_button">
		<a href=""><div id="button_streamer" onMouseOver="highlight('button_streamer','button_streamer_highlight');" onMouseOut="highlight('button_streamer_highlight','button_streamer');"></div><a>
		</div>

		

	</body>

</html>

css:
Code: 
#button_contact{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkContactPassive.jpg");
	height: 27px;
	width: 111px;
}
#button_contact_highlight{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkContactActive.jpg");
	height: 27px;
	width: 111px;
}

#button_home{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkHomePassive.jpg");
	height: 27px;
	width: 85px;
}
#button_home_highlight{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkHomeActive.jpg");
	height: 27px;
	width: 85px;
}

#button_articles{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkArticlesPassive.jpg");
	height: 27px;
	width: 147px;
}
#button_articles_highlight{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkArticlesActive.jpg");
	height: 27px;
	width: 147px;
}

#button_images{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkImagesPassive.jpg");
	height: 27px;
	width: 147px;
}
#button_images_highlight{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkImagesActive.jpg");
	height: 27px;
	width: 147px;
}

#button_streamer{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkStreamerPassive.jpg");
	height: 27px;
	width: 147px;
}
#button_streamer_highlight{
	background: url("http://www.jamaica-focus.com/SvenLittkowski/v/FXs/LinkStreamerActive.jpg");
	height: 27px;
	width: 147px;
}

body{
	background: url(v/Pages/Title.jpg) fixed no-repeat;
	background-position: top;
	background-color: #;
	padding: 0px;
	margin: 0px;
}

.heading_button {
	top: 5px;
	position: relative;
	float: left;
}

Die absoluten Links in der css dann natürlich wieder auf relative links ändern, musste ich nur machen damit ich die Bilder seh.

Bei der animation muss ich sagen respekt das die läuft. Javascript und timer sind schnell zickig. Hier wäre es evtl Sinnvoller animierte Gifs zu verwenden ?
Da die Bilder ja sowieso einzeln vorliegen, würdest du dir hier massenhaft requests sparen, und ladezeit auch.
 
Hi Insanity, vielen Dank für Deine Mühen! Meine Weretschätzung dafür.

GIF vs PNG
Hier schnell meine Antworten: Ja, ein Animated GIF wäre natürlich viel einfacher für mich gewesen, doch haben die leider scharfe Kanten zwischen Transparenz und Farbe, das würde immer stufenartig aussehen. Bei PNGs ist der Übergang zwischen Farbe und Transparenz stufenlos, das Bild sieht also weicher aus. Daher meine Verwendung von PNGs, was mich ja auch viel mehr Arbeit gekostet hat.

Frames
Jaaaaaaaaaa, hier hast Du Recht. Ich arbeite gerade an meiner ersten framelosen Website, aber diese hier kann ich aus Zeitgründen nicht mehr komplett neu überarbeiten, sie muß Ende Januar fertig sein. An der anderen Website bin ich gerade dabei, die Eigenarten, Vor- und Nachteile von Frames zu entdecken und damit umzugehen. Diese hier muß aber in ihren Frames bestehen bleiben.

OnMouse-Events
Ich bin froh, daß alles jetzt endlich klappt mit den OnMouse-Events. Ich hatte bereits die Tabelle aus dem obersten Frame entfernt, so daß alle Graphiken nun in eigenen Layern liegen. Klappt, aber ich hatte einiges umzuschreiben.

Navigation-Verzeichnisse
Noch in der Testphase. Jedes Mal liest der Server alle existierenden Verzeichnisse auf dieser Domain ein. In Zukunft wird ein smartes und sehr viel schöneres Directory sich in dem grauen oberen Balken befinden. Die Videos funktionieren nur dann, wenn auf eine Video-Datei gelinkt wird, was momentan (gewollt) noch nicht der Fall ist.


VERBLEIBENDES PROBLEM #1

Es gibt nur noch ein einziges Problem, das verbleibt, und wo ich hoffe, das wir eine Lösung dafür finden können. Um dieses Problem überhaupt feststellen zu können, bedarf es verschidener Browser. Ich benutze zum Testen immer folgende neueste Versionen:
- Avant
- Safari
- Firefox
- IE
- Opera

Unter dem rotierenden Logo befindet sich ein Text-Input-Feld. Dies ist später für Suchen gedacht, momentan funktioniert es noch nicht. Aber das Problem ist, daß es in einigen Browsern seine Funktion beibehält wenn es angeklickt wird, in einigen anderen Browsern ist es zu weit am unteren Rand des Frames und schiebt den Inhalt des gesamten Frames einige Pixel nach oben, wenn es angeklickt wird. Und damit sieht alles im Frame verschoben und unpassend aus. Dies ist mein Problem: das Textfeld muß in allen Browsern gleich aussehen, und sich mit seinem unteren Rand 1 Pixel über dem unteren Frame-Rand abschließen, so daß dort noch die 1 Pixel hohe Bodengrafik (übrigens eine GIF-Animation) zu sehen ist. Bei Aktivierung darf es sich nicht verschieben. Also muß die Position in allen Browsern gleich sein. Dies ist das einzige, momentan noch verbliebene Problem.

VERBLEIBENDES PROBLEM #2

Himmel, ich dachte, ich könnte mit PHP umgehen. Aber ich habe mit den String-Funktionen ein Problem, wo ich moemntan noch nicht die Ursache ausmachen kann.

Ich habe einen String (in Realität viel länger aber die selbe Struktur), $MyStructuresAll:
<br>Expeditions/Home/Inside/2008 (<b>LEVEL 8</b>)<br>Expeditions/Home/2007 (<b>LEVEL 15</b>)<br>Expeditions/Home/Outside (<b>LEVEL 22</b>)<br>Expeditions/Home/Outside/Surrounding (<b>LEVEL 0</b>)<br>Expeditions/Home/Outside/Morning (<b>LEVEL 8</b>)<br>Expeditions/Home/Activities (<b>LEVEL 37</b>)<br>Expeditions/Home/Activities/Mango Harvest (<b>LEVEL 0</b>)<br>Expeditions/Home/Activities/Mango Harvest/2008 (<b>LEVEL 0</b>)<br>Expeditions/Home/Activities/Mist Oasis (<b>LEVEL 13</b>)<br>Expeditions/Home/Activities/Mist Oasis/2008 (<b>LEVEL 0</b>)<br>Expeditions/Home/Activities/Micro Cosmos (<b>LEVEL 26</b>)<br>Expeditions/Home/Activities/Micro Cosmos/2010 (<b>LEVEL 0</b>)<br>Expeditions/- International Travels (<b>LEVEL 99</b>)<br>Expeditions/- International Travels/1990 - 1992 (<b>LEVEL 0</b>)<br>Expeditions/- International Travels/2006 - Tunesien (<b>LEVEL 7</b>)<br>Expeditions/Small Ruminant Cluster (<b>LEVEL 111</b>)<br>Expeditions/Small Ruminant Cluster/2008-09-24 - Cluster Meeting (<b>LEVEL 0</b>)

Um alle Einträge zu sortieren, erstelle ich einen Array

$MyStructuresArray=explode("<br>",$MyStructuresAll); // Dies klappt
$MyStructuresSorted=sort($MyStructuresArray); // Dies klappt ebenfalls
// $MyStructuresFinal=implode("<br>",$MyStructuresSorted); // Hier gibt es immer die Fehlermeldung "Invalid Parameters". Verdammt. Warum?
// echo(count($MyStructuresArray)); // Zum Fehlertesten. Klappt. Gibt mir "600" aus. Also 600 Einträge.

Vielicht sehe ich den Wald vor lauter Bäumen nicht mehr. Warum verursacht Implode immer Fehler?
 
So dann erstmal zu Problem 2.

Der Fehler ist SEEEEHR einfach, aber ich hab auch ne Weile gebraucht !

Du sortierst (soweit richtig)

du willst den string zusammenfügen und übergibst das sortierte array FALSCH !

du übergibst den rückgabewert vom sortieren ! In diesem Fall true.

Statt:
Code: 
$MyStructuresSorted=sort($MyStructuresArray);
$MyStructuresFinal=implode("<br>",$MyStructuresSorted);
Lösung:
Code: 
$MyStructuresSorted=sort($MyStructuresArray);
$MyStructuresFinal=implode("<br>",$MyStructuresArray);
 
Problem 1

Leider konnte ich den Fehler mit keinem Browser nachstellen, aber ich hab vielleicht eine Lösung für dich.

Versuche mal folgendes:
Das Input Feld:
position: absolute
left: 81px;
bottom: 1px;

Die 1px grafik
position: absolute;
left: 0px;
bottom: 0px;

Damit sollte im schlimmsten Fall das Textfeld nach oben rutschen da es am Boden ausgerichtet ist.

In welchem Browser ist der Fehler bei dir aufgetreten ?
Warum testest du mit Avant ? Ich würde eher Chrome als Testbrowser aufnehmen. Avant hat doch eine eher geringe Verbreitung.


GIF vs PNG

Da hast du allerdings recht !

Frames

Mach bei der Umsetzung zur Framelosen seiten am besten gleich den nächsten Schritt mit und setzte eine Template engine ein. Ich kann dir Smarty nur ans Herz legen !

OnMouse-Events

Du kannst bei Javascript dir viel sparen, vor allem das "preloaden". Wenn du die Grafiken in css stile einbindest (css einfach per php generieren) Dann laden die meisten Browser paralell schon die Bilder.
Javascript kann erst ausgeführt werden wenn die komplette Seite übermittelt wurde. Übermittelst du das css zuerst, kann das schon geladen werden.

Zusätzlich würde ich die jQuery als JavaScript library empfehlen, damit kann man sehr schnell und einfach Browserkompatiblen Code schreiben.

Navigation-Verzeichnisse

Das erklärt warum der obere Frame so lange zum laden braucht !

Mein Vorschlag:
Schreib dir eine php Datei als Cronjob die periodisch deine Verzeichnisse scannt und eine xml Datei der Struktur generiert.

Die xml kannst du per simplexml schnell und einfach in php einlesen und direkt verarbeiten.
 
Hi, vielen Dank!

bottom: ...px
Aber nein, bei Verwendung von "bottom: ...px" ist nun plötzlich ein Abstand zum Boden von mehreren Pixeln. Ob da vieleicht irgendwo "margin: ...px" und "padding: ...px" fehlen? Ich überprüfe mal alle DIVs und anderen Elemente.

Testbrowser
Na ja, ich teste sehr gerne mit recht vielen Browsern. Google Chrome? Der erfaßt doch alle Dateneingaben und sendet sie zwecks Auswertung an Google. Den installiere ich mir lieber nicht. Datenschutz und Schutz der Privatsphäre. Da gab es doch mal ein Urteil in Deutschland in Bezug zum Google Chrome. Eben weil er als Werkzeug erkannt wurde, seine Benutzer auszuspionieren. Aber ich werde demnächst mal einige weitere Broswer installieren, um mein Testfeld zu erweitern. In dieser Hinsicht nehme ich Deinen Vorschlag sehr gerne an.

Smarty / JQuery
Beide werde ich mir mal anschauen, vielen Dank! :)

Verzeichnisse
Du hast vollkommen Recht. Das Verzeichnis, welches Du siehst, dient nur Entwicklungszwecken. Ich will entwas entwickeln, was in die Breite gehen kann, aber nicht viel an Höhe verwendet. Die maximale ermittelte Verzeichnistiefe beträgt gerade mal 8 Ebenen, die untereinander dargestellt werden können. Mein Ziel ist es, oben im breiten grauen Panel eine Auflistung der Verzeichnisse zu haben: die 8 hauptverzeichnisse (Level 2) untereinander, aber deren Unterverzeichnisse dann daneben. Bei Öffnen eines der 8 Hauptverzeichnisse sollen dann alle anderen 7 Verzeichnisse ausgeblendet werden, und nur das geöffnete hauptverzeichnis verbleibt sichtbar, nun aber mit seinem ersten Level an Unterverzeichnissen (Level 3). Bei Klick auf eines der Level-3-Verzeichnisse werden alle anderen L3s ausgeblendet, nur das geöffnete bleibt bestehen, und nun werden seine L4s sichtbar, und so weiter. Zwischen den Namen sind Linien, die alles miteinander verbinden - wie in einem Diagramm. Das wird bestimmt sehr gut aussehen. Jeder Name ist anklickbar. Ich versuche zur Zeit einen Rahmen von 1px um die jeweiligen Endnamen zu bekommen, dachte es würde gehen mit dem "Font"-Attribut und Style (Border), aber ich sehe momentan noch keine Rahmen.

Wenn ich dieses klickbare Verzeichnis schaffe (jene Verzeichnisseite ist eine eigene Page, die mittels Parameter in ihrer Verzeichnisdarstellung gesteuert wird), dann kann endlich die gesamte Website von Besuchern erforscht und entdeckt werden!

Ach so, ich vergaß: in Zukunft wird in der Tat dieses Verzeichnis nur einmal bei Benutzung des CMS (Content Management Systems) angelegt, und steht dann als Datenbank-Inhalt zur schnellen Verfügung. Und wie gesagt, es soll dann oben im grauen Panel sein, nicht mehr unter dem Video.
 
Normalerweise muss man keine expliziten margin und padding werte angeben, zumindest nicht bei divs. Ich hatte es auf deiner Seite nur im Speicher mit webdeveloper getestet und da hat die ausrichtung sehr gut funktioniert. Natürlich muss man mit den Werten noch ein wenig herumspielen damit es so aussieht wie man will.

Ich kann deine Vorbehalte gegen Chrome verstehen, aber leider benutzen den mittlerweile recht viele und da wird man dann gezwungen auch darauf zu optimieren :/

Wegen dem Verzeichnis..
Da sowas ja erweiterbar bleiben soll und nicht hundertprozentig fix ist würde ich wirklich auf xml setzen. Ab und zu gibt es da sicher mal eine änderung, und wenn das ganze auf dem Dateisystem basiert bietet sich eine cronjob artige php Datei an die eine xml generiert, die dann von der Seite nur verarbeitet werden muss. Da wird auch die darstellung sehr einfach da du nur den aktuellen Knoten übermitteln musst. Wenn man die Kindknoten des aktuellen Knotens abruft hat man sofort die folgende Ebene. Das wird ein kleines, kompaktes und auch sehr schnelles skript. Vor allem brauchst du dann nur eine einzige dynamische Seite welche mit einem parameter (id des gewählten knoten) auch sehr komfortabel zu programmieren ist. Also jetzt nur vom programmiertechnischen hintergrund.
Deine Vorstellung für die grafische Umsetzung finde ich gut, und würde sich da auch nahtlos einbinden lassen.

Aber ich will dir das jetzt nicht unbedingt einreden, auch wenns meiner Meinung nach eine sehr gute Lösung wäre.
Bin gespannt was du aus der Seite noch machst :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten