CSS Klassen zusammenfassen

Digger-Deluxe · 13. September 2010

Nabend erstmal.

Ich möchte verschiedene CSS Klassen zu einer zusammenfügen.

Leider funktioniert es nicht so, wie ich es möchte (Rufe die div-class "box" auf).

Hier der Code:

Code:

body
{
	background:#000;
	color:#FFF;
}
.box, .box_oben, .box_mitte, .box_unten
{
	width: 300px;
	margin: auto;
	color: #ff0006;
}

.box_oben
{
	background:url(Unbenannt-1_01.png);
	width: 300px;
	height: 19px;
}

.box_mitte
{
	background:url(Unbenannt-1_02.png);
	width: 300px;
}

.box_unten
{
	background:url(Unbenannt-1_03.png);
	width: 300px;
	height: 20px;
}

Woran kann es liegen?

MfG

bluescript · 13. September 2010

Wenn Du mir noch verrätst, wie genau es denn nicht funktioniert, bzw. wenn Du zwei entsprechende Codebeispiele gegenüberstellen könntest, dann könnte ich auch ne Antwort geben. So seh ich das Problem nicht.

Digger-Deluxe · 13. September 2010

Die Box wird so aufgerufen:

<div class="box">Dies ist eine Box</div>

Nun soll der Text in einer Box erscheinen, welche aus drei Teilen besteht.

Hintergrundgrafik 1
Hintergrundgrafik 2
Hintergrundgrafik 3

Leider erscheint nur der Text "Dies ist eine Box" und nicht die Grafiken.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box">Dies ist eine Box</div>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */

body
{
	background:#000;
	color:#FFF;
}
.box, .box_oben, .box_mitte, .box_unten
{
	width: 300px;
	margin: auto;
	color: #ff0006;
}

.box_oben
{
	background:url(Unbenannt-1_01.png);
	width: 300px;
	height: 19px;
}

.box_mitte
{
	background:url(Unbenannt-1_02.png);
	width: 300px;
}

.box_unten
{
	background:url(Unbenannt-1_03.png);
	width: 300px;
	height: 20px;
}

bluescript · 13. September 2010

Also da ist aber ein ganz massiver Denkfehler drin. Woher sollen die drei Boxen denn kommen, wenn sie im HTML-Markup nicht definiert sind? CSS allein erstellt Dir keine Boxen. Wenn Du also eine Box willst, die aus drei Zeilen besteht, dann muss der HTML-Code in rudimentärster Form so ausschauen:

Code:

<div class="box>
  <div class="box_oben"></div>
  <div class="box_mitte"></div>
  <div class="box_unten"></div>
</div>

Dann, und nur dann, kannst Du die drei Teilboxen einzeln mit CSS stylen.

S.o.T. · 13. September 2010

Nach welchem Prinzip fasst du bitte die Klassen zusammen? Die Breitenangabe width verwendest du mehrfach. Sinn?

Digger-Deluxe · 13. September 2010

Wollte die 3 Klassen halt in die "Box" verfrachten, so dass ich halt nur diesen Parameter aufrufen muss und nicht alle drei.

Kausalat · 13. September 2010

Wie schon oben erwähnt, musst du in deinem HTML-Quellcode jeweils ein separates Element mit der entsprechenden Klasse erstellen. ".box" gebährt per CSS allein nicht ".box_oben" und ihre Konsorten.

Digger-Deluxe · 13. September 2010

Danke

Suche

CSS Klassen zusammenfassen

Digger-Deluxe

Lt. Junior Grade

bluescript

Ensign

Digger-Deluxe

Lt. Junior Grade

bluescript

Ensign

S.o.T.

Ensign

Digger-Deluxe

Lt. Junior Grade

Kausalat

Gast

Digger-Deluxe

Lt. Junior Grade

Ähnliche Themen