CSS html Datei einfügen

Tumbleweed · 18. September 2011

Schau mal vor deinem script close tag, da hast du ein Zeichen reingemogelt, was da nicht hingehört.

Sowas siehst du übrigens recht schnell im Firebug in der Console oder einem Äquivalent wie Chrome's integrierter Konsole (right-click -> "Inspect Element" zum Öffnen).

Sieht dann so aus:

PC FREAKY · 18. September 2011

Auch ohne das zeichen geht nix...

PHP:

         <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
$("a:contains('Vor dem Start')").click(function()
{
        $("#main").load("VordemStart.htm");
});

$("a:contains('Grundlagen')").click(function()
{
        $("#main").load("Grundlagen.htm");
});

$("a:contains('Bildverarbeitung')").click(function()
{
        $("#main").load("Bildverarbeitung.htm");
});

$("a:contains('Textverarbeitung')").click(function()
{
        $("#main").load("Textverarbeitung.htm");
});

$("a:contains('Internet & GMX')").click(function()
{
        $("#main").load("Internet&GMX.htm");
});

$("a:contains('MS Office Outlook')").click(function()
{
        $("#main").load("MSOfficeOutlook.htm");
});</script>

Tumbleweed · 18. September 2011

Hast du die Seite irgendwo online oder kannst du sie zippen und hochladen? Also Opera hat grundsätzlich kein Problem mit der load-Funktion. Die letzte Website, die ich gemacht habe, benutzt das auch recht oft und funktioniert tadellos in Opera.
Manche Probleme sind aber von so einem Schnipsel nicht zu entdecken, da hilft nur Debuggen.

PC FREAKY · 18. September 2011

Hier die komplette Homepage als Zip...

Tumbleweed · 18. September 2011

Schieb den ganzen Script-Block

Code:

<script type="text/javascript">
$("a:contains('Vor dem Start')").click(function()
{
        $("#main").load("VordemStart.htm");
});

$("a:contains('Grundlagen')").click(function()
{
        $("#main").load("Grundlagen.htm");
});

$("a:contains('Bildverarbeitung')").click(function()
{
        $("#main").load("Bildverarbeitung.htm");
});

$("a:contains('Textverarbeitung')").click(function()
{
        $("#main").load("Textverarbeitung.htm");
});

$("a:contains('Internet & GMX')").click(function()
{
        $("#main").load("Internet&GMX.htm");
});

$("a:contains('MS Office Outlook')").click(function()
{
        $("#main").load("MSOfficeOutlook.htm");
});
</script>

nach unten, direkt vor den </body> tag. Und dann sollten sich die htms natürlich leicht unterscheiden, damit du einen Unterschied siehst, ob es geladen wurde oder nicht.

PC FREAKY · 18. September 2011

Tumbleweed schrieb:

Schieb den ganzen Script-Block

Code:

<script type="text/javascript">
$("a:contains('Vor dem Start')").click(function()
{
        $("#main").load("VordemStart.htm");
});

$("a:contains('Grundlagen')").click(function()
{
        $("#main").load("Grundlagen.htm");
});

$("a:contains('Bildverarbeitung')").click(function()
{
        $("#main").load("Bildverarbeitung.htm");
});

$("a:contains('Textverarbeitung')").click(function()
{
        $("#main").load("Textverarbeitung.htm");
});

$("a:contains('Internet & GMX')").click(function()
{
        $("#main").load("Internet&GMX.htm");
});

$("a:contains('MS Office Outlook')").click(function()
{
        $("#main").load("MSOfficeOutlook.htm");
});
</script>

nach unten, direkt vor den </body> tag. Und dann sollten sich die htms natürlich leicht unterscheiden, damit du einen Unterschied siehst, ob es geladen wurde oder nicht.

ich habe den inhalt nur gekürzt um es übersichtlicher zu machen

es klappt aber trotzdem noch nicht, also weder in opera noch in IE noch irgendwoanders......

Ergänzung (18. September 2011)

.
hier mein neuer code...

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/tutorial_beispielseite.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!--[if IE]>
    <style type="text/css" media="screen">
    #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->

    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {behavior: url(csshover.htc); font-size: 100%;}
    #menu ul li a {height: 1%;}
    }
    </style>
    <![endif]-->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Computeranleitung</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        margin:5%;
        background-image: url(Hintergrund.png);
        margin-bottom:30px;
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#000000;
}

h1 {
        font-size: 330%;
}

h2 {
        font-size: 250%;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}
    a:link              { color:black; text-decoration:underline; }
    a:visited           { color:black; text-decoration:underline; }
    a:hover             { color:black; text-decoration:underline; }
    a:active            { color:black; text-decoration:underline; }

    a.otherLink:link    { color:0; text-decoration:none; }
    a.otherLink:visited { color:0; text-decoration:none; }
    a.otherLink:hover   { color:0; text-decoration:underline; }
    a.otherLink:active  { color:0; text-decoration:none; }
    a img               {border:none; }
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--

#header {
        float:right: 110px;
        margin:0;
        padding:40px;
        height:80px;
        width:500px;
        background-image: url(head.png);
        margin-left:300px;
}

#logo   {
        float:left;
        width: 205px;
        height: 140px;
        margin-left:30px;
}


#main   {
        float:right; width:350px;
        position:absolute;
        background:#0BFF17;
        margin-top:30px;
        margin-bottom:40px;
        margin-left:210px;
        margin-right:100px;
        padding:0;
        width:700px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius: 10px;
}

#nav    {
        float:left;
        position:absolute;
        width:200px;
        margin: 0 30px 0 0;
        padding:30px 0;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px 10px 0 0;
}

#nav ul {
        list-style:none;
        margin:0;
        padding:0;
}


#nav li {
        margin:0;
        padding:0;
}

#nav a:link, #nav a:visited {
        display:block;
        margin:2px 0;
        padding:10px 10px 10px 20px;
        background-color:#11AB00;
        /* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
        height:1em;
        }

html>body #nav a:link, html>body #nav a:visited  {
        height:auto;
}

#nav a:hover {
        border:2px solid #11AB00;
}




-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="mainArea" -->
<div id="logo"><a href="Mainpage.htm" title="Link"><img src="wichtig.png" alt="bild" /></a>  </div>
<div id="header">

</div>
<div id="nav">
  <ul><li><a href="#">Vor dem Start</a></li><li><a href="#">Grundlagen</a></li><li><a href="#">Textverarbeitung</a></li><li><a href="#">Bildverarbeitung</a></li><li><a href="#">Internet & GMX</a></li>  <li><a href="#">MS Office Outlook</a></li></ul>
</div>
<!-- InstanceEndEditable -->
<div id="main">
neuer inhalt...
</div>
<script type="text/javascript" src="jquery.js">
$("a:contains('Vor dem Start')").click(function()
{
        $("#main").load("VordemStart.htm");
});

$("a:contains('Grundlagen')").click(function()
{
        $("#main").load("Grundlagen.htm");
});

$("a:contains('Bildverarbeitung')").click(function()
{
        $("#main").load("Bildverarbeitung.htm");
});

$("a:contains('Textverarbeitung')").click(function()
{
        $("#main").load("Textverarbeitung.htm");
});

$("a:contains('Internet & GMX')").click(function()
{
        $("#main").load("Internet&GMX.htm");
});

$("a:contains('MS Office Outlook')").click(function()
{
        $("#main").load("MSOfficeOutlook.htm");
});
</script>
</body>
<!-- InstanceEnd --></html>

Tumbleweed · 18. September 2011

Interessanterweise funktioniert das problemlos, wenn ich deine Seite auf einem lokalen Server (in meinem Fall ein Tomcat 7) laufen lasse.
Sobald ich aber direkt auf die Dateien zugreife, geht das nicht. Aber das ist wohl so gewollt, wenn ich mir das hier so durchlese. Vielleicht kann das jemand aufgreifen und bestätigen.

Fazit: Syntaktisch sollte das korrekt sein.

PC FREAKY · 18. September 2011

Tumbleweed schrieb:
Interessanterweise funktioniert das problemlos, wenn ich deine Seite auf einem lokalen Server (in meinem Fall ein Tomcat 7) laufen lasse.
Sobald ich aber direkt auf die Dateien zugreife, geht das nicht. Aber das ist wohl so gewollt, wenn ich mir das hier so durchlese. Vielleicht kann das jemand aufgreifen und bestätigen.

Fazit: Syntaktisch sollte das korrekt sein.

Ok danke, dann kann ich diese Möglichkeit wohl vergessen

was gibt es denn für eine Alternative?

ich dachte schon an iframes, aber da sehe ich 2 große Nachteile

1. im IE kann ich die Hintergrundfarbe nicht transparent anzeigen
2. es hat eine maximale "höhe" die für meine Zwecke zu gering ist...

Was kann ich denn sonst noch so machen um mein Problem zu lösen?
Wie machen das andere Websites?
Computerbase macht ja auch etwas in diese Richtung...

Tumbleweed · 18. September 2011

Andere Websites laufen ja auch auf Servern. In IDEs wie Eclipse kannst du lokale Server integrieren und damit direkt entwickeln.

Eine Möglichkeit, um das Problem zu umgehen, wäre für dich sowas wie XAMPP zu installieren. Bzw. würde ein reiner Apache reichen, aber ich glaube bei XAMPP ist die Installation leichter.

PC FREAKY · 18. September 2011

Tumbleweed schrieb:
Andere Websites laufen ja auch auf Servern. In IDEs wie Eclipse kannst du lokale Server integrieren und damit direkt entwickeln.

Eine Möglichkeit, um das Problem zu umgehen, wäre für dich sowas wie XAMPP zu installieren. Bzw. würde ein reiner Apache reichen, aber ich glaube bei XAMPP ist die Installation leichter.

das Problem dabei ist, dass es ein offline Projekt ist...

Auch habe ich momentan keine ahnung von XAMPP Servern...

Ergänzung (18. September 2011)

.
Habe mir jetzt XAMPP installiert, was soll ich da jetzt wie mit machen?
es soll auf alle Fälle nur lokal laufen...

Tumbleweed · 18. September 2011

XAMPP hat irgendwo einen Apache document root, also den Ordner, aus dem der Apache Server die Dateien zieht, die er bei http requests anzeigt. Da legst du dann einfach deine ganze Website rein. Dabei sei noch erwähnt, dass du deine Hauptseite index.html nennen solltest. Das ist zum einen so üblich und wenn du dich nicht daran halten möchtest, dann müsstest du das dem in XAMPP integrierten Apache explizit sagen (in der config).
Zugreifen würdest du dann vermutlich, indem du localhost:80 in deinen Webbrowser eintippst. Dazu muss der Apache im XAMPP natürlich laufen. Hier findet sich bestimmt jemand, der das in Benutzung hat. Ansonsten findest du dazu sicher Tutorials. Und ja, damit läuft die Seite immer noch offline, nur eben auf einem lokalen Server.

chriz0101 · 19. September 2011

Wenn du Xampp unter Windows mit Standardeinstellungen installiert hast, dann ist der xampp ordner direkt unter C:\xampp\ zu finden. In diesem Ordner ist ein Ordner "htdocs" oder ähnlich. Über localhost kannst du dann darauf zugreifen.
Ich hatte sowas mal vor 3 Jahren. Heute lass ich nen Vserver mit Unix-Server laufen^^

Suche

CSS html Datei einfügen

Tumbleweed

Captain

PC FREAKY

Commander

Tumbleweed

Captain

PC FREAKY

Commander

Anhänge

Tumbleweed

Captain

PC FREAKY

Commander

Tumbleweed

Captain

PC FREAKY

Commander

Tumbleweed

Captain

PC FREAKY

Commander

Tumbleweed

Captain

chriz0101

Lt. Junior Grade

Ähnliche Themen