Auswahlbox wird auf Handy nicht zentriert

    Hallo Leute!

    Ich habe folgende Auswahlbox erstellt (Link zur Seite).
    Auf dem PC-Bildschirm wird sie auch zentriert dargestellt, aber nicht auf dem Handy. Da wird sie linksbündig angezeigt.
    Mein Theme basiert auf Twenty Ten und ist nicht responsiv. Ich benutze aber um die Responsivität herzustellen das Plugin WPtouch.

    Der Code der Auswahlbox sieht wie folgt aus:

    HTML
    <div class="inhaltsverzeichnis">
<div style="height: 135px; width: 180px; border: 3px solid #ccc; font: 16px/26px Georgia, Garamond, Serif; overflow: auto;background-color:white;color:red;scrollbar-base-color:grey;">
<strong><span style="font-family: arial, helvetica, sans-serif; font-size: 14pt;"> JAHR 2017</span></strong>
<span style="font-size: 24px; font-family: Waiting for the Sunrise,cursive;"><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://www.kwirandt.de/verschiedenes/was-ist-neu/jahr-2017/dezember-2017/"><strong> Dezember 2017</strong></a></span></span>
usw...
</div>
</div>

    Der entsprechende Eintrag in der Styles.css sieht wie folgt aus:

    HTML
    /* Zentrierung der Inhaltsverzeichnisse 180
-------------------------------------------------------------- */
div.inhaltsverzeichnis{
margin: 0 auto;
width: 180px;
float: none;
}

    Hat da jemand eine Idee?

    Danke fürs lesen

    Gruß Frank

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Sorry... den Fehler kann ich nicht nachvollziehen. Ob nun mit oder PlugIn, die Seite ist nicht responsive! Da sind bei fast allen ausschlaggebenden 'Elternelementen' feste Größenvorgaben (width: 940px;) im CSS vorgegeben und daran hält sich deine Seite. Auf einem Display, das kleiner als 940px ist ist somit immer nur der linke Seitenrand zu sehen... allerdings horizontal scrollbar.

    Hallo Sailor!
    Deine Antwort kann ich nicht nachvollziehen, anbei mal ein Screenshot von meinem Handy.


    und die Auswahlbox will ich auch zentriert haben, und nicht linksbündig.

    Gruß Frank

    Oh ja... mein Fehler! Habe versucht die Handyansicht mit den Webentwickler Tools auf dem PC zu simulieren - das funktioniert in deinem Fall anscheinend nicht. Aber ohne diese Tools (insbesondere den 'Inspektor') komme ich nicht an den Code der Seite in der mobilen Ansicht heran und kann dir da dann leider auch nicht weiter helfen.

    Versuche es so:

    Code
    .inhaltsverzeichnis > div {
    margin: auto;
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Hat sich leider verschlimmbessert.
    Keine Auswirkung auf die Anzeige auf dem Handy.
    Nun ist die Auswahlbox auch in der PC-Ansicht linksbündig.
    ...ich ändere es wieder zurück.

    Danke für den Versuch.

    Der Code setzt es auf dem Desktop linksbündig? Niemals.

    Zitat von SirEctor

    Versuche es so:

    Code
    .inhaltsverzeichnis > div {
    margin: auto;
}

    Wo genau hast du das CSS eingebunden? Oder hast du irgendwas überschrieben?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Hallo SirEctor!

    Nein, ich habe nichts überschrieben. Hatte den Eintrag in der style.css meines Themes geändert.
    Leider werde ich heute wahrscheinlich keine Zeit haben mich drum zu kümmern, und das Wochenende garantiert auch nicht.
    Ich werde am Montag mal eine Testseite mit verschiedenen Einstellungen anlegen und mich dann hier wieder melden.

    Danke für deine Unterstützung, und ein schönes Wochenende

    Frank

    so, wie versprochen habe ich jetzt mal eine Testseite eingerichtet.
    Mein Wunsch ist ja, dass die Auswahlbox auf dem PC und genauso auf dem Handy zentriert angezeigt wird.

    Bei der oberen Auswahlbox lautet der Eintrag in der styles.css
    Hier wird die Auswahlbox auf der PC-Ansicht zentriert, aber auf der Handyansicht nicht, da wird die Box linksbündig angezeigt.

    Code
    /* Zentrierung der Inhaltsverzeichnisse 180
-------------------------------------------------------------- */
div.inhaltsverzeichnis{
margin: 0 auto;
width: 180px;
float: none;
}

    ...und bei der unteren Auswahlbox lautet der code...
    Hier wird die Auswahlbox auf der PC-Ansicht genauso wie auf der Handyansicht linksbündig angezeigt.

    Code
    /* Zentrierung der Inhaltsverzeichnisse Test
-------------------------------------------------------------- */
div.inhaltsverzeichnis2{
margin: auto;
}

    Jemand eine Idee?
    Danke, fürs lesen

    Gruß Frank

    Leider kann ich auf den Code, wie er von deinem Plugin für die Handyansicht ausgeliefert wird, nicht zugreifen, da mir von den mir zur Verfügung stehenden Tool nur der Desktop Code (CSS) angezeigt wird.
    Aber versuche doch bitte mal, in deiner Testseite, folgende Formatierungen für für 'inhaltsverzeichnis2'.

    HTML
    div.inhaltsverzeichnis2 {
  width: 100%;
  text-align: center;
}
div.inhaltsverzeichnis2 div {
  margin: auto; 
  text-align: left;
}


    Vielleicht wird das ja anders vom Plugin interpretiert und verbessert die Handyansicht in deinem Sinne.

    Zitat von Sailor56

    Leider kann ich auf den Code, wie er von deinem Plugin für die Handyansicht ausgeliefert wird, nicht zugreifen, da mir von den mir zur Verfügung stehenden Tool nur der Desktop Code (CSS) angezeigt wird.


    Sailor56: häng mal an den Link /?wptouch_preview_theme=enabled dran.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Da du jetzt eine Testseite hast, versuch es bitte noch mal damit:

    Code
    .inhaltsverzeichnis > div {
    margin: auto;
}
.inhaltsverzeichnis2 > div {
    margin: auto;
}


    Der Code sollte weiterhin funktionieren. Wenn nicht, müsste man sehen warum es nicht funktioniert.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Und mit dem zuletzt von mir geposteten CSS Code sieh das in der Simulation (FireFox) dann so aus.

    Habe jetzt aber auch keine Möglichkeit, direkt auf dem Handy zu testen... und weiß auch nicht, ob man diesen Code im 'zusätzlichen CSS' oder irgendwo in den Plugin Einstellungen eingeben müsste?

    So, ich habe jetzt den code von SirEctor 12:45 Uhr in die style.css eingebaut (mit spitzer Klammer) so wie er oben abgebildet ist.
    PC-Ansicht zentriert wie es sich gehört. Handyansicht alles linksbündig. :(

    Frank9652 - Eine Frage. Wo genau trägst du die Änderung an deinem CSS Code ein? Habe den Quellcode der Seite (Handyansicht) nach dem Suchbegriff 'inhaltsverszeichnis' durchsucht und konnte keine Formatierungen, die sich auf diese Elemente bezieht, finden. Bin da jetzt etwas ratlos... gibt es denn hier niemanden, der dieses PlugIn auch nutzt und weiß, wie man dort CSS Änderungen einfügt?

    Hilft jetzt Frank nicht weiter! Ich habe vor ca.1 Jahr bei einem damals nicht responsiven Theme das Plugin versucht. Ich war nicht begeistert und habe meine Zeit nicht mit Umbau und Plugin"hinbiegen" verplämpert sonder mir ein neues responsives Theme gesucht und war nach kurzer Zeit auch erfolgreich.
    Meine Überlegung einmal hinbiegen - immer wieder etwas verbiegen damit das am Handy auch passt.
    Ich bin vollauf zufrieden mit meiner Entscheidung und glücklich, meine "Energie" in die Themensuche investiert zu haben. Free-Themen gibts ja für nahezu jeden Geschmack und ein wenig am Style schrauben ist weit entspannter als ewig diese Trixereien mit dem Plugin im Kopf zu haben ;-)

    Und ja, ich habe das Problem von Frank auch schon untersucht... ;-(

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Einmal editiert, zuletzt von SEpp55 (29. Januar 2018 um 14:50)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden