Block-Element im Mobile Web

xcyberpunk · 24. Feb. 2016

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:

<!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 ?

Dormilich · 24. Feb. 2016

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% ?

kkapsner · 24. Feb. 2016

So funktionieren leider margins... hatte dieses Problem auch schon ein paar mal. Meistens hilft eine etwas andere HTML-Struktur.

xcyberpunk schrieb:
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?

xcyberpunk · 24. Feb. 2016

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.

Block-Element im Mobile Web

xcyberpunk

New member

Dormilich

New member

kkapsner

Super Moderator

xcyberpunk

New member