Rechtecker verändern

123123123

123123123

Erfahrenes Mitglied
Hallo.
Ich habe einen Bildschirmschoner gebastelt (habe hier schon mal Fragen über den gestellt)
So die Codes:

PHP: 
<?php
    $rand = array();
    for($i=0; $i<=5; $i++)
        $rand[$i] = $i+1;
    
    shuffle($rand);
    
    $ebene = array();
    $ebene[$rand[0]] = " border-color: blue;";
    $ebene[$rand[1]] = " border-color: green;";
    $ebene[$rand[2]] = " border-color: orange;";
    $ebene[$rand[3]] = " border-color: yellow;";
    $ebene[$rand[4]] = " border-color: white;";
    $ebene[$rand[5]] = " border-color: red;";
?>

<html>
    <head>
        <META HTTP-EQUIV=Refresh CONTENT="1; URL=index.php">
        <title>Rechteckschoner</title>
            <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
<div id="floater"></div>
<div id="content">
    <div class = "kasten1">
    
        <div class="ebene1" style="float: left; <?php echo $ebene[1];?>">

            <div class = "kasten">

                <div class="ebene2" style="float: left;<?php echo $ebene[2];?>">
                    <div class="ebene3" style="float: left;clear: left; <?php echo $ebene[3];?>">
                    <div class="ebene4" style="float: left; height: 2px; width: 142px; <?php echo $ebene[4];?>"></div>
    
                <div class="ebene4" style="float: left;clear: left; <?php echo $ebene[4];?>">
                    <div class="ebene5" style="height: 2px; width: 2px; float:left; <?php echo $ebene[5];?>"></div>
                    <div class="ebene5" style="height: 2px; width: 80px; float:left; <?php echo $ebene[5];?>"></div>
                </div>
                </div>

                <div class="ebene3" style="float: left;clear: left; <?php echo $ebene[3];?>">
                
                <div class="ebene4" style="float: left; <?php echo $ebene[4];?>">
                    <div class="ebene5" style="height: 5px; width: 66px; float:left; <?php echo $ebene[5];?>"></div>
                    <div class="ebene5" style="height: 5px; width: 15px; float:left; <?php echo $ebene[5];?>"></div>
                </div>

                <div class="ebene4" style="float: left;clear: left; <?php echo $ebene[4];?>">
                    <div class="ebene5" style="height: 99px; width: 40px; float:left; <?php echo $ebene[5];?>"></div>
                    <div class="ebene5" style="height: 99px; width: 40px; float:left; <?php echo $ebene[5];?>"></div>
                </div>
                </div>
                </div>
            </div>

    <div class="kasten">
        <div class="ebene2" style="float:left;<?php echo $ebene[2];?>">
        
            <div class="ebene3" style="float: left; <?php echo $ebene[3];?>">
                <div class="ebene4" style="height: 144px; width: 5px; float:left; <?php echo $ebene[4];?>"></div>
                <div class="ebene4" style="height: 144px; width: 5px; float:left;clear: left; <?php echo $ebene[4];?>"></div>
            </div>
    
            <div class="ebene3" style="float: left; <?php echo $ebene[3];?>">
        
            <div class="ebene4" style="float: left; <?php echo $ebene[4];?>">
                <div class="ebene5" style="height: 55px; width: 54px; float:left; <?php echo $ebene[5];?>"></div>
                <div class="ebene5" style="height: 55px; width: 54px; float:left; <?php echo $ebene[5];?>"></div>
            </div>
        
            <div class="ebene4" style="float: left; clear: left; <?php echo $ebene[4];?>">
            
            <div class="ebene5" style="float: left; <?php echo $ebene[5];?>">
                <div class="ebene6" style="height: 50px; width: 25px; float: left; <?php echo $ebene[6];?>"></div>
                <div class="ebene6" style="height: 50px; width: 50px; float: left; <?php echo $ebene[6];?>"></div>
            </div>
        
            <div class="ebene5" style="float: left; clear: left; <?php echo $ebene[5];?>">
                <div class="ebene6" style="height: 1px; width: 105px; float: left;  <?php echo $ebene[6];?>"></div>
                <div class="ebene6" style="height: 1px; width: 105px; float: left; clear:left;<?php echo $ebene[6];?>"></div>
            </div>
            </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

</body>
</html>

Code: 
body {
    background-color: black;
 
}
 
 
#floater{
    position:absolute; 
    float:left;
    height:50%; 
    margin-bottom:-200px;
    width:1px;
}
 
#content{
    position:absolute; 
    left:30%; 
    float:middle;
    vertical-align:middle;
	margin:10px;
}
 
 
 
.kasten1 div {
    border: 5px solid black;
    float:left;
    
}
 
.kasten div {
 
    padding: 5px;
    margin: 5px;
    float:left;
 
}

So meine Frage:

Da sich schon die Farben immer verändern, hab ich mich gefragt ob es gehen würde, die Größe der Rechtsecke so zu verändern (also nach jeder Aktualisierung), das zB ein Rechteck "ebene 1" soll kleiner werden oder aber auch Platz tauschen mit dem Rechteck "ebene 2", kann auch beides passieren.
Hoffe ihr versteht mein Problem.

Danke :)
 
Zuletzt bearbeitet:
In dem du auch für die Klassen der DIV's Variablen verwendest, diese davor in deinem Code dynamisch veränderst. Wie zb. Dein rand() bei den Farben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück