nicht angemeldet
Warum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege?
Matthias ApselHallo schussvogeltot,
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> #pageone, #pagetwo { background-color: lightgrey; width: 251px; height: 79; border: 1px solid green; padding: 0px; margin: 106px 0 0 27px; overflow: hidden; } </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> <div data-role="navbar"> <ul> <li><a href="#pageone">Home</a></li> <li><a href="#pagetwo">Page Two</a></li> <li><a href="#pagetwo">Search</a></li> </ul> </div> </div> <div data-role="main" class="ui-content" > <p>My Content..</p> </div> <div data-role="footer"> <h1>My Footer</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>We</h1> <div data-role="navbar"> <ul> <li><a href="#pageone">Home</a></li> <li><a href="#pagetwo">Page Two</a></li> <li><a href="#pagetwo">Search</a></li> </ul> </div> </div> <div data-role="main" class="ui-content" > <p>My.</p> </div> <div data-role="footer"> <h1>My Footer</h1> </div> </div> </body> </html>
Lass uns auch über das HTML sprechen.
Im <html>-Tag fehlt die Angabe der Sprache. <html lang="de"> falls es deutschsprachige Inhalte sind. Zudem fehlt im head-Element die Angabe der Zeichenkodierung. <meta charset="utf-8"> Siehe wiki/Grundgerüst.
In der endgültigen Version sollten alle CSS-Angaben in einem externen Stylesheet stehen.
JQuery ist aktuell bei Version 3.2.1 angekommen, selbst als 1-er Version ist die 1.12.4 die letzte. Die Verwendung von 1.11. liegt sicher daran, dass die Jquery-mobile neuere Versionen nicht supportet(?)
Ein allumspannendes div-Element brauchst du nicht.
Verwende die Elemente, main, footer und header statt der div-Elemente. data-role ist Unsinn. Es gibt das role-Attribut, das du aber nur zu verwenden brauchst, wenn du nicht die default-Rollen verwenden möchtest.
Offensichtlich möchtest du eine einzige Seite mit mehreren Bereichen haben. Für diese Bereiche solltest du article- oder section-Elemente verwenden.
Ob du dann tatsächlich die Navigation mehrfach vorhalten solltest, steht auf einem anderen Blatt.
Zudem solltest du die Grundfunktionalität ohne JavaScript hinbekommen. Zumal die von dir eingebundene Bibliothek eine ganze Menge Umbauten am Dokument vornimmt. Zu Risiken und Nebenwirkungen …
Bis demnächst
Matthias
Rosen sind rot.
Rolf b
Gunnar Bittersmann
Tabellenkalk
MudGuard
JürgenB