Css Box erstellen

garrus · 20. Februar 2013

Hey Community
Ich habe mich mal rangesetzt und eine Homepage gecodet nur habe ich ein Problem. Ich weiss nicht wie ich eine kleine Box in eine große Box rechtsbündig einfüge hoffe das man hier hilfe bekommt bin ja neu hier

Zerberus · 20. Februar 2013

Code

<div class="box_gr"><div class="box_kl">Inhalt Bla Bla</div></div>

Code

.box_gr {
	width: 300px;
	height: 300px;
	background: red;
	position: relative;
}


.box_kl {
	width: 200px;
	height: 200px;
	background: green;
	color: #fff;
	position: absolute;
	top: 50px;
	left: 50px;
}

Alles anzeigen

garrus · 20. Februar 2013

und wie mach ich das die Box neben dem Text ist und der Text nich auf die Box geht sonder so 10 Pixel abstandt hat und die Schrift ist nicht in der Box

Zerberus · 20. Februar 2013

Gib .box_gr mal "float: left;" oder "float: right;".
Textabstand: Gib .box_kl einfach "padding: 10px;"

garrus · 20. Februar 2013

passiert nicht viel habe de box_gr mal auf Content gemacht also sieht der code so aus aber die Box ist auf der richtigen Schrift und auf der Box ist keine schrift sondern die ist in der Content Box linksbündig ;/

Code

body {
	background-image: url(./images/hintergrund.png);
	height:3000px;
	weight:3000px;






}




#wrapper {
	margin-left: auto;
	margin-right: auto;
	//background-color: #696969;
	width: 980px;
	//height: 900px;
	}


#header {
	background-color: #FBEFEF;
	width: 100%;
	height: 200px;
	background-repeat: none;
}


#menu {
	width: 100%;
	height: 30px;
	background-color: #000000;
	color: #FFF;
	//text-transform: uppercase;
	font-weight: bond;
	font-family: Trebuchet MS, Helvetica, sans-serif;
	padding-top: 1px;
	//padding-bottom: 15px;
}


#menu ul {
	padding: 0px;
	margin: 0px;
}


#menu ul li {
	list-style-type: none;
}


#menu ul li a {
	height: 30px;
	width: 130px;
	display: block;
	float: left;
	text-decoration: none;
	color: #FFF;
}


#footer {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
	height: 30px;
	//background-color: #000000;
	clear: both;
	text-align: center;
	margin-top: 5px;


}


#content {
	width: 100%;
	height: 2500px;
	background-color: f5f5f5;
	margin-bottom: 20px;
	padding: 10px;
}




.shadow {
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;


}


	.box_kl 
	{
	width: 200px;
	height: 200px;
	background: green;
	color: #fff;
	position: absolute;
	top: 280px;
	right: 250px;
	}

Alles anzeigen

Habe padding und float rausgenommen

Zerberus · 20. Februar 2013

Ich versteh nicht ganz was du meinst. Schick mal die URL deiner Seite, dann kann man dir besser helfen...

garrus · 20. Februar 2013

Ich hab es auf kein Webspace sondern erstmal auf Home laufen hast du TV ?

Zerberus · 20. Februar 2013

Schick mir mal den HTML Code dazu, dann kann ich es mir anschauen.

breadfish.de 11. März 2022