Es fehlt auch die entsprechende Verlinkung zur CSS Datei
<link href="css/layout.css" rel="stylesheet" type="text/css">
Der Browser weiß nicht wo das ist. Es muss eine Absolute URL her wie bei den Bildern. Hier mein Tutorial dazu, wie man die URLs bekommt
Hier die Aufteilung:
Header:
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index.html</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name="description" content="Bilder nach alter Art gemalt und Wandtechniken nach alten Rezepturen angefertigt.">
</head><meta name="keywords" content="alte Öl Maltechniken, Wandtechnik, Öl Gemälde, malen, fertiggestellt,">
<body>
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div><a href="#"><img src="images/Logo.gif" alt="Logo-kw-painting.at" width="120" height="120" id="ogo"/></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html" class="active">Home</a>
</li>
<li><a href="meine_gemäde.html">meine Gemälde</a>
</li>
<li><a href="alte_techniken.html">alte Techniken
</a></li>
<li><a href="austellungen.html">Austellungen</a>
</li>
<li><a href="#">über mich</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
Code: Alles auswählen
<div class="row" id="footer">
<div class="col-md-4">
<p><h2 class="footerh2">Kontaktdaten</h2>
<p class="footer-p" id="footer-p-tap">Karl Weichinger <br>
Fladnitz 126 <br>
A-8163 Fladnitz/Teichalm<br>
<br>
Tel.: +43 664 88 41 64 64<br>
<br>
EMail: karl.weichinger@semriach.com</p>
</p>
</div>
<div class="col-md-4 footer-p footer-a">
<h2>Links</h2>
<a href="#" class="footer-a"> Home</a> <br>
<a href="#" class="footer-a"> meine Gemälde</a> <br>
<a href="#" class="footer-a"> alte Techniken</a> <br>
<a href="#" class="footer-a"> Projekte</a> <br>
<a href="#" class="footer-a"> Kontakt </a></div>
<div class="col-md-4">
<h2 class="footerh2">Social Media</h2>
<a href="#"><img src="images/icon_social_facebook_64.png" width="64" height="64" alt="Icon Facebook"/></a><a href="#"><img src="images/icon_social_twitter_64.png" width="64" height="64" alt="Icon Twitter"/></a><a href="#"><img src="images/icon_social_googlep_64.png" width="64" height="64" alt="Icon Google plus"/></a> </div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Code: Alles auswählen
<div class="row hidden-xs" id="intro">
<div class="col-md-12">
<h1>
Das größte Verdienst eines Gemäldes ist es,
</h1>
<h1> ein Fest für das Auge zu sein.</h1>
<h2>Ferdinand Victor Eugène Delacroix</h2>
<h3>(1798 - 1863), französischer Maler der Romantik und Grafiker
</h3>
<img src="images/icon_down.png" alt="icon nach unten scrollen" width="256" height="256" class="icon"/>
</div>
</div>
<h1 class="text" id="pil-h1">Philosophie</h1>
<div class="row" id="pilosopie">
<div class="col-lg-6 col-xs-10 col-sm-12"><img src="images/Pilosopie.jpg" alt="Philosopie- Selbstportrait mit logo" class="img-responsive" id="philosopie-img"> </div>
<div class="col-md-6 col-lg-6">
<p>Bereits seit frühester Jugend an, <br>
ist das Zeichnen und Malen meine Leidenschaft gewesen, <br>
aber erst im Alter ist mein Hobby zur Berufung geworden. <br>
Dazu hat es eine allgemeine Ausbildung in den bildenden Künsten bedurft, <br>
so wie ein zwei Jähriges Fernstudium bei einer Kunstschule <br>
und diverse Kurse in den verschiedenen Öl Maltechniken. <br>
<br>
Ich wünsche ihnen beim Betrachten meiner Bilder viel Freude <br>
und bedanke mich für Ihr Interesse. </p>
</div>
</div>
<div class="row" id="weg">
<div class="col-md-12 col-sm12">
<a href="über_mich.html">
<button type="button" class="btn btn-default btn-more-l">Mehr über meinen künstlerischen Werdegang
</button>
</a> </div>
<h1 id="derweg">Der Weg zu einem Öl Gemälde</h1>
<div class="col-md-3 col-sm-6"> <img src="images/planung_weis.gif" alt="Der Weg zu einem Öl Gemäld-Icon Planung" width="137" height="200" id="scrimg01"/>
<h2>Planung</h2>
<p class="weg-p">Die Inspiration, <br>
eine Idee und sich Gedanken machen<br>
wie man dieses am besten Umsetzen könnte.</p>
</div>
<div class="col-md-3 col-sm-6"> <img src="images/ausführung_weiß.gif" alt="Der Weg zu einem Öl Gemäld-Icon Ausführung" width="159" height="200" id="scrimg02"/>
<h2>Ausführung</h2>
<p class="weg-p">Die Vorzeichnung -<br>
anschließend die Ausarbeitung, <br>
jäh nach Art des Gemäldes mit verschiedenen
Bindemittel/Farben und Techniken.</p>
</div>
<div class="col-md-3 col-sm-6"><img src="images/fertigstellung_weis.gif" alt="Der Weg zu einem Öl Gemäld-Icon Fertigstellung" width="154" height="200" class="scrimg03"/>
<h2>Fertigstellung</h2>
<p class="weg-p">Die Nachbearbeitung -
Ausbessern von kleinen Fehlern vertiefen <br>
der Schatten und anbrigen der Spitzlichter, <br>
nach einigen Monaten Trocknungszeit das Auftragen der Firnis.</p>
</div>
<div class="col-md-3 col-sm-6"><img src="images/presentation_weis.gif" alt="Der Weg zu einem Öl Gemäld-Icon Presendation" width="87" height="200" id="scrimg04"/>
<h2>Presentation</h2>
<p class="weg-p">Die Übergabe an den Auftraggeber
oder die Presendation bei Austellungen.</p>
</div>
<div class="col-md-12 col-sm12"> </div>
</div>
<div class="row" id="alteTechnik">
<h1 id="philosopieh1">Alte Öl Maltechniken</h1>
<h1 id="alt-h1">
Gemälde nach alter Art gemalt - etwas näher betrachtet</h1>
<a href="alte_techniken.html">
<button type="button" class="btn btn-default" id="bu-alte-rechts">etwas mehr darüber</button>
</a>
<div class="col-md-3 col-sm-6" id="alttech-imag"><img src="images/jesus.jpg" class="img-responsive" alt="Alte Öl Maltechniken-Jesus am Kreuz"><a href="jesus-alte- art.html">
<button type="button" class="btn btn-default btn-more-gem">Jesus -<br>
mehr darüber</button>
</a> </div>
<div class="col-md-3 col-sm-6"><img src="images/judith.jpg" class="img-responsive" alt="Alte Öl Maltechniken-Judith nach Caravagio"><a href="judith_alte-art.html">
<button type="button" class="btn btn-default btn-more-gem">Judith -<br>
mehr darüber</button>
</a> </div>
<div class="col-md-3 col-sm-6"><img src="images/madona.jpg" class="img-responsive" alt="Alte Öl Maltechniken-alba Madonna nach Raffael"><a href="madonna_alte-art.html">
<button type="button" class="btn btn-default btn-more-gem">Madonna -<br>
mehr darüber</button>
</a> </div>
<div class="col-md-3 col-sm-6"><img src="images/rembrandht.jpg" class="img-responsive" alt="Alte Öl Maltechniken-nach Rembrandt-die Überfahrt"><a href="rembrandt_alte-art.html">
<button type="button" class="btn btn-default btn-more-gem">Rembrandt -<br>
mehr darüber</button>
</a></div>
</div>
<div class="col-md-12">
<h1 id="vorh1">Vor kurzem fertiggestellt:</h1>
</div>
<div class="row" id="lezte-img">
<div class="col-md-4 lezte-img">
<div class="row l-img">
<div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder1.jpg" alt="Vor kurzem fertiggestellt-kleine Almlandschaft" width="280" height="280" id="l-img"/></div>
<div class="col-md-12 col-sm-6"></div>
<p class="name">kleine Almlandschaft</p>
<p class="groese">Öl auf LW 50X50</p>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 col-sm-6"><img src="images/die-Klamm.jpg" alt="Vor kurzem fertiggestellt-die Klamm" width="280" height="280" class="l-img"/></div>
<div class="col-md-12 col-sm-6"></div>
<p class="name">die Klamm</p>
<p class="groese">Öl auf LW 50X70</p>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder3.jpg" alt="Vor kurzem fertiggestellt-welle am Heck eines Schiffes" width="280" height="280" class="l-img"/></div>
<div class="col-md-12 col-sm-6"></div>
<p class="name">Wellen am Heck</p>
<p class="groese">Öl auf MDF Platte 50X70</p>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder4.jpg" alt="Vor kurzem fertiggestellt-Venedig in Lasurtechnik" width="280" height="280" class="l-img"/></div>
<div class="col-md-12 col-sm-6"></div>
<p class="name">kleines Venedig Bild</p>
<p class="groese">Öl auf LW 50X50</p>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder5.jpg" alt="Vor kurzem fertiggestellt-nach Aiwasofski-Venedig" width="280" height="280" class="l-img"/></div>
<div class="col-md-12 col-sm-6"></div>
<p class="name">nach Aiwasowski</p>
<p class="groese">Öl auf Holzplatte 150X133</p>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder6.jpg" alt="Vor kurzem fertiggestellt-Hotel Styria-Fladnitz" width="280" height="280" class="l-img"/></div>
<div class="col-md-12 col-sm-6"></div>
<p class="name">Hotel Styria </p>
<p class="groese">Öl auf LW 50X70</p>
</div>
</div>
</div>
<a href="meine_gemäde.html">
<button type="button" class="btn btn-default btn-more-l btn-more-gem">Mehr über meine Öl Gemälde</button>
</a>
<div class="row" id="altmeister">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row" id="projekte">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1 id="wegh1">Projekte Wandtechnik</h1>
</div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-1.jpg" class="img-responsive" alt="Projekt Wandtechnik-Antik Wandtechnik"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-2.jpg" class="img-responsive" alt="Projekt Wandtechnik-Jugenstiel Stuck"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-3.jpg" class="img-responsive" alt="Projekt Wandtechnik-Stuckmarmor"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-4.jpg" class="img-responsive" alt="Projekt Wandtechnik-Stucco lustro"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-5.jpg" class="img-responsive" alt="Projekt Wandtechnik-Barocke Decke"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-6.jpg" class="img-responsive" alt="Projekt Wandtechnik-Marmorsaulen aussen"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-7.jpg" class="img-responsive" alt="Projekt Wandtechnik-Gewölbe mit gemalten Engel"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-8.jpg" class="img-responsive" alt="Projekt Wandtechnik-Deckenmalerei"></div>
<div class="col-md-12 col-sm12">
<a href="wandtechniken.html">
<button type="button" class="btn btn-default btn-more-l">Mehr über Wandtechnik</button>
</a> </div>
</div>
<div class="row">
<div class="col-md-12">
<h1 id="kontakth1">Kontakt</h1>
</div>
<div class="col-md-6">
<h2>Meine Adresse:</h2>
<p id="kontakt-p">Karl Weichinger<br>
Fladnitz 126 <br>
A-8163 Fladnitz/Teichalm<br>
</p>
<h2>Kontaktformular:</h2>
<form id="form1" name="form1" method="post">
<label for="textfield">Name:</label>
<input type="text" class="form-control" id="textfield">
<label for="textfield2">E-Mail:</label>
<input name="textfield2" type="text" class="form-control" id="textfield2">
<label for="textarea">Nachricht:</label>
<textarea name="textarea" rows="6" class="form-control" id="textarea"></textarea>
<button type="button" class="btn btn-default btn-more-gem">Senden</button>
</form>
</div>
<div class="col-md-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2706.7288244982306!2d15.475879615971275!3d47.28055527916445!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476e3eb8b5e811d5%3A0x524cacd95d596938!2sFladnitz+an+der+Teichalm+126%2C+8163+Fladnitz+an+der+Teichalm!5e0!3m2!1sde!2sat!4v1480784859630" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
Ich habe für bootstrap css und javascript, eine CDN verlinkung vorgenommen, als auch für jquery, aber für eigene css und js Datein muss man die Verlinkung entsprechend anpasse, vorher natürlich die entsprechenden Scripte in den nPage Account hochladen, damit man die Verlinkungen auch machen kann.