Ergebnis 1 bis 4 von 4
  1. #1
    xcyberpunk ist offline Grünschnabel
    registriert
    15-02-2016
    Beiträge
    7

    Block-Element im Mobile Web

    Ich muss für meine nächste Studienarbeit eine Website mit extra css anweisung für Mobile geräte schreiben, nun passiert mir da was richtig merkwürdiges.

    ich sage:
    Code:
    img {
        max-width: 100%;
        display: block;
        margin: 0 auto 0 auto;
    
    
    
    }
    Soweit alles klar, nur sobald ich nun der ersten Wert hinter margin ändere, wird dieses aufs elternelement angewendet und ich begreife nicht warum.

    Hier der komplette code:
    HTML-Code:
    <!DOCTYPE HTML>
    <html lang="de">
    
    <head>
      <title>Untitled</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    
      <link rel="stylesheet" href="lib/css/style_screen.css" media="all and (min-width: 600px)" type="text/css" />
      <link rel="stylesheet" href="lib/css/style_mobile.css" media="all and (max-width: 600px)" type="text/css" />
    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="lib/js/main.js"></script>
    </head>
    
    <body>
        <header></header>
        <div id="main"><br>
            <ul>
                <li><a class="blau" href="#" onclick="a1();">Home</a></li>
                <li><a class="orange" href="#" onclick="a2();">Home</a></li>
                <li><a class="gruen" href="#"  onclick="a3();">Home</a></li>
                <li><a class="break" id="white"href="#" onclick="a4();">Home</a></li>
            </ul> <br>
            <div id="content1">
                <img src="lib/images/a.jpg" alt="" />
            </div>
            <div id="content2">
                <img src="lib/images/b.jpg" alt="" />
            </div>
            <div id="content3">
                <img src="lib/images/c.jpg" alt="" />
            </div>
            <div id="content4">
                <img src="lib/images/d.jpg" alt="" />
            </div>
        </div>
        <footer></footer>
    </body>
    
    </html>
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 1em;
    
    }
    header {
        min-height: 10vh;
        background-color: green;
        border-bottom: 1px solid #000;
    }
    #main {
        min-height: 80vh;
        margin: 0;
        background-color: rgb(255, 255, 153);
    }
    ul {
        list-style-type: none;
    
    }
    li {
    
    }
    li a {
        text-decoration: none;
        float: left;
        background-color: #FFFF99;
        padding: 1px 3px 0 3px;
        margin-right: 1px;
        border: 1px solid #000;
        border-top-right-radius: 20px;
        display: block;
        width: 12vh;
        height: 4vh;
        color: #000;
        font-weight: bold;
    }
    .break:after {
        clear: both;
        height: 0;
        margin: 0;
        font-size: 1px;
        line-height: 0vh;
    }
    #white {
        background-color: #FFFFFF;
    }
    
    .blau {
        background-color: #6699CC;
    }
    .orange {
        background-color: #FF9933;
    }
    .gruen {
        background-color: #33CC66;
    }
    
    #content1 {
        margin: 5px auto 0 auto;
        min-height: 90vh;
        background-color: #6699CC;
    }
    #content2 {
        margin: 5px auto 0 auto;
        min-height: 90vh;
        background-color: #FF9933;
    }#content3 {
        margin: 5px auto 0 auto;
        min-height: 90vh;
        background-color: #33CC66;
    }#content4 {
        margin: 5px auto 0 auto;
        min-height: 90vh;
        background-color: #FFF;
    }
    img {
        max-width: 100%;
        display: block;
        padding-top: 12vh;
        margin: 0 auto 0 auto;
    }
    
    footer {
        min-height: 10vh;
        background-color: green;
        border-top: 1px solid #000;
    }
    Code:
    $(function() {
        $("#content2,#content3,#content4").hide();
    });
    
    function a1 () {
        $("#content1").show();
        $("#content2").hide();
        $("#content3").hide();
        $("#content4").hide();
    };
    function a2 () {
        $("#content1").hide();
        $("#content2").show();
        $("#content3").hide();
        $("#content4").hide();
    };function a3 () {
        $("#content1").hide();
        $("#content2").hide();
        $("#content3").show();
        $("#content4").hide();
    };function a4 () {
        $("#content1").hide();
        $("#content2").hide();
        $("#content3").hide();
        $("#content4").show();
    };
    ich weiß es ist nich alles unbedingt schöhn gelöst, aber es ist halt einfach ein anfang für eine mobile.css wenn alles gut funktioniert wird auf einiges noch dynamischer gemacht.
    Sieht einer von Euch das Problem ?
    Ich kann doch nicht jede img in ne extra div schmeissen um sie aus zu richten.

    - - - Aktualisiert - - -

    Ich vergas zu erwähnen, nehme ich in der css display: block raus, funktioniert alles, nur wie soll ich dann die img mittig ausrichten ?

  2. #2
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.297

    AW: Block-Element im Mobile Web

    um ein inline-Element (<img>) zu zentrieren, weist man sein block-parent-Element an, das zu tun (text-align). margin-auto macht man eigentlich nur, wenn man block-Elemente < 100% width zentrieren will.

    Frage: es gibt max-width > 100% ?

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.702

    AW: Block-Element im Mobile Web

    So funktionieren leider margins... hatte dieses Problem auch schon ein paar mal. Meistens hilft eine etwas andere HTML-Struktur.
    Zitat Zitat von xcyberpunk Beitrag anzeigen
    nur wie soll ich dann die img mittig ausrichten ?
    per text-align

    PS: href="#" ist unnötig und produziert unerwünschte Effekte. Style deine JS-Buttons mit CSS.
    PPS: Für jeden Button eine eigene Funktion, die sich auch nicht besonders unterscheiden, ist kein guter Stil. Für was gibt es denn Funktionsparameter?

  4. #4
    xcyberpunk ist offline Grünschnabel
    registriert
    15-02-2016
    Beiträge
    7

    AW: Block-Element im Mobile Web

    Guten Abend, vielen Dank für die Hilfe, ich hatte noch folgenden Artikel gefunden:

    Collapsing Margins - SitePoint

    Aber das mit text-align ist natürlich besser. Ich konnte dieses Problem lösen in dem ich dem Elternelement einen Border-top zuwies.

    Frage: es gibt max-width > 100% ?
    Laut Lehrbuch würden Mobile-Browser durch diese Angabe Das Bildformat auf Ihre Größe Formatieren.

    Für jeden Button eine eigene Funktion, die sich auch nicht besonders unterscheiden, ist kein guter Stil. Für was gibt es denn Funktionsparameter?
    Jaaaaa wie gesagt ich hatte mir das halt erstmal so gebaut um durch zu steigen, natürlich hast Du recht, bin halt auch noch nicht sooo fit in js.

    Danke für die Hilfe !!!

    Aber stimmt schon, bei der Bewertung wären mit sicherheit diese Punkte negativ ins gewicht gefallen.

    - - - Aktualisiert - - -

    Ich werde eure Idenn noch in meinem quelltext übernehmen.

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 26-10-2012, 01:38
  2. vertical-align in block-element (display:block)
    Von Mufasa im Forum CSS und (X)HTML
    Antworten: 6
    Letzter Beitrag: 11-03-2010, 14:02
  3. nach "display: block" "inline-block" mit 100% width????
    Von BettinaSyn im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 02-04-2009, 21:50
  4. Element-Typ (inline, block) abfragen
    Von BerndDasBrot im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 14-02-2007, 14:53
  5. Mouseevent bei Block-/Inline-Element
    Von ZeitGeist im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 16-09-2004, 18:50

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •