Frage von Minding, 1

CSS min-height wird nicht größer!

Hi,

ich habe ein Formular, welches "min-height: 220px;" beinhaltet, jedoch verändert sich die Größe nicht, wenn ein child-div größer wird. (siehe Bild)

Fragem:

  • Wieso steht der Upload-Button über?

  • Hat jemand eine bessere Idee?

JSFIDDLE: http://jsfiddle.net/5jys2sky/ (sieht nicht perfekt aus - noch mehr CSS)

Ich versuche es möglichst kurz zu machen:

HTML:

<form class="profile" method="POST" action="profile/update.php" enctype="multipart/form-data">
            <div class="firstDiv">
                <img src="include/images/objects/userImages/1.png">
                <div class="upload2"><input type="file" name="image" id="up" maxlength="1000000" accept="image/*" /><label for="up"><div>Hochladen</div></label></div>
            </div>
            <h3>Peder</h3>
            Geburtstag:<input type="text" name="birthday" value="------" /><br /><br />
            Email:<input type="text" name="email" value="max.musterman@example.com" /><br /><br />
            <input type="submit" value="Speichern" />
        </form>

CSS:

.upload2 {
    display: inline-block;
}
.upload2 input[type="file"] {
    display: none;
}
.upload2 label {
    display: block;
}
.upload2 label div {
    color: white;
    font-size: 10pt;
    background-color: #79A620;
    border-width: thin;
    border-color: #ddd;
    border-style: solid;
    border-radius: 3px;
    padding: 5px;
    margin-top: 5px;
}
.upload2 label div:hover {
    border-color: #406000;
}
.profile {
    position: relative;
    background-color: white;
    color: #3f3f3f;
    border-radius: 5px;
    padding: 10px;
    min-height: 220px;          /*<--- Hier*/
}
.profile .firstDiv {
    padding: 5px;
    float: left;
    max-width: 200px;
}
.profile img {
    position: static;
    max-width: 200px;
    max-height: 200px;
}
.profile .upload2 label div, .profile .upload2 label {
    width: 100%;
    margin-top: 0;
    text-align: center;
}
.profile .upload2 {               /*<--- Das ist zu groß*/
    width: calc(100% - 10px);
}

Danke, schon mal im Voraus!

-Minding

Antwort
von Minding, 1

Hi,

ich hab mal wieder 50 Fehler gemacht.

"/*<--- Das ist zu groß*/"

Muss zu ".profile .firstDiv {..}"

Es kommt ein bessers Bild.

@Computerfrage-TEAM ich will meine Fragen auch nach 10min. noch bearbeiten dürfen :(

-Minding

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten