Eine Textbox mit CSS gestalten

Einen Kommentar schreiben

Oft braucht man kleine Boxen um Text unter zu bringen. Auch für solche Boxen braucht man keine Html Tabelle um eine Überschrift, den Inhalt und eventuell einen Boxenfooter zu gestalten. Hier nun ein Beispiel wie man so eine Box gestalen könnte. Natürlich soll auch dieses Beispiel zum selber probieren anregen. Einige Beispiele sind vorgestaltet und zeigen das nur kleine Änderungen im CSS notwendig sind um eine solche Box umzubauen.
Die Box besteht aus 3 Teilen, einen Boxheader, einem Inhaltsteil und einem Footer. So sollte genug Platz sein für Überschrift und Text und lässt noch genug Spielraum die Box design technisch ein wenig aufzupeppen. Hier im Workshop zeige ich nur das grund CSS für die erste Box auf, die weiteren Classen um die Box zu ändern kannst du dem Quelltext auf der Beispiels Seite nachsehen.
Im Html selbst benötigen wir insgesamt 4 div um auch Cross Browser tauglich zu sein. Mit der eingebetteten Überschrift im Header div umgehen wir das Padding problem zwischen Internet Explorer und Firefox. Solltest du die Problematik noch nicht kennen, einfach in die Suchmaschine deines Vertrauens die Begriffe: "padding internet explorer firefox" eingeben und einlesen welche Schwierigkeiten es hier gibt. Grob umrissen in diesem Workshop, der Padding wird vom Firefox richtig gerechnet, während der Internet Explorer eine falsche Darstellung ausgibt. Doch das ist ein anderes Kapital und wird hier sicher auch mal ein eigener Workshop.
Kommen wir nun erstmal zum CSS Code der benötigt wird.

Der CSS Code für eine Textbox


div#box {
	font-size: 1px;
	float: left; 
	width: 317px;
	margin: 0px;
	padding-left: 5px;
}

.boxheader {
	background: url("boxheader.jpg") no-repeat;
	height: 40px;
	margin: 0px;
	padding: 0px;
}

h1 {
	padding: 14px 0px 0px 16px;
	font-family: verdana;
	font-size: 12px;
	color: #ffcc00;
	font-weight: bold;
	margin: 0px;
}

.boxcontent {
	overflow: auto;
	padding: 5px;
	margin: 0px;
	height: 300px;
	background-color: #d1d2ff;
	font-family: verdana;
	font-size: 10px;
	color: #000;
	font-weight: bold;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
}

.boxfooter {
	margin: 0px;
	background: url("boxfooter.jpg") no-repeat;
	width: 317px;
	height: 8px;
}

Die Reihung der Classen im CSS habe ich in der selben Reihenfolge geschrieben wie sie auch im Html aufgerufen werden, so hat man auch nach monaten eine schöne Übersicht wie sich die Box zusammen setzt und wo Änderungen getätigt werden müssen sollte die Box mal anders aussehen sollen.
Angefangen wird mit einem div, das die drei Elemente umschliesst und "zusammenhält". Hier mit der ID div#box benannt.
Darunter folgt der Header für eine Überschrift und/oder einer Überschriftengrafik. Sollte eine Hintergrundgrafik zum Zuge kommen, mit einem Text als Überschrift kommt nun der h1 Tag der nun auch Cross over Browser denn Padding richtig darstellen kann.
Wiederrum darunter folgt das div für denn Inhalt, auch hier sind einige Einstellungen möglich, mit Scrollbalken(overflow:auto;), feste höhe oder variable höhe, Rahmen, Hintergrundgrafik und und und, deiner Fantasie sind in diesem Boxmodel keine grenzen gesetzt. Einfach Quelltext kopieren und probieren.
Und zum Abschluss kommt der Footer, hier nur mit einer Grafik versehen, könnten natürlich auch weitere Informationen stehen, wie Aktualisierungsdatum oder andere Informationen.
Da nun das CSS soweit fertig ist und das Feintunning der Optik dran kommt, machen wir uns an denn Html Code ran.

Der Schlanke Html Code, eine Box aber keine Tabelle


<div id="box">
<div class="boxheader">
<h1>h1 eingebettet im boxheader</h1>
</div>
<div class="boxcontent">Der Inhalt Container, div</div>
<div class="boxfooter"></div>
</div>

Der Aufbau vom Html sollte eigentlich schon selbst erklärend sein, schon allein durch die CSS Befehle. Sollten dennoch Fragen auftauchen, einfach im Forum nachfragen.
Abschliessend noch einmal der Link zur der Beispiels Seite, dort kannst du CSS und Html Code aus dem Seiten Quelltext nochmals auslesen für die einzelnen Beispiele. Unterschiedliche Textboxen, CSS unter Quellcode nach zu sehen.

Über Feedback freue ich mich, entweder im Forum oder hier gleich nachstehend als Kommentar.

Zum Abschluss noch das übliche Rechtliche: Wer diesen Text anbieten oder kopieren möchte, kann gern auf diese Seiten verlinken oder den Text kopieren und mit Quellenangabe verlinken.
Liebe Grüße Rainer / pixelmania.at

Den Workshop verlinken:


<a href="http://www.pixelmania.at/css_textbox.php" title="CSS Box gestalten von pixelmania.at">CSS Box gestalten von pixelmania.at</a>

Leider noch kein Kommentar vorhanden.

Hier kannst Du Deinen Kommentar zu diesem Artikel schreiben.