Ankündigung

Einklappen
Keine Ankündigung bisher.

div layer 100% position absolute

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • div layer 100% position absolute

    Hallo liebe Leute,

    ich will ein div Layer über die ganze Seite anzeigen lassen, was im FF und Chrome wunderbar funktioniert, nur wird es auf Handys und Tablets falsch angezeigt.

    PHP-Code:
    <div id="wrapper">
        <
    div class="inside">          
            <
    div id="menu_oben">
                
    bla blub
            
    </div>
        </
    div>
    </
    div
    PHP-Code:
    #menu_oben{
        
    position:absolute;
        
    width100%;
        
    top:0;
        
    left:0;
        
    right:0;
        
    height:28px;
        
    background-color#002300;
        
    z-index:10;
    }

    #wrapper {
        
    width1280px;
        
    margin-leftauto ;
        
    margin-rightauto ;

    Fehler von mir oder Fehler vom Browser der Mobilgeräte? Wie bewirke ich es das es auch auf Mobilgeräten korrekt angezeigt wird?

    PHP-Code:
    |--------------------------------|
    |                                |
    |      |-----
    wrapper------|      |
    |      |------------------|      |
    |      |------------------|      |
    |-----------
    absolute-------------|
    |--------------------------------|
    |      |------------------|      |
    |      |------------------|      |
    |      |------------------|      |
    |      |------------------|      |
    |                                |
    |--------------------------------| 


  • #2
    nur wird es auf Handys und Tablets falsch angezeigt.
    Sehr aussagekräftig.
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      tut mir leid, ich kann jetzt kein Screenshot von der Seite von meinem Handy machen. Ich könnte es erklären aber ob ihr dann denn versteht ist 'ne andre Frage...

      Der 100% div Layer wird nur als 80% angezeigt? Und auf einem LG Tablet wird die Komplette Seite gedoppelt? So besser? Keine Ahnung wie ich es beschreiben soll...

      Vllt wäre dann die Antwort, simuliere doch einfach per VM ein Android und guck dir damit die Seite an, besser

      Zudem habe ich schon die Aussage gegeben: 1. div layer mit fixer breite 2. div layer mit 100% absolute -> FF OK, Chrome OK, andere browser auf Mobilgeräten? Oder ist die css falsch?

      Also, sehr aussagekräftig die Antwort, danke

      Kommentar


      • #4
        Ja, mach mal ein Screenshot. Viewport korrekt gesetzt?
        Standards - Best Practices - AwesomePHP - Guideline für WebApps

        Kommentar


        • #5
          Zudem habe ich schon die Aussage gegeben: 1. div layer mit fixer breite 2. div layer mit 100% absolute -> FF OK, Chrome OK, andere browser auf Mobilgeräten? Oder ist die css falsch?
          Watt willer?
          --

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar


          • #6
            Nur nebenbei
            Code:
            width: 1280px;
            halte ich für falsch, wenn du das Design Responsive machen willst. Wenn schon "max-width".

            Kommentar


            • #7
              Genau da wird auch das Problem liegen, denn es gibt Tabs, die mehr wie 1280 Pixel drauf haben. Du sagst aber dem Wrapper, daß er nur 1280px breit sein darf.
              Bei einem Tab-Display mit bspw. 1440px horizontal, sind 1280 nur etwa 88%.
              Competence-Center -> Enjoy the Informatrix
              PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

              Kommentar


              • #8
                Mobile Geräte und Tablets nutzen zudem auch eine besondere Browser Einstellung: Nämich die Zoom Anpassung. So einfach ist das nämlich leider nicht.

                Ich würde dann für mobile Geräte eine seperate Seite erstellen. Dann wäre das Problem zumindest teilweise gelöst.

                Kommentar

                Lädt...
                X