Wie kann ich meine HTML / CSS Gallery zentrieren?

Hallo, würde gerne diese Gallery zentriert haben. Kriege es aber leider irgendwie nicht. Würde sehr dankbar sein wenn mir jemand helfen könnte.

Code:

<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div class="newgallery"> <!-- developed by TechTick.Merdia --> <!-- Feel free to use or edit, but don't remove this comments --> <!-- visit our page: https://techtick.de -->

<input name="gallery_image_switch" id="id1" checked="checked" type="radio" /> <label for="id1"> <img src="1.png" /> </label> <img src="1.png" /> <input name="gallery_image_switch" id="id2" type="radio" /> <label for="id2"> <img src="2.png" /> </label> <img src="2.png" />

<input name="gallery_image_switch" id="id3" type="radio" /> <label for="id3"> <img src="3.png" /> </label> <img src="3.png" />

<input name="gallery_image_switch" id="id4" type="radio" /> <label for="id4"> <img src="4.png" /> </label> <img src="4.png" />

</div> </body>

<style>

/* CSS GALLERY */ .newgallery { width:100%; position: relative; margin:0 auto; margin-top: 5px; overflow-x:hidden; }

.newgallery label { margin: 18px 0 10px 15px; border: 3px solid #999; float: left; cursor: pointer; transition: all 0.5s; opacity: 0.6; margin-top:420px; width: 20%; max-width: 140px; } .newgallery input[name='gallery_image_switch'] {display:none;} .newgallery label img {display:block;width:100%;}

.newgallery>img { position: absolute; left: 0; top: 0; transition: all 0.5s; width:auto; height: 400px; } .newgallery input[name='gallery_image_switch'] ~ img { opacity: 0; transform: scale(1.1); margin-left:-100%; }.newgallery input[name='gallery_image_switch']:checked+label+img { opacity: 1; transform: scale(1); margin-left:0%; }

@media (max-width: 550px) { .newgallery label { max-width:110px; margin: 18px 0 10px 5px; } }

/* CSS GALLERY */

</style>

</html>

Webseite HTML CSS Programmieren
0 Antworten
PHP Bild hochladen und abspeichern

Hallo Community,

ich will eine Seite (HTML,PHP, MySQLi, CSS - möglichst kein JS) machen, wo man sein Bild hochlädt und es dann gespeichert wird, während der Pfad in der DB landet.

Mein Code bis jetzt:

HTML:

<br /><h3><?php echo $language['reportTitle']; ?></h3>
        <form class="adder" action="saveReport.php" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="ID" value="<?php echo $_SESSION['ID']; ?>" />
            <br /><?php echo $language['reportImage']; ?><label class="upload"><p><?php echo $language['reportUpload']; ?></p><input name="image" type="file" maxlength="1000000" accept="image/*" /></label>
            <br /><br /><?php echo $language['reportDescription']; ?><input name="description" type="text" />
            <br /><br /><b><?php echo $language['reportInfoTitleGeneral']; ?></b><input type="submit" />
        </form>

CSS: (eig. unwichtig)

.upload {
    overflow: hidden;
    position: absolute;
    text-align: center;
    font-size: small;
    color: #708090;
    background-color: #dddddd;
    width: 213px;
    height: 33px;
    left: 500px;
    margin-top: -10px;
    border-width: thin;
    border-color: #C0C0C0;
    border-style: solid;
    border-radius: 3px;
}
.upload:hover {
    border-color: #008B8B;
}
.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;
}

PHP: (nur ein Ansatz)

<?php
    include('../include/language.inc.php');
    include('../include/testSession.inc.php');
    include('../include/connect.inc.php');
    
    $info[1] = $_POST['ID'];
    $info[2] = $_POST['description'];
    $info[3] = $_FILES['image'];
    $size = sizeof($info);
    for($i = 0; $i < $size; $i++) {
        if(empty($info[$i])) {
            $_SESSION['error'] = $language['addErrorMissingData'];
            header('Location:report.php');
            die($language['addErrorMissingData']);
        }
    }
    $path = "INSERT INTO bugs VALUES (NULL,'".$info[1]."','".$info[2]."','".$info[3]."')";
    $mysqli->query($path);
    imagepng($im, '../include/images/'. $mysqli->insert_id . image_type_to_extension(IMAGETYPE_PNG));
?>

Ich habe schon ein bisschen gegoogelt, aber ich versteh's nicht. Gefunden hab ich:

  • ob_start()
  • POST uploads: http://php.net/manual/en/features.file-upload.post-method.php#features.file-upload.post-method

Am ende sollen (NULL für die ID), die UserID und die Beschreibung in der DB landen. Der Bild-Pfad soll bug['ID'].'.png' sein.

Fragen:

  • Wie nehme ich das Bild entgegen? ($_POST oder $_FILES)
  • Wie wandle ich das Bild in ein PNG-Format um?
  • Wie speicher ich das Bild?
  • Wieso spackt der "Hochladen"-Button so? (Text verschwindet nach anklicken) (Optional)

Danke, schon mal im Voraus!

-Minding

Bilder HTML CSS MySQL PHP speichern hochladen Image PNG
2 Antworten

Meistgelesene Fragen zum Thema HTML

Text-Extraktion von Webseiten?

8 Antworten

Was muss ich unter HTML-Kenntnisse verstehen wozu brauche ich sie und wie kann ich sie mir aneignen?

3 Antworten

Kostenlos eigene Homepage veröffentlichen ==> Wo, Welcher Anbieter???

7 Antworten

Per HTML Ordner aus dem Explorer öffnen?

1 Antwort

Unterschied zwischen HTML und CSS?

2 Antworten

PHP Text in Variable Farbe ändern

2 Antworten

Wordpress - Logo neben Menü (Navigationsbar) -WIE ???

1 Antwort

Frage zu Unicode Sonderzeichen für Mobiltelefon

1 Antwort

Bilder werden auf Website nicht angezeigt

4 Antworten

HTML - Neue und gute Antworten

Beliebte Themenkombinationen