Template-Grundaufbau funktioniert nicht

  • Hallo Leute!


    Ich brauche dringend eure Hilfe und zwar handelt es sich um den Grundaufbau meines Templates, dass wie auf dem Bild (Bild im Anhang) aussehen soll. Ich habe bereits eine index.php-Datei und eine template.css-Datei (Dateien im Anhang) geschrieben und einen Versuch gestartet, leider entspricht es nicht den Vorstellungen. Bitte helft mir meine Fehler zu finden damit mein Template-Grundaufbau am Ende der Vorlage auf dem Bild entspricht.


    Hier meine index.php-Datei:

    <?php
    //no direct access
    defined ('_JEXEC') or die;


    JHTML::_('behavior.framework', true);
    $app = JFactory::getApplication();
    ?>


    <?php echo '<!DOCTYPE html>'; ?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
    <head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    </head>
    <body>


    <div id="wrapper">//wrapper wird geöffnet
    <div id="head">//head wird geöffnet

    </div>//head wird geschlossen

    <div id="content">//gesamtes Feld mit Inhalten
    <div id="menu"><jdoc:include type="modules" name="top" style="xhtml" /> //Platzhalter einfügen</div>//position top
    <div id="component"><jdoc:include type="component" style="xhtml" /> </div>//Hauptbereich in dem die Joomla Komponenten angezeigt werden
    </div>

    <div id="footer"><jdoc:include type="modules" name="footer" style="xhtml" /> </div>//Footerbereich

    </div>//wrapper schließen


    </body>
    </html>

    Hier meine template.css-Datei:

    @charset "utf-8";


    * { margin: 0px; padding: 0px; border: 0px; }
    html { height: 100.2%; }
    body { background-color: #ffffff; }


    /*Grundgerüst*/
    div#wrapper { width: 950px; margin: 20px auto; border: 1px solid red; }


    /*Kopfbereich*/
    div#head { width: 950px; height: 150px; border: 1px white; }


    /*Contentbereich*/
    div#content { width: 950px; min-height: 400px; }
    div#menu { width: 950px; height: 70px; border: 1px white; }
    div#component { width: 950px; border: 1px white; }


    /*Footerbereich*/
    div#footer { width: 950px; height: 35px; border: 1px white; }

    Ich bitte um eure Hilfe und danke im Voraus!


    Mit freundlichen Grüßen,
    joomla09 :)

  • Also morgen erstmal.


    Hab das Template mal geöffnet und es sieht schon ganz gut aus.
    Warum 100.2 %? Macht nur Dauerbalken.
    Willst Du den Footer immer unten am Bildrand? Absolut positionieren und dem Content eine Margin nach unten verpassen das nichts überlappt.
    Nicht alles 950px. Nur der Wrapper, der Rest hat eh 100%. (950px + 2 mal Border macht schon 952 px für den Inhalt.)


    Was sieht nicht so aus wie du möchtest?

  • Hallo Joomla09,


    warum willst du für diesen Aufbau ein eigenes Template erstellen. Dies sollte protostar darstellen können. Du musst noch einige Module abstellen und es sollte wie gewünscht aussehen und wäre zudem responsive. Kommt es dir auf bestimmte Größendarstellungen an?


    Gruß
    vom Niederrhein

  • Hallo UweS,


    erstmal danke für deine schnelle Antwort. Ich werde deine Vorschläge in meinem Code umsetzen.
    Vorweg mal die Frage:
    Sind in meinem Code Fehler vorhanden da ich nämlich das Ergebnis was auf dem Bild ersichtlich ist (Bild im Anhang) bekomme wenn ich deine index-Verknüpfung öffne?
    Es ist nämlich nicht ersichtlich wo sich der Banner, das Top, der Main Content oder der Footer befindet und dass ist das eigentliche Ziel was ich erreichen möchte und das eigentliche Problem weshalb ich hier nach Hilfe suche.


    Ich danke dir im Voraus!


    MFG joomla09

  • Hallo Christian,


    der Screenshot soll zeigen dass, aus welchem Grund auch immer, nicht ersichtlich ist wo sich der Banner, das Top, der Main Content oder der Footer befindet.
    Die Kommentare wurden jetzt vollständig entfernt, doch das gewünschte Ergebnis, nämlich die jeweilige Abgrenzung von Banner, Top, Main Content und vom Footer zu sehen, bleibt trotzdem aus.


    Als Anhang findet ihr das Template, wo die index.php-Datei jetzt geändert wurde.


    MFG joomla09 :)

  • Hallo,


    ich habe da mal was "gebaut". Es ist doch alle dort, wo es nach meinem Verständnis hin sollte.

  • Es ist nämlich nicht ersichtlich wo sich der Banner, das Top, der Main Content oder der Footer befindet und dass ist das eigentliche Ziel was ich erreichen möchte und das eigentliche Problem weshalb ich hier nach Hilfe suche.

    Du hast in deinem CSS Fehler bei den Definitionen der Rahmen:


    div#menu { width: 950px; height: 70px; border: 1px white; }

    1. Einen weissen Rahmen auf weissem Hintergrund kann man gar nicht sehen ;)


    2. Es fehlt der "border-style". So wäre es z.B. korrekt:

    div#menu { width: 950px; height: 70px; border: 1px solid green; }

  • Hallo Leute!


    habe es jetzt stundenlang probiert, doch komme zu keinem wirklichen Ergebnis.


    Könnt Ihr euch mal bitte den Quellcode ansehen: Bei mir wird das Menü immer in das Content gegeben, das heißt, dass wenn ich eine andere Farbe bei Menü einstelle wie bei Content wird immer die Farbe des Contents übernommen und der Head Bereich fällt sowieso weg (keine Ahnung warum).(siehe Bild von vorher)
    Das mit dem Top Menü funktioniert auch irgendwie nicht. Was mir auch noch nicht ganz klar ist, ist wie ich verschiedene Beiträge(Navigationsleiste) in das Topmenü bekomme. ZB:


    Kontakt Anfahrt Bilder (wie realisiert man das im Template)?


    Habe auch schon probiert ein Bild einzufügen mit background-image: url(images/Beispiel.jpg); aber das hat auch nicht funktioniert.


    Bitte um eure Hilfe, da ich es sehr dringend brauche.




    MFG joomla09

  • Hallo,


    "dringend" in einem Forum mit freiwilligen "Helfern" ist selten gut, mehrere Threads zum gleichen Thema noch weniger.


    Wenn ich Deine Fragestellung richtig verstanden habe, dann hegt sich bei mir der Zweifel, ob Du die Funktionsweise von Joomla schon verstanden hast.
    Zum Thema Navigation: Menü wird durch Modul an der gewünschten Stelle dargestellt, wie regelt dabei in der Regel CSS evtl. iVm. JavaScript.


    Warum Farben nicht so sind, wie Du das geplant hast, könnte an CSS-Vererbungen, nicht geschlossenen Tags oder ... liegen.


    Warum nicht erst einmal eines von der Standard-Templates anpassen und sie dabei verstehen, als gleich zu versuchen, das Rad neu zu erfinden.
    "Es ist eben noch immer kein Meister vom Himmel gefallen."


    und gute Nacht!


    Christian


    Edit: Auch kann Dir besser geholfen werden, wenn Du Deine Arbeitsproben online hast, als sich hier durch Quellcode "quäen" zu müssen.