✔ HTML/ CSS

123123123 · 21. September 2011

Hallo Leute!! Guck mal was ich schönes gebastelt hab!

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 könnt ihr mir vielleicht sagen, wie ich das Ding jetzt genau in die mitte setzte!! Wie man sieht ****t es bei mir net

danke, gruß anna

Alex_T · 21. September 2011

Aw: Html/ css

Ich bin mir jetzt selber nicht so ganz sicher, aber du könntest #content noch folgende Eigenschaften geben:

CSS:

width:auto;
margin-left:auto;
margin-right:auto;

Bin mir wie gesagt nicht so sicher - ist auch ungetestet.

EDIT: ich schmeiß mal eben XAMPP an und setz mich mal dran....

123123123 · 21. September 2011

nee geht leider nicht

Danke dir!

Gruß Anna.

Alex_T · 22. September 2011

Aw: Html/ css

Das ganze ist erledigt?
Mich würde die Lösung gerne interessieren, da ich auch nicht entscheidend weiter gekommen bin...danke.

P.S. nachdem ich nochmal nachgeschaut habe, war das mit dem margin:auto natürlich quatsch, da das nur bei fixer breite geht!

123123123 · 22. September 2011

HTML:

<?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="inhalt">
	<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;
}

#inhalt{
	position:absolute;
	left: 50%;
	right:50%;
	width: 700px;
	margin-left: -300px; 
	margin-right:-300px;
	top: 50%;
	margin-top: -240px;
	clear:both;
}



.kasten1 div {
	border: 5px solid black;
	float:left;
}

.kasten div {

	padding: 5px;
	margin: 5px;
	float:left;
}
/*
.ebene1 {
	border-color: blue !important;
}


.ebene2 {
	border-color:green !important;
}

.ebene3{
	border-color: orange !important ;
}

.ebene4 {
	border-color: yellow !important;
	
}

.ebene5 {
	border-color: white !important;
}

.ebene6 {
	border-color: red !important;
}*/

bitte schön!

✔ HTML/ CSS

123123123

Erfahrenes Mitglied

Alex_T

Erfahrenes Mitglied

123123123

Erfahrenes Mitglied

Alex_T

Erfahrenes Mitglied

123123123

Erfahrenes Mitglied

Neue Beiträge