Servus Leute,
ich versuche gerade meine erste Website aufzubauen. Allerdings schaffe ich es nicht, die CSS Datei extern einzubinden. Über <style> </style> direkt im PHP funktioniert es.
Bin ratlos, wo ist da der Fehler?
index.php sieht so aus: (Habe ein 3 Spalten Layout, dass ich in gerne in eine Flexbox packen würde)
HTML
<!doctype html><html> <head> <title>TEST</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header> TEST </header> <div id="row_wrapper"> <nav id="mainnav"> <h3>Navigation</h3> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Links</a></li> <li><a href="#">About</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> <main id="content"> <article> <h1>Artikel 1</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p> </article> <article> <h1>Artikel 2</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p> </article> </main> <aside id="sidebar"> <h3>Seitenleiste</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </aside></div> <footer class="clear">Fußzeile</footer></body></html>
Die style.css sieht so aus:
Code
body { margin: 0 auto; padding:0; border: 0; min-width: 660px; max-width: 60em; } #row_wrapper{ display: -webkit-flex; display: -ms-flex; display: flex; flex-direction: -webkit-row; flex-direction: -ms-row; flex-direction: row; } header { background; black url(bilder/headerlogo.png) top center no-repeat; } #content { flex: 1; padding: 10px; } #mainnav { flex: 0 0 160px; padding: 10px; border-left: 1px solid black; border-right: 1px solid black; background: sandybrown; } #sidebar { flex: 0 0 210px; padding: 10px; border-left: 1px solid black; border-right: 1px solid black; background: peachpuff; } footer { border: 1px solid black; padding: 5px; text-align:center; background-color: sienna; color: white; }
die templateDetails.xml so:
XML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension
version="3.0"
type="template"
client="site">
<name>Test Design</name>
<title>TEST</title>
<creationDate>27.04.17</creationDate>
<author>Max Mustermann</author>
<authorEmail>max.mustermann@test.de</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<version>1.1.0</version>
<description>NEW TEST TEMPLATE FLEXBOX</description>
<files>
<folder>bilder</folder>
<folder>css</folder>
<filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
</files>
</extension>
Alles anzeigen
Im Anhang seht ihr, wie es bei mir angezeigt wird (ich nutze XAMPP). Zusätzlich meine Ordnerstruktur des Templates. Im "css" Ordner befindet sich die style.css und im "bilder" Ordner nur die headerlogo.png.
Ich komme nicht weiter. Packe ich es in eine ZIP Datei lässt es sich problemlos unter Joomla im Backend installieren.
Edit by Admin: Code in Spoiler