✔ Nachträglich geladene html Datei ignoriert angegebene CSS

G

Grogmo

Grünschnabel
Hallo,
ich habe hier: http://www.no-easy-way.de/workout
ein kleines Trainingstagebuch erstellt und wollte die einzelnen Trainingstage in einem Div-Container laden.
Das klappt dank eines JQuery Schnipsels, den ich im Internet gefunden habe, auch ganz gut.
Nur verwenden die geladenen html dateien die angegebene .css datei und auch das angegebene charset nicht.

Die workout dateien haben alle folgendes format:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link href="wo.css" rel="stylesheet" />
        <meta charset="ISO-8859-1" />
        <meta name="Dirk Bernau" content="Meine Workouts, Training, Trainingspl&auml;ne zum nachtrainieren. Viel Spaß mit dem t&auml;glichen Workout" />
        <title>Workout #3</title>
    </head>   
    <body>
        <div id="datum">
            20. Juni 2014
        </div>
       
        <div id="hull">
            <div id="workout">
                <h1>Workout</h1>
                <b>1.: Kreuzheben gleichbleibendes Gewicht</b>
                    <ul>
                    <li>2 Aufw&auml;rms&auml;tze</li>
                    <li>1. Satz: 10 wdh</li>

... usw.

Die Indexseite, von der aus sie geladen werden, sieht folgendermaßen aus:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link href="workout.css" rel="stylesheet" />
        <meta charset="ISO-8859-1" />
        <meta name="Dirk Bernau" content="Meine Workouts, Training, Trainingspläne zum nachtrainieren. Viel Spaß mit dem täglichen Workout" />
        <title>Workout Diary</title>
       
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
       
        <script type="text/javascript">
        var lastWO = 3;
        var currentWO = 3;
        var starter = "wo-";
        // Erst starten wenn das Dokument fertig geladen ist.
        $(document).ready(function(){
            // Beim ersten Laden muss eine Seite geladen werden.
            $("#main").load("wo-"+lastWO+".html");
            // WENN auf einen Link innerhalb von .fn-nav geklickt wurde, DANN führe diese Funktion aus.
            $('.menu a').click(function(e){
                // Verhindert, dass der Browser die Seite beim Klick auf einen Link neulädt.
                e.preventDefault();
                // Speichert den Inhalt des Attributes in der Variablen site.
                var site = $(this).data('site');
                // .html an den Namen anhängen.
               
               
                if (site == "akt")
                {
                currentWO = lastWO;
                site = starter + lastWO + '.html'; 
                }
               
                else if (site == "nxt")
                {
                    if (currentWO > 1)
                    {
                        currentWO--;
                    }
                    site = starter + currentWO + '.html';
                }
               
                // Seite laden und in .content einsetzen.
                $("#main").load(site);
            });
        });
        </script>
       
    </head>   
    <body>
        <div id="header">
            Dirks Trainingstagebuch
        </div>
        <div id="hauptmenu">
            <div class="menu">
                <a data-site="akt" href="#">Aktuell</a>
                <a data-site="nxt" href="#">Nächstes</a>
            </div>
            <a id="home" href="http://www.no-easy-way.de">Home</a>
        </div>   
       
        <div id="main">

        </div>
        <div id="hauptmenu">
            <div class="menu">
                <a data-site="akt" href="#">Aktuell</a>
                <a data-site="nxt" href="#">Nächstes</a>
            </div>
            <a id="home" href="http://www.no-easy-way.de">Home</a>
        </div>   
   
    </body>
</html>

was könnte ich tun, damit die workout dateien auch wirklich so aussehen, wie ich es gern hätte?
 
Den betroffenen HTML-Tags fehlen gewisse Attribute bzw. sind unvollständig.

Versuch es daher mal hiermit:
HTML: 
<link href="wo.css" rel="stylesheet" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
Das war leider nicht das Problem.
Soweit ich weiß, müssen die kompletten Angaben bei HTML5 nicht mehr gemacht werden (auf der index seite stehen sie auch nicht bei und funktionieren trotzdem).
Ich stelle gerade fest, dass die .css bei einigen Browsern übernommen wird, der charset allerdings nirgens.
Auf meinem android handy nimmt er weder .css noch charset. Da gibts dann nur weißen Hintergrund und plain Text zu sehen.
 
Ich glaube das charset muss mit an erster Stelle stehen... oder nicht?

Und das hier mal probiert?
Code: 
<meta charset="utf-8"/>
oder
Code: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Das müssten dann eigentlich auch in jeder HTML-Datei stehen...

Das CSS Problem kenne ich auch... Meine Lösung war immer bei meinen Webspace-Acc das modul nginx oder apache neu zu starten.

Mfg Tobias
 
Grogmo hat gesagt.:
Ich stelle gerade fest, dass die .css bei einigen Browsern übernommen wird
Zum Vergrößern anklicken....
Und bei welchem/n nicht?

Ich konnte eben mit keinem der aktuellen Browser (FF, Google-Chrome, IE, Opera, Safari/Win) das Problem erleben, wenn die Trainingsdaten nachträglich in das Dokument geladen werden.

Grogmo hat gesagt.:
Auf meinem android handy nimmt er weder .css noch charset. Da gibts dann nur weißen Hintergrund und plain Text zu sehen.
Zum Vergrößern anklicken....
*dito*

Mein zweiter Lösungsvorschlag lautet hier dann, den nachzuladenen CSS-Code aus "wo.css" in "workout.css" zu portieren, und reinen HTML-Code in das zugehörige <div id="main"> zu laden :)

Das <meta>-Element hat an dieser Stelle des Quellcodes auch nichts verloren, sondern wird ausschließlich im <head></head>-Bereich des Dokuments genannt.
 
Zuletzt bearbeitet:
Das <meta>-Element hat an dieser Stelle des Quellcodes auch nichts verloren, sondern wird ausschließlich im <head></head>-Bereich des Dokuments genannt.
Zum Vergrößern anklicken....

das ist mir noch gar nicht aufgefallen :) Das ist schon manchmal eine komische Sache mit den css sachen...

was aber auch noch eventuell gehen würde...

Code: 
<style type="text/css"> 
   @import url("style.css") screen; 
</style>

mfg Tobias
 
Ich habe mal ein Beispiel gemacht wie es aussehen könnte... Da der Doctype als HTML5 ist, warum nicht die HTML5 Struktur?

Die Seite die eingebunden wird, am besten einfach nur mit einen div Container einbinden.... So ungefair...

Die CSS Daten gehören wie @spicelab geschrieben hat in den HAUPT META BEREICH

Code: 
<div id="datum">
    20. Juni 2014
</div>
<div id="hull">
    <div id="workout">
        <h1>Workout</h1>
        <b>1.: Kreuzheben gleichbleibendes Gewicht</b>
        <ul>
            <li>2 Aufw&auml;rms&auml;tze</li>
            <li>1. Satz: 10 wdh</li>
        </ul>   
... usw.


Aber was ich jetzt nicht ganz verstehe.... Warum lädst du die Seite im Nachhinein rein? und nicht gleich mit in die index.html ?


Code: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="Dirk Bernau" content="Meine Workouts, Training, Trainingspläne zum nachtrainieren. Viel Spaß mit dem täglichen Workout" />
        <title>Workout Diary</title>
        <link type="text/css" href="workout.css" rel="stylesheet" />
        <link type="text/css" href="wo.css" rel="stylesheet" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            var lastWO = 3;
            var currentWO = 3;
            var starter = "wo-";
            // Erst starten wenn das Dokument fertig geladen ist.
            $(document).ready(function(){
                // Beim ersten Laden muss eine Seite geladen werden.
                $("#main").load("wo-"+lastWO+".html");
    
    
                // WENN auf einen Link innerhalb von .fn-nav geklickt wurde, DANN führe diese Funktion aus.
                $('.menu a').click(function(e){
                    // Verhindert, dass der Browser die Seite beim Klick auf einen Link neulädt.
                    e.preventDefault();
    
                    // Speichert den Inhalt des Attributes in der Variablen site.
                    var site = $(this).data('site');
                    // .html an den Namen anhängen.
                   
                    if (site == "akt")
                    {
                    currentWO = lastWO;
                    site = starter + lastWO + '.html'; 
                    }
                   
                    else if (site == "nxt")
                    {
                        if (currentWO > 1)
                        {
                            currentWO--;
                        }
                        site = starter + currentWO + '.html';
                    }
                   
                    // Seite laden und in .content einsetzen.
                    $("#main").load(site);
                });
            });
        </script>
    </head>   
    <body>
    <section>
        <header id="header">
            Dirks Trainingstagebuch <!-- H1 Tag wäre recht gut angebracht, Suchmaschinen freuen sich gern über Überschriften :-)  -->
        </header>
            <nav id="hauptmenu">
                <ul class="menu">
                    <li><a data-site="akt" href="#">Aktuell</a></li>
                    <li><a data-site="nxt" href="#">Nächstes</a></li>
                    <li><a id="home" href="http://www.no-easy-way.de">Home</a></li>
                </ul>
                <!-- <a id="home" href="http://www.no-easy-way.de">Home</a>  Warum ist dieser link ausserhalb des DIVS "MENU" ? -->
            </nav>   
        <article id="main">
            <!-- Hier wird die Seite Workout eingebunden -->
        </article>
        <nav id="hauptmenu">
                <ul class="menu">
                    <li><a data-site="akt" href="#">Aktuell</a></li>
                    <li><a data-site="nxt" href="#">Nächstes</a></li>
                    <li><a id="home" href="http://www.no-easy-way.de">Home</a></li>
                </ul>
                <!-- <a id="home" href="http://www.no-easy-way.de">Home</a>  Warum ist dieser link ausserhalb des DIVS "MENU" ? -->
        </nav>
    </section>       
    </body>
</html>


Wie gesagt das wäre ein Beispiel von mir ....


Mfg Tobias
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück