nicht angemeldet
Warum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege?
0 0 0 0 0 0 Tabellenkalk
0 
MudGuard
0 
Matthias Apsel
0 0 Matthias Apsel
0
Warum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege?
Rolf b
Gunnar Bittersmann
JürgenBWarum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege?
Warum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege? 
[url=http://www.fotos-hochladen.net][img]http://img5.fotos-hochladen.net/uploads/fragey0giutkec6.png[/img][/url]
<!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>
-
Hallo
Mal abgesehen davon, dass auf unnötige height-, min-height- und max-height-Angaben verzichtet werden soll, da sie sehr häufig Probleme machen, hast du du in den CSS-Angaben nur 79 und nicht 79px geschrieben.
Gruss
MrMurphy
-
Ja, das stimmt MrMurphy. "px" fehlt, aber ändert an meinem Problem nichts. Ich fange gerade erst an Javascript zu lernen und ich hab davon noch nichts gelesen, das man height nicht verwendet. Probleme habe ich aber damit. min-height und max-height habe ich auch schon probiert. Es scheint aber an den link und script bibliotheken zu liegen. Wie mach ich es den nun richtig?
<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>Beste Grüße
PS: Hier zum Beispiel wird auch height verwendet. https://www.youtube.com/watch?v=4ZQH3qFMCCI
-
Hallo schussvogeltot,
…link und script bibliotheken zu liegen…
ganz einfach die JavaScript-Bibliotheken auskommentieren, erzeugtes DOM im DOM-Explorer [F12] betrachten, dann die Bibliotheken nacheinander wieder aktivieren. Da gibt es signifikante Unterschiede.
So nebenbei: Brauchst Du die Dinger wirklich? Vgl. auch hier: Der Martin.
Grüße, Martl
-
Du ich brauch die bibliotheken. Einmal für den swipeeffekt mit jQuery später und außerdem war es auch schon in dem Beispiel so drin. Ein ähnliches beispiel gibt es hier: https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_navbars_class_active
Ich habe im prinzip nur den style hinzugefügt. Und das klappt so leider nicht.
<style> #pageone, #pagetwo { background-color: lightgrey; width: 251px; height: 79; border: 1px solid green; padding: 0px; margin: 106px 0 0 27px; overflow: hidden; } </style>Wie soll man das sonst machen. Tabellen und Frames nimmt man ja auch nicht mehr. Irgendwie muss ich doch ein Textfeld erstellen können das nicht bis zum boden reicht und in dem man scrollen kann.
-
Hallo
und in dem man scrollen kann
Nett, dass wir so eine nebensächliche Information auch erhalten.
Dann ist deine overflow-Anweisung falsch. Siehe zum Beispiel
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/overflow
Gruss
MrMurphy
-
MrMurphy, das mit dem Overflow ändert doch nicht die Höhe. Auch mit scroll habe ich den gleichen effekt. Deshalb ist das wirklich nur eine Nebeninformation.
PS: Im Prinzip will ich sowas: http://www.selfhtml5.org/iphone-app/index4.htm nur sobald ich die bibliotheken dazufüge und eine pagetwo als div hinzuschreibe, schlage ich wieder auf dem Boden auf. Ich habe auch schon versucht die Seiten in den wrapper zu legen und nur den in der höhe zu beschränken, aber es geht nicht. - Wie macht Ihr das?
-
Den Hinweis, die Scripte mal Stück für Stück rauszunehmen und sich in den Entwickler-Codes das DOM anzuschauen, war sehr relevant. Die Höhe wird von jquery mobile geändert. Dieses JS baut deine Seite ganz gewaltig um. Da es jquery mobile ist, dürfte das Absicht sein. Man will eine Fullscreen-Darstellung erhalten.
Geändert wird übrigens die Höhe des page div (per inline-style), nicht des Inhaltes, d.h. wenn Du da eine Textbox reinsetzt, dürfte die nicht aufgeblasen werden.
Wenn Du mit dem Verhalten von JQuery Mobile nicht zufrieden bist, musst Du es umkonfigurieren (sofern das geht) oder eine andere Lib für deine benötigten Funktionen einsetzen. Leider habe ich da keinen Tipp für Dich, ich habe mich mit jQuery Mobile noch nicht beschäftigt.
Rolf
-
Meinst du in die jQuery.js Datei rein gehen und den Code umschreiben, bzw. stück für stück auseinander nehmen? Dachte nicht das das der Sinn der Dateien ist, diese anzufassen.
-
Um Himmels willen - nein. Eine Lib verwendet man wie sie ist oder lässt es bleiben. Es ist natürlich Teil der Open Source Idee, auch mal eine Library zu ändern, aber dann nur mit der Absicht, das Ergebnis nachher als Pull-Request dem Autor anzubieten. Das ist aber ein Job für Experten. Bis dahin brauchst Du noch etwas Zeit (wenn ich dein geäußertes Selbstbild zu Grunde lege).
Ich meine, dass jquery mobile möglicherweise andere Features als die Full-Height Page anbietet, oder eine Konfigurationsmöglichkeit der Page, so dass sie nicht die Bildschirmhöhe annimmt. Vielleicht müsstest Du mal versuchen, über das Stadium der Sample-Erforschung hinaus zu kommen und Dir die Doku von JQuery Mobile vornehmen. Das ist trockenes Brot, aber dort gibt's auch Tutorials. Oder du hast Glück und hier findet sich jemand, der sich damit schon befasst hat und Dir direktere Tipps geben kann.
Rolf
-
Danke Rolf. Für mich war auch einfach wichtig das mir da jemand bestätigt, das es von der Lib kommt und das der Effekt kein Fehler so einfach ist. - Ich werde mal das trockene Brot suchen. :-) Und gucken ob ich den Befehl dafür finde.
Das Einbinden von mobile-1.4.5.min.js erzeugt ein
element.style { min-height: 555px; }
BamBam XXL hat hier auch schon einen Tipp gegeben. Vielleicht kann man ja über ein script den wert an und abschalten. Allerdings könnte ich den wert auch einfach so editieren und extra abspeichern und nur speziell aufrufen. - Nur finde ich beim durchsuchen nciht die Zahl 555px. :-(
-
Kannst Du auch nicht. Ändere die Fenstergröße und du hast einen anderen Wert. Er berechnet das an Hand der Viewportgröße.
Rolf
-
@@Rolf b
Kannst Du auch nicht. Ändere die Fenstergröße und du hast einen anderen Wert. Er berechnet das an Hand der Viewportgröße.
Erster! ;-)
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Kommt davon, wenn aus Fäden Bäume werden und man von oben nach unten durchgeht. Immerhin hab ich's nicht abgeschrieben :)
Rolf
-
-
-
-
-
-
-
-
-
Hallo,
Du musst dir das oder die richtigen Element(e) selektieren. Im Moment selektierst du #pageOne und #pageTwo, um sie zu stylen. Das sind offenbar nicht die, die du willst. Such dir mit den Entwicklertools genau das, das du in der Höhe einschränken willst.
Gruß
Kalk-
Hallo lieber Kalk,
aber genau die Seiten möchte ich in der höhe beschränken. Ich habe das auch mal versucht nur den Wrapper zu beschränken, aber das funktioniert auch nciht, solbald die bibliotheken drin sind. Ich wüßte geren warum, und wie man das sonst macht. Hier mal ein Beispiel wo ich die Seiten gerne drin hätte: http://www.selfhtml5.org/iphone-app/index4.htm
-
-
-
-
-
-
Hi,
Warum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege? > ~~~html <style> #pageone, #pagetwo { background-color: lightgrey; width: 251px; height: 79; </style>
Nein, Du hast nicht 79px angegeben. Du hast 79 angegeben. Ohne Einheit ist das kein gültiger Wert. Woher soll der Browser wissen, ob Du 79px (Pixel), 79erl (Elefantenrüssellängen) oder 79am (Ameisenschritte) meinst?
cu,
Andreas a/k/a MudGuard-
Hallo Andreas,
da hast du recht, aber auch mit px als einheit tut sich da nix. Es liegt an was anderem. (Hab schon viel rumgeschraubt an allen Parametern.) Würde man so nicht webseiten aufbauen und verlinken?
-
Das Einbinden von mobile-1.4.5.min.js erzeugt ein
element.style { min-height: 555px; }
Und damit wird deine Einstellung hinfällig bzw. überschrieben.
So einfach ist das...
-
Prima, auf so eine Antwort hatte ichs schon spekuliert. Aber der Wert555px finde ich mit der Suchfunktion im Code nicht von der Datei die Du nennst. Das wäre aber sonst die Information, die mir gefehlt hat zum verstehen.
-
Das du das so nicht findest ist klar, schließlich handelt es sich um Java Script und nicht um CSS. Die Funktion, die den Wert setzt, dürfte resetActivePageHeight sein.
-
@@BamBamXXL
Das du das so nicht findest ist klar,
Es wäre wohl auch unsinnig, das für alle auf 555px zu setzen. Der Wert sollte wohl abhängig von der Viewporthöhe berechnet werden.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
"resetActivePageHeight" war ein gutes Stichwort. Trotzdem, ich hab jetzt alles probiert, und ich kriege es nicht hin, außer ich schmeiße JQuery raus.
Ich hab versucht: http://www.gajotres.net/solution-to-jquery-mobile-page-content-empty-space-height-problem/
height : 79px !important;und
<script> $(document).on('pageshow', '#wrapper',function(e,data){ $('#wrapper').height(79); }); </script>und
https://github.com/jquery/jquery-mobile/issues/7951
$element // Reset height to calculate correct extra space in content .height(0) .height( 97 );:-(((((((((((((((
Danke an alle die bisher versucht haben mein Problem zu verstehen.
-
-
-
-
-
-
Hallo 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-roleist 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.-
Danke für die Hinweise. Ich werde es mir auch noch genauer durchlesen. Allerdings bekomme ich mit deinem Code auch das gleiche Fass ohne Boden. 😟
Ich bin jetzt so verzweifelt das ich einfach iframes benutze. Dazu brauche ich dann noch div zum ausrichten, weil iframes noch nicht fertig supportet wird. So kann ich aber nach herzenslust swipen ohne das es über das iphonebild hinaus geht.
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <style> #content { padding: 0; position : absolute !important; top : 106px !important; right : 0; bottom : 40px !important; left : 27px !important; height: 379px;!important; width: 251px; } #bodybild {font-family: Tahoma, Geneva, sans-serif; font-size: 11px; background-image:url(http://www.selfhtml5.org/wp-content/uploads/2010/08/iphone4-4app-programmieren-screenshot.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } </style> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </script> </head> <body id="bodybild"> <div data-role="page" id="content" z-index:1;> <iframe src="https://www.w3schools.com" width="251" height="379" z-index:2> tzjktfgjjt </iframe> </div> </body> </html>-
Hallo
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>ich zitiere mich mal selbst: https://forum.selfhtml.org/cites/2156
Gruß
Jürgen
-
-
@@Matthias Apsel
Offensichtlich möchtest du eine einzige Seite mit mehreren Bereichen haben. Für diese Bereiche solltest du article- oder section-Elemente verwenden.
Nein. Offensichtlich soll nur jeweils ein solcher Bereich (eine „Seite“) der SPA angezeigt werden. Für diese Breiche wären dann
main-Elemente passend:<body> <nav> <ul> <li><a href="#home" aria-current="page">Home</a></li> <li><a href="#pagetwo">Page Two</a></li> <li><a href="#search">Search</a></li> </ul> </nav> <main id="#home"> <h1>…</h1> ⋮ </main> <main id="#pageone" hidden> <h1>…</h1> ⋮ </main> <main id="#search" hidden> <h1>…</h1> ⋮ </main> </body>Im Menü wären die
click-Events abzufangen undaria-current="page"und diehidden-Attribute dermain-Elemente entsprechend zu setzen.Damit die Inhalte auch ohne JavaScript verfügbar sind, sollten die
hidden-Attribute initial erst mit JS gesetzt werden.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar Bittersmann,
Offensichtlich möchtest du eine einzige Seite mit mehreren Bereichen haben. Für diese Bereiche solltest du article- oder section-Elemente verwenden.
Nein. Offensichtlich soll nur jeweils ein solcher Bereich (eine „Seite“) der SPA angezeigt werden. Für diese Breiche wären dann
main-Elemente passend:Den Gedanken hatte ich auch, bin aber der Meinung, das mehrere main−Elemente nicht erlaubt sind.
Bis demnächst
Matthias--
Rosen sind rot.-
@@Matthias Apsel
Den Gedanken hatte ich auch, bin aber der Meinung, das mehrere main−Elemente nicht erlaubt sind.
Steve Faulkner: “Tweaked <main> definition to allow multiple <main>s - to provide more coding flexibility for developers e.g. in apps”
“There must not be more than one visible
mainelement in a document. If greater than onemainelement is present in a document, all other instances must be hidden using [t]hehiddenattribute.” [HTML]LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Damit die Inhalte auch ohne JavaScript verfügbar sind, sollten die hidden-Attribute initial erst mit JS gesetzt werden.
D.h. wenn JS nicht aktiv ist, hat man kein valides HTML mehr, weil dann alle main Elemente sichtbar sind?
Rolf
-
@@Rolf b
Damit die Inhalte auch ohne JavaScript verfügbar sind, sollten die hidden-Attribute initial erst mit JS gesetzt werden.
D.h. wenn JS nicht aktiv ist, hat man kein valides HTML mehr, weil dann alle main Elemente sichtbar sind?
Die bessere Alternative zu zwar validem HTML, bei dem aber nicht alle Inhalte erreichbar sind.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar Bittersmann,
Die bessere Alternative zu zwar validem HTML, bei dem aber nicht alle Inhalte erreichbar sind.
Was spricht gegen article/section?
Bis demnächst
Matthias--
Rosen sind rot.-
@@Matthias Apsel
Was spricht gegen article/section?
Das zeichnet eher was aus, was mehrmals auf der Seite ist oder einen Teil des Hauptinhalts ausmacht.
Für den ganzen (derzeit sichtbaren[1]) Hauptinhalt würde ich dann doch
mainvorziehen.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
im Normalfall, wo JavaScript verfügbar ist ↩︎
-
Hi,
Das zeichnet eher was aus, was mehrmals auf der Seite ist oder einen Teil des Hauptinhalts ausmacht. Für den ganzen (derzeit sichtbaren[1]) Hauptinhalt würde ich dann doch
mainvorziehen.d.h. alles in article/section packen, und dann im client per js in main-Elemente umpacken 😉
cu,
Andreas a/k/a MudGuard
im Normalfall, wo JavaScript verfügbar ist ↩︎
-
-
-
-
-
-
-
-
Du hast doch in deinem Header eine <style> Anweisung, Richtig? Richtig! Ersetzte doch einfach dein
height: 79px
durch
min-height: 79px!important;
-
Hallo BamBamXXL,
Ersetzte doch einfach dein
height: 79px
durch
min-height: 79px!important;
Sollte da nicht
maxstehen, damit das Element maximal, also nicht höher als 79px wird? 😉Bis demnächst
Matthias--
Rosen sind rot.-
Radio Eriwan würde jetzt antworten: Im Prinzip ja 😀
Aber es geht ja darum, dass du das "element.style { min-height: 555px; }" überschreiben mußt.
Wer bei min-heigth <-> max-height "gewinnt" kannst du ja mal ausprobieren.
-
@@BamBamXXL
Wer bei min-heigth <-> max-height "gewinnt" kannst du ja mal ausprobieren.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Interessanter Artikel, Danke!
-
-
ja, das funktioniert. Statt max muss man min eingeben. Aha!!!!
DANKE.
PS: JQuery ist komisch. Warum verwenden das nur so viele. Habe jetzt auch lange grübeln müssen, über den getactivepage Befehl der sich bei der neueren version ändert. Da hat man HTML das versionsunabhängig ist, mit einer Bibliothek wieder Versionsabhängig gemacht. (ja, ich versteh schon, für die Browser weiterhin unabhängig). Ich hoffe das zahlt sich mal aus, mir von jquery immer alles zerschießen zu lassen. :-) - Naja, Neuland halt.
-
-
-