Frage von Minding, 4

CSS 2 relative Elemente ineinander: parent soll die Größe des childs annehmen

Hallo Community,

ich habe ein Problem mit relativen und absoluten Elementen.

HTML:

<form class="profile" method="POST" action="profile/update.php" enctype="multipart/form-data">
            <div>
                <img src="include/images/profileImages/<?php echo $user['ID']; ?>.png">
                <label class="upload"><p><?php echo $language['profileChangeImage']; ?></p><input name="image" type="file" maxlength="1000000" accept="image/*" /></label>
            </div>
            <h3><?php echo $user['name']; ?></h3>
            <?php echo $language['addBirthday']; ?><input type="text" name="birthday" value="<?php echo $user['birthday']; ?>" /><br /><br />
            <?php echo $language['addEmail']; ?><input type="text" name="email" value="<?php echo $user['email']; ?>" /><br /><br />
            <input type="submit" value="<?php echo $language['profileSave']; ?>" />
        </form>

CSS:

input {
    border: 0px;
    border-radius: 3px;
    height: 25px;
    padding: 5px;
    margin-top: 5px;
}
input[type="submit"] {
    height: 30px;
    color: white;
    border-width: thin;
    border-color: #ddd;
    border-style: solid;
    background-color: #79A620;
}
input[type="submit"]:hover {
    border-color: #406000;
}
.upload {
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-size: small;
    color: white;
    background-color: #79A620;
    width: 213px;
    height: 33px;
    left: 500px;
    margin-top: -10px;
    border-width: thin;
    border-color: #ddd;
    border-style: solid;
    border-radius: 3px;
}
.upload:hover {
    border-color: #406000;
}
.upload [type="file"] {
    display: block;
    position: absolute;
    font-size: 999px;
    filter: alpha(opacity=0);
    opacity: 0;
    right: 0;
    top: 0;
}
.upload p {
    margin-top: 10px;
    z-index: 1;
}
.profile {
    position: relative;
    background-color: white;
    color: #3f3f3f;
    border-radius: 5px;
    padding: 10px;
    min-height: 220px;
}
.profile div {
    position: relative;
    display: table;
    margin-right: 5px;
    float: left;
    max-width: 200px;
    height: 100%;
}
.profile img {
    max-width: 200px;
    max-height: 200px;
}
.profile input[type="text"] {
    position: absolute;
    margin: 0;
    height: 10px;
    left: 500px;
    color: black;
}
.profile div .upload {
    display: table-row;
    margin-top: 5px;
    left: 0;
    width: 100%;
}

Problembeschreibung: siehe Bilder

Danke, schon mal im Voraus!

-Minding

Antwort
von Minding, 3

Hi,

ich hab's jetzt gelöst:

HTML:

<form class="profile" method="POST" action="profile/update.php" enctype="multipart/form-data">
            <div>
                <img src="include/images/objects/userImages/<?php echo $user['ID']; ?>.png">
                <div class="upload2"><input type="file" name="image" id="up" maxlength="1000000" accept="image/*" /><label for="up"><div><?php echo $language['upload']; ?></div></label></div>
            </div>
            <h3><?php echo $user['name']; ?></h3>
            <?php echo $language['addBirthday']; ?><input type="text" name="birthday" value="<?php echo $user['birthday']; ?>" /><br /><br />
            <?php echo $language['addEmail']; ?><input type="text" name="email" value="<?php echo $user['email']; ?>" /><br /><br />
            <input type="submit" value="<?php echo $language['profileSave']; ?>" />
        </form>

CSS:

/*Upload without "position: absolute;"*/
.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 div {
    margin-right: 5px;
    float: left;
    max-width: 200px;
    height: 100%;
}
.profile img {
    position: static;
    max-width: 200px;
    max-height: 200px;
}
.profile .upload2 label div, .profile .upload2 label {
    width: 100%;
    text-align: center;
}
.profile .upload2 {
    width: calc(100% - 10px);
}

-Minding

Kommentar von Minding ,

DOCH NICHT!!!

Nix klappt, helft mir.

-Minding

Kommentar von Minding ,

Hi,

hier wird das Problem besser und genauer Beschrieben:

https://www.computerfrage.net/frage/css-min-height-wird-nicht-groesser

-Minding

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten